From 897c4faca941ac372745d297d508b4de7c3d1ee8 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 15 Jun 2025 13:46:58 +0200
Subject: [PATCH 01/50] Add collapsible filter

---
 .../src/components/sidebar/SidebarFilter.vue  |  91 ++++++++++++++++
 client/src/components/sidebar/SidebarForm.vue | 103 ++----------------
 .../components/sidebar/controls.module.scss   |  67 ++++++++++++
 .../src/components/ui/tabs/UIVerticalTab.vue  |  28 +++++
 .../ui/tabs/UIVerticalTabContainer.vue        |  40 +++++++
 client/src/components/ui/tabs/tab.module.scss |  35 ++++++
 6 files changed, 268 insertions(+), 96 deletions(-)
 create mode 100644 client/src/components/sidebar/SidebarFilter.vue
 create mode 100644 client/src/components/sidebar/controls.module.scss
 create mode 100644 client/src/components/ui/tabs/UIVerticalTab.vue
 create mode 100644 client/src/components/ui/tabs/UIVerticalTabContainer.vue
 create mode 100644 client/src/components/ui/tabs/tab.module.scss

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
new file mode 100644
index 00000000..57e410f2
--- /dev/null
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useActivityStore } from '@/stores/ActivityStore';
+import { useSportTypeStore } from '@/stores/SportTypeStore';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIButton from '../ui/UIButton.vue';
+import UIDropdown from '../ui/UIDropdown.vue';
+import controlsStyle from './controls.module.scss';
+
+const activityStore = useActivityStore();
+
+const sportTypeStore = useSportTypeStore();
+
+const chosenSportLabel = computed(() => {
+  if (sportTypeStore.filter) {
+    for (const optionGroup of sportTypeStore.dropdownOptions) {
+      for (const option of optionGroup) {
+        if (option.value === sportTypeStore.filter) return option.label;
+      }
+    }
+  }
+  return undefined;
+});
+
+const filterSummary = computed(
+  () =>
+    [
+      chosenSportLabel.value,
+      activityStore.useRoutes &&
+        activityStore.filterModel.starred !== undefined &&
+        (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
+    ]
+      .filter((string): string is string => !!string)
+      .join(', ') || 'No filter',
+);
+</script>
+
+<template>
+  <UIVerticalTabContainer v-slot="{ makeTab }">
+    <UIVerticalTab :tab="makeTab('filter')" icon="filter_alt" :contentClass="$style.content">
+      <template #summary="{ select }">
+        <div :class="$style.summary" @click="select">
+          {{ filterSummary }}
+        </div>
+      </template>
+      <template #expanded>
+        <div :class="controlsStyle.grid">
+          <label :class="controlsStyle.expand">
+            <span>Sport type</span>
+            <UIDropdown
+              v-model="sportTypeStore.filter"
+              :options="sportTypeStore.dropdownOptions"
+              blankValue=""
+              blankLabel="All sports"
+            />
+          </label>
+          <label
+            v-if="activityStore.useRoutes"
+            title="Only show starred routes (double-click for unstarred routes)"
+          >
+            <span>Starred</span>
+            <UIButton
+              :invertColor="activityStore.filterModel.starred === false"
+              :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
+              @click="
+                activityStore.filterModel.starred =
+                  activityStore.filterModel.starred !== undefined ? undefined : true
+              "
+              @dbl-click="activityStore.filterModel.starred = false"
+            />
+          </label>
+        </div>
+      </template>
+    </UIVerticalTab>
+  </UIVerticalTabContainer>
+</template>
+
+<style lang="scss" module>
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.summary {
+  font-size: 0.9em;
+  font-style: italic;
+}
+</style>
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index cd178e14..4bfcd77c 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -18,7 +18,9 @@ import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
 import UILabelledIcon from '../ui/UILabelledIcon.vue';
 import UIModal from '../ui/UIModal.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
+import controlsStyle from './controls.module.scss';
 import LoadingStatus from './LoadingStatus.vue';
+import SidebarFilter from './SidebarFilter.vue';
 import UserLogin from './UserLogin.vue';
 import UserSettings from './UserSettings.vue';
 
@@ -104,12 +106,12 @@ watch([start, end, () => activityStore.useRoutes], () => {
 
 <template>
   <aside :class="$style.sidebarForm">
-    <div :class="$style.controlsGrid">
-      <div :class="$style.buttons">
+    <div :class="[controlsStyle.grid, controlsStyle.center]">
+      <div :class="controlsStyle.buttons">
         <SegmentedControl
           v-slot="{ option }"
           v-model="activityStore.useRoutes"
-          :class="$style.segmentedControl"
+          :class="controlsStyle.segmentedControl"
           :disabled="loading"
         >
           <SegmentedControlItem :option="option(false)"> Activities </SegmentedControlItem>
@@ -124,7 +126,7 @@ watch([start, end, () => activityStore.useRoutes], () => {
         <span>End date</span>
         <UIDateInput v-model="end" name="end" />
       </label>
-      <div :class="$style.buttons">
+      <div :class="controlsStyle.buttons">
         <UIButtonGroup>
           <UIButton @click="loadButton">
             <UIMultiText
@@ -146,32 +148,7 @@ watch([start, end, () => activityStore.useRoutes], () => {
     </div>
     <UserLogin v-if="continueLogin" @login="continueLogin($event)" />
     <LoadingStatus v-else :useRoutes="activityStore.useRoutes" :error="activityStore.error" />
-    <div :class="[$style.controls, $style.row]">
-      <label :class="$style.expand">
-        <span>Sport type</span>
-        <UIDropdown
-          v-model="sportTypeStore.filter"
-          :options="sportTypeStore.dropdownOptions"
-          blankValue=""
-          blankLabel="All sports"
-        />
-      </label>
-      <label
-        :class="!activityStore.useRoutes && $style.hidden"
-        title="Only show starred routes (double-click for unstarred routes)"
-      >
-        <span>Starred</span>
-        <UIButton
-          :invertColor="activityStore.filterModel.starred === false"
-          :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
-          @click="
-            activityStore.filterModel.starred =
-              activityStore.filterModel.starred !== undefined ? undefined : true
-          "
-          @dbl-click="activityStore.filterModel.starred = false"
-        />
-      </label>
-    </div>
+    <SidebarFilter />
     <div :class="[$style.controls, $style.row]">
       <label>
         <span>Group by</span>
@@ -192,72 +169,6 @@ watch([start, end, () => activityStore.useRoutes], () => {
   flex-direction: column;
   gap: 0.5em;
 
-  .buttons {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: center;
-  }
-
-  .segmentedControl:only-child {
-    flex-grow: 1;
-  }
-}
-
-.hidden {
-  visibility: hidden;
-}
-
-.controls,
-.controlsGrid {
-  > label {
-    > span {
-      min-height: 1.2em;
-      font-size: 0.9em;
-      font-weight: 600;
-      padding-inline: 0.5rem;
-      display: block;
-    }
-
-    &.expand {
-      flex: 1;
-    }
-  }
-}
-
-.controlsGrid {
-  display: grid;
-  grid-template-columns: max-content max-content;
-  justify-content: center;
-
-  > label {
-    grid-template-columns: subgrid;
-    display: grid;
-    grid-column: span 2;
-    align-items: center;
-  }
-
-  > .buttons {
-    grid-column: span 2;
-    justify-content: space-between;
-  }
-}
-
-.controls {
-  min-width: 0;
-  display: flex;
-  padding-top: 1.2em;
-  row-gap: 1.2em;
-  justify-content: space-evenly;
-
-  > label {
-    display: flex;
-    min-width: 0;
-    margin-top: -1.2em;
-    flex-direction: column;
-    align-items: start;
-  }
-
   .controlIconButton {
     margin: 8px;
   }
diff --git a/client/src/components/sidebar/controls.module.scss b/client/src/components/sidebar/controls.module.scss
new file mode 100644
index 00000000..90a98e81
--- /dev/null
+++ b/client/src/components/sidebar/controls.module.scss
@@ -0,0 +1,67 @@
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.segmentedControl:only-child {
+  flex-grow: 1;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+
+  &.center {
+    justify-content: center;
+    grid-template-columns: max-content max-content;
+  }
+
+  > label {
+    grid-template-columns: subgrid;
+    display: grid;
+    grid-column: span 2;
+    align-items: center;
+  }
+
+  > .buttons {
+    grid-column: span 2;
+    justify-content: space-between;
+  }
+}
+
+.row,
+.grid {
+  > label > span {
+    min-height: 1.2em;
+    font-size: 0.9em;
+    font-weight: 600;
+    padding-inline: 0.5rem;
+    display: block;
+  }
+}
+
+.row {
+  min-width: 0;
+  display: flex;
+  padding-top: 1.2em;
+  row-gap: 1.2em;
+  justify-content: space-evenly;
+
+  > label {
+    display: flex;
+    min-width: 0;
+    margin-top: -1.2em;
+    flex-direction: column;
+    align-items: start;
+
+    &.expand {
+      flex: 1;
+    }
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
new file mode 100644
index 00000000..10254379
--- /dev/null
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T extends string">
+import UIIcon from '../UIIcon.vue';
+import style from './tab.module.scss';
+import { type Tab } from './UIVerticalTabContainer.vue';
+
+defineProps<{
+  icon?: string;
+  tab: Tab<T>;
+  contentClass?: unknown;
+}>();
+</script>
+
+<template>
+  <div :class="style.subgrid">
+    <div :class="[style.tab, tab.isOpen && style.selected]">
+      <button :class="style.button" @click="tab.toggle">
+        <slot name="icon"><UIIcon :icon inline /></slot>
+      </button>
+    </div>
+
+    <div :class="[style.content, contentClass]">
+      <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
+        <slot v-if="tab.isOpen" name="expanded" :toggle="tab.toggle" />
+        <slot v-else name="summary" :select="tab.select" />
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/client/src/components/ui/tabs/UIVerticalTabContainer.vue b/client/src/components/ui/tabs/UIVerticalTabContainer.vue
new file mode 100644
index 00000000..9a23d78f
--- /dev/null
+++ b/client/src/components/ui/tabs/UIVerticalTabContainer.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+import style from './tab.module.scss';
+
+export interface Tab<T extends string> {
+  readonly id: T;
+  readonly isOpen: boolean;
+  select(this: void): void;
+  toggle(this: void): void;
+}
+</script>
+
+<script setup lang="ts" generic="T extends string">
+const selected = defineModel<T>();
+
+class TabImpl implements Tab<T> {
+  constructor(readonly id: T) {}
+  get isOpen() {
+    return selected.value === this.id;
+  }
+
+  readonly select = () => {
+    selected.value = this.id;
+  };
+  readonly toggle = () => {
+    if (this.isOpen) {
+      selected.value = undefined;
+    } else {
+      selected.value = this.id;
+    }
+  };
+}
+
+const makeTab = (id: T) => new TabImpl(id);
+</script>
+
+<template>
+  <div :class="style.filterGrid">
+    <slot :selected="selected" :makeTab="makeTab" />
+  </div>
+</template>
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
new file mode 100644
index 00000000..a24c6b64
--- /dev/null
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -0,0 +1,35 @@
+.filterGrid {
+  display: grid;
+  grid-template-columns: [tab] max-content [content] 1fr;
+  column-gap: 0.25rem;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 2;
+}
+
+.tab {
+  grid-column: tab;
+  border-right: 1px solid var(--color-weak);
+  color: var(--color-weak);
+  display: flex;
+  flex-direction: column;
+
+  &.selected {
+    color: var(--color-full);
+  }
+
+  .button {
+    all: unset;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    padding-block: 0.125rem;
+  }
+}
+
+.content {
+  grid-column: content;
+}

From ec5dd81581fa689a8226791bbd21ebda772fc007 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 15 Jun 2025 15:14:38 +0200
Subject: [PATCH 02/50] Add filters and filter reset button

---
 .../src/components/sidebar/SidebarFilter.vue  | 112 +++++++++++++++---
 client/src/components/ui/UIButton.vue         |   1 +
 client/src/components/ui/UIRange.vue          | 100 ++++++++++++++++
 client/src/stores/ActivityStore.ts            |  21 ++++
 4 files changed, 220 insertions(+), 14 deletions(-)
 create mode 100644 client/src/components/ui/UIRange.vue

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 57e410f2..fb88557e 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
-import { useActivityStore } from '@/stores/ActivityStore';
+import { type FilterModel, type RangeFilter, useActivityStore } from '@/stores/ActivityStore';
 import { useSportTypeStore } from '@/stores/SportTypeStore';
+import { formatKilometers, formatMeters } from '@/utils/numberFormat';
 
 import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
 import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
+import UIButtonGroup from '../ui/UIButtonGroup.vue';
 import UIDropdown from '../ui/UIDropdown.vue';
+import UIMultiText from '../ui/UIMultiText.vue';
+import UIRange from '../ui/UIRange.vue';
 import controlsStyle from './controls.module.scss';
 
 const activityStore = useActivityStore();
@@ -25,16 +29,63 @@ const chosenSportLabel = computed(() => {
   return undefined;
 });
 
-const filterSummary = computed(
-  () =>
-    [
-      chosenSportLabel.value,
-      activityStore.useRoutes &&
-        activityStore.filterModel.starred !== undefined &&
-        (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
-    ]
-      .filter((string): string is string => !!string)
-      .join(', ') || 'No filter',
+const blankFilter = Object.freeze<FilterModel>({
+  distance: undefined,
+  elevation: undefined,
+  sportType: undefined,
+  starred: undefined,
+});
+
+function compareRanges(rangeA: RangeFilter | undefined, rangeB: RangeFilter | undefined) {
+  return rangeA?.max === rangeB?.max && rangeA?.min === rangeB?.min;
+}
+
+function compareFilters(filterA: FilterModel, filterB: FilterModel) {
+  return (
+    (filterA.sportType ?? '') === (filterB.sportType ?? '') &&
+    filterA.starred === filterB.starred &&
+    compareRanges(filterA.distance, filterB.distance) &&
+    compareRanges(filterA.elevation, filterB.elevation)
+  );
+}
+
+const previousFilters = ref<FilterModel>();
+
+const filterState = computed<'changed' | 'canUndo' | 'initial'>(() => {
+  if (!compareFilters(activityStore.filterModel, blankFilter)) return 'changed';
+  else if (previousFilters.value) return 'canUndo';
+  else return 'initial';
+});
+
+function revertFilter() {
+  if (!compareFilters(activityStore.filterModel, blankFilter)) {
+    previousFilters.value = { ...activityStore.filterModel };
+    Object.assign(activityStore.filterModel, blankFilter);
+  } else {
+    Object.assign(activityStore.filterModel, previousFilters.value);
+  }
+}
+
+function formatRange(
+  range: RangeFilter | undefined,
+  label: string,
+  format: (value: number) => string,
+): string | undefined {
+  if (range?.min && range?.max) return `${format(range.min)} ≤ ${label} ≤ ${format(range.max)}`;
+  if (range?.min) return `${label} ≥ ${format(range.min)}`;
+  if (range?.max) return `${label} ≤ ${format(range.max)}`;
+  return undefined;
+}
+
+const filterSummary = computed(() =>
+  [
+    chosenSportLabel.value,
+    formatRange(activityStore.filterModel.distance, 'distance', formatKilometers),
+    formatRange(activityStore.filterModel.elevation, 'elevation', formatMeters),
+    activityStore.useRoutes &&
+      activityStore.filterModel.starred !== undefined &&
+      (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
+  ].filter((string): string is string => !!string),
 );
 </script>
 
@@ -43,12 +94,16 @@ const filterSummary = computed(
     <UIVerticalTab :tab="makeTab('filter')" icon="filter_alt" :contentClass="$style.content">
       <template #summary="{ select }">
         <div :class="$style.summary" @click="select">
-          {{ filterSummary }}
+          <template v-for="(summaryItem, i) of filterSummary" :key="i"
+            ><span>{{ summaryItem }}</span
+            ><template v-if="i + 1 < filterSummary.length">, </template></template
+          >
+          <template v-if="!filterSummary.length">No filter set</template>
         </div>
       </template>
       <template #expanded>
         <div :class="controlsStyle.grid">
-          <label :class="controlsStyle.expand">
+          <label>
             <span>Sport type</span>
             <UIDropdown
               v-model="sportTypeStore.filter"
@@ -57,6 +112,17 @@ const filterSummary = computed(
               blankLabel="All sports"
             />
           </label>
+
+          <label>
+            <span>Distance</span>
+            <UIRange v-model="activityStore.filterModel.distance" :step="1" :scale="0.001" />
+          </label>
+
+          <label>
+            <span>Elevation</span>
+            <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" />
+          </label>
+
           <label
             v-if="activityStore.useRoutes"
             title="Only show starred routes (double-click for unstarred routes)"
@@ -72,6 +138,20 @@ const filterSummary = computed(
               @dbl-click="activityStore.filterModel.starred = false"
             />
           </label>
+          <div :class="controlsStyle.buttons">
+            <UIButtonGroup>
+              <UIButton
+                :disabled="filterState === 'initial'"
+                :icon="filterState === 'canUndo' ? 'undo' : 'delete'"
+                @click="revertFilter"
+              >
+                <UIMultiText
+                  :texts="{ reset: 'Reset', undo: 'Undo' }"
+                  :selected="filterState === 'canUndo' ? 'undo' : 'reset'"
+                />
+              </UIButton>
+            </UIButtonGroup>
+          </div>
         </div>
       </template>
     </UIVerticalTab>
@@ -87,5 +167,9 @@ const filterSummary = computed(
 .summary {
   font-size: 0.9em;
   font-style: italic;
+
+  > span {
+    white-space: nowrap;
+  }
 }
 </style>
diff --git a/client/src/components/ui/UIButton.vue b/client/src/components/ui/UIButton.vue
index f0ed5158..a071471b 100644
--- a/client/src/components/ui/UIButton.vue
+++ b/client/src/components/ui/UIButton.vue
@@ -109,6 +109,7 @@ button.button {
   .buttonContents {
     grid-area: button;
     min-height: 1.2em;
+    border-radius: calc(var(--border-radius) - 0.15rem);
   }
 
   &:has(.buttonSpinner) .buttonContents {
diff --git a/client/src/components/ui/UIRange.vue b/client/src/components/ui/UIRange.vue
new file mode 100644
index 00000000..f39edff3
--- /dev/null
+++ b/client/src/components/ui/UIRange.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { type RangeFilter } from '@/stores/ActivityStore';
+
+const model = defineModel<RangeFilter>();
+
+const { scale = 1 } = defineProps<{ step?: number; min?: number; max?: number; scale?: number }>();
+
+const input = ref<HTMLInputElement>();
+
+function normaliseInput(value: string | number | undefined): number | undefined {
+  if (typeof value === 'string' && !value.trim()) return undefined; // blank string => undefined
+
+  const number = Number(value);
+
+  return isNaN(number) ? undefined : number / scale;
+}
+
+function getWithScale(value: number | undefined) {
+  if (value === undefined) return undefined;
+  return value * scale;
+}
+
+function setModel(min: number | undefined, max: number | undefined) {
+  if (min !== undefined || max !== undefined) {
+    model.value = { min, max };
+  } else {
+    model.value = undefined;
+  }
+}
+
+const minModel = computed({
+  get: () => getWithScale(model.value?.min),
+  set: (value: string | number | undefined) => setModel(normaliseInput(value), model.value?.max),
+});
+
+const maxModel = computed({
+  get: () => getWithScale(model.value?.max),
+  set: (value: string | number | undefined) => setModel(model.value?.min, normaliseInput(value)),
+});
+</script>
+
+<!-- From https://acdcjunior.github.io/how-bind-date-object-to-input-date-vue.js-v-model.html -->
+<template>
+  <div :class="$style.inputContainer">
+    <label
+      ><span>min:</span><input v-model="minModel" type="number" autocomplete="off" :min :max :step
+    /></label>
+
+    <label
+      ><span>max:</span><input v-model="maxModel" type="number" autocomplete="off" :min :max :step
+    /></label>
+  </div>
+</template>
+
+<style module lang="scss">
+.inputContainer {
+  display: flex;
+  margin: 0.5rem;
+
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-weak);
+  background-color: var(--background-strong);
+
+  min-width: 3em;
+  min-height: 1.75rem;
+  box-sizing: border-box;
+
+  label {
+    display: contents;
+
+    span {
+      align-self: center;
+      font-size: 0.9em;
+      margin-left: 0.5rem;
+      margin-right: 0.25rem;
+    }
+  }
+
+  input {
+    background-color: var(--background-full);
+    border-radius: calc(var(--border-radius) - 1px);
+    border: none;
+    min-width: 1em;
+    padding: 0.15rem 0.4rem;
+    color: var(--color-full);
+    appearance: none;
+    -moz-appearance: textfield;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .icon {
+    margin-right: 4px;
+  }
+}
+</style>
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index a8190211..60480211 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -40,11 +40,20 @@ export interface LoadingStats {
   inCache: boolean;
 }
 
+export interface RangeFilter {
+  // These fields are both readonly to avoid problems with shallow copies of the filter model
+  readonly min?: number;
+  readonly max?: number;
+}
+
 export interface FilterModel {
   sportType?: string;
 
   /** Set to true to only show starred routes, or false to only show unfiltered routes */
   starred?: boolean;
+
+  distance?: RangeFilter;
+  elevation?: RangeFilter;
 }
 
 export type MapItemTypes = Partial<Record<MapItemType, boolean>>;
@@ -121,6 +130,18 @@ export const useActivityStore = defineStore('activity', () => {
 
       filterModel.starred !== undefined &&
         ((item: MapItem) => !item.route || item.starred === filterModel.starred),
+
+      filterModel.distance?.min !== undefined &&
+        ((item: MapItem) => item.distance >= (filterModel.distance?.min ?? -Infinity)),
+      filterModel.distance?.max !== undefined &&
+        ((item: MapItem) => item.distance <= (filterModel.distance?.max ?? Infinity)),
+
+      filterModel.elevation?.min !== undefined &&
+        ((item: MapItem) =>
+          item.elevation?.gain && item.elevation.gain >= (filterModel.elevation?.min ?? -Infinity)),
+      filterModel.elevation?.max !== undefined &&
+        ((item: MapItem) =>
+          item.elevation?.gain && item.elevation.gain <= (filterModel.elevation?.max ?? Infinity)),
     ]
       // Remove falsy filters
       .filter((f): f is (value: MapItem) => boolean => !!f);

From 344ba40723b9187faf3f6c156df2700220238f14 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 15 Jun 2025 15:43:01 +0200
Subject: [PATCH 03/50] Add button to save filters

---
 .../src/components/sidebar/SidebarFilter.vue  | 32 +++++++++++++++++--
 client/src/components/ui/UIButton.vue         |  2 +-
 client/src/components/ui/UIButtonGroup.vue    |  5 ++-
 client/src/components/ui/UIRange.vue          |  6 ++--
 client/src/stores/ActivityStore.ts            | 26 +++------------
 client/src/types/FilterModel.ts               | 15 +++++++++
 client/src/utils/storage.ts                   | 11 +++++++
 7 files changed, 66 insertions(+), 31 deletions(-)
 create mode 100644 client/src/types/FilterModel.ts

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index fb88557e..fa12049e 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { type FilterModel, type RangeFilter, useActivityStore } from '@/stores/ActivityStore';
+import { useActivityStore } from '@/stores/ActivityStore';
 import { useSportTypeStore } from '@/stores/SportTypeStore';
+import { type FilterModel, type RangeFilter } from '@/types/FilterModel';
 import { formatKilometers, formatMeters } from '@/utils/numberFormat';
+import { loadFilterModel, saveFilterModel } from '@/utils/storage';
 
 import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
 import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
@@ -50,6 +52,12 @@ function compareFilters(filterA: FilterModel, filterB: FilterModel) {
 }
 
 const previousFilters = ref<FilterModel>();
+const savedFilter = ref<FilterModel>(loadFilterModel() ?? blankFilter);
+
+const isSaved = computed(() => compareFilters(activityStore.filterModel, savedFilter.value));
+
+const hideResetToSaved = computed(() => compareFilters(blankFilter, savedFilter.value));
+const canResetToSaved = computed(() => compareFilters(activityStore.filterModel, savedFilter.value));
 
 const filterState = computed<'changed' | 'canUndo' | 'initial'>(() => {
   if (!compareFilters(activityStore.filterModel, blankFilter)) return 'changed';
@@ -66,6 +74,15 @@ function revertFilter() {
   }
 }
 
+function saveFilter() {
+  saveFilterModel(activityStore.filterModel);
+  savedFilter.value = { ...activityStore.filterModel };
+}
+function resetToSaved() {
+  previousFilters.value = { ...activityStore.filterModel };
+  Object.assign(activityStore.filterModel, savedFilter.value);
+}
+
 function formatRange(
   range: RangeFilter | undefined,
   label: string,
@@ -140,16 +157,25 @@ const filterSummary = computed(() =>
           </label>
           <div :class="controlsStyle.buttons">
             <UIButtonGroup>
+              <UIButton icon="save" :disabled="isSaved" @click="saveFilter"> Save </UIButton>
               <UIButton
                 :disabled="filterState === 'initial'"
                 :icon="filterState === 'canUndo' ? 'undo' : 'delete'"
                 @click="revertFilter"
               >
                 <UIMultiText
-                  :texts="{ reset: 'Reset', undo: 'Undo' }"
-                  :selected="filterState === 'canUndo' ? 'undo' : 'reset'"
+                  :texts="{ clear: 'Clear', undo: 'Undo' }"
+                  :selected="filterState === 'canUndo' ? 'undo' : 'clear'"
                 />
               </UIButton>
+              <UIButton
+                v-if="!hideResetToSaved"
+                :disabled="canResetToSaved"
+                icon="settings_backup_restore"
+                @click="resetToSaved"
+              >
+                Reset
+              </UIButton>
             </UIButtonGroup>
           </div>
         </div>
diff --git a/client/src/components/ui/UIButton.vue b/client/src/components/ui/UIButton.vue
index a071471b..38f17dbb 100644
--- a/client/src/components/ui/UIButton.vue
+++ b/client/src/components/ui/UIButton.vue
@@ -47,7 +47,7 @@ async function clickHandler(e: MouseEvent) {
   }
 
   runningClickHandler.value = true;
-  Promise.resolve(handler?.())
+  Promise.try(() => handler?.())
     .catch((error: unknown) => {
       if (onRejection) {
         onRejection({ error, showError });
diff --git a/client/src/components/ui/UIButtonGroup.vue b/client/src/components/ui/UIButtonGroup.vue
index e9cbbe1d..11a5ea9f 100644
--- a/client/src/components/ui/UIButtonGroup.vue
+++ b/client/src/components/ui/UIButtonGroup.vue
@@ -10,14 +10,13 @@
 .buttonGroup {
   display: flex;
   margin: 0.5rem;
-  display: relative;
 
   > button {
     margin: 0;
 
-    display: relative;
+    position: relative;
 
-    &:focus {
+    &:not(:disabled) {
       z-index: 1;
     }
 
diff --git a/client/src/components/ui/UIRange.vue b/client/src/components/ui/UIRange.vue
index f39edff3..0887c207 100644
--- a/client/src/components/ui/UIRange.vue
+++ b/client/src/components/ui/UIRange.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { type RangeFilter } from '@/stores/ActivityStore';
+import { type RangeFilter } from '@/types/FilterModel';
 
 const model = defineModel<RangeFilter>();
 
@@ -45,11 +45,11 @@ const maxModel = computed({
 <template>
   <div :class="$style.inputContainer">
     <label
-      ><span>min:</span><input v-model="minModel" type="number" autocomplete="off" :min :max :step
+      ><span>min</span><input v-model="minModel" type="number" autocomplete="off" :min :max :step
     /></label>
 
     <label
-      ><span>max:</span><input v-model="maxModel" type="number" autocomplete="off" :min :max :step
+      ><span>max</span><input v-model="maxModel" type="number" autocomplete="off" :min :max :step
     /></label>
   </div>
 </template>
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 60480211..9c9b9791 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -16,6 +16,7 @@ import { defineStore } from 'pinia';
 import { computed, reactive, type Ref, ref, shallowRef, toRef } from 'vue';
 
 import Socket from '@/socket';
+import { type FilterModel } from '@/types/FilterModel';
 import config from '@/utils/config';
 import { groupMapItems } from '@/utils/groupMapItems';
 import {
@@ -27,6 +28,7 @@ import {
   getCachedGear,
   getCachedRoutes,
   getStoreMeta,
+  loadFilterModel,
   resetStore,
   saveCachedGear,
 } from '@/utils/storage';
@@ -40,23 +42,6 @@ export interface LoadingStats {
   inCache: boolean;
 }
 
-export interface RangeFilter {
-  // These fields are both readonly to avoid problems with shallow copies of the filter model
-  readonly min?: number;
-  readonly max?: number;
-}
-
-export interface FilterModel {
-  sportType?: string;
-
-  /** Set to true to only show starred routes, or false to only show unfiltered routes */
-  starred?: boolean;
-
-  distance?: RangeFilter;
-  elevation?: RangeFilter;
-}
-
-export type MapItemTypes = Partial<Record<MapItemType, boolean>>;
 export enum GroupLevel {
   OFF = '',
   WEEKLY_MO = 'WEEKLY_MO',
@@ -66,6 +51,8 @@ export enum GroupLevel {
   YEARLY = 'YEARLY',
 }
 
+export type MapItemTypes = Partial<Record<MapItemType, boolean>>;
+
 export interface MapItemGroup {
   items: MapItem[];
   stats: CombinedMapItemStats;
@@ -96,10 +83,7 @@ export const useActivityStore = defineStore('activity', () => {
   const routeStats = ref<LoadingStats>({ inCache: false });
   const activityStats = ref<LoadingStats>({ inCache: true });
 
-  const filterModel: FilterModel = reactive({
-    sportType: '',
-    starred: undefined,
-  });
+  const filterModel: FilterModel = reactive(loadFilterModel() ?? {});
 
   const error = ref<string>();
 
diff --git a/client/src/types/FilterModel.ts b/client/src/types/FilterModel.ts
new file mode 100644
index 00000000..aac737d1
--- /dev/null
+++ b/client/src/types/FilterModel.ts
@@ -0,0 +1,15 @@
+export interface RangeFilter {
+  // These fields are both readonly to avoid problems with shallow copies of the filter model
+  readonly min?: number;
+  readonly max?: number;
+}
+
+export interface FilterModel {
+  sportType?: string;
+
+  /** Set to true to only show starred routes, or false to only show unfiltered routes */
+  starred?: boolean;
+
+  distance?: RangeFilter;
+  elevation?: RangeFilter;
+}
diff --git a/client/src/utils/storage.ts b/client/src/utils/storage.ts
index 4513ca73..a979297a 100644
--- a/client/src/utils/storage.ts
+++ b/client/src/utils/storage.ts
@@ -6,6 +6,8 @@ import {
 } from '@strava-heatmapper/shared/interfaces';
 import localforage from 'localforage';
 
+import { type FilterModel } from '@/types/FilterModel';
+
 export interface StoreMeta {
   version: number;
   user: number;
@@ -45,6 +47,15 @@ export async function getCachedGear(id: string): Promise<Gear | undefined> {
   return gear ?? undefined;
 }
 
+export function loadFilterModel() {
+  const json = localStorage.getItem('filter');
+  if (json) return JSON.parse(json) as FilterModel;
+}
+
+export function saveFilterModel(filter: FilterModel) {
+  localStorage.setItem('filter', JSON.stringify(filter));
+}
+
 export function getStoreMeta(): StoreMeta {
   const rawCache = localStorage.getItem('meta');
   const cache = rawCache ? (JSON.parse(rawCache) as Partial<StoreMeta>) : undefined;

From 7c2172830ceded23a614075fdf7d2dd3a053ce34 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 15 Jun 2025 16:03:10 +0200
Subject: [PATCH 04/50] Invert appearance of buttons to match segments

---
 client/src/components/ui/UIButton.vue      | 36 ++++++++++++++++------
 client/src/components/ui/UIButtonGroup.vue |  6 ++--
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/client/src/components/ui/UIButton.vue b/client/src/components/ui/UIButton.vue
index 38f17dbb..bd7f6e3a 100644
--- a/client/src/components/ui/UIButton.vue
+++ b/client/src/components/ui/UIButton.vue
@@ -84,23 +84,26 @@ async function clickHandler(e: MouseEvent) {
 button.button {
   display: grid;
   grid-template-areas: 'button';
-  align-items: center;
 
   margin: 0.5rem;
-  padding: 0.15rem 0.4rem;
-  border-radius: var(--border-radius);
+  padding: 0.15rem 0.15rem;
+
+  --button-border-radius-left: var(--border-radius);
+  --button-border-radius-right: var(--border-radius);
+
+  border-top-left-radius: var(--button-border-radius-left);
+  border-bottom-left-radius: var(--button-border-radius-left);
+  border-top-right-radius: var(--button-border-radius-right);
+  border-bottom-right-radius: var(--button-border-radius-right);
+
   border: 1px solid var(--color-weak);
-  background-color: var(--background-strong);
+  background-color: var(--background-mid);
   color: var(--color-full);
   max-width: max-content;
   min-width: min-content;
   min-height: 1.75rem;
   font-size: 0.9em;
 
-  &:hover:not(:disabled) {
-    background-color: var(--background-weak);
-  }
-
   &:disabled {
     color: var(--color-weak);
     border-color: var(--background-weak);
@@ -109,7 +112,20 @@ button.button {
   .buttonContents {
     grid-area: button;
     min-height: 1.2em;
-    border-radius: calc(var(--border-radius) - 0.15rem);
+
+    border-top-left-radius: calc(var(--button-border-radius-left) - 0.15rem);
+    border-bottom-left-radius: calc(var(--button-border-radius-left) - 0.15rem);
+    border-top-right-radius: calc(var(--button-border-radius-right) - 0.15rem);
+    border-bottom-right-radius: calc(var(--button-border-radius-right) - 0.15rem);
+
+    padding: 0 0.25rem;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+  }
+
+  &:hover:not(:disabled) .buttonContents {
+    background-color: var(--background-strong);
   }
 
   &:has(.buttonSpinner) .buttonContents {
@@ -125,7 +141,7 @@ button.button {
     background-color: var(--color-full);
     color: var(--background-strong);
 
-    &:hover:not(:disabled) {
+    &:hover:not(:disabled) .buttonContents {
       background-color: var(--color-full);
       color: var(--background-weak);
     }
diff --git a/client/src/components/ui/UIButtonGroup.vue b/client/src/components/ui/UIButtonGroup.vue
index 11a5ea9f..832a0001 100644
--- a/client/src/components/ui/UIButtonGroup.vue
+++ b/client/src/components/ui/UIButtonGroup.vue
@@ -21,13 +21,11 @@
     }
 
     &:not(:first-child) {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
+      --button-border-radius-left: 0;
       margin-left: -1px;
     }
     &:not(:last-child) {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
+      --button-border-radius-right: 0;
     }
   }
 }

From 7d17cc6d3982e7d8c83b317b7b6a4e791a43df57 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 15 Jun 2025 16:08:48 +0200
Subject: [PATCH 05/50] Restrict clicking on white space near starred filter

---
 client/src/components/sidebar/SidebarFilter.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index fa12049e..1e3a6f5c 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -143,6 +143,7 @@ const filterSummary = computed(() =>
           <label
             v-if="activityStore.useRoutes"
             title="Only show starred routes (double-click for unstarred routes)"
+            :class="$style.noPointer"
           >
             <span>Starred</span>
             <UIButton
@@ -198,4 +199,13 @@ const filterSummary = computed(() =>
     white-space: nowrap;
   }
 }
+
+.noPointer {
+  pointer-events: none;
+
+  > * {
+    pointer-events: initial;
+    margin-right: auto;
+  }
+}
 </style>

From b17706a5a796a6fec3ff92c4bd96d70410675efa Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 15 Jun 2025 17:03:15 +0200
Subject: [PATCH 06/50] Adapt UI vertical tab logic in preparation for groups

---
 .../src/components/sidebar/SidebarFilter.vue  | 153 +++++++++---------
 client/src/components/sidebar/SidebarForm.vue |   5 +-
 .../src/components/ui/tabs/UIVerticalTab.vue  |  11 +-
 client/src/components/ui/tabs/tab.module.scss |  25 ++-
 4 files changed, 104 insertions(+), 90 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 1e3a6f5c..b6d1826a 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -8,7 +8,7 @@ import { formatKilometers, formatMeters } from '@/utils/numberFormat';
 import { loadFilterModel, saveFilterModel } from '@/utils/storage';
 
 import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
-import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
 import UIDropdown from '../ui/UIDropdown.vue';
@@ -20,6 +20,8 @@ const activityStore = useActivityStore();
 
 const sportTypeStore = useSportTypeStore();
 
+defineProps<{ tab: Tab<string> }>();
+
 const chosenSportLabel = computed(() => {
   if (sportTypeStore.filter) {
     for (const optionGroup of sportTypeStore.dropdownOptions) {
@@ -107,82 +109,78 @@ const filterSummary = computed(() =>
 </script>
 
 <template>
-  <UIVerticalTabContainer v-slot="{ makeTab }">
-    <UIVerticalTab :tab="makeTab('filter')" icon="filter_alt" :contentClass="$style.content">
-      <template #summary="{ select }">
-        <div :class="$style.summary" @click="select">
-          <template v-for="(summaryItem, i) of filterSummary" :key="i"
-            ><span>{{ summaryItem }}</span
-            ><template v-if="i + 1 < filterSummary.length">, </template></template
-          >
-          <template v-if="!filterSummary.length">No filter set</template>
-        </div>
-      </template>
-      <template #expanded>
-        <div :class="controlsStyle.grid">
-          <label>
-            <span>Sport type</span>
-            <UIDropdown
-              v-model="sportTypeStore.filter"
-              :options="sportTypeStore.dropdownOptions"
-              blankValue=""
-              blankLabel="All sports"
-            />
-          </label>
-
-          <label>
-            <span>Distance</span>
-            <UIRange v-model="activityStore.filterModel.distance" :step="1" :scale="0.001" />
-          </label>
-
-          <label>
-            <span>Elevation</span>
-            <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" />
-          </label>
-
-          <label
-            v-if="activityStore.useRoutes"
-            title="Only show starred routes (double-click for unstarred routes)"
-            :class="$style.noPointer"
-          >
-            <span>Starred</span>
-            <UIButton
-              :invertColor="activityStore.filterModel.starred === false"
-              :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
-              @click="
+  <UIVerticalTab :tab icon="filter_alt" :contentClass="$style.content">
+    <template #styledSummary>
+      <template v-for="(summaryItem, i) of filterSummary" :key="i"
+        ><span :class="$style.summarySpan">{{ summaryItem }}</span
+        ><template v-if="i + 1 < filterSummary.length">, </template></template
+      >
+      <template v-if="!filterSummary.length">No filter set</template>
+    </template>
+    <template #expanded>
+      <div :class="controlsStyle.grid">
+        <label>
+          <span>Sport type</span>
+          <UIDropdown
+            v-model="sportTypeStore.filter"
+            :options="sportTypeStore.dropdownOptions"
+            blankValue=""
+            blankLabel="All sports"
+          />
+        </label>
+
+        <label>
+          <span>Distance</span>
+          <UIRange v-model="activityStore.filterModel.distance" :step="1" :scale="0.001" />
+        </label>
+
+        <label>
+          <span>Elevation</span>
+          <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" />
+        </label>
+
+        <label
+          v-if="activityStore.useRoutes"
+          title="Only show starred routes (double-click for unstarred routes)"
+          :class="$style.noPointer"
+        >
+          <span>Starred</span>
+          <UIButton
+            :invertColor="activityStore.filterModel.starred === false"
+            :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
+            @click="
                 activityStore.filterModel.starred =
                   activityStore.filterModel.starred !== undefined ? undefined : true
               "
-              @dbl-click="activityStore.filterModel.starred = false"
-            />
-          </label>
-          <div :class="controlsStyle.buttons">
-            <UIButtonGroup>
-              <UIButton icon="save" :disabled="isSaved" @click="saveFilter"> Save </UIButton>
-              <UIButton
-                :disabled="filterState === 'initial'"
-                :icon="filterState === 'canUndo' ? 'undo' : 'delete'"
-                @click="revertFilter"
-              >
-                <UIMultiText
-                  :texts="{ clear: 'Clear', undo: 'Undo' }"
-                  :selected="filterState === 'canUndo' ? 'undo' : 'clear'"
-                />
-              </UIButton>
-              <UIButton
-                v-if="!hideResetToSaved"
-                :disabled="canResetToSaved"
-                icon="settings_backup_restore"
-                @click="resetToSaved"
-              >
-                Reset
-              </UIButton>
-            </UIButtonGroup>
-          </div>
+            @dbl-click="activityStore.filterModel.starred = false"
+          />
+        </label>
+        <div :class="controlsStyle.buttons">
+          <UIButtonGroup>
+            <UIButton icon="save" :disabled="isSaved" @click="saveFilter"> Save </UIButton>
+            <UIButton
+              :disabled="filterState === 'initial'"
+              :icon="filterState === 'canUndo' ? 'undo' : 'delete'"
+              @click="revertFilter"
+            >
+              <UIMultiText
+                :texts="{ clear: 'Clear', undo: 'Undo' }"
+                :selected="filterState === 'canUndo' ? 'undo' : 'clear'"
+              />
+            </UIButton>
+            <UIButton
+              v-if="!hideResetToSaved"
+              :disabled="canResetToSaved"
+              icon="settings_backup_restore"
+              @click="resetToSaved"
+            >
+              Reset
+            </UIButton>
+          </UIButtonGroup>
         </div>
-      </template>
-    </UIVerticalTab>
-  </UIVerticalTabContainer>
+      </div>
+    </template>
+  </UIVerticalTab>
 </template>
 
 <style lang="scss" module>
@@ -191,13 +189,8 @@ const filterSummary = computed(() =>
   flex-direction: column;
 }
 
-.summary {
-  font-size: 0.9em;
-  font-style: italic;
-
-  > span {
-    white-space: nowrap;
-  }
+.summarySpan {
+  white-space: nowrap;
 }
 
 .noPointer {
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index 4bfcd77c..20a4bdc6 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -11,6 +11,7 @@ import { useResettingRef } from '@/utils/resetting-ref';
 import SegmentedControl from '../segmented-control/SegmentedControl.vue';
 import SegmentedControlItem from '../segmented-control/SegmentedControlItem.vue';
 import { TooltipError } from '../tooltip/TooltipError';
+import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
 import UIDateInput from '../ui/UIDateInput.vue';
@@ -148,7 +149,9 @@ watch([start, end, () => activityStore.useRoutes], () => {
     </div>
     <UserLogin v-if="continueLogin" @login="continueLogin($event)" />
     <LoadingStatus v-else :useRoutes="activityStore.useRoutes" :error="activityStore.error" />
-    <SidebarFilter />
+    <UIVerticalTabContainer v-slot="{ makeTab }">
+      <SidebarFilter :tab="makeTab('filter')" />
+    </UIVerticalTabContainer>
     <div :class="[$style.controls, $style.row]">
       <label>
         <span>Group by</span>
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index 10254379..f07c910a 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -7,12 +7,13 @@ defineProps<{
   icon?: string;
   tab: Tab<T>;
   contentClass?: unknown;
+  summary?: string;
 }>();
 </script>
 
 <template>
-  <div :class="style.subgrid">
-    <div :class="[style.tab, tab.isOpen && style.selected]">
+  <div :class="[style.uiVerticalTab, tab.isOpen && style.selected]">
+    <div :class="style.tab">
       <button :class="style.button" @click="tab.toggle">
         <slot name="icon"><UIIcon :icon inline /></slot>
       </button>
@@ -21,7 +22,11 @@ defineProps<{
     <div :class="[style.content, contentClass]">
       <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
         <slot v-if="tab.isOpen" name="expanded" :toggle="tab.toggle" />
-        <slot v-else name="summary" :select="tab.select" />
+        <slot v-else name="summary" :select="tab.select">
+          <div :class="style.summary" @click="tab.select()">
+            <slot name="styledSummary" :select="tab.select">{{ summary }}</slot>
+          </div>
+        </slot>
       </slot>
     </div>
   </div>
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index a24c6b64..b1978e48 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -1,10 +1,9 @@
 .filterGrid {
   display: grid;
   grid-template-columns: [tab] max-content [content] 1fr;
-  column-gap: 0.25rem;
 }
 
-.subgrid {
+.uiVerticalTab {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: span 2;
@@ -17,10 +16,6 @@
   display: flex;
   flex-direction: column;
 
-  &.selected {
-    color: var(--color-full);
-  }
-
   .button {
     all: unset;
     display: flex;
@@ -30,6 +25,24 @@
   }
 }
 
+.uiVerticalTab.selected .tab {
+  color: var(--color-full);
+}
+
+.uiVerticalTab.selected:not(:first-child) .content {
+  border-top: 1px solid var(--color-weak);
+}
+
+.uiVerticalTab.selected:not(:last-child) .content {
+  border-bottom: 1px solid var(--color-weak);
+}
+
 .content {
   grid-column: content;
+  padding-left: 0.25rem;
+}
+
+.summary {
+  font-size: 0.9em;
+  font-style: italic;
 }

From a681463dfe0c37250cf92ffef4fb51639d071bf6 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Mon, 16 Jun 2025 21:00:38 +0200
Subject: [PATCH 07/50] Rearrange UI for min and max

---
 client/src/components/ui/UIButtonGroup.vue    |  4 ++
 client/src/components/ui/UIRange.vue          | 49 ++++++++++++++-----
 client/src/components/ui/tabs/tab.module.scss |  4 ++
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/client/src/components/ui/UIButtonGroup.vue b/client/src/components/ui/UIButtonGroup.vue
index 832a0001..25423fa8 100644
--- a/client/src/components/ui/UIButtonGroup.vue
+++ b/client/src/components/ui/UIButtonGroup.vue
@@ -18,6 +18,10 @@
 
     &:not(:disabled) {
       z-index: 1;
+
+      &:focus {
+        z-index: 2;
+      }
     }
 
     &:not(:first-child) {
diff --git a/client/src/components/ui/UIRange.vue b/client/src/components/ui/UIRange.vue
index 0887c207..def46a94 100644
--- a/client/src/components/ui/UIRange.vue
+++ b/client/src/components/ui/UIRange.vue
@@ -44,23 +44,24 @@ const maxModel = computed({
 <!-- From https://acdcjunior.github.io/how-bind-date-object-to-input-date-vue.js-v-model.html -->
 <template>
   <div :class="$style.inputContainer">
-    <label
-      ><span>min</span><input v-model="minModel" type="number" autocomplete="off" :min :max :step
-    /></label>
-
-    <label
-      ><span>max</span><input v-model="maxModel" type="number" autocomplete="off" :min :max :step
-    /></label>
+    <label>
+      <span>min</span> <input v-model="minModel" type="number" autocomplete="off" :min :max :step />
+    </label>
+
+    <label>
+      <span>max</span>
+      <input v-model="maxModel" type="number" autocomplete="off" :min :max :step />
+    </label>
   </div>
 </template>
 
 <style module lang="scss">
 .inputContainer {
-  display: flex;
+  display: grid;
+  grid-template-columns: min-content auto;
   margin: 0.5rem;
 
   border-radius: var(--border-radius);
-  border: 1px solid var(--color-weak);
   background-color: var(--background-strong);
 
   min-width: 3em;
@@ -68,7 +69,14 @@ const maxModel = computed({
   box-sizing: border-box;
 
   label {
-    display: contents;
+    display: grid;
+    grid-column: span 2;
+    grid-template-columns: subgrid;
+    border: 1px solid var(--color-weak);
+
+    &:not(:first-child) {
+      margin-top: -1px;
+    }
 
     span {
       align-self: center;
@@ -78,9 +86,26 @@ const maxModel = computed({
     }
   }
 
+  label:first-child {
+    border-top-left-radius: calc(var(--border-radius));
+    border-top-right-radius: calc(var(--border-radius));
+  }
+  label:first-child input {
+    border-top-left-radius: calc(var(--border-radius) - 1px);
+    border-top-right-radius: calc(var(--border-radius) - 1px);
+  }
+
+  label:last-child {
+    border-bottom-left-radius: calc(var(--border-radius));
+    border-bottom-right-radius: calc(var(--border-radius));
+  }
+  label:last-child input {
+    border-bottom-left-radius: calc(var(--border-radius) - 1px);
+    border-bottom-right-radius: calc(var(--border-radius) - 1px);
+  }
+
   input {
     background-color: var(--background-full);
-    border-radius: calc(var(--border-radius) - 1px);
     border: none;
     min-width: 1em;
     padding: 0.15rem 0.4rem;
@@ -89,7 +114,7 @@ const maxModel = computed({
     -moz-appearance: textfield;
 
     &:focus {
-      outline: none;
+      z-index: 1;
     }
   }
 
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index b1978e48..0538794c 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -22,6 +22,10 @@
     height: 100%;
     flex-direction: column;
     padding-block: 0.125rem;
+
+    &:focus-visible {
+      color: AccentColor;
+    }
   }
 }
 

From 5b209da80685529ec099d8de40b1fee7fe438b42 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Mon, 16 Jun 2025 21:02:40 +0200
Subject: [PATCH 08/50] Add prefix to filter summary

---
 client/src/components/sidebar/SidebarFilter.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index b6d1826a..0a82b1c7 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -111,11 +111,14 @@ const filterSummary = computed(() =>
 <template>
   <UIVerticalTab :tab icon="filter_alt" :contentClass="$style.content">
     <template #styledSummary>
-      <template v-for="(summaryItem, i) of filterSummary" :key="i"
-        ><span :class="$style.summarySpan">{{ summaryItem }}</span
-        ><template v-if="i + 1 < filterSummary.length">, </template></template
-      >
-      <template v-if="!filterSummary.length">No filter set</template>
+      <template v-if="filterSummary.length">
+        Filter:
+        <template v-for="(summaryItem, i) of filterSummary" :key="i"
+          ><span :class="$style.summarySpan">{{ summaryItem }}</span
+          ><template v-if="i + 1 < filterSummary.length">, </template></template
+        >
+      </template>
+      <template v-else>No filter set</template>
     </template>
     <template #expanded>
       <div :class="controlsStyle.grid">

From 1f1545e2008685341716b7fb3d08b5d369b6da79 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Mon, 16 Jun 2025 21:50:44 +0200
Subject: [PATCH 09/50] Add suffix to range UI

---
 .../src/components/sidebar/SidebarFilter.vue  |  4 +-
 client/src/components/ui/UIRange.vue          | 42 ++++++++++++-------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 0a82b1c7..dc881099 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -134,12 +134,12 @@ const filterSummary = computed(() =>
 
         <label>
           <span>Distance</span>
-          <UIRange v-model="activityStore.filterModel.distance" :step="1" :scale="0.001" />
+          <UIRange v-model="activityStore.filterModel.distance" :step="1" :scale="0.001" suffix="km" />
         </label>
 
         <label>
           <span>Elevation</span>
-          <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" />
+          <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" suffix="m" />
         </label>
 
         <label
diff --git a/client/src/components/ui/UIRange.vue b/client/src/components/ui/UIRange.vue
index def46a94..ad48b7a7 100644
--- a/client/src/components/ui/UIRange.vue
+++ b/client/src/components/ui/UIRange.vue
@@ -5,7 +5,13 @@ import { type RangeFilter } from '@/types/FilterModel';
 
 const model = defineModel<RangeFilter>();
 
-const { scale = 1 } = defineProps<{ step?: number; min?: number; max?: number; scale?: number }>();
+const { scale = 1 } = defineProps<{
+  step?: number;
+  min?: number;
+  max?: number;
+  scale?: number;
+  suffix: string;
+}>();
 
 const input = ref<HTMLInputElement>();
 
@@ -45,12 +51,15 @@ const maxModel = computed({
 <template>
   <div :class="$style.inputContainer">
     <label>
-      <span>min</span> <input v-model="minModel" type="number" autocomplete="off" :min :max :step />
+      <span>min</span>
+      <input v-model="minModel" type="number" autocomplete="off" :min :max :step />
+      <span>{{ suffix }}</span>
     </label>
 
     <label>
       <span>max</span>
       <input v-model="maxModel" type="number" autocomplete="off" :min :max :step />
+      <span>{{ suffix }}</span>
     </label>
   </div>
 </template>
@@ -58,7 +67,7 @@ const maxModel = computed({
 <style module lang="scss">
 .inputContainer {
   display: grid;
-  grid-template-columns: min-content auto;
+  grid-template-columns: min-content auto min-content;
   margin: 0.5rem;
 
   border-radius: var(--border-radius);
@@ -70,9 +79,10 @@ const maxModel = computed({
 
   label {
     display: grid;
-    grid-column: span 2;
+    grid-column: span 3;
     grid-template-columns: subgrid;
     border: 1px solid var(--color-weak);
+    padding-inline: 0.25rem;
 
     &:not(:first-child) {
       margin-top: -1px;
@@ -81,8 +91,7 @@ const maxModel = computed({
     span {
       align-self: center;
       font-size: 0.9em;
-      margin-left: 0.5rem;
-      margin-right: 0.25rem;
+      margin-inline: 0.25rem;
     }
   }
 
@@ -90,19 +99,11 @@ const maxModel = computed({
     border-top-left-radius: calc(var(--border-radius));
     border-top-right-radius: calc(var(--border-radius));
   }
-  label:first-child input {
-    border-top-left-radius: calc(var(--border-radius) - 1px);
-    border-top-right-radius: calc(var(--border-radius) - 1px);
-  }
 
   label:last-child {
     border-bottom-left-radius: calc(var(--border-radius));
     border-bottom-right-radius: calc(var(--border-radius));
   }
-  label:last-child input {
-    border-bottom-left-radius: calc(var(--border-radius) - 1px);
-    border-bottom-right-radius: calc(var(--border-radius) - 1px);
-  }
 
   input {
     background-color: var(--background-full);
@@ -110,9 +111,22 @@ const maxModel = computed({
     min-width: 1em;
     padding: 0.15rem 0.4rem;
     color: var(--color-full);
+    font-size: 0.9em;
+
     appearance: none;
     -moz-appearance: textfield;
 
+    // Hack to prevent zooming on iOS when entering dropdown
+    @media (hover: none) {
+      font-size: 18px;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
     &:focus {
       z-index: 1;
     }

From a5c9335d5f421a1db0c4949bb92461f0d99dfbb1 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Mon, 16 Jun 2025 22:14:09 +0200
Subject: [PATCH 10/50] Add heading for filter group

---
 .../src/components/sidebar/SidebarFilter.vue  |  5 ++-
 .../src/components/ui/tabs/UIVerticalTab.vue  | 26 +++++++++++----
 client/src/components/ui/tabs/tab.module.scss | 33 +++++++++++++++----
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index dc881099..3d61d725 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -109,10 +109,9 @@ const filterSummary = computed(() =>
 </script>
 
 <template>
-  <UIVerticalTab :tab icon="filter_alt" :contentClass="$style.content">
+  <UIVerticalTab :tab icon="filter_alt" :expandedContentClass="$style.content" heading="Filter">
     <template #styledSummary>
       <template v-if="filterSummary.length">
-        Filter:
         <template v-for="(summaryItem, i) of filterSummary" :key="i"
           ><span :class="$style.summarySpan">{{ summaryItem }}</span
           ><template v-if="i + 1 < filterSummary.length">, </template></template
@@ -120,7 +119,7 @@ const filterSummary = computed(() =>
       </template>
       <template v-else>No filter set</template>
     </template>
-    <template #expanded>
+    <template #expandedContent>
       <div :class="controlsStyle.grid">
         <label>
           <span>Sport type</span>
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index f07c910a..771b5604 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -6,7 +6,8 @@ import { type Tab } from './UIVerticalTabContainer.vue';
 defineProps<{
   icon?: string;
   tab: Tab<T>;
-  contentClass?: unknown;
+  expandedContentClass?: unknown;
+  heading?: string;
   summary?: string;
 }>();
 </script>
@@ -14,17 +15,28 @@ defineProps<{
 <template>
   <div :class="[style.uiVerticalTab, tab.isOpen && style.selected]">
     <div :class="style.tab">
-      <button :class="style.button" @click="tab.toggle">
-        <slot name="icon"><UIIcon :icon inline /></slot>
+      <button :class="style.button" :title="heading" @click="tab.toggle">
+        <div :class="style.buttonContent">
+          <slot name="icon"><UIIcon :icon inline /></slot>
+        </div>
       </button>
     </div>
 
-    <div :class="[style.content, contentClass]">
+    <div :class="[style.content]">
       <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
-        <slot v-if="tab.isOpen" name="expanded" :toggle="tab.toggle" />
+        <slot v-if="tab.isOpen" name="expanded" :toggle="tab.toggle">
+          <h2 v-if="heading" :class="style.heading">{{ heading }}</h2>
+          <div :class="expandedContentClass">
+            <slot v-if="tab.isOpen" name="expandedContent" :toggle="tab.toggle" />
+          </div>
+        </slot>
         <slot v-else name="summary" :select="tab.select">
-          <div :class="style.summary" @click="tab.select()">
-            <slot name="styledSummary" :select="tab.select">{{ summary }}</slot>
+          <div :class="style.summaryRow" @click="tab.select()">
+            <span v-if="heading" :class="style.heading">{{ heading }}</span
+            >{{ ' ' }}
+            <span :class="style.summary">
+              <slot name="styledSummary" :select="tab.select">{{ summary }}</slot>
+            </span>
           </div>
         </slot>
       </slot>
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index 0538794c..7c371782 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -21,7 +21,12 @@
     display: flex;
     height: 100%;
     flex-direction: column;
-    padding-block: 0.125rem;
+
+    .buttonContent {
+      padding-block: 0.125rem;
+      display: flex;
+      align-items: center;
+    }
 
     &:focus-visible {
       color: AccentColor;
@@ -31,19 +36,33 @@
 
 .uiVerticalTab.selected .tab {
   color: var(--color-full);
-}
 
-.uiVerticalTab.selected:not(:first-child) .content {
-  border-top: 1px solid var(--color-weak);
-}
+  .buttonContent {
+    margin: -1px;
+    border: 1px solid var(--color-weak);
+    border-right: none;
+    background: var(--background-full);
+  }
+
+  &:not(:first-child) .content {
+    border-top: 1px solid var(--color-weak);
+  }
 
-.uiVerticalTab.selected:not(:last-child) .content {
-  border-bottom: 1px solid var(--color-weak);
+  &:not(:last-child) .content {
+    border-bottom: 1px solid var(--color-weak);
+  }
 }
 
 .content {
   grid-column: content;
   padding-left: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.heading {
+  all: unset;
+  font-weight: bold;
 }
 
 .summary {

From 03e8b30a4082145f06161bd1b5cafff02c4444aa Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 19 Jun 2025 19:05:21 +0200
Subject: [PATCH 11/50] Use details and simplify UI for header

---
 .../src/components/sidebar/SidebarFilter.vue  |  6 +--
 .../src/components/ui/tabs/UIVerticalTab.vue  | 45 ++++++++++---------
 .../ui/tabs/UIVerticalTabContainer.vue        | 17 ++++---
 client/src/components/ui/tabs/tab.module.scss |  6 +++
 4 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 3d61d725..af11ce87 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -110,16 +110,16 @@ const filterSummary = computed(() =>
 
 <template>
   <UIVerticalTab :tab icon="filter_alt" :expandedContentClass="$style.content" heading="Filter">
-    <template #styledSummary>
+    <template #summary>
       <template v-if="filterSummary.length">
         <template v-for="(summaryItem, i) of filterSummary" :key="i"
           ><span :class="$style.summarySpan">{{ summaryItem }}</span
           ><template v-if="i + 1 < filterSummary.length">, </template></template
         >
       </template>
-      <template v-else>No filter set</template>
+      <template v-else>none set</template>
     </template>
-    <template #expandedContent>
+    <template #expanded>
       <div :class="controlsStyle.grid">
         <label>
           <span>Sport type</span>
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index 771b5604..421254f9 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -3,43 +3,48 @@ import UIIcon from '../UIIcon.vue';
 import style from './tab.module.scss';
 import { type Tab } from './UIVerticalTabContainer.vue';
 
-defineProps<{
+const { tab } = defineProps<{
   icon?: string;
   tab: Tab<T>;
   expandedContentClass?: unknown;
   heading?: string;
   summary?: string;
 }>();
+
+function preventIfSelected(event: MouseEvent) {
+  if (window.getSelection()?.type === 'Range') {
+    event.preventDefault();
+  }
+}
+
+function onToggle(event: ToggleEvent) {
+  tab.setOpen(event.newState === 'open');
+}
 </script>
 
 <template>
   <div :class="[style.uiVerticalTab, tab.isOpen && style.selected]">
     <div :class="style.tab">
-      <button :class="style.button" :title="heading" @click="tab.toggle">
+      <button :class="style.button" :title="heading" @click="tab.toggle()">
         <div :class="style.buttonContent">
           <slot name="icon"><UIIcon :icon inline /></slot>
         </div>
       </button>
     </div>
 
-    <div :class="[style.content]">
-      <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
-        <slot v-if="tab.isOpen" name="expanded" :toggle="tab.toggle">
-          <h2 v-if="heading" :class="style.heading">{{ heading }}</h2>
-          <div :class="expandedContentClass">
-            <slot v-if="tab.isOpen" name="expandedContent" :toggle="tab.toggle" />
-          </div>
+    <details :class="[style.content]" :open="tab.isOpen" @toggle="onToggle">
+      <summary :class="style.summaryRow" @click="preventIfSelected">
+        <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
+          <span v-if="heading" :class="style.heading">{{ heading }}</span>
+          {{ ' ' }}
+          <span v-if="!tab.isOpen" :class="style.summary">
+            <slot name="summary" :select="tab.select">{{ summary }}</slot>
+          </span>
         </slot>
-        <slot v-else name="summary" :select="tab.select">
-          <div :class="style.summaryRow" @click="tab.select()">
-            <span v-if="heading" :class="style.heading">{{ heading }}</span
-            >{{ ' ' }}
-            <span :class="style.summary">
-              <slot name="styledSummary" :select="tab.select">{{ summary }}</slot>
-            </span>
-          </div>
-        </slot>
-      </slot>
-    </div>
+      </summary>
+      <div :class="expandedContentClass">
+        <slot name="expanded" :toggle="tab.toggle" />
+      </div>
+    </details>
   </div>
 </template>
diff --git a/client/src/components/ui/tabs/UIVerticalTabContainer.vue b/client/src/components/ui/tabs/UIVerticalTabContainer.vue
index 9a23d78f..7429be96 100644
--- a/client/src/components/ui/tabs/UIVerticalTabContainer.vue
+++ b/client/src/components/ui/tabs/UIVerticalTabContainer.vue
@@ -4,6 +4,7 @@ import style from './tab.module.scss';
 export interface Tab<T extends string> {
   readonly id: T;
   readonly isOpen: boolean;
+  setOpen(this: void, isOpen: boolean): void;
   select(this: void): void;
   toggle(this: void): void;
 }
@@ -14,19 +15,25 @@ const selected = defineModel<T>();
 
 class TabImpl implements Tab<T> {
   constructor(readonly id: T) {}
+
   get isOpen() {
     return selected.value === this.id;
   }
 
+  readonly setOpen = (value: boolean) => {
+    if (value) {
+      selected.value = this.id;
+    } else if (this.isOpen) {
+      selected.value = undefined;
+    }
+  };
+
   readonly select = () => {
     selected.value = this.id;
   };
+
   readonly toggle = () => {
-    if (this.isOpen) {
-      selected.value = undefined;
-    } else {
-      selected.value = this.id;
-    }
+    this.setOpen(!this.isOpen);
   };
 }
 
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index 7c371782..b622e8ba 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -41,6 +41,7 @@
     margin: -1px;
     border: 1px solid var(--color-weak);
     border-right: none;
+    padding-right: 1px;
     background: var(--background-full);
   }
 
@@ -63,9 +64,14 @@
 .heading {
   all: unset;
   font-weight: bold;
+  cursor: default;
 }
 
 .summary {
   font-size: 0.9em;
   font-style: italic;
 }
+
+.summaryRow {
+  list-style: none;
+}

From df4cdd45001d4a2b9e4cf3e11483c837a3184b90 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 19 Jun 2025 21:16:21 +0200
Subject: [PATCH 12/50] Add filter help and hidden filters

---
 client/src/components/sidebar/FilterHelp.vue  | 125 ++++++++++++++++++
 .../src/components/sidebar/SidebarFilter.vue  |  53 +++++---
 client/src/components/sidebar/SidebarForm.vue |   7 +-
 .../components/sidebar/SidebarItemLink.vue    |   5 +-
 .../src/components/sidebar/UserSettings.vue   |   2 -
 client/src/components/ui/UIButton.vue         |  27 +++-
 client/src/components/ui/UIModal.vue          |  26 +++-
 .../src/components/ui/tabs/UIVerticalTab.vue  |   9 ++
 client/src/components/ui/tabs/tab.module.scss |   6 +
 client/src/stores/ActivityStore.ts            |  30 +++--
 client/src/types/FilterModel.ts               |   2 +
 client/src/utils/storage.ts                   |  11 +-
 12 files changed, 270 insertions(+), 33 deletions(-)
 create mode 100644 client/src/components/sidebar/FilterHelp.vue

diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
new file mode 100644
index 00000000..d57d1f1a
--- /dev/null
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { useActivityStore } from '@/stores/ActivityStore';
+import { type FilterField } from '@/types/FilterModel';
+
+import UIIcon from '../ui/UIIcon.vue';
+import UIModal from '../ui/UIModal.vue';
+
+const showHelp = defineModel<boolean>({ default: true });
+
+const appName = import.meta.env.VITE_APP_NAME as string;
+const activityStore = useActivityStore();
+
+function toggleFilter(field: FilterField) {
+  activityStore.filterFields.delete(field) || activityStore.filterFields.add(field);
+}
+</script>
+
+<template>
+  <UIModal v-model="showHelp" heading="Filters" :class="$style.helpModal">
+    <p>
+      The following filters are available in {{ appName }}. Use the checkboxes to show/hide the
+      filters in the filter panel.
+    </p>
+    <hr />
+    <dl>
+      <dt>
+        <label>
+          Sport Type
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('sportType')"
+            @change="toggleFilter('sportType')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Filtering by sport type, e.g. whether the
+        {{ activityStore.useRoutes ? 'route' : 'activity' }} is a hike or a run.
+      </dd>
+      <dd>
+        The option <em>All sports</em> means all
+        {{ activityStore.useRoutes ? 'routes' : 'activities' }}, regardless of type. The options
+        such as <em>All biking</em> show multiple sport types at once.
+      </dd>
+      <dt>
+        <label
+          >Distance
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('distance')"
+            @change="toggleFilter('distance')"
+          />
+        </label>
+      </dt>
+      <dt>
+        <label
+          >Elevation
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('elevation')"
+            @change="toggleFilter('elevation')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Show only the {{ activityStore.useRoutes ? 'routes' : 'activities' }} with a
+        distance/elevation greater than or equal to the min value, and less than or equal to the max
+        value. Leave a field blank to avoid filtering.
+      </dd>
+      <dt v-if="activityStore.useRoutes">
+        <label>
+          Starred
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('starred')"
+            @change="toggleFilter('starred')"
+          />
+        </label>
+      </dt>
+      <dd v-if="activityStore.useRoutes">
+        Show only routes that you have starred in Strava. Double-click on the button to invert the
+        filter, i.e. to show only non-starred routes.
+      </dd>
+    </dl>
+    <hr />
+    <p>
+      Use the <kbd><UIIcon inline icon="save" /> Save</kbd> button below the filters to save the
+      current filter configuration. This will then be used whenever you load {{ appName }}.
+    </p>
+    <p>
+      Use the <kbd><UIIcon inline icon="delete" /> Clear</kbd> button to discard the filter
+      configuration, resetting all values to empty. After doing this, an
+      <kbd><UIIcon inline icon="undo" /> Undo</kbd> button is shown to undo this change.
+    </p>
+    <p>
+      If a filter configuration has been saved, use the
+      <kbd><UIIcon inline icon="settings_backup_restore" /> Reset</kbd> button to reset to the saved
+      configuration.
+    </p>
+  </UIModal>
+</template>
+
+<style lang="scss" module>
+.helpModal {
+  width: min(35em, calc(100vw - 4rem));
+  max-height: 90vh;
+
+  dl {
+    > dt {
+      font-weight: 600;
+    }
+
+    > dd {
+      margin-left: 1em;
+      margin-block: 0.5em;
+    }
+  }
+
+  kbd {
+    font-family: inherit;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+}
+</style>
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index af11ce87..3676a2e1 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -15,13 +15,14 @@ import UIDropdown from '../ui/UIDropdown.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
 import UIRange from '../ui/UIRange.vue';
 import controlsStyle from './controls.module.scss';
+import FilterHelp from './FilterHelp.vue';
+
+defineProps<{ tab: Tab<string> }>();
 
 const activityStore = useActivityStore();
 
 const sportTypeStore = useSportTypeStore();
 
-defineProps<{ tab: Tab<string> }>();
-
 const chosenSportLabel = computed(() => {
   if (sportTypeStore.filter) {
     for (const optionGroup of sportTypeStore.dropdownOptions) {
@@ -59,7 +60,9 @@ const savedFilter = ref<FilterModel>(loadFilterModel() ?? blankFilter);
 const isSaved = computed(() => compareFilters(activityStore.filterModel, savedFilter.value));
 
 const hideResetToSaved = computed(() => compareFilters(blankFilter, savedFilter.value));
-const canResetToSaved = computed(() => compareFilters(activityStore.filterModel, savedFilter.value));
+const canResetToSaved = computed(() =>
+  compareFilters(activityStore.filterModel, savedFilter.value),
+);
 
 const filterState = computed<'changed' | 'canUndo' | 'initial'>(() => {
   if (!compareFilters(activityStore.filterModel, blankFilter)) return 'changed';
@@ -98,18 +101,29 @@ function formatRange(
 
 const filterSummary = computed(() =>
   [
-    chosenSportLabel.value,
-    formatRange(activityStore.filterModel.distance, 'distance', formatKilometers),
-    formatRange(activityStore.filterModel.elevation, 'elevation', formatMeters),
-    activityStore.useRoutes &&
+    activityStore.filterFields.has('sportType') && chosenSportLabel.value,
+    activityStore.filterFields.has('distance') &&
+      formatRange(activityStore.filterModel.distance, 'distance', formatKilometers),
+    activityStore.filterFields.has('elevation') &&
+      formatRange(activityStore.filterModel.elevation, 'elevation', formatMeters),
+    activityStore.filterFields.has('starred') &&
+      activityStore.useRoutes &&
       activityStore.filterModel.starred !== undefined &&
       (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
   ].filter((string): string is string => !!string),
 );
+
+const showHelp = ref(false);
 </script>
 
 <template>
-  <UIVerticalTab :tab icon="filter_alt" :expandedContentClass="$style.content" heading="Filter">
+  <UIVerticalTab
+    :tab
+    icon="filter_alt"
+    :expandedContentClass="$style.content"
+    heading="Filter"
+    @help="showHelp = true"
+  >
     <template #summary>
       <template v-if="filterSummary.length">
         <template v-for="(summaryItem, i) of filterSummary" :key="i"
@@ -121,7 +135,7 @@ const filterSummary = computed(() =>
     </template>
     <template #expanded>
       <div :class="controlsStyle.grid">
-        <label>
+        <label v-if="activityStore.filterFields.has('sportType')">
           <span>Sport type</span>
           <UIDropdown
             v-model="sportTypeStore.filter"
@@ -131,12 +145,17 @@ const filterSummary = computed(() =>
           />
         </label>
 
-        <label>
+        <label v-if="activityStore.filterFields.has('distance')">
           <span>Distance</span>
-          <UIRange v-model="activityStore.filterModel.distance" :step="1" :scale="0.001" suffix="km" />
+          <UIRange
+            v-model="activityStore.filterModel.distance"
+            :step="1"
+            :scale="0.001"
+            suffix="km"
+          />
         </label>
 
-        <label>
+        <label v-if="activityStore.filterFields.has('elevation')">
           <span>Elevation</span>
           <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" suffix="m" />
         </label>
@@ -151,14 +170,15 @@ const filterSummary = computed(() =>
             :invertColor="activityStore.filterModel.starred === false"
             :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
             @click="
-                activityStore.filterModel.starred =
-                  activityStore.filterModel.starred !== undefined ? undefined : true
-              "
+              activityStore.filterModel.starred =
+                activityStore.filterModel.starred !== undefined ? undefined : true
+            "
             @dbl-click="activityStore.filterModel.starred = false"
           />
         </label>
         <div :class="controlsStyle.buttons">
-          <UIButtonGroup>
+          <em v-if="activityStore.filterFields.size === 0">All filters are hidden</em>
+          <UIButtonGroup v-else>
             <UIButton icon="save" :disabled="isSaved" @click="saveFilter"> Save </UIButton>
             <UIButton
               :disabled="filterState === 'initial'"
@@ -181,6 +201,7 @@ const filterSummary = computed(() =>
           </UIButtonGroup>
         </div>
       </div>
+      <FilterHelp v-model="showHelp" />
     </template>
   </UIVerticalTab>
 </template>
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index 20a4bdc6..475dc428 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -160,7 +160,12 @@ watch([start, end, () => activityStore.useRoutes], () => {
     </div>
   </aside>
 
-  <UIModal v-if="userStore.user" v-model="settingsOpen" :class="$style.modal">
+  <UIModal
+    v-if="userStore.user"
+    v-model="settingsOpen"
+    :class="$style.modal"
+    heading="User settings"
+  >
     <UserSettings :user="userStore.user" @logout="onLogout" />
   </UIModal>
 </template>
diff --git a/client/src/components/sidebar/SidebarItemLink.vue b/client/src/components/sidebar/SidebarItemLink.vue
index 4b2827ae..e2e2fc4b 100644
--- a/client/src/components/sidebar/SidebarItemLink.vue
+++ b/client/src/components/sidebar/SidebarItemLink.vue
@@ -28,8 +28,9 @@ const useTextLink = !config.USE_STRAVA_ICONS;
     @click.stop
   >
     <template v-if="useTextLink">
-      <div>View on</div>
-      <div>Strava</div>
+      View on
+      <br />
+      Strava
     </template>
     <img v-else src="@/assets/strava.png" />
   </a>
diff --git a/client/src/components/sidebar/UserSettings.vue b/client/src/components/sidebar/UserSettings.vue
index cfecbd96..449f40c7 100644
--- a/client/src/components/sidebar/UserSettings.vue
+++ b/client/src/components/sidebar/UserSettings.vue
@@ -51,8 +51,6 @@ const logout = async (global = false) => {
 };
 </script>
 <template>
-  <h2>User settings</h2>
-
   <div :class="$style.flexLine">
     <img :class="$style.profilePic" :srcset="imgSrcSet" :src="imgSrc" />
     <a :href="profileLink" :class="$style.userName" target="_blank">{{ fullName }}</a>
diff --git a/client/src/components/ui/UIButton.vue b/client/src/components/ui/UIButton.vue
index bd7f6e3a..ebd079c1 100644
--- a/client/src/components/ui/UIButton.vue
+++ b/client/src/components/ui/UIButton.vue
@@ -18,6 +18,7 @@ const {
   loadingText,
   invertColor = false,
   disabled = false,
+  ghost = false,
   onClick,
   onDblClick,
   onRejection,
@@ -27,6 +28,7 @@ const {
   invertColor?: boolean;
   loadingText?: string;
   disabled?: boolean;
+  ghost?: boolean;
   onClick?: () => void | Promise<void>;
   onDblClick?: () => void | Promise<void>;
   onRejection?: (value: ButtonError) => string | void;
@@ -65,7 +67,7 @@ async function clickHandler(e: MouseEvent) {
 <template>
   <button
     ref="buttonRef"
-    :class="[$style.button, invertColor && $style.invertColor]"
+    :class="[$style.button, invertColor && $style.invertColor, ghost && $style.ghost]"
     :disabled="loading || disabled"
     :loading
     @click="clickHandler"
@@ -151,5 +153,28 @@ button.button {
       border-color: var(--background-weak);
     }
   }
+
+  &.ghost {
+    border: none;
+    background: none;
+    color: var(--color-mid);
+    padding: 0;
+    margin: 0;
+    min-height: unset;
+    font-size: unset;
+
+    .buttonContents {
+      padding: 0;
+      min-height: unset;
+    }
+
+    &:hover {
+      color: var(--color-full);
+    }
+
+    &:hover:not(:disabled) .buttonContents {
+      background: none;
+    }
+  }
 }
 </style>
diff --git a/client/src/components/ui/UIModal.vue b/client/src/components/ui/UIModal.vue
index dddaa3fb..3dacbcd3 100644
--- a/client/src/components/ui/UIModal.vue
+++ b/client/src/components/ui/UIModal.vue
@@ -5,6 +5,8 @@ import UIIcon from './UIIcon.vue';
 
 const open = defineModel<boolean>({ default: false });
 
+defineProps<{ heading?: string }>();
+
 const modal = ref<HTMLDialogElement>();
 
 const mountedPromise = new Promise<void>((resolve) => {
@@ -28,6 +30,9 @@ watch(
 <template>
   <dialog ref="modal" :class="$style.uiModal" @close="open = false" @click="open = false">
     <a :class="$style.closeButton" @click.stop.prevent="open = false"><UIIcon icon="close" /></a>
+    <h2 :class="$style.heading" @click.stop>
+      <slot v-if="open" name="heading">{{ heading }}</slot>
+    </h2>
     <div :class="$style.dialogContents" @click.stop>
       <slot v-if="open" />
     </div>
@@ -40,6 +45,11 @@ dialog.uiModal {
   padding: 0;
   border-radius: 1rem;
   position: relative;
+  flex-direction: column;
+
+  &:open {
+    display: flex;
+  }
 
   background-color: var(--background-full);
   color: var(--color-full);
@@ -62,9 +72,21 @@ dialog.uiModal {
     }
   }
 
+  .heading {
+    margin: 0;
+    padding-top: 1rem;
+    padding-left: 1rem;
+    padding-right: 1.5rem;
+    padding-bottom: 0;
+  }
+
   .dialogContents {
-    margin-block: 1em;
-    padding-inline: 1em;
+    padding: 1em;
+    overflow-block: auto;
+
+    :first-child {
+      margin-top: 0;
+    }
   }
 }
 </style>
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index 421254f9..b2baecee 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T extends string">
+import UIButton from '../UIButton.vue';
 import UIIcon from '../UIIcon.vue';
 import style from './tab.module.scss';
 import { type Tab } from './UIVerticalTabContainer.vue';
@@ -9,6 +10,7 @@ const { tab } = defineProps<{
   expandedContentClass?: unknown;
   heading?: string;
   summary?: string;
+  onHelp?: () => void;
 }>();
 
 function preventIfSelected(event: MouseEvent) {
@@ -35,6 +37,13 @@ function onToggle(event: ToggleEvent) {
     <details :class="[style.content]" :open="tab.isOpen" @toggle="onToggle">
       <summary :class="style.summaryRow" @click="preventIfSelected">
         <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
+          <UIButton
+            v-if="onHelp && tab.isOpen"
+            :class="style.helpButton"
+            ghost
+            icon="help"
+            @click="onHelp()"
+          />
           <span v-if="heading" :class="style.heading">{{ heading }}</span>
           {{ ' ' }}
           <span v-if="!tab.isOpen" :class="style.summary">
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index b622e8ba..67467234 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -75,3 +75,9 @@
 .summaryRow {
   list-style: none;
 }
+
+.helpButton {
+  float: right;
+  cursor: help;
+  margin-inline: 0.5rem;
+}
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 9c9b9791..708a496a 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -13,10 +13,10 @@ import {
 } from '@strava-heatmapper/shared/interfaces';
 import { type SportTypesAndGroups } from '@strava-heatmapper/shared/interfaces/SportType';
 import { defineStore } from 'pinia';
-import { computed, reactive, type Ref, ref, shallowRef, toRef } from 'vue';
+import { computed, reactive, type Ref, ref, shallowRef, toRef, watch } from 'vue';
 
 import Socket from '@/socket';
-import { type FilterModel } from '@/types/FilterModel';
+import { type FilterField, type FilterModel } from '@/types/FilterModel';
 import config from '@/utils/config';
 import { groupMapItems } from '@/utils/groupMapItems';
 import {
@@ -28,9 +28,11 @@ import {
   getCachedGear,
   getCachedRoutes,
   getStoreMeta,
+  loadFilterFields,
   loadFilterModel,
   resetStore,
   saveCachedGear,
+  saveFilterFields,
 } from '@/utils/storage';
 
 import { useContinueLoginStore } from './ContinueLoginStore';
@@ -84,6 +86,10 @@ export const useActivityStore = defineStore('activity', () => {
   const activityStats = ref<LoadingStats>({ inCache: true });
 
   const filterModel: FilterModel = reactive(loadFilterModel() ?? {});
+  const filterFields: Set<FilterField> = reactive(
+    loadFilterFields() ?? new Set(['sportType', 'starred']),
+  );
+  watch(filterFields, saveFilterFields);
 
   const error = ref<string>();
 
@@ -110,20 +116,27 @@ export const useActivityStore = defineStore('activity', () => {
   const visibleMapItems = computed<readonly MapItem[]>(() => {
     const sportType = filterModel.sportType;
     const filters: ((value: MapItem) => boolean)[] = [
-      sportType && ((item: MapItem) => doesSportTypeMatch(sportType, item.type)),
+      filterFields.has('sportType') &&
+        sportType &&
+        ((item: MapItem) => doesSportTypeMatch(sportType, item.type)),
 
-      filterModel.starred !== undefined &&
+      filterFields.has('starred') &&
+        filterModel.starred !== undefined &&
         ((item: MapItem) => !item.route || item.starred === filterModel.starred),
 
-      filterModel.distance?.min !== undefined &&
+      filterFields.has('distance') &&
+        filterModel.distance?.min !== undefined &&
         ((item: MapItem) => item.distance >= (filterModel.distance?.min ?? -Infinity)),
-      filterModel.distance?.max !== undefined &&
+      filterFields.has('distance') &&
+        filterModel.distance?.max !== undefined &&
         ((item: MapItem) => item.distance <= (filterModel.distance?.max ?? Infinity)),
 
-      filterModel.elevation?.min !== undefined &&
+      filterFields.has('elevation') &&
+        filterModel.elevation?.min !== undefined &&
         ((item: MapItem) =>
           item.elevation?.gain && item.elevation.gain >= (filterModel.elevation?.min ?? -Infinity)),
-      filterModel.elevation?.max !== undefined &&
+      filterFields.has('elevation') &&
+        filterModel.elevation?.max !== undefined &&
         ((item: MapItem) =>
           item.elevation?.gain && item.elevation.gain <= (filterModel.elevation?.max ?? Infinity)),
     ]
@@ -433,6 +446,7 @@ export const useActivityStore = defineStore('activity', () => {
     routeStats,
     activityStats,
     filterModel,
+    filterFields,
     useRoutes,
     groupLevel,
     error,
diff --git a/client/src/types/FilterModel.ts b/client/src/types/FilterModel.ts
index aac737d1..e130748f 100644
--- a/client/src/types/FilterModel.ts
+++ b/client/src/types/FilterModel.ts
@@ -1,3 +1,5 @@
+export type FilterField = keyof FilterModel;
+
 export interface RangeFilter {
   // These fields are both readonly to avoid problems with shallow copies of the filter model
   readonly min?: number;
diff --git a/client/src/utils/storage.ts b/client/src/utils/storage.ts
index a979297a..6c8aaf89 100644
--- a/client/src/utils/storage.ts
+++ b/client/src/utils/storage.ts
@@ -6,7 +6,7 @@ import {
 } from '@strava-heatmapper/shared/interfaces';
 import localforage from 'localforage';
 
-import { type FilterModel } from '@/types/FilterModel';
+import { type FilterField, type FilterModel } from '@/types/FilterModel';
 
 export interface StoreMeta {
   version: number;
@@ -56,6 +56,15 @@ export function saveFilterModel(filter: FilterModel) {
   localStorage.setItem('filter', JSON.stringify(filter));
 }
 
+export function loadFilterFields() {
+  const json = localStorage.getItem('filterFields');
+  if (json) return new Set(JSON.parse(json) as FilterField[]);
+}
+
+export function saveFilterFields(filter: Set<FilterField>) {
+  localStorage.setItem('filterFields', JSON.stringify(Array.from(filter)));
+}
+
 export function getStoreMeta(): StoreMeta {
   const rawCache = localStorage.getItem('meta');
   const cache = rawCache ? (JSON.parse(rawCache) as Partial<StoreMeta>) : undefined;

From e551e96649ac137a6795b16839264320db1eca0f Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 19 Jun 2025 21:28:17 +0200
Subject: [PATCH 13/50] Update style of starred button to match dropdown

---
 client/src/App.vue                            |  1 +
 .../src/components/sidebar/SidebarFilter.vue  |  1 +
 client/src/components/ui/UIButton.vue         | 21 ++++++++++++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 3bbd7a5e..0d5d8241 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -130,6 +130,7 @@ a[href] {
     --background-error: hsl(0 90% 30%);
     --bold-color: #fc4c02;
     --link-color: lightblue;
+    color-scheme: dark;
   }
 }
 
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 3676a2e1..ba78b875 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -167,6 +167,7 @@ const showHelp = ref(false);
         >
           <span>Starred</span>
           <UIButton
+            light
             :invertColor="activityStore.filterModel.starred === false"
             :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
             @click="
diff --git a/client/src/components/ui/UIButton.vue b/client/src/components/ui/UIButton.vue
index ebd079c1..39b1df01 100644
--- a/client/src/components/ui/UIButton.vue
+++ b/client/src/components/ui/UIButton.vue
@@ -19,6 +19,7 @@ const {
   invertColor = false,
   disabled = false,
   ghost = false,
+  light = false,
   onClick,
   onDblClick,
   onRejection,
@@ -28,6 +29,7 @@ const {
   invertColor?: boolean;
   loadingText?: string;
   disabled?: boolean;
+  light?: boolean;
   ghost?: boolean;
   onClick?: () => void | Promise<void>;
   onDblClick?: () => void | Promise<void>;
@@ -67,7 +69,12 @@ async function clickHandler(e: MouseEvent) {
 <template>
   <button
     ref="buttonRef"
-    :class="[$style.button, invertColor && $style.invertColor, ghost && $style.ghost]"
+    :class="[
+      $style.button,
+      invertColor && $style.invertColor,
+      ghost && $style.ghost,
+      light && !invertColor && $style.light,
+    ]"
     :disabled="loading || disabled"
     :loading
     @click="clickHandler"
@@ -138,6 +145,18 @@ button.button {
     grid-area: button;
   }
 
+  &.light {
+    background-color: var(--background-strong);
+
+    &:hover:not(:disabled) {
+      background-color: var(--background-weak);
+
+      .buttonContents {
+        background-color: unset;
+      }
+    }
+  }
+
   &.invertColor {
     border-color: var(--color-full);
     background-color: var(--color-full);

From a0ca6abd4cf10a7abe2e0e550297702f29f54b60 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 19 Jun 2025 22:02:15 +0200
Subject: [PATCH 14/50] Add gear filter

---
 client/src/components/sidebar/FilterHelp.vue  | 13 ++++++++++++
 .../src/components/sidebar/SidebarFilter.vue  | 20 ++++++++++++++++++-
 client/src/stores/ActivityStore.ts            |  4 ++++
 client/src/types/FilterModel.ts               |  1 +
 4 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
index d57d1f1a..2b8f487c 100644
--- a/client/src/components/sidebar/FilterHelp.vue
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -81,6 +81,19 @@ function toggleFilter(field: FilterField) {
         Show only routes that you have starred in Strava. Double-click on the button to invert the
         filter, i.e. to show only non-starred routes.
       </dd>
+      <dt v-if="!activityStore.useRoutes">
+        <label>
+          Gear
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('gear')"
+            @change="toggleFilter('gear')"
+          />
+        </label>
+      </dt>
+      <dd v-if="!activityStore.useRoutes">
+        Show only the activities recorded with the chosen gear (shoes/bike).
+      </dd>
     </dl>
     <hr />
     <p>
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index ba78b875..3aff942d 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type Gear } from '@strava-heatmapper/shared/interfaces';
 import { computed, ref } from 'vue';
 
 import { useActivityStore } from '@/stores/ActivityStore';
@@ -11,7 +12,7 @@ import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
 import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
-import UIDropdown from '../ui/UIDropdown.vue';
+import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
 import UIRange from '../ui/UIRange.vue';
 import controlsStyle from './controls.module.scss';
@@ -34,6 +35,12 @@ const chosenSportLabel = computed(() => {
   return undefined;
 });
 
+const gearOptions = computed<DropdownOption[]>(() =>
+  Array.from(activityStore.gear.entries())
+    .filter((entry): entry is [string, Gear] => !!entry[1])
+    .map(([id, gear]): DropdownOption => ({ label: gear.name, value: id })),
+);
+
 const blankFilter = Object.freeze<FilterModel>({
   distance: undefined,
   elevation: undefined,
@@ -177,6 +184,17 @@ const showHelp = ref(false);
             @dbl-click="activityStore.filterModel.starred = false"
           />
         </label>
+
+        <label v-if="activityStore.filterFields.has('gear')">
+          <span>Gear</span>
+          <UIDropdown
+            v-model="activityStore.filterModel.gear"
+            :options="gearOptions"
+            blankValue=""
+            blankLabel="All gear"
+          />
+        </label>
+
         <div :class="controlsStyle.buttons">
           <em v-if="activityStore.filterFields.size === 0">All filters are hidden</em>
           <UIButtonGroup v-else>
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 708a496a..361a5165 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -139,6 +139,10 @@ export const useActivityStore = defineStore('activity', () => {
         filterModel.elevation?.max !== undefined &&
         ((item: MapItem) =>
           item.elevation?.gain && item.elevation.gain <= (filterModel.elevation?.max ?? Infinity)),
+
+      filterFields.has('gear') &&
+        filterModel.gear &&
+        ((item: MapItem) => item.route || item.gear === filterModel.gear),
     ]
       // Remove falsy filters
       .filter((f): f is (value: MapItem) => boolean => !!f);
diff --git a/client/src/types/FilterModel.ts b/client/src/types/FilterModel.ts
index e130748f..2e5eea79 100644
--- a/client/src/types/FilterModel.ts
+++ b/client/src/types/FilterModel.ts
@@ -14,4 +14,5 @@ export interface FilterModel {
 
   distance?: RangeFilter;
   elevation?: RangeFilter;
+  gear?: string;
 }

From 3a0b75f71f4a55f58496a047423e555b5bd34f70 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Fri, 20 Jun 2025 10:48:14 +0200
Subject: [PATCH 15/50] Divide gear by type

---
 client/src/components/sidebar/SidebarFilter.vue | 15 ++++++++++-----
 client/src/components/ui/UIDropdown.vue         | 11 ++++++++++-
 client/src/stores/ActivityStore.ts              | 10 +++++++---
 server/api.ts                                   |  1 +
 server/routes/activities.ts                     |  3 ++-
 shared/interfaces/Gear.ts                       |  1 +
 6 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 3aff942d..df544818 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -35,11 +35,16 @@ const chosenSportLabel = computed(() => {
   return undefined;
 });
 
-const gearOptions = computed<DropdownOption[]>(() =>
-  Array.from(activityStore.gear.entries())
-    .filter((entry): entry is [string, Gear] => !!entry[1])
-    .map(([id, gear]): DropdownOption => ({ label: gear.name, value: id })),
-);
+const gearOptions = computed<DropdownOption[][]>(() => {
+  const pairs = Array.from(activityStore.gear.entries()).filter((entry): entry is [string, Gear] => !!entry[1]);
+  const partitions = [
+    pairs.filter(([, piece]) => !piece.isBike),
+    pairs.filter(([, piece]) => piece.isBike),
+  ];
+  return partitions.map((partition) =>
+    partition.map(([id, piece]): DropdownOption => ({ label: piece.name, value: id })),
+  );
+});
 
 const blankFilter = Object.freeze<FilterModel>({
   distance: undefined,
diff --git a/client/src/components/ui/UIDropdown.vue b/client/src/components/ui/UIDropdown.vue
index 2471ec2d..3fc6efd2 100644
--- a/client/src/components/ui/UIDropdown.vue
+++ b/client/src/components/ui/UIDropdown.vue
@@ -21,7 +21,16 @@ const {
   clearButton?: boolean;
 }>();
 
-const model = defineModel<string | undefined>({ default: undefined });
+const rawModel = defineModel<string | undefined>({ default: undefined });
+
+const model = computed<string | undefined>({
+  get() {
+    return rawModel.value ?? blankValue;
+  },
+  set(value: string | undefined) {
+    rawModel.value = value;
+  },
+});
 
 const blankLabels = computed<Partial<DropdownOption>[]>(() => {
   if (blankLabel) return [{ label: blankLabel, value: blankValue }];
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 361a5165..9197cfd8 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -176,7 +176,6 @@ export const useActivityStore = defineStore('activity', () => {
     );
   }
 
-  // TODO: keep alive. Verify that every gear request resolves
   async function requestGear(ids: (string | undefined)[], socket?: Socket) {
     const validIds = ids.filter((id?: string): id is string => !!id);
 
@@ -188,7 +187,10 @@ export const useActivityStore = defineStore('activity', () => {
           gear: gearId,
         });
       } else {
-        gear.set(gearId, (await getCachedGear(gearId)) ?? null);
+        const cachedGear = await getCachedGear(gearId);
+        if (cachedGear) {
+          gear.set(gearId, cachedGear);
+        }
       }
     }
   }
@@ -336,7 +338,8 @@ export const useActivityStore = defineStore('activity', () => {
       const finished =
         !continueLoginStore.continueLogin &&
         (!activities || activityStats.value.finding?.finished === true) &&
-        (!routes || routeStats.value.finding?.finished === true);
+        (!routes || routeStats.value.finding?.finished === true) &&
+        Iterator.from(gear.values()).every(Boolean);
       if (finished) {
         socket?.close();
       }
@@ -417,6 +420,7 @@ export const useActivityStore = defineStore('activity', () => {
     if (store.version !== serverVersion || store.user !== user) {
       allActivities.value = [];
       allRoutes.value = [];
+      gear.clear();
       await resetStore(serverVersion, user);
     }
 
diff --git a/server/api.ts b/server/api.ts
index 979dee2e..7f73779b 100644
--- a/server/api.ts
+++ b/server/api.ts
@@ -11,6 +11,7 @@ import { UserHandler } from './routes/user';
  * or changes that require a full re-download of user data.
  *
  * Change log:
+ * - 6: Added isBike to gear.
  * - 5: Added device field to activities to comply with Garmin Connect rules.
  */
 const MODEL_VERSION = 6;
diff --git a/server/routes/activities.ts b/server/routes/activities.ts
index 3b726e6c..bdee47ff 100644
--- a/server/routes/activities.ts
+++ b/server/routes/activities.ts
@@ -99,8 +99,9 @@ function convertGear({
   primary,
   brand_name: brand,
   model_name: model,
+  frame_type: frameType,
 }: DetailedGear): Gear {
-  return { name, description, distance, primary, brand, model };
+  return { name, description, distance, primary, brand, model, isBike: frameType !== undefined };
 }
 
 function convertActivity({ id, map }, highDetail = false): ActivityMap {
diff --git a/shared/interfaces/Gear.ts b/shared/interfaces/Gear.ts
index 98ecbfd8..30c254e8 100644
--- a/shared/interfaces/Gear.ts
+++ b/shared/interfaces/Gear.ts
@@ -5,4 +5,5 @@ export default interface Gear {
   brand: string;
   model: string;
   description: string;
+  isBike: boolean;
 }

From 72d3b981073bcc8ae037280a8b2ff3ea2f9d31ca Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Fri, 20 Jun 2025 11:55:03 +0200
Subject: [PATCH 16/50] Hide gear filter for routes

---
 client/src/components/sidebar/SidebarFilter.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index df544818..3d83a10e 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -36,7 +36,9 @@ const chosenSportLabel = computed(() => {
 });
 
 const gearOptions = computed<DropdownOption[][]>(() => {
-  const pairs = Array.from(activityStore.gear.entries()).filter((entry): entry is [string, Gear] => !!entry[1]);
+  const pairs = Array.from(activityStore.gear.entries()).filter(
+    (entry): entry is [string, Gear] => !!entry[1],
+  );
   const partitions = [
     pairs.filter(([, piece]) => !piece.isBike),
     pairs.filter(([, piece]) => piece.isBike),
@@ -190,7 +192,7 @@ const showHelp = ref(false);
           />
         </label>
 
-        <label v-if="activityStore.filterFields.has('gear')">
+        <label v-if="!activityStore.useRoutes && activityStore.filterFields.has('gear')">
           <span>Gear</span>
           <UIDropdown
             v-model="activityStore.filterModel.gear"

From 0a194410b0cfa8b9bf03f9717c6d0f813f05276a Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 31 Jul 2025 22:11:34 +0200
Subject: [PATCH 17/50] Add reset button for filters

---
 client/src/components/ui/UIButton.vue           |  6 +++++-
 client/src/components/ui/tabs/UIVerticalTab.vue | 10 ++++++++++
 client/src/components/ui/tabs/tab.module.scss   |  5 +++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ui/UIButton.vue b/client/src/components/ui/UIButton.vue
index 39b1df01..6909a1e8 100644
--- a/client/src/components/ui/UIButton.vue
+++ b/client/src/components/ui/UIButton.vue
@@ -187,13 +187,17 @@ button.button {
       min-height: unset;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       color: var(--color-full);
     }
 
     &:hover:not(:disabled) .buttonContents {
       background: none;
     }
+
+    &:disabled {
+      opacity: 50%;
+    }
   }
 }
 </style>
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index b2baecee..24b980ec 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -10,7 +10,9 @@ const { tab } = defineProps<{
   expandedContentClass?: unknown;
   heading?: string;
   summary?: string;
+  resetDisabled?: boolean;
   onHelp?: () => void;
+  onReset?: () => void;
 }>();
 
 function preventIfSelected(event: MouseEvent) {
@@ -44,6 +46,14 @@ function onToggle(event: ToggleEvent) {
             icon="help"
             @click="onHelp()"
           />
+          <UIButton
+            v-if="onReset && tab.isOpen"
+            :disabled="resetDisabled"
+            :class="style.resetButton"
+            ghost
+            icon="settings_backup_restore"
+            @click="onReset()"
+          />
           <span v-if="heading" :class="style.heading">{{ heading }}</span>
           {{ ' ' }}
           <span v-if="!tab.isOpen" :class="style.summary">
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index 67467234..bb82b787 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -81,3 +81,8 @@
   cursor: help;
   margin-inline: 0.5rem;
 }
+
+.resetButton {
+  float: right;
+  margin-inline: 0.5rem;
+}

From f67f65a89050601ec6cc0f96b6b35c113f11872a Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 31 Jul 2025 21:13:19 +0200
Subject: [PATCH 18/50] Move summary items logic to UIVerticalTab

---
 client/src/components/sidebar/SidebarFilter.vue | 15 ++-------------
 client/src/components/ui/tabs/UIVerticalTab.vue | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 3d83a10e..976cb77a 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -136,17 +136,10 @@ const showHelp = ref(false);
     icon="filter_alt"
     :expandedContentClass="$style.content"
     heading="Filter"
+    :summaryItems="filterSummary"
+    summaryEmpty="none set"
     @help="showHelp = true"
   >
-    <template #summary>
-      <template v-if="filterSummary.length">
-        <template v-for="(summaryItem, i) of filterSummary" :key="i"
-          ><span :class="$style.summarySpan">{{ summaryItem }}</span
-          ><template v-if="i + 1 < filterSummary.length">, </template></template
-        >
-      </template>
-      <template v-else>none set</template>
-    </template>
     <template #expanded>
       <div :class="controlsStyle.grid">
         <label v-if="activityStore.filterFields.has('sportType')">
@@ -238,10 +231,6 @@ const showHelp = ref(false);
   flex-direction: column;
 }
 
-.summarySpan {
-  white-space: nowrap;
-}
-
 .noPointer {
   pointer-events: none;
 
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index 24b980ec..fac86683 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -10,6 +10,8 @@ const { tab } = defineProps<{
   expandedContentClass?: unknown;
   heading?: string;
   summary?: string;
+  summaryItems?: string[];
+  summaryEmpty?: string;
   resetDisabled?: boolean;
   onHelp?: () => void;
   onReset?: () => void;
@@ -57,7 +59,16 @@ function onToggle(event: ToggleEvent) {
           <span v-if="heading" :class="style.heading">{{ heading }}</span>
           {{ ' ' }}
           <span v-if="!tab.isOpen" :class="style.summary">
-            <slot name="summary" :select="tab.select">{{ summary }}</slot>
+            <slot name="summary" :select="tab.select"
+              ><template v-if="summaryItems"
+                ><template v-if="summaryItems.length">
+                  <template v-for="(summaryItem, i) of summaryItems" :key="i"
+                    ><span :class="style.summarySpan">{{ summaryItem }}</span
+                    ><template v-if="i + 1 < summaryItems.length">, </template></template
+                  ></template
+                ><template v-else>{{ summaryEmpty ?? summary }}</template></template
+              ><template v-else>{{ summary }}</template></slot
+            >
           </span>
         </slot>
       </summary>

From ac8c686d3537a1ebf8e288d7dd0caf8778bde4a1 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 31 Jul 2025 21:52:44 +0200
Subject: [PATCH 19/50] Collapse date filter

---
 .../components/sidebar/SidebarDateFilter.vue  | 74 +++++++++++++++++++
 client/src/components/sidebar/SidebarForm.vue | 16 ++--
 client/src/utils/numberFormat.ts              |  8 +-
 3 files changed, 87 insertions(+), 11 deletions(-)
 create mode 100644 client/src/components/sidebar/SidebarDateFilter.vue

diff --git a/client/src/components/sidebar/SidebarDateFilter.vue b/client/src/components/sidebar/SidebarDateFilter.vue
new file mode 100644
index 00000000..f7475989
--- /dev/null
+++ b/client/src/components/sidebar/SidebarDateFilter.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { formatDate, formatDateRange } from '@/utils/numberFormat';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIDateInput from '../ui/UIDateInput.vue';
+import controlsStyle from './controls.module.scss';
+
+defineProps<{ tab: Tab<string> }>();
+
+const start = defineModel<Date>('start');
+const end = defineModel<Date>('end');
+
+function reset() {
+  start.value = undefined;
+  end.value = undefined;
+}
+
+const summary = computed(() => {
+  // The end date, or undefined if in the future
+  const effectiveEnd = end.value && (end.value > new Date() ? undefined : end.value);
+  if (start.value && effectiveEnd) {
+    return formatDateRange(start.value, effectiveEnd);
+  } else if (start.value) {
+    return `After ${formatDate(start.value)}`;
+  } else if (effectiveEnd) {
+    return `Before ${formatDate(effectiveEnd)}`;
+  } else {
+    return 'All dates';
+  }
+});
+</script>
+
+<template>
+  <UIVerticalTab
+    :tab
+    icon="date_range"
+    heading="Dates"
+    :summaryItems="[summary]"
+    :resetDisabled="!start && !end"
+    @reset="reset"
+  >
+    <template #expanded>
+      <div :class="[controlsStyle.grid, controlsStyle.center]">
+        <label>
+          <span>Start date</span>
+          <UIDateInput v-model="start" name="start" />
+        </label>
+        <label>
+          <span>End date</span>
+          <UIDateInput v-model="end" name="end" />
+        </label>
+      </div>
+    </template>
+  </UIVerticalTab>
+</template>
+
+<style lang="scss" module>
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.noPointer {
+  pointer-events: none;
+
+  > * {
+    pointer-events: initial;
+    margin-right: auto;
+  }
+}
+</style>
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index 475dc428..7dea7348 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -14,13 +14,13 @@ import { TooltipError } from '../tooltip/TooltipError';
 import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
-import UIDateInput from '../ui/UIDateInput.vue';
 import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
 import UILabelledIcon from '../ui/UILabelledIcon.vue';
 import UIModal from '../ui/UIModal.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
 import controlsStyle from './controls.module.scss';
 import LoadingStatus from './LoadingStatus.vue';
+import SidebarDateFilter from './SidebarDateFilter.vue';
 import SidebarFilter from './SidebarFilter.vue';
 import UserLogin from './UserLogin.vue';
 import UserSettings from './UserSettings.vue';
@@ -119,14 +119,12 @@ watch([start, end, () => activityStore.useRoutes], () => {
           <SegmentedControlItem :option="option(true)"> Routes </SegmentedControlItem>
         </SegmentedControl>
       </div>
-      <label>
-        <span>Start date</span>
-        <UIDateInput v-model="start" name="start" />
-      </label>
-      <label>
-        <span>End date</span>
-        <UIDateInput v-model="end" name="end" />
-      </label>
+    </div>
+    <UIVerticalTabContainer v-slot="{ makeTab }">
+      <SidebarDateFilter v-model:start="start" v-model:end="end" :tab="makeTab('dates')" />
+    </UIVerticalTabContainer>
+
+    <div :class="[controlsStyle.grid, controlsStyle.center]">
       <div :class="controlsStyle.buttons">
         <UIButtonGroup>
           <UIButton @click="loadButton">
diff --git a/client/src/utils/numberFormat.ts b/client/src/utils/numberFormat.ts
index 2662aaea..b8c62de5 100644
--- a/client/src/utils/numberFormat.ts
+++ b/client/src/utils/numberFormat.ts
@@ -88,18 +88,22 @@ const dateFormat = new Intl.DateTimeFormat(locales, {
   day: 'numeric',
 });
 
+export function formatDate(date: number | Date) {
+  return dateFormat.format(date);
+}
+
 const parts = dateFormat.formatToParts(0);
 const yearFirst =
   parts.findIndex((part) => part.type === 'year') <
   parts.findIndex((part) => part.type === 'month');
 
-export function formatSplitDate(date: number) {
+export function formatSplitDate(date: number | Date) {
   const yearString = yearFormat.format(date);
   const dayString = dayMonthFormat.format(date);
   return yearFirst ? [yearString, dayString] : [dayString, yearString];
 }
 
-export function formatFullDateTime(date: number) {
+export function formatFullDateTime(date: number | Date) {
   return fullDateTimeFormat.format(date);
 }
 

From f62f2b7a83e2f99324eb6ed037874687c424fc91 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Fri, 31 Oct 2025 07:59:37 +0100
Subject: [PATCH 20/50] Add gear filter to filter summary

---
 client/src/components/sidebar/SidebarFilter.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 976cb77a..4bcb95c6 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -113,6 +113,13 @@ function formatRange(
   return undefined;
 }
 
+function formatGear(id: string | undefined) {
+  if (!id) return undefined;
+  const chosenGear = activityStore.gear.get(id);
+  if (!chosenGear) return undefined;
+  return `using ${chosenGear.name}`;
+}
+
 const filterSummary = computed(() =>
   [
     activityStore.filterFields.has('sportType') && chosenSportLabel.value,
@@ -124,6 +131,7 @@ const filterSummary = computed(() =>
       activityStore.useRoutes &&
       activityStore.filterModel.starred !== undefined &&
       (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
+    activityStore.filterFields.has('gear') && formatGear(activityStore.filterModel.gear),
   ].filter((string): string is string => !!string),
 );
 

From e233a2e37947cbc674bd151662d687e241d968d3 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 1 Jan 2026 18:40:12 +0100
Subject: [PATCH 21/50] Add filter for private activities

---
 .../segmented-control/SegmentedControl.vue    | 11 +++-
 .../SegmentedControlItem.vue                  | 10 +++-
 client/src/components/sidebar/FilterHelp.vue  | 21 ++++++++
 .../src/components/sidebar/SidebarFilter.vue  | 51 +++++++++++++++++--
 client/src/components/sidebar/SidebarForm.vue |  3 --
 client/src/stores/ActivityStore.ts            |  4 ++
 client/src/types/FilterModel.ts               |  3 ++
 server/routes/activities.ts                   |  4 ++
 server/strava/model.ts                        | 32 ++++++++----
 shared/interfaces/Activity.ts                 |  1 +
 shared/interfaces/Route.ts                    |  1 +
 shared/interfaces/SportType.ts                | 17 +++++--
 12 files changed, 134 insertions(+), 24 deletions(-)

diff --git a/client/src/components/segmented-control/SegmentedControl.vue b/client/src/components/segmented-control/SegmentedControl.vue
index 87a3448c..d633b783 100644
--- a/client/src/components/segmented-control/SegmentedControl.vue
+++ b/client/src/components/segmented-control/SegmentedControl.vue
@@ -3,11 +3,15 @@ export interface SegmentedControlItemContext {
   selected: boolean;
   select: () => void;
   disabled: boolean;
+  deselect?: () => void;
 }
 
-const { disabled = false } = defineProps<{ disabled?: boolean }>();
+const { disabled = false, deselectValue } = defineProps<{
+  disabled?: boolean;
+  deselectValue?: [T];
+}>();
 
-const model = defineModel<T>();
+const model = defineModel<T>({ required: true });
 
 defineSlots<{
   default(props: { option: (value: T) => SegmentedControlItemContext }): unknown;
@@ -18,6 +22,9 @@ function option(value: T): SegmentedControlItemContext {
     selected: model.value === value,
     select: () => (model.value = value),
     disabled,
+
+    // This conversion is sound because allowDeselect can only be true if T includes undefined
+    deselect: deselectValue ? () => (model.value = deselectValue[0]) : undefined,
   };
 }
 </script>
diff --git a/client/src/components/segmented-control/SegmentedControlItem.vue b/client/src/components/segmented-control/SegmentedControlItem.vue
index 08202b1c..5673666c 100644
--- a/client/src/components/segmented-control/SegmentedControlItem.vue
+++ b/client/src/components/segmented-control/SegmentedControlItem.vue
@@ -9,6 +9,14 @@ const { option, disabled: disabledProp = false } = defineProps<{
 }>();
 
 const disabled = computed(() => option.disabled || disabledProp);
+
+function select() {
+  if (!option.selected) {
+    option.select();
+  } else if (option.deselect) {
+    option.deselect();
+  }
+}
 </script>
 
 <template>
@@ -19,7 +27,7 @@ const disabled = computed(() => option.disabled || disabledProp);
       disabled && $style.disabled,
     ]"
   >
-    <button :disabled @click.prevent="option.select()">
+    <button :disabled @click.prevent="select()">
       <div :class="[$style.buttonContents, $style.normal]">
         <slot />
       </div>
diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
index 2b8f487c..801455b1 100644
--- a/client/src/components/sidebar/FilterHelp.vue
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -42,6 +42,7 @@ function toggleFilter(field: FilterField) {
         {{ activityStore.useRoutes ? 'routes' : 'activities' }}, regardless of type. The options
         such as <em>All biking</em> show multiple sport types at once.
       </dd>
+
       <dt>
         <label
           >Distance
@@ -67,6 +68,7 @@ function toggleFilter(field: FilterField) {
         distance/elevation greater than or equal to the min value, and less than or equal to the max
         value. Leave a field blank to avoid filtering.
       </dd>
+
       <dt v-if="activityStore.useRoutes">
         <label>
           Starred
@@ -77,6 +79,7 @@ function toggleFilter(field: FilterField) {
           />
         </label>
       </dt>
+
       <dd v-if="activityStore.useRoutes">
         Show only routes that you have starred in Strava. Double-click on the button to invert the
         filter, i.e. to show only non-starred routes.
@@ -94,6 +97,24 @@ function toggleFilter(field: FilterField) {
       <dd v-if="!activityStore.useRoutes">
         Show only the activities recorded with the chosen gear (shoes/bike).
       </dd>
+
+      <dt>
+        <label
+          >Visibility
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('isPrivate')"
+            @change="toggleFilter('isPrivate')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Select
+        <UIIcon inline icon="lock_open" /> to show only non-private
+        {{ activityStore.useRoutes ? 'routes' : 'activities' }}, or <UIIcon inline icon="lock" /> to
+        show only private {{ activityStore.useRoutes ? 'routes' : 'activities' }}. Click again to
+        disable this filter.
+      </dd>
     </dl>
     <hr />
     <p>
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 4bcb95c6..b5964baa 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type Gear } from '@strava-heatmapper/shared/interfaces';
+import { bikeSportGroup, footSportGroup } from '@strava-heatmapper/shared/interfaces/SportType';
 import { computed, ref } from 'vue';
 
 import { useActivityStore } from '@/stores/ActivityStore';
@@ -8,11 +9,14 @@ import { type FilterModel, type RangeFilter } from '@/types/FilterModel';
 import { formatKilometers, formatMeters } from '@/utils/numberFormat';
 import { loadFilterModel, saveFilterModel } from '@/utils/storage';
 
+import SegmentedControl from '../segmented-control/SegmentedControl.vue';
+import SegmentedControlItem from '../segmented-control/SegmentedControlItem.vue';
 import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
 import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
 import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
+import UIIcon from '../ui/UIIcon.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
 import UIRange from '../ui/UIRange.vue';
 import controlsStyle from './controls.module.scss';
@@ -35,14 +39,29 @@ const chosenSportLabel = computed(() => {
   return undefined;
 });
 
+const offerGearByIsBike = computed(() => {
+  const offers = new Set<boolean>([true, false]);
+
+  const filterModel = activityStore.filterModel.sportType;
+  if (!filterModel) return offers;
+  const chosenFilters = filterModel.split(',');
+  if (bikeSportGroup.split(',').every((sport) => !chosenFilters.includes(sport))) {
+    offers.delete(true);
+  }
+  if (footSportGroup.split(',').every((sport) => !chosenFilters.includes(sport))) {
+    offers.delete(false);
+  }
+  return offers;
+});
+
 const gearOptions = computed<DropdownOption[][]>(() => {
   const pairs = Array.from(activityStore.gear.entries()).filter(
     (entry): entry is [string, Gear] => !!entry[1],
   );
   const partitions = [
-    pairs.filter(([, piece]) => !piece.isBike),
-    pairs.filter(([, piece]) => piece.isBike),
-  ];
+    offerGearByIsBike.value.has(false) && pairs.filter(([, piece]) => !piece.isBike),
+    offerGearByIsBike.value.has(true) && pairs.filter(([, piece]) => piece.isBike),
+  ].filter((partition) => !!partition);
   return partitions.map((partition) =>
     partition.map(([id, piece]): DropdownOption => ({ label: piece.name, value: id })),
   );
@@ -132,6 +151,9 @@ const filterSummary = computed(() =>
       activityStore.filterModel.starred !== undefined &&
       (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
     activityStore.filterFields.has('gear') && formatGear(activityStore.filterModel.gear),
+    activityStore.filterFields.has('isPrivate') &&
+      activityStore.filterModel.isPrivate !== undefined &&
+      (activityStore.filterModel.isPrivate ? 'only private' : 'only non-private'),
   ].filter((string): string is string => !!string),
 );
 
@@ -176,7 +198,7 @@ const showHelp = ref(false);
         </label>
 
         <label
-          v-if="activityStore.useRoutes"
+          v-if="activityStore.useRoutes && activityStore.filterFields.has('starred')"
           title="Only show starred routes (double-click for unstarred routes)"
           :class="$style.noPointer"
         >
@@ -203,6 +225,27 @@ const showHelp = ref(false);
           />
         </label>
 
+        <label
+          v-if="activityStore.filterFields.has('isPrivate')"
+          :title="`Only show private ${activityStore.useRoutes ? 'routes' : 'activities'} (double-click for non-private ${activityStore.useRoutes ? 'routes' : 'activities'})`"
+          :class="$style.noPointer"
+        >
+          <span>Visibility</span>
+          <SegmentedControl
+            v-slot="{ option }"
+            v-model="activityStore.filterModel.isPrivate"
+            :class="controlsStyle.segmentedControl"
+            :deselectValue="[undefined]"
+          >
+            <SegmentedControlItem :option="option(false)">
+              <UIIcon icon="lock_open" inline />
+            </SegmentedControlItem>
+            <SegmentedControlItem :option="option(true)">
+              <UIIcon icon="lock" inline />
+            </SegmentedControlItem>
+          </SegmentedControl>
+        </label>
+
         <div :class="controlsStyle.buttons">
           <em v-if="activityStore.filterFields.size === 0">All filters are hidden</em>
           <UIButtonGroup v-else>
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index 7dea7348..e0277bea 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -3,7 +3,6 @@ import { computed, ref, watch } from 'vue';
 
 import { useExpandableGroups } from '@/services/useExpandableGroups';
 import { GroupLevel, useActivityStore } from '@/stores/ActivityStore';
-import { useSportTypeStore } from '@/stores/SportTypeStore';
 import { useUserStore } from '@/stores/UserStore';
 import { combineCallbacks } from '@/utils/functions';
 import { useResettingRef } from '@/utils/resetting-ref';
@@ -38,8 +37,6 @@ const continueLogin = computed(() =>
 
 const settingsOpen = ref(false);
 
-const sportTypeStore = useSportTypeStore();
-
 const groupLevels: DropdownOption[] = [
   { value: GroupLevel.OFF, label: 'None' },
   { value: GroupLevel.WEEKLY_MO, label: 'Week (Mon–Sun)' },
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 9197cfd8..2d4b8b2a 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -124,6 +124,10 @@ export const useActivityStore = defineStore('activity', () => {
         filterModel.starred !== undefined &&
         ((item: MapItem) => !item.route || item.starred === filterModel.starred),
 
+      filterFields.has('isPrivate') &&
+        filterModel.isPrivate !== undefined &&
+        ((item: MapItem) => item.isPrivate === filterModel.isPrivate),
+
       filterFields.has('distance') &&
         filterModel.distance?.min !== undefined &&
         ((item: MapItem) => item.distance >= (filterModel.distance?.min ?? -Infinity)),
diff --git a/client/src/types/FilterModel.ts b/client/src/types/FilterModel.ts
index 2e5eea79..7cff09be 100644
--- a/client/src/types/FilterModel.ts
+++ b/client/src/types/FilterModel.ts
@@ -15,4 +15,7 @@ export interface FilterModel {
   distance?: RangeFilter;
   elevation?: RangeFilter;
   gear?: string;
+
+  /** Set to true to only show private items, or false to only show non-private items */
+  isPrivate?: boolean;
 }
diff --git a/server/routes/activities.ts b/server/routes/activities.ts
index bdee47ff..71cc85f9 100644
--- a/server/routes/activities.ts
+++ b/server/routes/activities.ts
@@ -42,6 +42,7 @@ function convertActivitySummary({
   total_elevation_gain,
   elev_high,
   elev_low,
+  private: isPrivate,
 }: SummaryActivity): Activity {
   const date = +new Date(startDate);
   const localDate = +new Date(localStartDate);
@@ -59,6 +60,7 @@ function convertActivitySummary({
     distance,
     type: sport_type,
     gear,
+    isPrivate,
     elevation: allDefined(total_elevation_gain, elev_high, elev_low) && {
       max: elev_high,
       min: elev_low,
@@ -78,6 +80,7 @@ function convertRouteSummary({
   starred,
   distance,
   elevation_gain,
+  private: isPrivate,
 }: SummaryRoute): Route {
   return {
     route: true,
@@ -89,6 +92,7 @@ function convertRouteSummary({
     map,
     starred,
     type: routeTypeMap[type] ?? type,
+    isPrivate,
   };
 }
 
diff --git a/server/strava/model.ts b/server/strava/model.ts
index 697def67..827014da 100644
--- a/server/strava/model.ts
+++ b/server/strava/model.ts
@@ -62,15 +62,29 @@ export interface DetailedGear {
 }
 
 export interface SummaryRoute {
-  id_str: string;
-  name: string;
-  created_at: string;
-  map: { summary_polyline: string };
-  type: 1 | 2 | 3;
-  sub_type: 1 | 2 | 3 | 4 | 5;
-  distance: number;
-  elevation_gain: number;
-  starred: boolean;
+  /** An instance of SummaryAthlete. */ athlete?: SummaryAthlete;
+  /** The description of the route */ description?: string;
+  /** The route's distance, in meters */ distance: number;
+  /** The route's elevation gain. */ elevation_gain: number;
+  /** The unique identifier of this route @deprecated */ id: number;
+  /** The unique identifier of the route in string format */ id_str: string;
+  /** An instance of PolylineMap. */ map: { summary_polyline: string };
+  /** The name of this route */ name: string;
+  /** Whether this route is private */ private?: boolean;
+  /** Whether this route is starred by the logged-in athlete */ starred: boolean;
+  /** An epoch timestamp of when the route was created */ timestamp?: number;
+  /** This route's type */ type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** This route's sub-type (1 for road, 2 for mountain bike, 3 for cross, 4 for trail, 5 for mixed) */ sub_type:
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5;
+  /** The time at which the route was created */ created_at: string;
+  /** The time at which the route was last updated */ updated_at?: string;
+  /** Estimated time in seconds for the authenticated athlete to complete route */ estimated_moving_time?: number;
+  /** The segments traversed by this route */ segments?: unknown[];
+  /** The custom waypoints along this route */ waypoints?: unknown[];
 }
 
 export interface SummaryAthlete {
diff --git a/shared/interfaces/Activity.ts b/shared/interfaces/Activity.ts
index f91317ff..4bca977e 100644
--- a/shared/interfaces/Activity.ts
+++ b/shared/interfaces/Activity.ts
@@ -29,4 +29,5 @@ export default interface Activity extends ActivityMap, ActivityStats {
   type: SportType;
   device?: string;
   gear?: string;
+  isPrivate?: boolean;
 }
diff --git a/shared/interfaces/Route.ts b/shared/interfaces/Route.ts
index e2b3d843..fd81af1c 100644
--- a/shared/interfaces/Route.ts
+++ b/shared/interfaces/Route.ts
@@ -14,4 +14,5 @@ export default interface Route extends RouteStats {
   map: string;
   type: SportType;
   starred: boolean;
+  isPrivate?: boolean;
 }
diff --git a/shared/interfaces/SportType.ts b/shared/interfaces/SportType.ts
index 5744faa4..ac50f59d 100644
--- a/shared/interfaces/SportType.ts
+++ b/shared/interfaces/SportType.ts
@@ -53,12 +53,19 @@ export enum SportType {
 
 export default SportType;
 
+export const footSportGroup = 'Hike,Snowshoe,Run,TrailRun,Walk';
+export const runningSportGroup = 'Run,TrailRun';
+export const walkingSportGroup = 'Hike,Walk';
+export const bikeSportGroup =
+  'EBikeRide,GravelRide,Handcycle,MountainBikeRide,Ride,Velomobile,VirtualRide';
+export const winterSportGroup = 'AlpineSki,BackcountrySki,IceSkate,Snowboard,Snowshoe,NordicSki';
+
 export const sportGroups = Object.freeze<Record<string, string>>({
-  'Hike,Snowshoe,Run,TrailRun,Walk': 'All on foot',
-  'Run,TrailRun': 'All running',
-  'Hike,Walk': 'All walking',
-  'EBikeRide,GravelRide,Handcycle,MountainBikeRide,Ride,Velomobile,VirtualRide': 'All biking',
-  'AlpineSki,BackcountrySki,IceSkate,Snowboard,Snowshoe,NordicSki': 'All winter sports',
+  [footSportGroup]: 'All on foot',
+  [runningSportGroup]: 'All running',
+  [walkingSportGroup]: 'All walking',
+  [bikeSportGroup]: 'All biking',
+  [winterSportGroup]: 'All winter sports',
 });
 
 export const sportTypes = Object.freeze<Record<SportType, string>>({

From bef6ec894ea2e6ffd98b21c3318c38dea1cae69b Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 1 Jan 2026 20:33:50 +0100
Subject: [PATCH 22/50] Fix saving gear filter

---
 client/src/components/sidebar/SidebarFilter.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index b5964baa..f3c4f225 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -83,7 +83,8 @@ function compareFilters(filterA: FilterModel, filterB: FilterModel) {
     (filterA.sportType ?? '') === (filterB.sportType ?? '') &&
     filterA.starred === filterB.starred &&
     compareRanges(filterA.distance, filterB.distance) &&
-    compareRanges(filterA.elevation, filterB.elevation)
+    compareRanges(filterA.elevation, filterB.elevation) &&
+    (filterA.gear ?? '') === (filterB.gear ?? '')
   );
 }
 

From d86f8f9527793f77e010b05bfcc2b1cca06415b1 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 1 Jan 2026 20:34:04 +0100
Subject: [PATCH 23/50] Fix saving private filter

---
 client/src/components/sidebar/SidebarFilter.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index f3c4f225..639bd70b 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -84,7 +84,8 @@ function compareFilters(filterA: FilterModel, filterB: FilterModel) {
     filterA.starred === filterB.starred &&
     compareRanges(filterA.distance, filterB.distance) &&
     compareRanges(filterA.elevation, filterB.elevation) &&
-    (filterA.gear ?? '') === (filterB.gear ?? '')
+    (filterA.gear ?? '') === (filterB.gear ?? '') &&
+    (filterA.isPrivate ?? null) === (filterB.isPrivate ?? null)
   );
 }
 

From 13fbdd2a6615150ebd376791912d70e94a0b9660 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 1 Jan 2026 21:46:08 +0100
Subject: [PATCH 24/50] Add filter for device

---
 client/src/components/sidebar/FilterHelp.vue  |  16 +++
 .../src/components/sidebar/SidebarFilter.vue  |  70 +++++++++++-
 client/src/components/sidebar/SidebarItem.vue |  10 +-
 client/src/components/ui/UITextField.vue      |  78 +++++++++++++
 client/src/stores/ActivityStore.ts            | 103 +++++++++++-------
 client/src/types/FilterModel.ts               |  32 ++++++
 6 files changed, 268 insertions(+), 41 deletions(-)
 create mode 100644 client/src/components/ui/UITextField.vue

diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
index 801455b1..8313d502 100644
--- a/client/src/components/sidebar/FilterHelp.vue
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -98,6 +98,22 @@ function toggleFilter(field: FilterField) {
         Show only the activities recorded with the chosen gear (shoes/bike).
       </dd>
 
+      <dt v-if="!activityStore.useRoutes">
+        <label
+          >Device
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('device')"
+            @change="toggleFilter('device')"
+          />
+        </label>
+      </dt>
+      <dd>
+        Enter a device name (or part of a name) to show only activities recorded with that device.
+        To only match exact names, surround the name with quotation marks, e.g. "Garmin Forerunner
+        945".
+      </dd>
+
       <dt>
         <label
           >Visibility
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 639bd70b..790b8721 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -5,7 +5,13 @@ import { computed, ref } from 'vue';
 
 import { useActivityStore } from '@/stores/ActivityStore';
 import { useSportTypeStore } from '@/stores/SportTypeStore';
-import { type FilterModel, type RangeFilter } from '@/types/FilterModel';
+import {
+  exactDeviceQuotes,
+  type FilterModel,
+  parseDeviceFilter,
+  quotePairs,
+  type RangeFilter,
+} from '@/types/FilterModel';
 import { formatKilometers, formatMeters } from '@/utils/numberFormat';
 import { loadFilterModel, saveFilterModel } from '@/utils/storage';
 
@@ -19,6 +25,7 @@ import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
 import UIIcon from '../ui/UIIcon.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
 import UIRange from '../ui/UIRange.vue';
+import UITextField from '../ui/UITextField.vue';
 import controlsStyle from './controls.module.scss';
 import FilterHelp from './FilterHelp.vue';
 
@@ -67,6 +74,52 @@ const gearOptions = computed<DropdownOption[][]>(() => {
   );
 });
 
+const deviceOptionsWithSharedStrings = computed(() => {
+  const prefixes = new Map<string, { name: string; occurrences: number; leaf: boolean }>();
+
+  for (const device of activityStore.devices) {
+    device.split(' ').forEach((_, index, array) => {
+      const key = array.slice(0, index + 1).join(' ');
+      let prefix = prefixes.get(key.toLowerCase());
+      if (!prefix) {
+        prefix = { name: key, occurrences: 0, leaf: false };
+        prefixes.set(key.toLowerCase(), prefix);
+      }
+      prefix.occurrences += 1;
+      prefix.leaf ||= index === array.length - 1;
+    });
+  }
+  for (const prefix of prefixes.values()) {
+    const ancestors = prefix.name
+      .split(' ')
+      .map((_, index, array) => array.slice(0, index).join(' '))
+      .reverse();
+    for (const ancestorName of ancestors) {
+      const ancestor = prefixes.get(ancestorName.toLowerCase());
+      if (ancestor && ancestor.occurrences <= prefix.occurrences) {
+        prefixes.delete(ancestorName.toLowerCase());
+      }
+    }
+  }
+  return Array.from(prefixes.values(), (prefix) => prefix.name);
+});
+
+const deviceOptions = computed<string[]>(() => {
+  const devices = activityStore.devices;
+  const openQuote =
+    !!activityStore.filterModel.device &&
+    exactDeviceQuotes.includes(activityStore.filterModel.device[0] ?? '')
+      ? activityStore.filterModel.device[0]
+      : '';
+  if (openQuote) {
+    const closeQuote = quotePairs[openQuote] ?? openQuote;
+
+    return Array.from(devices).map((device) => openQuote + device + closeQuote);
+  } else {
+    return deviceOptionsWithSharedStrings.value;
+  }
+});
+
 const blankFilter = Object.freeze<FilterModel>({
   distance: undefined,
   elevation: undefined,
@@ -85,7 +138,8 @@ function compareFilters(filterA: FilterModel, filterB: FilterModel) {
     compareRanges(filterA.distance, filterB.distance) &&
     compareRanges(filterA.elevation, filterB.elevation) &&
     (filterA.gear ?? '') === (filterB.gear ?? '') &&
-    (filterA.isPrivate ?? null) === (filterB.isPrivate ?? null)
+    (filterA.isPrivate ?? null) === (filterB.isPrivate ?? null) &&
+    (filterA.device ?? '') === (filterB.device ?? '')
   );
 }
 
@@ -156,6 +210,9 @@ const filterSummary = computed(() =>
     activityStore.filterFields.has('isPrivate') &&
       activityStore.filterModel.isPrivate !== undefined &&
       (activityStore.filterModel.isPrivate ? 'only private' : 'only non-private'),
+    activityStore.filterFields.has('device') &&
+      activityStore.filterModel.device &&
+      `only with device “${parseDeviceFilter(activityStore.filterModel.device).name}”`,
   ].filter((string): string is string => !!string),
 );
 
@@ -227,6 +284,15 @@ const showHelp = ref(false);
           />
         </label>
 
+        <label v-if="!activityStore.useRoutes && activityStore.filterFields.has('device')">
+          <span>Device</span>
+          <UITextField
+            v-model.lazy="activityStore.filterModel.device"
+            :pickList="deviceOptions"
+            placeholder="All devices"
+          />
+        </label>
+
         <label
           v-if="activityStore.filterFields.has('isPrivate')"
           :title="`Only show private ${activityStore.useRoutes ? 'routes' : 'activities'} (double-click for non-private ${activityStore.useRoutes ? 'routes' : 'activities'})`"
diff --git a/client/src/components/sidebar/SidebarItem.vue b/client/src/components/sidebar/SidebarItem.vue
index c5a866b0..92bd4845 100644
--- a/client/src/components/sidebar/SidebarItem.vue
+++ b/client/src/components/sidebar/SidebarItem.vue
@@ -6,6 +6,7 @@ export const SELECTED_SIDEBAR_ITEM_SELECTOR = 'sidebar-item-selected';
 import { type MapItem } from '@strava-heatmapper/shared/interfaces';
 import { computed } from 'vue';
 
+import { useActivityStore } from '@/stores/ActivityStore';
 import config from '@/utils/config';
 import { formatFullDateTime, formatSplitDate } from '@/utils/numberFormat';
 
@@ -15,6 +16,8 @@ import UISpinner from '../ui/UISpinner.vue';
 import SidebarItemLink from './SidebarItemLink.vue';
 import SidebarItemStats from './SidebarItemStats.vue';
 
+const activityStore = useActivityStore();
+
 // This conditional must be in the component rather than the template, so that tree-shaking works
 const StravaActivitySymbol = config.USE_STRAVA_ICONS ? StravaIcon : StravaEmoji;
 
@@ -42,8 +45,11 @@ const fullDate = computed(() => formatFullDateTime(startDate.value));
 
 // Only show device if not a route and device is in the required attribution list
 const device = computed(() => {
-  if (item.route) return undefined;
-  if (config.ATTRIBUTION.some((brand) => item.device?.startsWith(brand))) {
+  if (item.route) {
+    return undefined;
+  } else if (activityStore.filterFields.has('device')) {
+    return item.device;
+  } else if (config.ATTRIBUTION.some((brand) => item.device?.startsWith(brand))) {
     return item.device;
   } else {
     return undefined;
diff --git a/client/src/components/ui/UITextField.vue b/client/src/components/ui/UITextField.vue
new file mode 100644
index 00000000..cab935d9
--- /dev/null
+++ b/client/src/components/ui/UITextField.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, type InputTypeHTMLAttribute } from 'vue';
+
+const {
+  name,
+  pickList,
+  pickListId: pickListIdProp,
+} = defineProps<{
+  name?: string;
+
+  pickList?: string[] | ((model: string) => string[]);
+  pickListId?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: InputTypeHTMLAttribute;
+}>();
+
+const [model, modifiers] = defineModel<string, 'trim' | 'lazy'>({ default: undefined });
+
+const pickListValues = computed(() =>
+  typeof pickList === 'function' ? pickList(model.value) : pickList,
+);
+
+const uid = getCurrentInstance()?.uid;
+
+const pickListId = computed(() =>
+  pickList ? (pickListIdProp ?? `ui-text-field-pick-list-${uid}`) : undefined,
+);
+</script>
+
+<!-- From https://acdcjunior.github.io/how-bind-date-object-to-input-date-vue.js-v-model.html -->
+<template>
+  <div :class="$style.textField">
+    <input
+      ref="input"
+      v-model.lazy="model"
+      :model-modifiers="modifiers"
+      autocomplete="off"
+      :name
+      :list="pickListId"
+      :placeholder
+      :disabled
+      :type
+    />
+    <datalist v-if="pickList" :id="pickListId">
+      <option v-for="option in pickListValues" :key="option" :value="option" />
+    </datalist>
+  </div>
+</template>
+
+<style module lang="scss">
+.textField {
+  display: flex;
+  margin: 0.5rem;
+
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-weak);
+  background-color: var(--background-full);
+
+  min-width: 3em;
+  min-height: 1.75rem;
+  box-sizing: border-box;
+
+  input {
+    flex: 1;
+    background-color: inherit;
+    border: none;
+    min-width: 8rem;
+    margin: 0.15rem 0.4rem;
+    color: var(--color-full);
+    appearance: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+</style>
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 2d4b8b2a..b2121f02 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -16,7 +16,7 @@ import { defineStore } from 'pinia';
 import { computed, reactive, type Ref, ref, shallowRef, toRef, watch } from 'vue';
 
 import Socket from '@/socket';
-import { type FilterField, type FilterModel } from '@/types/FilterModel';
+import { type FilterField, type FilterModel, parseDeviceFilter } from '@/types/FilterModel';
 import config from '@/utils/config';
 import { groupMapItems } from '@/utils/groupMapItems';
 import {
@@ -99,6 +99,16 @@ export const useActivityStore = defineStore('activity', () => {
     useRoutes.value ? allRoutes.value : allActivities.value,
   );
 
+  const devices = computed(() =>
+    Array.from(
+      new Set(
+        allActivities.value
+          .map((activity) => activity.device)
+          .filter((device): device is string => !!device),
+      ),
+    ).sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' })),
+  );
+
   const availableSports = computed<SportTypesAndGroups | undefined>(() => {
     if (allMapItems.value.length === 0) return undefined;
     const presentSportTypes = [...new Set(allMapItems.value.map((item) => item.type))];
@@ -113,43 +123,61 @@ export const useActivityStore = defineStore('activity', () => {
 
   const stats = computed(() => (useRoutes.value ? routeStats.value : activityStats.value));
 
-  const visibleMapItems = computed<readonly MapItem[]>(() => {
+  const parsedDeviceFilter = computed(() => parseDeviceFilter(filterModel.device));
+
+  const mapItemFilters = computed(() => {
     const sportType = filterModel.sportType;
-    const filters: ((value: MapItem) => boolean)[] = [
-      filterFields.has('sportType') &&
-        sportType &&
-        ((item: MapItem) => doesSportTypeMatch(sportType, item.type)),
-
-      filterFields.has('starred') &&
-        filterModel.starred !== undefined &&
-        ((item: MapItem) => !item.route || item.starred === filterModel.starred),
-
-      filterFields.has('isPrivate') &&
-        filterModel.isPrivate !== undefined &&
-        ((item: MapItem) => item.isPrivate === filterModel.isPrivate),
-
-      filterFields.has('distance') &&
-        filterModel.distance?.min !== undefined &&
-        ((item: MapItem) => item.distance >= (filterModel.distance?.min ?? -Infinity)),
-      filterFields.has('distance') &&
-        filterModel.distance?.max !== undefined &&
-        ((item: MapItem) => item.distance <= (filterModel.distance?.max ?? Infinity)),
-
-      filterFields.has('elevation') &&
-        filterModel.elevation?.min !== undefined &&
-        ((item: MapItem) =>
-          item.elevation?.gain && item.elevation.gain >= (filterModel.elevation?.min ?? -Infinity)),
-      filterFields.has('elevation') &&
-        filterModel.elevation?.max !== undefined &&
-        ((item: MapItem) =>
-          item.elevation?.gain && item.elevation.gain <= (filterModel.elevation?.max ?? Infinity)),
-
-      filterFields.has('gear') &&
-        filterModel.gear &&
-        ((item: MapItem) => item.route || item.gear === filterModel.gear),
-    ]
-      // Remove falsy filters
-      .filter((f): f is (value: MapItem) => boolean => !!f);
+    return (
+      [
+        filterFields.has('sportType') &&
+          sportType &&
+          ((item: MapItem) => doesSportTypeMatch(sportType, item.type)),
+
+        filterFields.has('starred') &&
+          filterModel.starred !== undefined &&
+          ((item: MapItem) => !item.route || item.starred === filterModel.starred),
+
+        filterFields.has('isPrivate') &&
+          filterModel.isPrivate !== undefined &&
+          ((item: MapItem) => item.isPrivate === filterModel.isPrivate),
+
+        filterFields.has('distance') &&
+          filterModel.distance?.min !== undefined &&
+          ((item: MapItem) => item.distance >= (filterModel.distance?.min ?? -Infinity)),
+        filterFields.has('distance') &&
+          filterModel.distance?.max !== undefined &&
+          ((item: MapItem) => item.distance <= (filterModel.distance?.max ?? Infinity)),
+
+        filterFields.has('elevation') &&
+          filterModel.elevation?.min !== undefined &&
+          ((item: MapItem) =>
+            item.elevation?.gain &&
+            item.elevation.gain >= (filterModel.elevation?.min ?? -Infinity)),
+        filterFields.has('elevation') &&
+          filterModel.elevation?.max !== undefined &&
+          ((item: MapItem) =>
+            item.elevation?.gain &&
+            item.elevation.gain <= (filterModel.elevation?.max ?? Infinity)),
+
+        filterFields.has('gear') &&
+          filterModel.gear &&
+          ((item: MapItem) => item.route || item.gear === filterModel.gear),
+
+        filterFields.has('device') &&
+          parsedDeviceFilter.value.enabled &&
+          ((item: MapItem) =>
+            item.route ||
+            (parsedDeviceFilter.value.exact
+              ? item.device?.toLowerCase() === parsedDeviceFilter.value.name
+              : item.device?.toLowerCase().includes(parsedDeviceFilter.value.name))),
+      ]
+        // Remove falsy filters
+        .filter((f): f is (value: MapItem) => boolean => !!f)
+    );
+  });
+
+  const visibleMapItems = computed<readonly MapItem[]>(() => {
+    const filters = mapItemFilters.value;
 
     return filters.length
       ? allMapItems.value.filter((item) => filters.every((filter) => filter(item)))
@@ -463,6 +491,7 @@ export const useActivityStore = defineStore('activity', () => {
     groupLevel,
     error,
     gear,
+    devices,
 
     mapItems: visibleMapItems,
     groupedMapItems,
diff --git a/client/src/types/FilterModel.ts b/client/src/types/FilterModel.ts
index 7cff09be..81a4ff3f 100644
--- a/client/src/types/FilterModel.ts
+++ b/client/src/types/FilterModel.ts
@@ -18,4 +18,36 @@ export interface FilterModel {
 
   /** Set to true to only show private items, or false to only show non-private items */
   isPrivate?: boolean;
+
+  device?: string;
 }
+
+// Check for surrounding quotes to indicate exact match.
+export const exactDeviceQuotes = ['"', "'", '“', '”', '‘', '’', '„', '‚', '`', '«', '»', '‹', '›'];
+export const quotePairs :Record<string, string> = {
+  '“': '”',
+  '‘': '’',
+  '„': '“',
+  '‚': '‘',
+  '«': '»',
+  '»': '«',
+  '‹': '›',
+  '›': '‹',
+};
+
+export const parseDeviceFilter = (
+  deviceFilter: string | undefined,
+): { enabled: boolean; exact: boolean; name: string } => {
+  if (!deviceFilter) return { enabled: false, exact: false, name: '' };
+
+  if (exactDeviceQuotes.includes(deviceFilter.at(0) ?? '')) {
+    if (deviceFilter.length > 1 && exactDeviceQuotes.includes(deviceFilter.at(-1) ?? '')) {
+      return { enabled: true, exact: true, name: deviceFilter.slice(1, -1).toLowerCase().trim() };
+    } else {
+      // If only the start quote is present, treat it as a normal filter, as the user is still typing
+      return { enabled: true, exact: false, name: deviceFilter.slice(1).toLowerCase().trim() };
+    }
+  } else {
+    return { enabled: true, exact: false, name: deviceFilter.toLowerCase().trim() };
+  }
+};

From 17f195cee1c3dba1636dea98de947ce4ca0c3bed Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Mon, 19 Jan 2026 19:34:16 +0100
Subject: [PATCH 25/50] Update star filter to match visibility

---
 client/src/components/sidebar/FilterHelp.vue  |  5 ++-
 .../src/components/sidebar/SidebarFilter.vue  | 42 ++++++++++---------
 .../components/sidebar/controls.module.scss   |  4 +-
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
index 8313d502..f32dffc4 100644
--- a/client/src/components/sidebar/FilterHelp.vue
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -81,8 +81,9 @@ function toggleFilter(field: FilterField) {
       </dt>
 
       <dd v-if="activityStore.useRoutes">
-        Show only routes that you have starred in Strava. Double-click on the button to invert the
-        filter, i.e. to show only non-starred routes.
+        Select <kbd><UIIcon inline icon="star" /></kbd> to show only starred routes, or
+        <kbd><UIIcon inline icon="star_border" /></kbd> to show only non-starred routes. Click again
+        to disable this filter.
       </dd>
       <dt v-if="!activityStore.useRoutes">
         <label>
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index 790b8721..b1510cef 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -256,23 +256,26 @@ const showHelp = ref(false);
           <UIRange v-model="activityStore.filterModel.elevation" :step="0.1" suffix="m" />
         </label>
 
-        <label
+        <div
           v-if="activityStore.useRoutes && activityStore.filterFields.has('starred')"
-          title="Only show starred routes (double-click for unstarred routes)"
-          :class="$style.noPointer"
+          :class="[controlsStyle.label, $style.noPointer]"
         >
           <span>Starred</span>
-          <UIButton
-            light
-            :invertColor="activityStore.filterModel.starred === false"
-            :icon="activityStore.filterModel.starred === undefined ? 'star_border' : 'star'"
-            @click="
-              activityStore.filterModel.starred =
-                activityStore.filterModel.starred !== undefined ? undefined : true
-            "
-            @dbl-click="activityStore.filterModel.starred = false"
-          />
-        </label>
+
+          <SegmentedControl
+            v-slot="{ option }"
+            v-model="activityStore.filterModel.starred"
+            :class="controlsStyle.segmentedControl"
+            :deselectValue="[undefined]"
+          >
+            <SegmentedControlItem :option="option(false)" title="Only unstarred activities">
+              <UIIcon icon="star_border" inline />
+            </SegmentedControlItem>
+            <SegmentedControlItem :option="option(true)" title="Only starred activities">
+              <UIIcon icon="star" inline />
+            </SegmentedControlItem>
+          </SegmentedControl>
+        </div>
 
         <label v-if="!activityStore.useRoutes && activityStore.filterFields.has('gear')">
           <span>Gear</span>
@@ -293,10 +296,9 @@ const showHelp = ref(false);
           />
         </label>
 
-        <label
+        <div
           v-if="activityStore.filterFields.has('isPrivate')"
-          :title="`Only show private ${activityStore.useRoutes ? 'routes' : 'activities'} (double-click for non-private ${activityStore.useRoutes ? 'routes' : 'activities'})`"
-          :class="$style.noPointer"
+          :class="[$style.noPointer, controlsStyle.label]"
         >
           <span>Visibility</span>
           <SegmentedControl
@@ -305,14 +307,14 @@ const showHelp = ref(false);
             :class="controlsStyle.segmentedControl"
             :deselectValue="[undefined]"
           >
-            <SegmentedControlItem :option="option(false)">
+            <SegmentedControlItem :option="option(false)" title="Only public activities">
               <UIIcon icon="lock_open" inline />
             </SegmentedControlItem>
-            <SegmentedControlItem :option="option(true)">
+            <SegmentedControlItem :option="option(true)" title="Only private activities">
               <UIIcon icon="lock" inline />
             </SegmentedControlItem>
           </SegmentedControl>
-        </label>
+        </div>
 
         <div :class="controlsStyle.buttons">
           <em v-if="activityStore.filterFields.size === 0">All filters are hidden</em>
diff --git a/client/src/components/sidebar/controls.module.scss b/client/src/components/sidebar/controls.module.scss
index 90a98e81..90668dba 100644
--- a/client/src/components/sidebar/controls.module.scss
+++ b/client/src/components/sidebar/controls.module.scss
@@ -18,7 +18,7 @@
     grid-template-columns: max-content max-content;
   }
 
-  > label {
+  > :is(label, .label) {
     grid-template-columns: subgrid;
     display: grid;
     grid-column: span 2;
@@ -33,7 +33,7 @@
 
 .row,
 .grid {
-  > label > span {
+  > :is(label, .label) > span {
     min-height: 1.2em;
     font-size: 0.9em;
     font-weight: 600;

From 377fe3c4a28e11039ea317bf363702c55817bc38 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 1 Feb 2026 22:31:13 +0100
Subject: [PATCH 26/50] Add filter for isCommute

---
 client/src/components/sidebar/FilterHelp.vue  | 17 ++++++++++
 .../src/components/sidebar/SidebarFilter.vue  | 29 +++++++++++++++++
 client/src/components/sidebar/SidebarItem.vue | 32 ++++++++++++++++++-
 .../components/sidebar/SidebarItemStats.vue   |  3 +-
 client/src/components/sidebar/StatsList.vue   | 19 ++++++++---
 client/src/stores/ActivityStore.ts            |  4 +++
 client/src/types/FilterModel.ts               |  5 ++-
 server/api.ts                                 |  3 +-
 server/routes/activities.ts                   |  2 ++
 shared/interfaces/Activity.ts                 |  1 +
 10 files changed, 106 insertions(+), 9 deletions(-)

diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
index f32dffc4..c01dceba 100644
--- a/client/src/components/sidebar/FilterHelp.vue
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -85,6 +85,7 @@ function toggleFilter(field: FilterField) {
         <kbd><UIIcon inline icon="star_border" /></kbd> to show only non-starred routes. Click again
         to disable this filter.
       </dd>
+
       <dt v-if="!activityStore.useRoutes">
         <label>
           Gear
@@ -115,6 +116,22 @@ function toggleFilter(field: FilterField) {
         945".
       </dd>
 
+      <dt v-if="!activityStore.useRoutes">
+        <label
+          >Commutes
+          <input
+            type="checkbox"
+            :checked="activityStore.filterFields.has('isCommute')"
+            @change="toggleFilter('isCommute')"
+          />
+        </label>
+      </dt>
+      <dd v-if="!activityStore.useRoutes">
+        Select
+        <UIIcon inline icon="work" /> to show only commutes, or <UIIcon inline icon="work_off" /> to
+        exclude commutes. Click again to disable this filter.
+      </dd>
+
       <dt>
         <label
           >Visibility
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index b1510cef..ab4403ed 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -125,6 +125,10 @@ const blankFilter = Object.freeze<FilterModel>({
   elevation: undefined,
   sportType: undefined,
   starred: undefined,
+  gear: undefined,
+  isPrivate: undefined,
+  isCommute: undefined,
+  device: undefined,
 });
 
 function compareRanges(rangeA: RangeFilter | undefined, rangeB: RangeFilter | undefined) {
@@ -139,6 +143,7 @@ function compareFilters(filterA: FilterModel, filterB: FilterModel) {
     compareRanges(filterA.elevation, filterB.elevation) &&
     (filterA.gear ?? '') === (filterB.gear ?? '') &&
     (filterA.isPrivate ?? null) === (filterB.isPrivate ?? null) &&
+    (filterA.isCommute ?? null) === (filterB.isCommute ?? null) &&
     (filterA.device ?? '') === (filterB.device ?? '')
   );
 }
@@ -207,6 +212,10 @@ const filterSummary = computed(() =>
       activityStore.filterModel.starred !== undefined &&
       (activityStore.filterModel.starred ? 'only starred' : 'only unstarred'),
     activityStore.filterFields.has('gear') && formatGear(activityStore.filterModel.gear),
+    activityStore.filterFields.has('isCommute') &&
+      !activityStore.useRoutes &&
+      activityStore.filterModel.isCommute !== undefined &&
+      (activityStore.filterModel.isCommute ? 'only commutes' : 'excluding commutes'),
     activityStore.filterFields.has('isPrivate') &&
       activityStore.filterModel.isPrivate !== undefined &&
       (activityStore.filterModel.isPrivate ? 'only private' : 'only non-private'),
@@ -316,6 +325,26 @@ const showHelp = ref(false);
           </SegmentedControl>
         </div>
 
+        <div
+          v-if="activityStore.filterFields.has('isCommute') && !activityStore.useRoutes"
+          :class="[$style.noPointer, controlsStyle.label]"
+        >
+          <span>Commute</span>
+          <SegmentedControl
+            v-slot="{ option }"
+            v-model="activityStore.filterModel.isCommute"
+            :class="controlsStyle.segmentedControl"
+            :deselectValue="[undefined]"
+          >
+            <SegmentedControlItem :option="option(true)" title="Only commutes">
+              <UIIcon icon="work" inline />
+            </SegmentedControlItem>
+            <SegmentedControlItem :option="option(false)" title="Exclude commutes">
+              <UIIcon icon="work_off" inline />
+            </SegmentedControlItem>
+          </SegmentedControl>
+        </div>
+
         <div :class="controlsStyle.buttons">
           <em v-if="activityStore.filterFields.size === 0">All filters are hidden</em>
           <UIButtonGroup v-else>
diff --git a/client/src/components/sidebar/SidebarItem.vue b/client/src/components/sidebar/SidebarItem.vue
index 92bd4845..dba6323b 100644
--- a/client/src/components/sidebar/SidebarItem.vue
+++ b/client/src/components/sidebar/SidebarItem.vue
@@ -7,6 +7,7 @@ import { type MapItem } from '@strava-heatmapper/shared/interfaces';
 import { computed } from 'vue';
 
 import { useActivityStore } from '@/stores/ActivityStore';
+import { type FilterModel } from '@/types/FilterModel';
 import config from '@/utils/config';
 import { formatFullDateTime, formatSplitDate } from '@/utils/numberFormat';
 
@@ -55,6 +56,35 @@ const device = computed(() => {
     return undefined;
   }
 });
+
+type TypedKeyOf<T extends object, V> = Exclude<
+  {
+    [K in keyof T]: T[K] extends V ? K : never;
+  }[keyof T],
+  undefined
+>;
+
+// Show an icon for boolean filter fields if the filter is enabled but not set
+function booleanIcon<T extends MapItem>(
+  item: T,
+  key: TypedKeyOf<FilterModel, boolean | undefined> & keyof T,
+  trueIcon: string | undefined,
+  falseIcon: string | undefined,
+): string | undefined {
+  const iconNeeded =
+    activityStore.filterFields.has(key) &&
+    item[key] !== undefined &&
+    activityStore.filterModel[key] === undefined;
+  if (!iconNeeded) return undefined;
+  return item[key] ? trueIcon : falseIcon;
+}
+
+const statsIcons = computed(() =>
+  [
+    !item.route && booleanIcon(item, 'isCommute', 'work', undefined),
+    booleanIcon(item, 'isPrivate', 'lock', undefined),
+  ].filter((icon): icon is string => !!icon),
+);
 </script>
 
 <template>
@@ -74,7 +104,7 @@ const device = computed(() => {
       <div :class="$style.sidebarItemName" v-text="item.name" />
       <div v-if="device" :class="$style.sidebarItemDevice" v-text="device" />
       <div style="display: flex">
-        <SidebarItemStats v-if="expanded" :item />
+        <SidebarItemStats v-if="expanded" :item :icons="statsIcons" />
       </div>
     </div>
     <div v-if="!item.map" :class="$style.spinner">
diff --git a/client/src/components/sidebar/SidebarItemStats.vue b/client/src/components/sidebar/SidebarItemStats.vue
index cad50b8b..08f98632 100644
--- a/client/src/components/sidebar/SidebarItemStats.vue
+++ b/client/src/components/sidebar/SidebarItemStats.vue
@@ -14,6 +14,7 @@ import StatsList from './StatsList.vue';
 const { item, additionalStats } = defineProps<{
   item: MapItemStats;
   additionalStats?: (string | false | undefined | null)[];
+  icons?: string[];
 }>();
 
 const distanceString = computed(() => formatKilometers(item.distance));
@@ -52,5 +53,5 @@ const stats = computed(() => {
 </script>
 
 <template>
-  <StatsList :stats />
+  <StatsList :stats :icons />
 </template>
diff --git a/client/src/components/sidebar/StatsList.vue b/client/src/components/sidebar/StatsList.vue
index 2d528825..26511700 100644
--- a/client/src/components/sidebar/StatsList.vue
+++ b/client/src/components/sidebar/StatsList.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const { stats } = defineProps<{
+import UIIcon from '../ui/UIIcon.vue';
+
+const { stats, icons } = defineProps<{
   stats: (string | undefined)[];
+  icons?: string[];
 }>();
 
 const filteredStats = computed(() => stats.filter(Boolean));
@@ -10,9 +13,8 @@ const filteredStats = computed(() => stats.filter(Boolean));
 
 <template>
   <div :class="$style.statsList">
-    <template v-for="(stat, _i) of filteredStats" :key="_i">
-      <div :class="$style.stat">{{ stat }}</div>
-    </template>
+    <div v-for="(stat, i) of filteredStats" :key="i" :class="$style.stat">{{ stat }}</div>
+    <UIIcon v-for="(icon, i) of icons" :key="`icon-${i}`" :class="$style.statIcon" :icon inline />
   </div>
 </template>
 
@@ -30,7 +32,10 @@ const filteredStats = computed(() => stats.filter(Boolean));
     display: inline-block;
     padding-left: $separator-spacing;
     text-indent: -$separator-spacing;
-    margin-right: $separator-spacing;
+
+    &:not(:last-of-type) {
+      margin-right: $separator-spacing;
+    }
 
     &::before {
       display: inline-block;
@@ -42,5 +47,9 @@ const filteredStats = computed(() => stats.filter(Boolean));
       pointer-events: none;
     }
   }
+
+  .statIcon {
+    margin-left: 0.25em;
+  }
 }
 </style>
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index b2121f02..25b4cda4 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -137,6 +137,10 @@ export const useActivityStore = defineStore('activity', () => {
           filterModel.starred !== undefined &&
           ((item: MapItem) => !item.route || item.starred === filterModel.starred),
 
+        filterFields.has('isCommute') &&
+          filterModel.isCommute !== undefined &&
+          ((item: MapItem) => item.route || item.isCommute === filterModel.isCommute),
+
         filterFields.has('isPrivate') &&
           filterModel.isPrivate !== undefined &&
           ((item: MapItem) => item.isPrivate === filterModel.isPrivate),
diff --git a/client/src/types/FilterModel.ts b/client/src/types/FilterModel.ts
index 81a4ff3f..62eb008a 100644
--- a/client/src/types/FilterModel.ts
+++ b/client/src/types/FilterModel.ts
@@ -19,12 +19,15 @@ export interface FilterModel {
   /** Set to true to only show private items, or false to only show non-private items */
   isPrivate?: boolean;
 
+  /** Set to true to only show commutes, or false to only show non-commutes */
+  isCommute?: boolean;
+
   device?: string;
 }
 
 // Check for surrounding quotes to indicate exact match.
 export const exactDeviceQuotes = ['"', "'", '“', '”', '‘', '’', '„', '‚', '`', '«', '»', '‹', '›'];
-export const quotePairs :Record<string, string> = {
+export const quotePairs: Record<string, string> = {
   '“': '”',
   '‘': '’',
   '„': '“',
diff --git a/server/api.ts b/server/api.ts
index 7f73779b..10f9d85a 100644
--- a/server/api.ts
+++ b/server/api.ts
@@ -11,10 +11,11 @@ import { UserHandler } from './routes/user';
  * or changes that require a full re-download of user data.
  *
  * Change log:
+ * - 7: Added isPrivate to all items, isCommute to activities.
  * - 6: Added isBike to gear.
  * - 5: Added device field to activities to comply with Garmin Connect rules.
  */
-const MODEL_VERSION = 6;
+const MODEL_VERSION = 7;
 
 export default function apiRouter(domain: string): express.Router {
   const router = express.Router() as Router;
diff --git a/server/routes/activities.ts b/server/routes/activities.ts
index 71cc85f9..e683d956 100644
--- a/server/routes/activities.ts
+++ b/server/routes/activities.ts
@@ -43,6 +43,7 @@ function convertActivitySummary({
   elev_high,
   elev_low,
   private: isPrivate,
+  commute: isCommute,
 }: SummaryActivity): Activity {
   const date = +new Date(startDate);
   const localDate = +new Date(localStartDate);
@@ -61,6 +62,7 @@ function convertActivitySummary({
     type: sport_type,
     gear,
     isPrivate,
+    isCommute,
     elevation: allDefined(total_elevation_gain, elev_high, elev_low) && {
       max: elev_high,
       min: elev_low,
diff --git a/shared/interfaces/Activity.ts b/shared/interfaces/Activity.ts
index 4bca977e..4563493f 100644
--- a/shared/interfaces/Activity.ts
+++ b/shared/interfaces/Activity.ts
@@ -30,4 +30,5 @@ export default interface Activity extends ActivityMap, ActivityStats {
   device?: string;
   gear?: string;
   isPrivate?: boolean;
+  isCommute?: boolean;
 }

From 22dd235757236d244d12bce6059f597d6c7e1a81 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 19 Jun 2025 21:41:39 +0200
Subject: [PATCH 27/50] Extract grouping to new tab

---
 client/src/components/sidebar/SidebarForm.vue | 20 ++-------
 .../sidebar/SidebarGroupControl.vue           | 42 +++++++++++++++++++
 2 files changed, 45 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/sidebar/SidebarGroupControl.vue

diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index e0277bea..6ca51039 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue';
 
 import { useExpandableGroups } from '@/services/useExpandableGroups';
-import { GroupLevel, useActivityStore } from '@/stores/ActivityStore';
+import { useActivityStore } from '@/stores/ActivityStore';
 import { useUserStore } from '@/stores/UserStore';
 import { combineCallbacks } from '@/utils/functions';
 import { useResettingRef } from '@/utils/resetting-ref';
@@ -13,7 +13,6 @@ import { TooltipError } from '../tooltip/TooltipError';
 import UIVerticalTabContainer from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
-import UIDropdown, { type DropdownOption } from '../ui/UIDropdown.vue';
 import UILabelledIcon from '../ui/UILabelledIcon.vue';
 import UIModal from '../ui/UIModal.vue';
 import UIMultiText from '../ui/UIMultiText.vue';
@@ -21,6 +20,7 @@ import controlsStyle from './controls.module.scss';
 import LoadingStatus from './LoadingStatus.vue';
 import SidebarDateFilter from './SidebarDateFilter.vue';
 import SidebarFilter from './SidebarFilter.vue';
+import SidebarGroupControl from './SidebarGroupControl.vue';
 import UserLogin from './UserLogin.vue';
 import UserSettings from './UserSettings.vue';
 
@@ -37,15 +37,6 @@ const continueLogin = computed(() =>
 
 const settingsOpen = ref(false);
 
-const groupLevels: DropdownOption[] = [
-  { value: GroupLevel.OFF, label: 'None' },
-  { value: GroupLevel.WEEKLY_MO, label: 'Week (Mon–Sun)' },
-  { value: GroupLevel.WEEKLY_SA, label: 'Week (Sat–Fri)' },
-  { value: GroupLevel.WEEKLY_SU, label: 'Week (Sun–Sat)' },
-  { value: GroupLevel.MONTHLY, label: 'Month' },
-  { value: GroupLevel.YEARLY, label: 'Year' },
-];
-
 function onLogout(): void {
   document.cookie = `token=;expires=${new Date(0).toUTCString()}`;
   activityStore.discardCache(true, true);
@@ -146,13 +137,8 @@ watch([start, end, () => activityStore.useRoutes], () => {
     <LoadingStatus v-else :useRoutes="activityStore.useRoutes" :error="activityStore.error" />
     <UIVerticalTabContainer v-slot="{ makeTab }">
       <SidebarFilter :tab="makeTab('filter')" />
+      <SidebarGroupControl :tab="makeTab('group')" />
     </UIVerticalTabContainer>
-    <div :class="[$style.controls, $style.row]">
-      <label>
-        <span>Group by</span>
-        <UIDropdown v-model="activityStore.groupLevel" :options="groupLevels" />
-      </label>
-    </div>
   </aside>
 
   <UIModal
diff --git a/client/src/components/sidebar/SidebarGroupControl.vue b/client/src/components/sidebar/SidebarGroupControl.vue
new file mode 100644
index 00000000..6a42becd
--- /dev/null
+++ b/client/src/components/sidebar/SidebarGroupControl.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { GroupLevel, useActivityStore } from '@/stores/ActivityStore';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIDropdown from '../ui/UIDropdown.vue';
+import controlsStyle from './controls.module.scss';
+
+defineProps<{ tab: Tab<string> }>();
+
+const activityStore = useActivityStore();
+
+const groupLevels = [
+  { value: GroupLevel.OFF, label: 'None', summary: 'Grouping disabled' },
+  { value: GroupLevel.WEEKLY_MO, label: 'Week (Mon–Sun)', summary: 'Grouping by week (Mon–Sun)' },
+  { value: GroupLevel.WEEKLY_SA, label: 'Week (Sat–Fri)', summary: 'Grouping by week (Sat–Fri)' },
+  { value: GroupLevel.WEEKLY_SU, label: 'Week (Sun–Sat)', summary: 'Grouping by week (Sun–Sat)' },
+  { value: GroupLevel.MONTHLY, label: 'Month', summary: 'Grouping by month' },
+  { value: GroupLevel.YEARLY, label: 'Year', summary: 'Grouping by year' },
+];
+
+const summary = computed(
+  () =>
+    (groupLevels.find((level) => level.value === activityStore.groupLevel) ?? groupLevels[0])
+      .summary,
+);
+</script>
+
+<template>
+  <UIVerticalTab :tab icon="segment" :summary="summary">
+    <template #expanded>
+      <div :class="controlsStyle.grid">
+        <label>
+          <span>Group by</span>
+          <UIDropdown v-model="activityStore.groupLevel" :options="groupLevels" />
+        </label>
+      </div>
+    </template>
+  </UIVerticalTab>
+</template>

From 3bdda50320c95043da9f44c95527dabfd60ec145 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Mon, 16 Jun 2025 23:46:05 +0200
Subject: [PATCH 28/50] Add grouping section header

---
 .../src/components/sidebar/SidebarGroupControl.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/sidebar/SidebarGroupControl.vue b/client/src/components/sidebar/SidebarGroupControl.vue
index 6a42becd..57ff2521 100644
--- a/client/src/components/sidebar/SidebarGroupControl.vue
+++ b/client/src/components/sidebar/SidebarGroupControl.vue
@@ -13,12 +13,12 @@ defineProps<{ tab: Tab<string> }>();
 const activityStore = useActivityStore();
 
 const groupLevels = [
-  { value: GroupLevel.OFF, label: 'None', summary: 'Grouping disabled' },
-  { value: GroupLevel.WEEKLY_MO, label: 'Week (Mon–Sun)', summary: 'Grouping by week (Mon–Sun)' },
-  { value: GroupLevel.WEEKLY_SA, label: 'Week (Sat–Fri)', summary: 'Grouping by week (Sat–Fri)' },
-  { value: GroupLevel.WEEKLY_SU, label: 'Week (Sun–Sat)', summary: 'Grouping by week (Sun–Sat)' },
-  { value: GroupLevel.MONTHLY, label: 'Month', summary: 'Grouping by month' },
-  { value: GroupLevel.YEARLY, label: 'Year', summary: 'Grouping by year' },
+  { value: GroupLevel.OFF, label: 'None', summary: 'disabled' },
+  { value: GroupLevel.WEEKLY_MO, label: 'Week (Mon–Sun)', summary: 'by week (Mon–Sun)' },
+  { value: GroupLevel.WEEKLY_SA, label: 'Week (Sat–Fri)', summary: 'by week (Sat–Fri)' },
+  { value: GroupLevel.WEEKLY_SU, label: 'Week (Sun–Sat)', summary: 'by week (Sun–Sat)' },
+  { value: GroupLevel.MONTHLY, label: 'Month', summary: 'by month' },
+  { value: GroupLevel.YEARLY, label: 'Year', summary: 'by year' },
 ];
 
 const summary = computed(
@@ -29,7 +29,7 @@ const summary = computed(
 </script>
 
 <template>
-  <UIVerticalTab :tab icon="segment" :summary="summary">
+  <UIVerticalTab :tab icon="segment" :summary="summary" heading="Grouping">
     <template #expanded>
       <div :class="controlsStyle.grid">
         <label>

From 53f0e2733ec164dca2fee6416364f1aff180b504 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 22:08:39 +0200
Subject: [PATCH 29/50] Move date filter to below load button

---
 client/src/components/sidebar/SidebarForm.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index 6ca51039..5b4bd314 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -107,12 +107,6 @@ watch([start, end, () => activityStore.useRoutes], () => {
           <SegmentedControlItem :option="option(true)"> Routes </SegmentedControlItem>
         </SegmentedControl>
       </div>
-    </div>
-    <UIVerticalTabContainer v-slot="{ makeTab }">
-      <SidebarDateFilter v-model:start="start" v-model:end="end" :tab="makeTab('dates')" />
-    </UIVerticalTabContainer>
-
-    <div :class="[controlsStyle.grid, controlsStyle.center]">
       <div :class="controlsStyle.buttons">
         <UIButtonGroup>
           <UIButton @click="loadButton">
@@ -136,6 +130,7 @@ watch([start, end, () => activityStore.useRoutes], () => {
     <UserLogin v-if="continueLogin" @login="continueLogin($event)" />
     <LoadingStatus v-else :useRoutes="activityStore.useRoutes" :error="activityStore.error" />
     <UIVerticalTabContainer v-slot="{ makeTab }">
+      <SidebarDateFilter v-model:start="start" v-model:end="end" :tab="makeTab('dates')" />
       <SidebarFilter :tab="makeTab('filter')" />
       <SidebarGroupControl :tab="makeTab('group')" />
     </UIVerticalTabContainer>

From a4f67402559b9e46c91bc1a5b93321771c7d6549 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sun, 3 Aug 2025 00:50:06 +0200
Subject: [PATCH 30/50] Use arrays for watch parameters

---
 client/src/components/tooltip/ErrorTooltip.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/tooltip/ErrorTooltip.vue b/client/src/components/tooltip/ErrorTooltip.vue
index a63b7016..10b17255 100644
--- a/client/src/components/tooltip/ErrorTooltip.vue
+++ b/client/src/components/tooltip/ErrorTooltip.vue
@@ -54,8 +54,8 @@ function adjustMargins() {
 }
 
 watch(
-  () => errorMessage,
-  (errorMessage) => {
+  [() => errorMessage],
+  ([errorMessage]) => {
     if (errorMessage) {
       errorPosition.value = calculateTooltipPosition(errorMessage);
 

From 2340bedc121b9c81ac7dd7c73f6deb46c85925b8 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 31 Jul 2025 21:15:34 +0200
Subject: [PATCH 31/50] Add ghost layer of activities when showing routes

---
 client/src/App.vue                            |   1 +
 client/src/components/map/MapView.vue         |  26 ++--
 .../sidebar/SidebarDisplayOptions.vue         |  47 +++++++
 client/src/components/sidebar/SidebarForm.vue |   2 +
 client/src/components/ui/UICheckbox.vue       | 132 ++++++++++++++++++
 client/src/components/ui/UIIcon.vue           |  11 +-
 client/src/components/ui/material-icons.ts    |  12 ++
 client/src/components/ui/tabs/tab.module.scss |   4 +
 client/src/stores/ActivityStore.ts            |  28 +++-
 client/src/utils/map.ts                       |  11 +-
 10 files changed, 244 insertions(+), 30 deletions(-)
 create mode 100644 client/src/components/sidebar/SidebarDisplayOptions.vue
 create mode 100644 client/src/components/ui/UICheckbox.vue
 create mode 100644 client/src/components/ui/material-icons.ts

diff --git a/client/src/App.vue b/client/src/App.vue
index 0d5d8241..50d7d6f5 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -68,6 +68,7 @@ defineExpose({ mapItems: activityStore.mapItems });
         v-model:zoom="zoom"
         :bounds="geolocation"
         :mapItems="activityStore.mapItems"
+        :backgroundMapItems="activityStore.backgroundMapItems"
       />
     </Suspense>
   </div>
diff --git a/client/src/components/map/MapView.vue b/client/src/components/map/MapView.vue
index 76f34d39..a143e745 100644
--- a/client/src/components/map/MapView.vue
+++ b/client/src/components/map/MapView.vue
@@ -28,8 +28,9 @@ import { useMapStyle } from '@/MapStyle';
 import { addLayersToMap, applyMapItems, MapSourceLayer, useMapSelection } from '@/utils/map';
 import Viewport from '@/Viewport';
 
-const { mapItems, bounds } = defineProps<{
+const { mapItems, backgroundMapItems, bounds } = defineProps<{
   mapItems: readonly MapItem[];
+  backgroundMapItems: readonly MapItem[];
   bounds?: LngLatBoundsLike;
 }>();
 
@@ -93,19 +94,17 @@ onMounted(() => {
   map.resize();
 });
 
-watch(
-  () => mapItems,
-  (mapItems) => {
-    applyMapItems(map, mapItems, MapSourceLayer.LINES);
-  },
-);
+watch([() => mapItems], ([mapItems]) => {
+  applyMapItems(map, mapItems, MapSourceLayer.LINES);
+});
 
-watch(
-  () => selectionStore.selectedItems,
-  (selectedMapItems) => {
-    applyMapItems(map, selectedMapItems, MapSourceLayer.SELECTED);
-  },
-);
+watch([() => backgroundMapItems], ([backgroundMapItems]) => {
+  applyMapItems(map, backgroundMapItems, MapSourceLayer.BACKGROUND);
+});
+
+watch([() => selectionStore.selectedItems], ([selectedMapItems]) => {
+  applyMapItems(map, selectedMapItems, MapSourceLayer.SELECTED);
+});
 
 watch(mapStyleUrl, (style) => {
   map.setStyle(style + '?optimize=true');
@@ -244,6 +243,7 @@ function mapLoaded(map: MapboxMap): void {
   addLayersToMap(map, mapStyle.value);
   onTerrain();
 
+  applyMapItems(map, backgroundMapItems, MapSourceLayer.BACKGROUND);
   applyMapItems(map, mapItems, MapSourceLayer.LINES);
   applyMapItems(map, selectionStore.selectedItems, MapSourceLayer.SELECTED);
 }
diff --git a/client/src/components/sidebar/SidebarDisplayOptions.vue b/client/src/components/sidebar/SidebarDisplayOptions.vue
new file mode 100644
index 00000000..3692bf1e
--- /dev/null
+++ b/client/src/components/sidebar/SidebarDisplayOptions.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useActivityStore } from '@/stores/ActivityStore';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UICheckbox from '../ui/UICheckbox.vue';
+
+defineProps<{ tab: Tab<string> }>();
+
+const activityStore = useActivityStore();
+
+const summaryItems = computed(() =>
+  [
+    activityStore.useRoutes &&
+      activityStore.displayOptions.showActivities &&
+      'show past activities',
+  ].filter((string): string is string => !!string),
+);
+
+function reset() {
+  activityStore.displayOptions.showActivities = false;
+}
+</script>
+
+<template>
+  <UIVerticalTab
+    v-if="activityStore.useRoutes"
+    :tab
+    icon="visibility"
+    heading="Display"
+    :summaryItems
+    :resetDisabled="!activityStore.displayOptions.showActivities"
+    @reset="reset"
+  >
+    <template #expanded>
+      <UICheckbox
+        v-model="activityStore.displayOptions.showActivities"
+        title="Show past activities as a background layer"
+        :iconScale="0.8"
+      >
+        Show past activities
+      </UICheckbox>
+    </template>
+  </UIVerticalTab>
+</template>
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index 5b4bd314..bd300f01 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -19,6 +19,7 @@ import UIMultiText from '../ui/UIMultiText.vue';
 import controlsStyle from './controls.module.scss';
 import LoadingStatus from './LoadingStatus.vue';
 import SidebarDateFilter from './SidebarDateFilter.vue';
+import SidebarDisplayOptions from './SidebarDisplayOptions.vue';
 import SidebarFilter from './SidebarFilter.vue';
 import SidebarGroupControl from './SidebarGroupControl.vue';
 import UserLogin from './UserLogin.vue';
@@ -132,6 +133,7 @@ watch([start, end, () => activityStore.useRoutes], () => {
     <UIVerticalTabContainer v-slot="{ makeTab }">
       <SidebarDateFilter v-model:start="start" v-model:end="end" :tab="makeTab('dates')" />
       <SidebarFilter :tab="makeTab('filter')" />
+      <SidebarDisplayOptions :tab="makeTab('display')" />
       <SidebarGroupControl :tab="makeTab('group')" />
     </UIVerticalTabContainer>
   </aside>
diff --git a/client/src/components/ui/UICheckbox.vue b/client/src/components/ui/UICheckbox.vue
new file mode 100644
index 00000000..8a606670
--- /dev/null
+++ b/client/src/components/ui/UICheckbox.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useMaterialIcons } from './material-icons';
+import UISpinner from './UISpinner.vue';
+
+const {
+  uncheckedIcon: rawUncheckedIcon = 'check_box_outline_blank',
+  checkedIcon: rawCheckedIcon = 'check_box',
+  iconScale = 1,
+  loading = false,
+  loadingText,
+  disabled = false,
+} = defineProps<{
+  uncheckedIcon?: string;
+  checkedIcon?: string;
+  iconScale?: number;
+  loading?: boolean;
+  loadingText?: string;
+  disabled?: boolean;
+}>();
+
+const isChecked = defineModel<boolean>({ default: false });
+
+const uncheckedIcon = computed(() => `'${rawUncheckedIcon}'`);
+const checkedIcon = computed(() => `'${rawCheckedIcon}'`);
+
+useMaterialIcons();
+</script>
+
+<template>
+  <label :class="[$style.uiCheckbox]">
+    <!-- TODO: loading indicator -->
+    <UISpinner v-if="loading" size="tiny">
+      {{ loadingText }}
+    </UISpinner>
+    <input
+      v-else
+      v-model="isChecked"
+      :class="$style.input"
+      :disabled="loading || disabled"
+      type="checkbox"
+    />
+    <div :class="[$style.label, disabled && $style.disabled]">
+      <slot />
+    </div>
+  </label>
+</template>
+
+<style module lang="scss">
+button.button {
+  display: grid;
+  grid-template-areas: 'button';
+  align-items: center;
+
+  margin: 0.5rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-weak);
+  background-color: var(--background-strong);
+  color: var(--color-full);
+  max-width: max-content;
+  min-width: min-content;
+  min-height: 1.75rem;
+  font-size: 0.9em;
+
+  &:hover:not(:disabled) {
+    background-color: var(--background-weak);
+  }
+
+  &:disabled {
+    color: var(--color-weak);
+    border-color: var(--background-weak);
+  }
+
+  &:has(.buttonSpinner) .buttonContents {
+    visibility: hidden;
+  }
+}
+
+.uiCheckbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline: 0.5rem;
+
+  > .input {
+    appearance: none;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      font-family: 'Material Icons';
+      font-weight: normal;
+      font-style: normal;
+      font-size: calc(v-bind(iconScale) * 1.25rem);
+      width: 1.25rem;
+      overflow: hidden;
+      line-height: 1;
+      letter-spacing: normal;
+      text-transform: none;
+      display: inline-block;
+      white-space: nowrap;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: 'liga';
+      content: v-bind(uncheckedIcon);
+      color: var(--color-weak);
+      text-align: center;
+    }
+
+    &:hover::before {
+      color: var(--color-mid);
+    }
+
+    &:checked::before {
+      content: v-bind(checkedIcon);
+    }
+  }
+}
+
+.label {
+  min-height: 1.2em;
+  font-size: 0.9em;
+  font-weight: 600;
+
+  &.disabled {
+    color: var(--color-weak);
+  }
+}
+</style>
diff --git a/client/src/components/ui/UIIcon.vue b/client/src/components/ui/UIIcon.vue
index 35157d47..d6182258 100644
--- a/client/src/components/ui/UIIcon.vue
+++ b/client/src/components/ui/UIIcon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useHead } from '@unhead/vue';
+import { useMaterialIcons } from './material-icons';
 
 const {
   icon,
@@ -16,14 +16,7 @@ const {
   rotation?: number;
 }>();
 
-useHead({
-  link: [
-    {
-      href: 'https://fonts.googleapis.com/icon?family=Material+Icons',
-      rel: 'stylesheet',
-    },
-  ],
-});
+useMaterialIcons();
 </script>
 
 <template>
diff --git a/client/src/components/ui/material-icons.ts b/client/src/components/ui/material-icons.ts
new file mode 100644
index 00000000..69ae7333
--- /dev/null
+++ b/client/src/components/ui/material-icons.ts
@@ -0,0 +1,12 @@
+import { useHead } from '@unhead/vue';
+
+export function useMaterialIcons() {
+  useHead({
+    link: [
+      {
+        href: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=block',
+        rel: 'stylesheet',
+      },
+    ],
+  });
+}
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index bb82b787..f6bdc5bf 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -72,6 +72,10 @@
   font-style: italic;
 }
 
+.summarySpan {
+  white-space: nowrap;
+}
+
 .summaryRow {
   list-style: none;
 }
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 25b4cda4..7df4caa7 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -44,6 +44,10 @@ export interface LoadingStats {
   inCache: boolean;
 }
 
+export interface DisplayOptions {
+  showActivities: boolean;
+}
+
 export enum GroupLevel {
   OFF = '',
   WEEKLY_MO = 'WEEKLY_MO',
@@ -91,6 +95,10 @@ export const useActivityStore = defineStore('activity', () => {
   );
   watch(filterFields, saveFilterFields);
 
+  const displayOptions: DisplayOptions = reactive({
+    showActivities: false,
+  });
+
   const error = ref<string>();
 
   let socketController = new AbortController();
@@ -125,8 +133,9 @@ export const useActivityStore = defineStore('activity', () => {
 
   const parsedDeviceFilter = computed(() => parseDeviceFilter(filterModel.device));
 
-  const mapItemFilters = computed(() => {
+  const mapItemFilters = computed<((value: MapItem) => boolean)[]>(() => {
     const sportType = filterModel.sportType;
+
     return (
       [
         filterFields.has('sportType') &&
@@ -180,13 +189,16 @@ export const useActivityStore = defineStore('activity', () => {
     );
   });
 
-  const visibleMapItems = computed<readonly MapItem[]>(() => {
-    const filters = mapItemFilters.value;
+  const filterMapItems = <T extends MapItem>(mapItems: readonly T[]): readonly T[] =>
+    mapItemFilters.value.length
+      ? mapItems.filter((item) => mapItemFilters.value.every((filter) => filter(item)))
+      : mapItems;
 
-    return filters.length
-      ? allMapItems.value.filter((item) => filters.every((filter) => filter(item)))
-      : allMapItems.value;
-  });
+  const visibleMapItems = computed<readonly MapItem[]>(() => filterMapItems(allMapItems.value));
+
+  const backgroundMapItems = computed(() =>
+    useRoutes.value && displayOptions.showActivities ? filterMapItems(allActivities.value) : [],
+  );
 
   const groupedMapItems = computed<readonly MapItemGroup[]>(() =>
     groupMapItems(visibleMapItems.value, groupLevel.value),
@@ -491,6 +503,7 @@ export const useActivityStore = defineStore('activity', () => {
     activityStats,
     filterModel,
     filterFields,
+    displayOptions,
     useRoutes,
     groupLevel,
     error,
@@ -498,6 +511,7 @@ export const useActivityStore = defineStore('activity', () => {
     devices,
 
     mapItems: visibleMapItems,
+    backgroundMapItems,
     groupedMapItems,
     availableSports,
 
diff --git a/client/src/utils/map.ts b/client/src/utils/map.ts
index 9fc68075..e71729e0 100644
--- a/client/src/utils/map.ts
+++ b/client/src/utils/map.ts
@@ -24,6 +24,7 @@ export interface MapProperties {
 type RGB = [r: number, g: number, b: number];
 
 export enum MapSourceLayer {
+  BACKGROUND = 'background',
   LINES = 'lines',
   SELECTED = 'selected',
 }
@@ -67,6 +68,7 @@ interface LayerDef {
   source: string;
   color: ExpressionSpecification | string;
   width: ExpressionSpecification | number;
+  opacity?: number;
 }
 
 const lineWidth = fromZoom([5, 1], [14, 4], [22, 8]);
@@ -87,7 +89,13 @@ const colorsForStyle = (style: MapStyle): Record<'lines' | 'medium' | 'hot', RGB
 
 export const getLayersForStyle = (
   style: MapStyle,
-): Record<'lines' | 'medium' | 'hot' | 'selected', LayerDef> => ({
+): Record<'background' | 'lines' | 'medium' | 'hot' | 'selected', LayerDef> => ({
+  background: {
+    source: MapSourceLayer.BACKGROUND,
+    color: '#7f7f7f',
+    width: lineWidth,
+    opacity: 0.4,
+  },
   lines: {
     source: MapSourceLayer.LINES,
     color: colorOpacityFromZoom(colorsForStyle(style).lines, [5, 0.75], [10, 0.35]),
@@ -118,6 +126,7 @@ const buildLineLayer = (id: string, layer: LayerDef): LineLayerSpecification =>
   paint: {
     'line-color': layer.color,
     'line-width': layer.width,
+    'line-opacity': layer.opacity ?? 1,
   },
 });
 

From 19efd45ca24c55054b9cb252146bdfbef9f56df2 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 16:42:01 +0200
Subject: [PATCH 32/50] Add selection mode and selection focusing

---
 client/src/App.vue                            |  4 +-
 client/src/components/sidebar/FilterHelp.vue  |  3 +-
 .../src/components/sidebar/SelectionHelp.vue  | 47 ++++++++++
 .../src/components/sidebar/SidebarContent.vue | 10 ++-
 client/src/components/sidebar/SidebarForm.vue |  2 +
 client/src/components/sidebar/SidebarItem.vue | 20 ++++-
 .../components/sidebar/SidebarItemList.vue    |  1 +
 .../sidebar/SidebarSelectionControls.vue      | 87 +++++++++++++++++++
 .../src/components/sidebar/help.module.scss   | 21 +++++
 .../src/components/ui/tabs/UIVerticalTab.vue  |  4 +-
 client/src/components/ui/tabs/tab.module.scss | 21 +++--
 client/src/stores/ActivityStore.ts            |  6 --
 client/src/stores/SelectionStore.ts           | 52 +++++++++--
 client/src/utils/strings.ts                   |  5 ++
 14 files changed, 249 insertions(+), 34 deletions(-)
 create mode 100644 client/src/components/sidebar/SelectionHelp.vue
 create mode 100644 client/src/components/sidebar/SidebarSelectionControls.vue
 create mode 100644 client/src/components/sidebar/help.module.scss

diff --git a/client/src/App.vue b/client/src/App.vue
index 50d7d6f5..6fdc63de 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -7,6 +7,7 @@ import CollapsibleSidebar from './components/sidebar/CollapsibleSidebar.vue';
 import SidebarContent from './components/sidebar/SidebarContent.vue';
 import { SELECTED_SIDEBAR_ITEM_SELECTOR } from './components/sidebar/SidebarItem.vue';
 import { useActivityStore } from './stores/ActivityStore';
+import { useSelectionStore } from './stores/SelectionStore';
 import { getBestCenter } from './utils/midpoint';
 
 const { routes: routesInUrl = false } = defineProps<{ routes: boolean }>();
@@ -16,6 +17,7 @@ const router = useRouter();
 const map = ref<typeof MapView>();
 
 const activityStore = useActivityStore();
+const selectionStore = useSelectionStore();
 
 watch(
   [() => routesInUrl],
@@ -67,7 +69,7 @@ defineExpose({ mapItems: activityStore.mapItems });
         v-model:center="center"
         v-model:zoom="zoom"
         :bounds="geolocation"
-        :mapItems="activityStore.mapItems"
+        :mapItems="selectionStore.visibleItems"
         :backgroundMapItems="activityStore.backgroundMapItems"
       />
     </Suspense>
diff --git a/client/src/components/sidebar/FilterHelp.vue b/client/src/components/sidebar/FilterHelp.vue
index c01dceba..ce7e9cd4 100644
--- a/client/src/components/sidebar/FilterHelp.vue
+++ b/client/src/components/sidebar/FilterHelp.vue
@@ -4,6 +4,7 @@ import { type FilterField } from '@/types/FilterModel';
 
 import UIIcon from '../ui/UIIcon.vue';
 import UIModal from '../ui/UIModal.vue';
+import helpStyle from './help.module.scss';
 
 const showHelp = defineModel<boolean>({ default: true });
 
@@ -16,7 +17,7 @@ function toggleFilter(field: FilterField) {
 </script>
 
 <template>
-  <UIModal v-model="showHelp" heading="Filters" :class="$style.helpModal">
+  <UIModal v-model="showHelp" heading="Filters" :class="helpStyle.helpModal">
     <p>
       The following filters are available in {{ appName }}. Use the checkboxes to show/hide the
       filters in the filter panel.
diff --git a/client/src/components/sidebar/SelectionHelp.vue b/client/src/components/sidebar/SelectionHelp.vue
new file mode 100644
index 00000000..8516bdbb
--- /dev/null
+++ b/client/src/components/sidebar/SelectionHelp.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useActivityStore } from '@/stores/ActivityStore';
+
+import UIIcon from '../ui/UIIcon.vue';
+import UIModal from '../ui/UIModal.vue';
+import helpStyle from './help.module.scss';
+
+const showHelp = defineModel<boolean>({ default: true });
+
+const appName = import.meta.env.VITE_APP_NAME as string;
+const activityStore = useActivityStore();
+</script>
+
+<template>
+  <UIModal v-model="showHelp" heading="Selection" :class="helpStyle.helpModal">
+    <p>
+      {{ appName }} allows you to select one or more
+      {{ activityStore.useRoutes ? 'routes' : 'activities' }}. You can click on
+      {{ activityStore.useRoutes ? 'a route' : 'an activity' }} to select it. This will pan the map
+      if necessary to ensure it is visible. Double-click to zoom in on the route as much as
+      possible.
+    </p>
+    <p>
+      To select multiple {{ activityStore.useRoutes ? 'routes' : 'activities' }}, hold the
+      <kbd>Ctrl</kbd> or <kbd>⌘ Command</kbd> key when clicking on each additional
+      {{ activityStore.useRoutes ? 'route' : 'activity' }}. To select a range of
+      {{ activityStore.useRoutes ? 'routes' : 'activities' }} in the sidebar, hold the
+      <kbd>⇧ Shift</kbd> key when clicking.
+    </p>
+    <hr />
+    <p>
+      Enable multiple selection mode to mimic holding the <kbd>Ctrl</kbd>/<kbd>⌘ Command</kbd> key.
+      In this mode, clicking on {{ activityStore.useRoutes ? 'a route' : 'an activity' }} adds it to
+      the selection, or removes it if it is already in the selection. When this mode is active, a
+      checkbox is shown next to each {{ activityStore.useRoutes ? 'route' : 'activity' }} in the
+      sidebar list.
+    </p>
+    <hr />
+    <p>
+      The selection can be cleared with the <kbd><UIIcon inline icon="delete" /> Clear</kbd> button.
+      It can be focused with the <kbd><UIIcon inline icon="loupe" /> Focus</kbd> button, meaning
+      that all unselected {{ activityStore.useRoutes ? 'routes' : 'activities' }} are hidden.
+      Clicking on <kbd><UIIcon inline icon="all_out" /> Release</kbd> will undo the last focus,
+      unhiding all hidden {{ activityStore.useRoutes ? 'routes' : 'activities' }}.
+    </p>
+  </UIModal>
+</template>
diff --git a/client/src/components/sidebar/SidebarContent.vue b/client/src/components/sidebar/SidebarContent.vue
index b6ecf99c..81ca1a86 100644
--- a/client/src/components/sidebar/SidebarContent.vue
+++ b/client/src/components/sidebar/SidebarContent.vue
@@ -27,7 +27,9 @@ const selectionStore = useSelectionStore();
 const expandableGroups = provideExpandableGroups();
 const areAllExpanded = expandableGroups.areAllExpanded;
 
-const totals = computed(() => combineStats(activityStore.mapItems, selectionStore.selectedItems));
+const totals = computed(() =>
+  combineStats(selectionStore.visibleItems, selectionStore.selectedItems),
+);
 
 const sidebarItemListRef = ref<HTMLElement>();
 
@@ -55,7 +57,7 @@ watch(selectionStore.selected, async (selected) => {
   <div :class="$style.sidebarContent">
     <SidebarForm />
     <div
-      v-if="activityStore.mapItems?.length"
+      v-if="selectionStore.visibleItems?.length"
       :class="[$style.sidebarTotalsContainer, stickyTotals && $style.stickyTotals]"
     >
       <a
@@ -74,7 +76,7 @@ watch(selectionStore.selected, async (selected) => {
     <div ref="sidebarItemListRef">
       <template v-if="activityStore.groupLevel">
         <SidebarGroup
-          v-for="group of activityStore.groupedMapItems"
+          v-for="group of selectionStore.visibleGroupedItems"
           :key="group.date"
           :group
           @zoom-to-selected="emit('zoomToSelected')"
@@ -82,7 +84,7 @@ watch(selectionStore.selected, async (selected) => {
       </template>
       <SidebarItemList
         v-else
-        :items="activityStore.mapItems"
+        :items="selectionStore.visibleItems"
         @zoom-to-selected="emit('zoomToSelected')"
         @scroll-to-selected="emit('scrollToSelected')"
       />
diff --git a/client/src/components/sidebar/SidebarForm.vue b/client/src/components/sidebar/SidebarForm.vue
index bd300f01..f02aaea2 100644
--- a/client/src/components/sidebar/SidebarForm.vue
+++ b/client/src/components/sidebar/SidebarForm.vue
@@ -22,6 +22,7 @@ import SidebarDateFilter from './SidebarDateFilter.vue';
 import SidebarDisplayOptions from './SidebarDisplayOptions.vue';
 import SidebarFilter from './SidebarFilter.vue';
 import SidebarGroupControl from './SidebarGroupControl.vue';
+import SidebarSelectionControls from './SidebarSelectionControls.vue';
 import UserLogin from './UserLogin.vue';
 import UserSettings from './UserSettings.vue';
 
@@ -135,6 +136,7 @@ watch([start, end, () => activityStore.useRoutes], () => {
       <SidebarFilter :tab="makeTab('filter')" />
       <SidebarDisplayOptions :tab="makeTab('display')" />
       <SidebarGroupControl :tab="makeTab('group')" />
+      <SidebarSelectionControls :tab="makeTab('selection')" />
     </UIVerticalTabContainer>
   </aside>
 
diff --git a/client/src/components/sidebar/SidebarItem.vue b/client/src/components/sidebar/SidebarItem.vue
index dba6323b..2df7fc17 100644
--- a/client/src/components/sidebar/SidebarItem.vue
+++ b/client/src/components/sidebar/SidebarItem.vue
@@ -13,6 +13,7 @@ import { formatFullDateTime, formatSplitDate } from '@/utils/numberFormat';
 
 import StravaEmoji from '../strava-symbol/StravaEmoji.vue';
 import StravaIcon from '../strava-symbol/StravaIcon.vue';
+import UIIcon from '../ui/UIIcon.vue';
 import UISpinner from '../ui/UISpinner.vue';
 import SidebarItemLink from './SidebarItemLink.vue';
 import SidebarItemStats from './SidebarItemStats.vue';
@@ -26,10 +27,12 @@ const {
   item,
   selected = false,
   expanded = true,
+  showCheckbox = false,
 } = defineProps<{
   item: MapItem;
   selected?: boolean;
   expanded?: boolean;
+  showCheckbox?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -99,6 +102,13 @@ const statsIcons = computed(() =>
     @touchstart="emit('touchstart')"
     @dblclick="emit('dblclick', $event)"
   >
+    <UIIcon
+      v-if="showCheckbox"
+      :class="$style.checkbox"
+      :icon="selected ? 'check_circle_outline' : 'radio_button_unchecked'"
+      inline
+      large
+    />
     <StravaActivitySymbol v-if="expanded" :class="$style.stravaIcon" :sportType="item.type" />
     <div :class="$style.sidebarItemInfo">
       <div :class="$style.sidebarItemName" v-text="item.name" />
@@ -119,7 +129,7 @@ const statsIcons = computed(() =>
 .sidebarItem {
   cursor: pointer;
   font-size: 14px;
-  padding-left: 8px;
+  padding-inline-start: 8px;
   display: flex;
   align-items: center;
   gap: 0 4px;
@@ -134,6 +144,14 @@ const statsIcons = computed(() =>
     background: var(--background-strong);
   }
 
+  &:has(.checkbox) {
+    padding-inline-start: 0;
+  }
+
+  .checkbox {
+    margin-inline: 4px;
+  }
+
   &.selected {
     background: var(--background-weak);
   }
diff --git a/client/src/components/sidebar/SidebarItemList.vue b/client/src/components/sidebar/SidebarItemList.vue
index 09358d2a..c4b4208f 100644
--- a/client/src/components/sidebar/SidebarItemList.vue
+++ b/client/src/components/sidebar/SidebarItemList.vue
@@ -37,6 +37,7 @@ function click(id: string, e: MouseEvent): void {
       :key="item.id"
       :item
       :selected="selectionStore.selected.has(item.id)"
+      :showCheckbox="selectionStore.selectionMode"
       @click="click(item.id, $event)"
       @dblclick="forceSelect()"
     />
diff --git a/client/src/components/sidebar/SidebarSelectionControls.vue b/client/src/components/sidebar/SidebarSelectionControls.vue
new file mode 100644
index 00000000..09efa934
--- /dev/null
+++ b/client/src/components/sidebar/SidebarSelectionControls.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useActivityStore } from '@/stores/ActivityStore';
+import { useSelectionStore } from '@/stores/SelectionStore';
+import {
+  countFocusedActivities,
+  countFocusedRoutes,
+  countSelectedActivities,
+  countSelectedRoutes,
+} from '@/utils/strings';
+
+import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
+import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
+import UIButton from '../ui/UIButton.vue';
+import UIButtonGroup from '../ui/UIButtonGroup.vue';
+import UICheckbox from '../ui/UICheckbox.vue';
+import SelectionHelp from './SelectionHelp.vue';
+
+defineProps<{ tab: Tab<string> }>();
+
+const activityStore = useActivityStore();
+const selectionStore = useSelectionStore();
+
+const summaryItems = computed(() =>
+  [
+    selectionStore.lockedSelection?.size &&
+      (activityStore.useRoutes
+        ? countFocusedRoutes(selectionStore.lockedSelection.size)
+        : countFocusedActivities(selectionStore.lockedSelection.size)),
+    selectionStore.selected.size &&
+      (activityStore.useRoutes
+        ? countSelectedRoutes(selectionStore.selected.size)
+        : countSelectedActivities(selectionStore.selected.size)),
+  ].filter((string): string is string => !!string),
+);
+
+function reset() {
+  selectionStore.selectionMode = false;
+  selectionStore.releaseSelection();
+  selectionStore.selectItem(undefined, 'options');
+}
+
+const showHelp = ref(false);
+</script>
+
+<template>
+  <UIVerticalTab
+    :tab
+    icon="done_all"
+    heading="Selection"
+    :summaryItems
+    summaryEmpty="None selected"
+    :resetDisabled="
+      selectionStore.selectionMode === false &&
+      !selectionStore.lockedSelection &&
+      !selectionStore.selected.size
+    "
+    @reset="reset"
+    @help="showHelp = true"
+  >
+    <template #expanded>
+      <UICheckbox v-model="selectionStore.selectionMode">Multiple selection mode</UICheckbox>
+      <UIButtonGroup>
+        <UIButton
+          :disabled="selectionStore.selected.size === 0"
+          icon="delete"
+          @click="selectionStore.lockSelection"
+          >Clear</UIButton
+        >
+        <UIButton
+          :disabled="selectionStore.selected.size === 0"
+          icon="loupe"
+          @click="selectionStore.lockSelection"
+          >Focus</UIButton
+        >
+        <UIButton
+          v-if="selectionStore.lockedSelection"
+          icon="all_out"
+          @click="selectionStore.releaseSelection"
+          >Release</UIButton
+        >
+      </UIButtonGroup>
+    </template>
+  </UIVerticalTab>
+  <SelectionHelp v-model="showHelp" />
+</template>
diff --git a/client/src/components/sidebar/help.module.scss b/client/src/components/sidebar/help.module.scss
new file mode 100644
index 00000000..adc27474
--- /dev/null
+++ b/client/src/components/sidebar/help.module.scss
@@ -0,0 +1,21 @@
+.helpModal {
+  width: min(35em, calc(100vw - 4rem));
+  max-height: 90vh;
+
+  dl {
+    > dt {
+      font-weight: 600;
+    }
+
+    > dd {
+      margin-left: 1em;
+      margin-block: 0.5em;
+    }
+  }
+
+  kbd {
+    font-family: inherit;
+    font-weight: bold;
+    white-space: nowrap;
+  }
+}
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index fac86683..ffc89f3a 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -43,7 +43,7 @@ function onToggle(event: ToggleEvent) {
         <slot :isOpen="tab.isOpen" :toggle="tab.toggle" :select="tab.select">
           <UIButton
             v-if="onHelp && tab.isOpen"
-            :class="style.helpButton"
+            :class="[style.topRightButton, style.helpButton]"
             ghost
             icon="help"
             @click="onHelp()"
@@ -51,7 +51,7 @@ function onToggle(event: ToggleEvent) {
           <UIButton
             v-if="onReset && tab.isOpen"
             :disabled="resetDisabled"
-            :class="style.resetButton"
+            :class="style.topRightButton"
             ghost
             icon="settings_backup_restore"
             @click="onReset()"
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index f6bdc5bf..47ff23ee 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -7,6 +7,16 @@
   display: grid;
   grid-template-columns: subgrid;
   grid-column: span 2;
+
+  .topRightButton {
+    float: inline-end;
+    margin-inline-start: 0.25rem !important;
+    cursor: pointer;
+  }
+
+  .helpButton {
+    cursor: help;
+  }
 }
 
 .tab {
@@ -79,14 +89,3 @@
 .summaryRow {
   list-style: none;
 }
-
-.helpButton {
-  float: right;
-  cursor: help;
-  margin-inline: 0.5rem;
-}
-
-.resetButton {
-  float: right;
-  margin-inline: 0.5rem;
-}
diff --git a/client/src/stores/ActivityStore.ts b/client/src/stores/ActivityStore.ts
index 7df4caa7..05f4141a 100644
--- a/client/src/stores/ActivityStore.ts
+++ b/client/src/stores/ActivityStore.ts
@@ -18,7 +18,6 @@ import { computed, reactive, type Ref, ref, shallowRef, toRef, watch } from 'vue
 import Socket from '@/socket';
 import { type FilterField, type FilterModel, parseDeviceFilter } from '@/types/FilterModel';
 import config from '@/utils/config';
-import { groupMapItems } from '@/utils/groupMapItems';
 import {
   appendCachedActivities,
   appendCachedRoutes,
@@ -200,10 +199,6 @@ export const useActivityStore = defineStore('activity', () => {
     useRoutes.value && displayOptions.showActivities ? filterMapItems(allActivities.value) : [],
   );
 
-  const groupedMapItems = computed<readonly MapItemGroup[]>(() =>
-    groupMapItems(visibleMapItems.value, groupLevel.value),
-  );
-
   /** A map of all gear, where null represents gear that is not yet fetched */
   const gear = reactive(new Map<string, Gear | null>());
 
@@ -512,7 +507,6 @@ export const useActivityStore = defineStore('activity', () => {
 
     mapItems: visibleMapItems,
     backgroundMapItems,
-    groupedMapItems,
     availableSports,
 
     cancelLoading,
diff --git a/client/src/stores/SelectionStore.ts b/client/src/stores/SelectionStore.ts
index 77dad70b..6d9b6208 100644
--- a/client/src/stores/SelectionStore.ts
+++ b/client/src/stores/SelectionStore.ts
@@ -1,19 +1,33 @@
 import { defineStore } from 'pinia';
 import { computed, reactive, ref } from 'vue';
 
-import { useActivityStore } from './ActivityStore';
+import { groupMapItems } from '@/utils/groupMapItems';
 
-export type SelectionUpdateSource = 'map' | 'list';
+import { type MapItemGroup, useActivityStore } from './ActivityStore';
+
+export type SelectionUpdateSource = 'map' | 'list' | 'options';
 
 export const useSelectionStore = defineStore('selection', () => {
   const activityStore = useActivityStore();
 
+  const selectionMode = ref(false);
+
   const selected = reactive<Set<string>>(new Set());
+  const lockedSelection = ref<ReadonlySet<string>>();
 
-  const selectedItems = computed(() =>
-    activityStore.mapItems.filter((item) => selected.has(item.id)),
+  const visibleItems = computed(() => {
+    const value = lockedSelection.value;
+    return value
+      ? activityStore.mapItems.filter((item) => value.has(item.id))
+      : activityStore.mapItems;
+  });
+
+  const visibleGroupedItems = computed<readonly MapItemGroup[]>(() =>
+    groupMapItems(visibleItems.value, activityStore.groupLevel),
   );
 
+  const selectedItems = computed(() => visibleItems.value.filter((item) => selected.has(item.id)));
+
   const updateSource = ref<SelectionUpdateSource>();
 
   let base: ReadonlySet<string> = new Set();
@@ -25,10 +39,10 @@ export const useSelectionStore = defineStore('selection', () => {
 
     const limits = new Set<string>([...base, ...to]);
 
-    const start = activityStore.mapItems.findIndex(({ id }) => limits.has(id));
+    const start = visibleItems.value.findIndex(({ id }) => limits.has(id));
     if (start === -1) return limits;
-    const end = activityStore.mapItems.findLastIndex(({ id }) => limits.has(id));
-    return new Set(activityStore.mapItems.slice(start, end + 1).map(({ id }) => id));
+    const end = visibleItems.value.findLastIndex(({ id }) => limits.has(id));
+    return new Set(visibleItems.value.slice(start, end + 1).map(({ id }) => id));
   }
 
   function toggleAll(ids: string[]) {
@@ -48,6 +62,7 @@ export const useSelectionStore = defineStore('selection', () => {
    * @param source The source of the event:
    *                 `map` means a click on the map.
    *                 `list` means a click in the list in the sidebar.
+   *                 `options` means a click in the selection options panel.
    * @param ctrlKey Whether the ctrl/meta key is pressed.
    *                When true, the selection is toggled rather than replaced.
    * @param shiftKey Whether the shift key is pressed.
@@ -63,7 +78,7 @@ export const useSelectionStore = defineStore('selection', () => {
   ) {
     const flatIds = [ids].flat();
 
-    if (!ctrlKey) {
+    if (!ctrlKey && !selectionMode.value) {
       selected.clear();
     }
 
@@ -87,11 +102,32 @@ export const useSelectionStore = defineStore('selection', () => {
     updateSource.value = source;
   }
 
+  function lockSelection() {
+    if (selected.size === 0) return;
+    lockedSelection.value = new Set(selected);
+    selected.clear();
+    updateSource.value = 'options';
+  }
+
+  function releaseSelection() {
+    if (!lockedSelection.value) return;
+    selected.clear();
+    lockedSelection.value.forEach((id) => selected.add(id));
+    lockedSelection.value = undefined;
+    updateSource.value = 'options';
+  }
+
   return {
+    selectionMode,
     selected,
     selectedItems,
     updateSource,
+    lockedSelection,
+    visibleItems,
+    visibleGroupedItems,
 
     select,
+    lockSelection,
+    releaseSelection,
   };
 });
diff --git a/client/src/utils/strings.ts b/client/src/utils/strings.ts
index bd46598e..60c906bb 100644
--- a/client/src/utils/strings.ts
+++ b/client/src/utils/strings.ts
@@ -32,6 +32,11 @@ export const countSelectedActivities = (n: number | null) =>
 export const countSelectedRoutes = (n: number | null) =>
   count(n, 'route selected', 'routes selected');
 
+export const countFocusedActivities = (n: number | null) =>
+  count(n, 'activity focused', 'activities focused');
+
+export const countFocusedRoutes = (n: number | null) => count(n, 'route focused', 'routes focused');
+
 export const countOtherSessions = (n: number | null) => count(n, 'other session');
 
 export const capitalise = (string: string) => string.slice(0, 1).toUpperCase() + string.slice(1);

From 18b55219b247a8692875b0137819c7c6112964cd Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 16:53:00 +0200
Subject: [PATCH 33/50] Use separate focused selections for routes and
 activities

---
 client/src/stores/SelectionStore.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/client/src/stores/SelectionStore.ts b/client/src/stores/SelectionStore.ts
index 6d9b6208..293552a4 100644
--- a/client/src/stores/SelectionStore.ts
+++ b/client/src/stores/SelectionStore.ts
@@ -13,7 +13,20 @@ export const useSelectionStore = defineStore('selection', () => {
   const selectionMode = ref(false);
 
   const selected = reactive<Set<string>>(new Set());
-  const lockedSelection = ref<ReadonlySet<string>>();
+
+  // The locked selection is kept separate for routes and non-routes, to allow customisation of the ghost mode
+  const lockedSelections = reactive<Map<typeof activityStore.useRoutes, ReadonlySet<string>>>(
+    new Map(),
+  );
+  const lockedSelection = computed({
+    get() {
+      return lockedSelections.get(activityStore.useRoutes);
+    },
+    set(value: ReadonlySet<string> | undefined) {
+      if (value) lockedSelections.set(activityStore.useRoutes, value);
+      else lockedSelections.delete(activityStore.useRoutes);
+    },
+  });
 
   const visibleItems = computed(() => {
     const value = lockedSelection.value;
@@ -122,6 +135,7 @@ export const useSelectionStore = defineStore('selection', () => {
     selected,
     selectedItems,
     updateSource,
+    lockedSelections,
     lockedSelection,
     visibleItems,
     visibleGroupedItems,

From a797f024e9c50bd87783b8ef5d9c9fd704e64ef1 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 17:08:54 +0200
Subject: [PATCH 34/50] Fix clear button

---
 client/src/components/sidebar/SidebarSelectionControls.vue | 4 ++--
 client/src/stores/SelectionStore.ts                        | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/sidebar/SidebarSelectionControls.vue b/client/src/components/sidebar/SidebarSelectionControls.vue
index 09efa934..d7a89877 100644
--- a/client/src/components/sidebar/SidebarSelectionControls.vue
+++ b/client/src/components/sidebar/SidebarSelectionControls.vue
@@ -38,7 +38,7 @@ const summaryItems = computed(() =>
 function reset() {
   selectionStore.selectionMode = false;
   selectionStore.releaseSelection();
-  selectionStore.selectItem(undefined, 'options');
+  selectionStore.clearSelection();
 }
 
 const showHelp = ref(false);
@@ -65,7 +65,7 @@ const showHelp = ref(false);
         <UIButton
           :disabled="selectionStore.selected.size === 0"
           icon="delete"
-          @click="selectionStore.lockSelection"
+          @click="selectionStore.clearSelection"
           >Clear</UIButton
         >
         <UIButton
diff --git a/client/src/stores/SelectionStore.ts b/client/src/stores/SelectionStore.ts
index 293552a4..b6f70310 100644
--- a/client/src/stores/SelectionStore.ts
+++ b/client/src/stores/SelectionStore.ts
@@ -130,6 +130,11 @@ export const useSelectionStore = defineStore('selection', () => {
     updateSource.value = 'options';
   }
 
+  function clearSelection() {
+    selected.clear();
+    updateSource.value = 'options';
+  }
+
   return {
     selectionMode,
     selected,
@@ -143,5 +148,6 @@ export const useSelectionStore = defineStore('selection', () => {
     select,
     lockSelection,
     releaseSelection,
+    clearSelection,
   };
 });

From 673bbe436bcadf3bb1e935933cc496f1241837d5 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 17:09:23 +0200
Subject: [PATCH 35/50] Repeat summary in expanded view for selection block

---
 .../sidebar/SidebarSelectionControls.vue      |  9 ++++++-
 client/src/components/ui/UIUnbrokenList.vue   | 25 +++++++++++++++++++
 .../src/components/ui/tabs/UIVerticalTab.vue  | 14 +++--------
 client/src/components/ui/tabs/tab.module.scss |  4 ---
 4 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 client/src/components/ui/UIUnbrokenList.vue

diff --git a/client/src/components/sidebar/SidebarSelectionControls.vue b/client/src/components/sidebar/SidebarSelectionControls.vue
index d7a89877..6bc8362d 100644
--- a/client/src/components/sidebar/SidebarSelectionControls.vue
+++ b/client/src/components/sidebar/SidebarSelectionControls.vue
@@ -10,11 +10,13 @@ import {
   countSelectedRoutes,
 } from '@/utils/strings';
 
+import tabStyle from '../ui/tabs/tab.module.scss';
 import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
 import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
 import UICheckbox from '../ui/UICheckbox.vue';
+import UIUnbrokenList from '../ui/UIUnbrokenList.vue';
 import SelectionHelp from './SelectionHelp.vue';
 
 defineProps<{ tab: Tab<string> }>();
@@ -42,6 +44,8 @@ function reset() {
 }
 
 const showHelp = ref(false);
+
+const summaryEmpty = 'None selected';
 </script>
 
 <template>
@@ -50,7 +54,7 @@ const showHelp = ref(false);
     icon="done_all"
     heading="Selection"
     :summaryItems
-    summaryEmpty="None selected"
+    :summaryEmpty
     :resetDisabled="
       selectionStore.selectionMode === false &&
       !selectionStore.lockedSelection &&
@@ -60,6 +64,9 @@ const showHelp = ref(false);
     @help="showHelp = true"
   >
     <template #expanded>
+      <UIUnbrokenList :items="summaryItems" :class="tabStyle.summary">{{
+        summaryEmpty
+      }}</UIUnbrokenList>
       <UICheckbox v-model="selectionStore.selectionMode">Multiple selection mode</UICheckbox>
       <UIButtonGroup>
         <UIButton
diff --git a/client/src/components/ui/UIUnbrokenList.vue b/client/src/components/ui/UIUnbrokenList.vue
new file mode 100644
index 00000000..91c4c3b4
--- /dev/null
+++ b/client/src/components/ui/UIUnbrokenList.vue
@@ -0,0 +1,25 @@
+<!--
+  A simple component to render a list of items without breaking individual items onto new lines.
+
+  The default slot is used to provide a fallback when there are no items to show.
+-->
+<script setup lang="ts">
+const { items, empty } = defineProps<{ items: string[] | undefined; empty?: string }>();
+</script>
+
+<template>
+  <span
+    ><template v-if="items?.length">
+      <template v-for="(item, i) of items" :key="i"
+        ><span :class="$style.summarySpan">{{ item }}</span
+        ><template v-if="i + 1 < items.length">, </template></template
+      ></template
+    ><slot v-else>{{ empty }}</slot></span
+  >
+</template>
+
+<style lang="scss" module>
+.summarySpan {
+  white-space: nowrap;
+}
+</style>
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index ffc89f3a..142b74a0 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends string">
 import UIButton from '../UIButton.vue';
 import UIIcon from '../UIIcon.vue';
+import UIUnbrokenList from '../UIUnbrokenList.vue';
 import style from './tab.module.scss';
 import { type Tab } from './UIVerticalTabContainer.vue';
 
@@ -59,16 +60,9 @@ function onToggle(event: ToggleEvent) {
           <span v-if="heading" :class="style.heading">{{ heading }}</span>
           {{ ' ' }}
           <span v-if="!tab.isOpen" :class="style.summary">
-            <slot name="summary" :select="tab.select"
-              ><template v-if="summaryItems"
-                ><template v-if="summaryItems.length">
-                  <template v-for="(summaryItem, i) of summaryItems" :key="i"
-                    ><span :class="style.summarySpan">{{ summaryItem }}</span
-                    ><template v-if="i + 1 < summaryItems.length">, </template></template
-                  ></template
-                ><template v-else>{{ summaryEmpty ?? summary }}</template></template
-              ><template v-else>{{ summary }}</template></slot
-            >
+            <slot name="summary" :select="tab.select">
+              <UIUnbrokenList :items="summaryItems">{{ summaryEmpty ?? summary }}</UIUnbrokenList>
+            </slot>
           </span>
         </slot>
       </summary>
diff --git a/client/src/components/ui/tabs/tab.module.scss b/client/src/components/ui/tabs/tab.module.scss
index 47ff23ee..9a245581 100644
--- a/client/src/components/ui/tabs/tab.module.scss
+++ b/client/src/components/ui/tabs/tab.module.scss
@@ -82,10 +82,6 @@
   font-style: italic;
 }
 
-.summarySpan {
-  white-space: nowrap;
-}
-
 .summaryRow {
   list-style: none;
 }

From 4a12b37a71cf79f7352e9a96f304c519bc1c3f79 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 17:24:29 +0200
Subject: [PATCH 36/50] Add option to repeat summary in expanded view for UI
 vertical tabs

---
 .../components/sidebar/SidebarDateFilter.vue  |  2 +-
 .../sidebar/SidebarDisplayOptions.vue         |  4 +--
 .../src/components/sidebar/SidebarFilter.vue  |  2 +-
 .../sidebar/SidebarSelectionControls.vue      | 14 +++-----
 .../src/components/ui/tabs/UIVerticalTab.vue  | 32 ++++++++++++++++---
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/client/src/components/sidebar/SidebarDateFilter.vue b/client/src/components/sidebar/SidebarDateFilter.vue
index f7475989..013ff0d8 100644
--- a/client/src/components/sidebar/SidebarDateFilter.vue
+++ b/client/src/components/sidebar/SidebarDateFilter.vue
@@ -38,7 +38,7 @@ const summary = computed(() => {
     :tab
     icon="date_range"
     heading="Dates"
-    :summaryItems="[summary]"
+    :summary="[summary]"
     :resetDisabled="!start && !end"
     @reset="reset"
   >
diff --git a/client/src/components/sidebar/SidebarDisplayOptions.vue b/client/src/components/sidebar/SidebarDisplayOptions.vue
index 3692bf1e..b7d20a36 100644
--- a/client/src/components/sidebar/SidebarDisplayOptions.vue
+++ b/client/src/components/sidebar/SidebarDisplayOptions.vue
@@ -11,7 +11,7 @@ defineProps<{ tab: Tab<string> }>();
 
 const activityStore = useActivityStore();
 
-const summaryItems = computed(() =>
+const summary = computed(() =>
   [
     activityStore.useRoutes &&
       activityStore.displayOptions.showActivities &&
@@ -30,7 +30,7 @@ function reset() {
     :tab
     icon="visibility"
     heading="Display"
-    :summaryItems
+    :summary
     :resetDisabled="!activityStore.displayOptions.showActivities"
     @reset="reset"
   >
diff --git a/client/src/components/sidebar/SidebarFilter.vue b/client/src/components/sidebar/SidebarFilter.vue
index ab4403ed..44e4176c 100644
--- a/client/src/components/sidebar/SidebarFilter.vue
+++ b/client/src/components/sidebar/SidebarFilter.vue
@@ -234,7 +234,7 @@ const showHelp = ref(false);
     icon="filter_alt"
     :expandedContentClass="$style.content"
     heading="Filter"
-    :summaryItems="filterSummary"
+    :summary="filterSummary"
     summaryEmpty="none set"
     @help="showHelp = true"
   >
diff --git a/client/src/components/sidebar/SidebarSelectionControls.vue b/client/src/components/sidebar/SidebarSelectionControls.vue
index 6bc8362d..cd234b18 100644
--- a/client/src/components/sidebar/SidebarSelectionControls.vue
+++ b/client/src/components/sidebar/SidebarSelectionControls.vue
@@ -10,13 +10,11 @@ import {
   countSelectedRoutes,
 } from '@/utils/strings';
 
-import tabStyle from '../ui/tabs/tab.module.scss';
 import UIVerticalTab from '../ui/tabs/UIVerticalTab.vue';
 import { type Tab } from '../ui/tabs/UIVerticalTabContainer.vue';
 import UIButton from '../ui/UIButton.vue';
 import UIButtonGroup from '../ui/UIButtonGroup.vue';
 import UICheckbox from '../ui/UICheckbox.vue';
-import UIUnbrokenList from '../ui/UIUnbrokenList.vue';
 import SelectionHelp from './SelectionHelp.vue';
 
 defineProps<{ tab: Tab<string> }>();
@@ -24,7 +22,7 @@ defineProps<{ tab: Tab<string> }>();
 const activityStore = useActivityStore();
 const selectionStore = useSelectionStore();
 
-const summaryItems = computed(() =>
+const summary = computed(() =>
   [
     selectionStore.lockedSelection?.size &&
       (activityStore.useRoutes
@@ -44,8 +42,6 @@ function reset() {
 }
 
 const showHelp = ref(false);
-
-const summaryEmpty = 'None selected';
 </script>
 
 <template>
@@ -53,8 +49,9 @@ const summaryEmpty = 'None selected';
     :tab
     icon="done_all"
     heading="Selection"
-    :summaryItems
-    :summaryEmpty
+    :summary
+    summaryEmpty="None selected"
+    showSummaryWhenExpanded
     :resetDisabled="
       selectionStore.selectionMode === false &&
       !selectionStore.lockedSelection &&
@@ -64,9 +61,6 @@ const summaryEmpty = 'None selected';
     @help="showHelp = true"
   >
     <template #expanded>
-      <UIUnbrokenList :items="summaryItems" :class="tabStyle.summary">{{
-        summaryEmpty
-      }}</UIUnbrokenList>
       <UICheckbox v-model="selectionStore.selectionMode">Multiple selection mode</UICheckbox>
       <UIButtonGroup>
         <UIButton
diff --git a/client/src/components/ui/tabs/UIVerticalTab.vue b/client/src/components/ui/tabs/UIVerticalTab.vue
index 142b74a0..10ab4428 100644
--- a/client/src/components/ui/tabs/UIVerticalTab.vue
+++ b/client/src/components/ui/tabs/UIVerticalTab.vue
@@ -1,23 +1,36 @@
 <script setup lang="ts" generic="T extends string">
+import { computed } from 'vue';
+
 import UIButton from '../UIButton.vue';
 import UIIcon from '../UIIcon.vue';
 import UIUnbrokenList from '../UIUnbrokenList.vue';
 import style from './tab.module.scss';
 import { type Tab } from './UIVerticalTabContainer.vue';
 
-const { tab } = defineProps<{
+const {
+  tab,
+  summary: rawSummary,
+  summaryEmpty,
+} = defineProps<{
   icon?: string;
   tab: Tab<T>;
   expandedContentClass?: unknown;
   heading?: string;
-  summary?: string;
-  summaryItems?: string[];
+  summary?: string | string[];
   summaryEmpty?: string;
   resetDisabled?: boolean;
+  showSummaryWhenExpanded?: boolean;
   onHelp?: () => void;
   onReset?: () => void;
 }>();
 
+defineSlots<{
+  icon(): unknown;
+  default(props: { isOpen: boolean; toggle(): void; select(): void }): unknown;
+  summary(props: { select?: () => void }): unknown;
+  expanded(props: { toggle(): void }): unknown;
+}>();
+
 function preventIfSelected(event: MouseEvent) {
   if (window.getSelection()?.type === 'Range') {
     event.preventDefault();
@@ -27,6 +40,12 @@ function preventIfSelected(event: MouseEvent) {
 function onToggle(event: ToggleEvent) {
   tab.setOpen(event.newState === 'open');
 }
+
+const summary = computed(() =>
+  typeof rawSummary === 'string'
+    ? { items: [], fallback: rawSummary }
+    : { items: rawSummary, fallback: summaryEmpty },
+);
 </script>
 
 <template>
@@ -61,12 +80,17 @@ function onToggle(event: ToggleEvent) {
           {{ ' ' }}
           <span v-if="!tab.isOpen" :class="style.summary">
             <slot name="summary" :select="tab.select">
-              <UIUnbrokenList :items="summaryItems">{{ summaryEmpty ?? summary }}</UIUnbrokenList>
+              <UIUnbrokenList :items="summary.items">{{ summary.fallback }}</UIUnbrokenList>
             </slot>
           </span>
         </slot>
       </summary>
       <div :class="expandedContentClass">
+        <span v-if="showSummaryWhenExpanded" :class="style.summary">
+          <slot name="summary">
+            <UIUnbrokenList :items="summary.items">{{ summary.fallback }}</UIUnbrokenList>
+          </slot>
+        </span>
         <slot name="expanded" :toggle="tab.toggle" />
       </div>
     </details>

From f77e1cfc4f0602274700e9bbb5cc7d6da7c4189d Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 17:49:28 +0200
Subject: [PATCH 37/50] Rename selectionMode to multiSelectionMode

---
 client/src/components/sidebar/SidebarItemList.vue          | 2 +-
 client/src/components/sidebar/SidebarSelectionControls.vue | 6 +++---
 client/src/stores/SelectionStore.ts                        | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/sidebar/SidebarItemList.vue b/client/src/components/sidebar/SidebarItemList.vue
index c4b4208f..c23492e9 100644
--- a/client/src/components/sidebar/SidebarItemList.vue
+++ b/client/src/components/sidebar/SidebarItemList.vue
@@ -37,7 +37,7 @@ function click(id: string, e: MouseEvent): void {
       :key="item.id"
       :item
       :selected="selectionStore.selected.has(item.id)"
-      :showCheckbox="selectionStore.selectionMode"
+      :showCheckbox="selectionStore.multiSelectionMode"
       @click="click(item.id, $event)"
       @dblclick="forceSelect()"
     />
diff --git a/client/src/components/sidebar/SidebarSelectionControls.vue b/client/src/components/sidebar/SidebarSelectionControls.vue
index cd234b18..0386ea91 100644
--- a/client/src/components/sidebar/SidebarSelectionControls.vue
+++ b/client/src/components/sidebar/SidebarSelectionControls.vue
@@ -36,7 +36,7 @@ const summary = computed(() =>
 );
 
 function reset() {
-  selectionStore.selectionMode = false;
+  selectionStore.multiSelectionMode = false;
   selectionStore.releaseSelection();
   selectionStore.clearSelection();
 }
@@ -53,7 +53,7 @@ const showHelp = ref(false);
     summaryEmpty="None selected"
     showSummaryWhenExpanded
     :resetDisabled="
-      selectionStore.selectionMode === false &&
+      selectionStore.multiSelectionMode === false &&
       !selectionStore.lockedSelection &&
       !selectionStore.selected.size
     "
@@ -61,7 +61,7 @@ const showHelp = ref(false);
     @help="showHelp = true"
   >
     <template #expanded>
-      <UICheckbox v-model="selectionStore.selectionMode">Multiple selection mode</UICheckbox>
+      <UICheckbox v-model="selectionStore.multiSelectionMode">Multiple selection mode</UICheckbox>
       <UIButtonGroup>
         <UIButton
           :disabled="selectionStore.selected.size === 0"
diff --git a/client/src/stores/SelectionStore.ts b/client/src/stores/SelectionStore.ts
index b6f70310..fa980f15 100644
--- a/client/src/stores/SelectionStore.ts
+++ b/client/src/stores/SelectionStore.ts
@@ -10,7 +10,7 @@ export type SelectionUpdateSource = 'map' | 'list' | 'options';
 export const useSelectionStore = defineStore('selection', () => {
   const activityStore = useActivityStore();
 
-  const selectionMode = ref(false);
+  const multiSelectionMode = ref(false);
 
   const selected = reactive<Set<string>>(new Set());
 
@@ -91,7 +91,7 @@ export const useSelectionStore = defineStore('selection', () => {
   ) {
     const flatIds = [ids].flat();
 
-    if (!ctrlKey && !selectionMode.value) {
+    if (!ctrlKey && !multiSelectionMode.value) {
       selected.clear();
     }
 
@@ -136,7 +136,7 @@ export const useSelectionStore = defineStore('selection', () => {
   }
 
   return {
-    selectionMode,
+    multiSelectionMode,
     selected,
     selectedItems,
     updateSource,

From be6362b9dd68c4fa4060dd3ac15b7f3acdc1d55d Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 22:06:17 +0200
Subject: [PATCH 38/50] Add selection checkbox for groups

---
 client/src/components/sidebar/SidebarGroup.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/client/src/components/sidebar/SidebarGroup.vue b/client/src/components/sidebar/SidebarGroup.vue
index fe9ec767..3b361a67 100644
--- a/client/src/components/sidebar/SidebarGroup.vue
+++ b/client/src/components/sidebar/SidebarGroup.vue
@@ -29,6 +29,18 @@ const someSelected = computed(() =>
   group.items.some((item) => selectionStore.selected.has(item.id)),
 );
 
+const checkboxIcon = computed(() => {
+  if (!selectionStore.multiSelectionMode) {
+    return undefined;
+  } else if (allSelected.value) {
+    return 'check_circle_outline';
+  } else if (someSelected.value) {
+    return 'remove_circle_outline';
+  } else {
+    return 'radio_button_unchecked';
+  }
+});
+
 const groupRef = ref<HTMLDivElement>();
 const headerRef = ref<HTMLDivElement>();
 
@@ -75,6 +87,7 @@ function clickGroup(e: MouseEvent) {
       @click="clickGroup($event)"
       @dblclick="forceSelect()"
     >
+      <UIIcon v-if="checkboxIcon" :class="$style.checkbox" :icon="checkboxIcon" inline />
       <a @click.stop.prevent="toggleExpanded" @dblclick.stop
         ><UIIcon icon="keyboard_arrow_right" :rotation="isExpanded ? 90 : 0"
       /></a>
@@ -128,6 +141,11 @@ function clickGroup(e: MouseEvent) {
     display: flex;
     flex-direction: column;
   }
+
+  .checkbox {
+    font-size: 21px;
+    margin-inline-start: 4px;
+  }
 }
 
 .sidebarGroup:not(:first-child) {

From f9587d8e06bf2062baf29556b75c03eb13f2cefb Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 17:51:08 +0200
Subject: [PATCH 39/50] Use focused activities for background map items

---
 client/src/App.vue                    | 11 +----------
 client/src/components/map/MapView.vue | 12 +++++-------
 client/src/stores/SelectionStore.ts   | 15 ++++++++++++---
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 6fdc63de..a667321a 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -7,7 +7,6 @@ import CollapsibleSidebar from './components/sidebar/CollapsibleSidebar.vue';
 import SidebarContent from './components/sidebar/SidebarContent.vue';
 import { SELECTED_SIDEBAR_ITEM_SELECTOR } from './components/sidebar/SidebarItem.vue';
 import { useActivityStore } from './stores/ActivityStore';
-import { useSelectionStore } from './stores/SelectionStore';
 import { getBestCenter } from './utils/midpoint';
 
 const { routes: routesInUrl = false } = defineProps<{ routes: boolean }>();
@@ -17,7 +16,6 @@ const router = useRouter();
 const map = ref<typeof MapView>();
 
 const activityStore = useActivityStore();
-const selectionStore = useSelectionStore();
 
 watch(
   [() => routesInUrl],
@@ -64,14 +62,7 @@ defineExpose({ mapItems: activityStore.mapItems });
       />
     </CollapsibleSidebar>
     <Suspense>
-      <MapView
-        ref="map"
-        v-model:center="center"
-        v-model:zoom="zoom"
-        :bounds="geolocation"
-        :mapItems="selectionStore.visibleItems"
-        :backgroundMapItems="activityStore.backgroundMapItems"
-      />
+      <MapView ref="map" v-model:center="center" v-model:zoom="zoom" :bounds="geolocation" />
     </Suspense>
   </div>
 </template>
diff --git a/client/src/components/map/MapView.vue b/client/src/components/map/MapView.vue
index a143e745..552ef778 100644
--- a/client/src/components/map/MapView.vue
+++ b/client/src/components/map/MapView.vue
@@ -28,9 +28,7 @@ import { useMapStyle } from '@/MapStyle';
 import { addLayersToMap, applyMapItems, MapSourceLayer, useMapSelection } from '@/utils/map';
 import Viewport from '@/Viewport';
 
-const { mapItems, backgroundMapItems, bounds } = defineProps<{
-  mapItems: readonly MapItem[];
-  backgroundMapItems: readonly MapItem[];
+const { bounds } = defineProps<{
   bounds?: LngLatBoundsLike;
 }>();
 
@@ -94,11 +92,11 @@ onMounted(() => {
   map.resize();
 });
 
-watch([() => mapItems], ([mapItems]) => {
+watch([() => selectionStore.visibleItems], ([mapItems]) => {
   applyMapItems(map, mapItems, MapSourceLayer.LINES);
 });
 
-watch([() => backgroundMapItems], ([backgroundMapItems]) => {
+watch([() => selectionStore.visibleBackgroundItems], ([backgroundMapItems]) => {
   applyMapItems(map, backgroundMapItems, MapSourceLayer.BACKGROUND);
 });
 
@@ -243,8 +241,8 @@ function mapLoaded(map: MapboxMap): void {
   addLayersToMap(map, mapStyle.value);
   onTerrain();
 
-  applyMapItems(map, backgroundMapItems, MapSourceLayer.BACKGROUND);
-  applyMapItems(map, mapItems, MapSourceLayer.LINES);
+  applyMapItems(map, selectionStore.visibleBackgroundItems, MapSourceLayer.BACKGROUND);
+  applyMapItems(map, selectionStore.visibleItems, MapSourceLayer.LINES);
   applyMapItems(map, selectionStore.selectedItems, MapSourceLayer.SELECTED);
 }
 
diff --git a/client/src/stores/SelectionStore.ts b/client/src/stores/SelectionStore.ts
index fa980f15..43453f7e 100644
--- a/client/src/stores/SelectionStore.ts
+++ b/client/src/stores/SelectionStore.ts
@@ -29,9 +29,9 @@ export const useSelectionStore = defineStore('selection', () => {
   });
 
   const visibleItems = computed(() => {
-    const value = lockedSelection.value;
-    return value
-      ? activityStore.mapItems.filter((item) => value.has(item.id))
+    const selection = lockedSelection.value;
+    return selection
+      ? activityStore.mapItems.filter((item) => selection.has(item.id))
       : activityStore.mapItems;
   });
 
@@ -39,6 +39,14 @@ export const useSelectionStore = defineStore('selection', () => {
     groupMapItems(visibleItems.value, activityStore.groupLevel),
   );
 
+  const visibleBackgroundItems = computed(() => {
+    if (!activityStore.backgroundMapItems.length) return [];
+    const selection = lockedSelections.get(false);
+    return selection
+      ? activityStore.backgroundMapItems.filter((item) => selection.has(item.id))
+      : activityStore.backgroundMapItems;
+  });
+
   const selectedItems = computed(() => visibleItems.value.filter((item) => selected.has(item.id)));
 
   const updateSource = ref<SelectionUpdateSource>();
@@ -144,6 +152,7 @@ export const useSelectionStore = defineStore('selection', () => {
     lockedSelection,
     visibleItems,
     visibleGroupedItems,
+    visibleBackgroundItems,
 
     select,
     lockSelection,

From f2280ce7616d932502bcf78f9ae5b25b3e5ca74e Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 17:51:45 +0200
Subject: [PATCH 40/50] Prevent scrolling to selection in multi selection mode

---
 client/src/components/sidebar/SidebarContent.vue  | 3 +--
 client/src/components/sidebar/SidebarItemList.vue | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/components/sidebar/SidebarContent.vue b/client/src/components/sidebar/SidebarContent.vue
index 81ca1a86..53ab57f5 100644
--- a/client/src/components/sidebar/SidebarContent.vue
+++ b/client/src/components/sidebar/SidebarContent.vue
@@ -45,7 +45,7 @@ useStickyHeader(
 );
 
 watch(selectionStore.selected, async (selected) => {
-  if (selectionStore.updateSource === 'map') {
+  if (selectionStore.updateSource === 'map' && !selectionStore.multiSelectionMode) {
     if (selected.size !== 0) emit('focusSidebar');
     await nextTick();
     emit('scrollToSelected');
@@ -86,7 +86,6 @@ watch(selectionStore.selected, async (selected) => {
         v-else
         :items="selectionStore.visibleItems"
         @zoom-to-selected="emit('zoomToSelected')"
-        @scroll-to-selected="emit('scrollToSelected')"
       />
     </div>
 
diff --git a/client/src/components/sidebar/SidebarItemList.vue b/client/src/components/sidebar/SidebarItemList.vue
index c23492e9..eca6cdd8 100644
--- a/client/src/components/sidebar/SidebarItemList.vue
+++ b/client/src/components/sidebar/SidebarItemList.vue
@@ -13,7 +13,6 @@ const selectionStore = useSelectionStore();
 const emit = defineEmits<{
   zoomToSelected: [];
   focusSidebar: [];
-  scrollToSelected: [];
 }>();
 
 function forceSelect(): void {

From 13b6d78c88b94bb1aa2cd43ddf5c322027738997 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 17:52:01 +0200
Subject: [PATCH 41/50] Add explanation of why to select multiple items

---
 client/src/components/sidebar/SelectionHelp.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/components/sidebar/SelectionHelp.vue b/client/src/components/sidebar/SelectionHelp.vue
index 8516bdbb..e118d7b8 100644
--- a/client/src/components/sidebar/SelectionHelp.vue
+++ b/client/src/components/sidebar/SelectionHelp.vue
@@ -27,6 +27,10 @@ const activityStore = useActivityStore();
       {{ activityStore.useRoutes ? 'routes' : 'activities' }} in the sidebar, hold the
       <kbd>⇧ Shift</kbd> key when clicking.
     </p>
+    <p>
+      When multiple {{ activityStore.useRoutes ? 'routes' : 'activities' }} are selected, the total
+      statistics are shown at the top of the sidebar.
+    </p>
     <hr />
     <p>
       Enable multiple selection mode to mimic holding the <kbd>Ctrl</kbd>/<kbd>⌘ Command</kbd> key.

From b922c28e1885a90b3a254fe7c35fa1590c1fa069 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Sat, 2 Aug 2025 18:13:14 +0200
Subject: [PATCH 42/50] Prevent rezooming when deselecting items in the sidebar

---
 client/src/components/map/MapView.vue | 72 +++++++++++++++------------
 1 file changed, 40 insertions(+), 32 deletions(-)

diff --git a/client/src/components/map/MapView.vue b/client/src/components/map/MapView.vue
index 552ef778..72999d0e 100644
--- a/client/src/components/map/MapView.vue
+++ b/client/src/components/map/MapView.vue
@@ -130,30 +130,23 @@ const onTerrain = () => {
 watch(terrain, onTerrain);
 
 /**
- * Calculate best way of zooming to fit the activity while avoiding the controls in the corners.
+ * Calculate all ways of zooming to fit the activity while avoiding the controls in the corners.
  *
  * This works by considering the visual aspect ratio of the route, and for each corner control,
  * considering either placing the route strictly horizontally offset from the control or strictly
  * vertically offset from the control.
- *
- * It compares the area of the bounding box of the activity in each case.
  */
-function optimiseViewport(map: MapboxMap, bounds: LngLatBounds) {
+function getViewports() {
   const padding = 10;
 
   const { width, height } = map.getCanvas().getBoundingClientRect();
 
-  const northWest = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getNorthWest());
-  const southEast = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getSouthEast());
-
-  const aspectRatio = (northWest.y - southEast.y) / (northWest.x - southEast.x);
-
   const topLeft = container.value?.querySelector('.mapboxgl-ctrl-top-left');
   const topRight = container.value?.querySelector('.mapboxgl-ctrl-top-right');
   const bottomLeft = container.value?.querySelector('.mapboxgl-ctrl-bottom-left');
   const bottomRight = container.value?.querySelector('.mapboxgl-ctrl-bottom-right');
 
-  const viewports = [
+  return [
     // Padding is given here as well as at the end so that 2 × padding is maintained from the edges,
     // and 1 × padding is maintained from the controls
     new Viewport(width, height, { left: padding, top: padding, bottom: padding, right: padding }),
@@ -179,12 +172,37 @@ function optimiseViewport(map: MapboxMap, bounds: LngLatBounds) {
       viewport.withOffset({ right: bottomRight?.clientWidth ?? 0 }),
     ])
     .map((viewport) => viewport.withPadding(padding));
+}
+
+/**
+ * Given a list of viewports, find the one with the largest area.
+ */
+function getOptimalViewport(viewports: Viewport[], bounds: LngLatBounds) {
+  const northWest = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getNorthWest());
+  const southEast = mapboxgl.MercatorCoordinate.fromLngLat(bounds.getSouthEast());
+
+  const aspectRatio = (northWest.y - southEast.y) / (northWest.x - southEast.x);
 
   return viewports.reduce((best, current) =>
     best.screenArea(aspectRatio) > current.screenArea(aspectRatio) ? best : current,
   );
 }
 
+function checkBoundsForViewport(viewport: Viewport, bounds: LngLatBounds) {
+  const screenNorthEast = map.unproject([
+    viewport.width - (viewport.offsets.right ?? 0),
+    viewport.offsets.top ?? 0,
+  ]);
+  const screenSouthWest = map.unproject([
+    viewport.offsets.left ?? 0,
+    viewport.height - (viewport.offsets.bottom ?? 0),
+  ]);
+  const screenBounds = new mapboxgl.LngLatBounds(screenSouthWest, screenNorthEast);
+  return (
+    screenBounds.contains(bounds.getSouthWest()) && screenBounds.contains(bounds.getNorthEast())
+  );
+}
+
 function flyTo(mapItems: readonly MapItem[], zoom = false): void {
   if (mapItems.length === 0) return;
   const coordinates = mapItems.flatMap(({ map: line }) =>
@@ -195,30 +213,20 @@ function flyTo(mapItems: readonly MapItem[], zoom = false): void {
     new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]),
   );
 
-  const viewport = optimiseViewport(map, bounds);
-
-  const screenNorthEast = map.unproject([
-    viewport.width - (viewport.offsets.right ?? 0),
-    viewport.offsets.top ?? 0,
-  ]);
-  const screenSouthWest = map.unproject([
-    viewport.offsets.left ?? 0,
-    viewport.height - (viewport.offsets.bottom ?? 0),
-  ]);
-  const screenBounds = new mapboxgl.LngLatBounds(screenSouthWest, screenNorthEast);
+  const viewports = getViewports();
 
-  if (
-    zoom ||
-    !screenBounds.contains(bounds.getSouthWest()) ||
-    !screenBounds.contains(bounds.getNorthEast())
-  ) {
-    const maxZoom = zoom ? 30 : map.getZoom();
-    map.fitBounds(bounds, {
-      padding: viewport.offsets,
-      linear: true,
-      maxZoom,
-    });
+  if (!zoom && viewports.some((viewport) => checkBoundsForViewport(viewport, bounds))) {
+    // If one of the viewports fits on the screen, there is no need to rezoom
+    return;
   }
+
+  const viewport = getOptimalViewport(viewports, bounds);
+
+  map.fitBounds(bounds, {
+    padding: viewport.offsets,
+    linear: true,
+    maxZoom: zoom ? 30 : map.getZoom(),
+  });
 }
 
 function zoomToSelection(): void {

From 1d013ad8399c806224fabecdb212558144e3f6af Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Mon, 5 Jan 2026 23:50:31 +0100
Subject: [PATCH 43/50] Improve lazy handling of filters

---
 client/src/components/ui/UITextField.vue | 41 ++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/UITextField.vue b/client/src/components/ui/UITextField.vue
index cab935d9..28668223 100644
--- a/client/src/components/ui/UITextField.vue
+++ b/client/src/components/ui/UITextField.vue
@@ -17,6 +17,41 @@ const {
 
 const [model, modifiers] = defineModel<string, 'trim' | 'lazy'>({ default: undefined });
 
+function updateInput(value: string) {
+  if (modifiers.trim) {
+    value = value.trim();
+  }
+  model.value = value;
+}
+
+function onInput(e: Event) {
+  if (modifiers.lazy) {
+    const inputEvent = e as InputEvent;
+    if (inputEvent.inputType && inputEvent.inputType !== 'insertReplacementText') {
+      // Ignore input events except for those from pick list selection
+      return;
+    }
+  }
+  let value = (e.target as HTMLInputElement).value;
+  updateInput(value);
+}
+
+function onChange(e: Event) {
+  if (!modifiers.lazy) {
+    return;
+  }
+  let value = (e.target as HTMLInputElement).value;
+  updateInput(value);
+}
+
+function onBlur(e: Event) {
+  if (!modifiers.lazy) {
+    return;
+  }
+  let value = (e.target as HTMLInputElement).value;
+  updateInput(value);
+}
+
 const pickListValues = computed(() =>
   typeof pickList === 'function' ? pickList(model.value) : pickList,
 );
@@ -33,14 +68,16 @@ const pickListId = computed(() =>
   <div :class="$style.textField">
     <input
       ref="input"
-      v-model.lazy="model"
-      :model-modifiers="modifiers"
+      :value="model"
       autocomplete="off"
       :name
       :list="pickListId"
       :placeholder
       :disabled
       :type
+      @input="onInput"
+      @change="onChange"
+      @blur="onBlur"
     />
     <datalist v-if="pickList" :id="pickListId">
       <option v-for="option in pickListValues" :key="option" :value="option" />

From 1fa2fb98a03b6181540dc916929940e0dbcd7b98 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 5 May 2022 23:15:31 +0200
Subject: [PATCH 44/50] Add calendar endpoint

---
 client/vite.config.js    |  2 +-
 server/app.ts            |  3 ++
 server/calendar.ts       | 87 ++++++++++++++++++++++++++++++++++++++++
 server/package.json      |  4 ++
 server/sport-icons.ts    | 80 ++++++++++++++++++++++++++++++++++++
 server/strava/index.ts   |  2 +-
 server/strava/raw-api.ts |  9 +++++
 yarn.lock                | 29 ++++++++++++++
 8 files changed, 214 insertions(+), 2 deletions(-)
 create mode 100644 server/calendar.ts
 create mode 100644 server/sport-icons.ts

diff --git a/client/vite.config.js b/client/vite.config.js
index d3d74f36..8461da9c 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -63,7 +63,7 @@ export default defineConfig(({ mode }) => {
     server: {
       port: VITE_DEV_PORT,
       proxy: {
-        '^/api/': { target: `http://localhost:${SERVER_PORT}`, ws: true },
+        '^/(api|calendar)/': { target: `http://localhost:${SERVER_PORT}`, ws: true },
       },
     },
     build: {
diff --git a/server/app.ts b/server/app.ts
index 58fa3c8b..4d02d298 100644
--- a/server/app.ts
+++ b/server/app.ts
@@ -6,6 +6,7 @@ import express, { type RequestHandler } from 'express';
 import expressWs from 'express-ws';
 
 import apiRouter from './api';
+import calendarRouter from './calendar';
 
 const app = express();
 expressWs(app);
@@ -25,6 +26,8 @@ app.use(corsConfig);
 
 app.use('/api', apiRouter(SERVER_DOMAIN));
 
+app.use('/calendar', calendarRouter(SERVER_DOMAIN));
+
 // Support history api
 app.use(
   history({
diff --git a/server/calendar.ts b/server/calendar.ts
new file mode 100644
index 00000000..e0e987c0
--- /dev/null
+++ b/server/calendar.ts
@@ -0,0 +1,87 @@
+import 'moment-timezone';
+
+import express from 'express';
+import ical from 'ical-generator';
+import moment from 'moment-timezone';
+
+import eagerIterator from './eager-iterator';
+import { getSportIcon } from './sport-icons';
+import { Strava } from './strava';
+
+export default function calendarRouter(domain: string): express.Router {
+  const router = express.Router();
+
+  const mkRequestLogin = (res: express.Response) => async () => {
+    res.status(403).send('Not logged in');
+    return false;
+  };
+
+  router.get('/', async (req: express.Request, res: express.Response) => {
+    const token = req.cookies.token;
+    const requestLogin = mkRequestLogin(res);
+    if (token && (await new Strava(domain, token, requestLogin).hasToken())) {
+      const webcalDomain = domain.replace(/\w+(?=:\/\/)/, 'webcal');
+      const pathWithSlash = req.originalUrl.replace(/\/?$/, '/');
+      const fullPath = webcalDomain + pathWithSlash + token + '.ics';
+      res.redirect(fullPath);
+    } else {
+      await requestLogin();
+    }
+  });
+
+  router.get('/:token.ics', async (req: express.Request, res: express.Response) => {
+    async function requestLogin() {
+      res.status(404).send();
+    }
+
+    const strava = new Strava(domain, req.params.token, requestLogin);
+
+    res.type('text/calendar; charset=UTF-8');
+
+    const cal = ical({ name: 'Strava Calendar' });
+
+    for await (const activity of eagerIterator(strava.getStravaActivities())) {
+      const startTime = moment(activity.start_date).tz(activity.timezone.split(' ')[1]);
+      const location = activity.start_latlng.join(', ');
+
+      const twoDigits = (val: number) => String(val).padStart(2, '0');
+
+      const toHms = (totalSeconds: number) => {
+        const hours = Math.floor(totalSeconds / 60 / 60),
+          minutes = Math.floor(totalSeconds / 60) % 60,
+          seconds = totalSeconds / 60;
+        return (hours ? [hours, twoDigits(minutes), twoDigits(seconds)] : [minutes, twoDigits(seconds)]).join(':');
+      };
+
+      const descriptionFields = {
+        Distance: activity.distance && `${(activity.distance / 1000).toFixed(2)} km`,
+        'Elevation Gain': activity.total_elevation_gain && `${activity.total_elevation_gain.toFixed(0)} m`,
+        'Average speed':
+          activity.average_speed &&
+          activity.sport_type !== 'Run' &&
+          `${(activity.average_speed * 3.6).toFixed(1)} km/h`,
+        'Average pace':
+          activity.average_speed && activity.sport_type === 'Run' && `${toHms(1000 / activity.average_speed)}/km`,
+        'Average Heart Rate': activity.has_heartrate && `${activity.average_heartrate?.toFixed(0)} bpm`,
+        'Max Heart Rate': activity.has_heartrate && `${activity.max_heartrate?.toFixed(0)} bpm`,
+      };
+      const descriptionData = Object.entries(descriptionFields)
+        .filter(([, value]) => value)
+        .map(([label, value]) => `${label}: ${value}`)
+        .join('\n');
+
+      cal.createEvent({
+        summary: `${activity.name} ${getSportIcon(activity)}`,
+        location: location,
+        start: startTime,
+        end: moment(startTime).add(activity.elapsed_time, 'seconds'),
+        url: `https://strava.com/activities/${activity.id}`,
+        description: descriptionData,
+      });
+    }
+
+    res.send(cal.toString());
+  });
+
+  return router;
+}
diff --git a/server/package.json b/server/package.json
index 7e844bc8..c62f611d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -18,6 +18,9 @@
     "cookie-parser": "^1.4.7",
     "express": "^4.21.1",
     "express-ws": "^5.0.2",
+    "ical-generator": "^3.4.2",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.40",
     "node-fetch": "^2.7.0",
     "proper-lockfile": "^4.1.2",
     "uuid": "^9.0.1"
@@ -30,6 +33,7 @@
     "@types/cookie-parser": "^1.4.7",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.5",
+    "@types/luxon": "^2.3.2",
     "@types/node": "^20.17.7",
     "@types/node-fetch": "^2.6.12",
     "@types/uuid": "^9.0.8",
diff --git a/server/sport-icons.ts b/server/sport-icons.ts
new file mode 100644
index 00000000..a61f328e
--- /dev/null
+++ b/server/sport-icons.ts
@@ -0,0 +1,80 @@
+import { type SummaryActivity } from './strava/model';
+
+export function getSportIcon(source: SummaryActivity): string {
+  switch (source.sport_type) {
+    case 'Run':
+    case 'VirtualRun':
+    case 'TrailRun':
+      return '🏃';
+    case 'Walk':
+      return '🚶';
+    case 'Ride':
+    case 'EBikeRide':
+    case 'VirtualRide':
+    case 'Handcycle':
+    case 'Velomobile':
+      return '🚲';
+    case 'Swim':
+      return '🏊';
+    case 'AlpineSki':
+    case 'BackcountrySki':
+    case 'NordicSki':
+      return '⛷️';
+    case 'Snowboard':
+      return '🏂';
+    case 'IceSkate':
+    case 'Snowshoe':
+      return '⛸️';
+    case 'Skateboard':
+      return '🛹';
+    case 'RockClimbing':
+      return '🧗';
+    case 'Surfing':
+    case 'Windsurf':
+    case 'Kitesurf':
+    case 'StandUpPaddling':
+      return '🏄';
+    case 'Canoeing':
+    case 'Kayaking':
+    case 'Rowing':
+    case 'VirtualRow':
+      return '🛶';
+    case 'Sail':
+      return '⛵';
+    case 'Golf':
+      return '🏌';
+    case 'Soccer':
+      return '⚽';
+    case 'Crossfit':
+    case 'Elliptical':
+    case 'WeightTraining':
+    case 'HighIntensityIntervalTraining':
+    case 'Pilates':
+    case 'StairStepper':
+      return '🏋';
+    case 'Yoga':
+      return '🧘';
+    case 'Wheelchair':
+      return '🧑‍🦽';
+    case 'Hike':
+      return '🥾';
+    case 'Badminton':
+      return '🏸';
+    case 'Tennis':
+      return '🎾';
+    case 'EMountainBikeRide':
+    case 'MountainBikeRide':
+    case 'GravelRide':
+      return '🚵';
+    case 'InlineSkate':
+      return '🛼';
+    case 'TableTennis':
+    case 'Pickleball':
+    case 'Racquetball':
+    case 'Squash':
+      return '🏓';
+    case 'Workout':
+    default:
+      return '';
+  }
+}
diff --git a/server/strava/index.ts b/server/strava/index.ts
index 90673393..8f41fc36 100644
--- a/server/strava/index.ts
+++ b/server/strava/index.ts
@@ -58,7 +58,7 @@ export class Strava {
   /**
    * Fetches your data from the Strava API
    */
-  async *getStravaActivities(start?: number, end?: number): AsyncGenerator<unknown, void, undefined> {
+  async *getStravaActivities(start?: number, end?: number): AsyncGenerator<SummaryActivity, void, undefined> {
     for await (const page of this.getStravaActivitiesPages(start, end)) {
       yield* page;
     }
diff --git a/server/strava/raw-api.ts b/server/strava/raw-api.ts
index 34400ebe..2be5965a 100644
--- a/server/strava/raw-api.ts
+++ b/server/strava/raw-api.ts
@@ -167,6 +167,15 @@ export default class RawStravaApi {
     };
   }
 
+  async hasToken(): Promise<boolean> {
+    try {
+      await this.loadCache();
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
   private async rawStravaAPI(endpoint: string, query: Record<string, string | number | undefined> = {}) {
     const API_BASE = 'https://www.strava.com/api/v3';
     const queryString = (Object.entries(query).filter(([, value]) => value) as [string, string | number][])
diff --git a/yarn.lock b/yarn.lock
index 934b740d..f18acbf3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -958,6 +958,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/luxon@^2.3.2":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-2.4.0.tgz#897d3abc23b68d78b69d76a12c21e01eb5adab95"
+  integrity sha512-oCavjEjRXuR6URJEtQm0eBdfsBiEcGBZbq21of8iGkeKxU1+1xgKuFPClaBZl2KB8ZZBSWlgk61tH6Mf+nvZVw==
+
 "@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz#0ef017b75eedce02ff6243b4189210e2e6d5e56d"
@@ -2984,6 +2989,13 @@ http-errors@2.0.0:
     statuses "2.0.1"
     toidentifier "1.0.1"
 
+ical-generator@^3.4.2:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/ical-generator/-/ical-generator-3.6.1.tgz#097e9b4124de5554912ad30d341bdba644f6c312"
+  integrity sha512-tEH0OTNn00Mp61DcTxIFR+5fhsAivKk1LWAJUAbkMCI+M4yu+cZzT5X8rZf3b5PzFkMogh0zj3PsFh9bHvGGIQ==
+  dependencies:
+    uuid-random "^1.3.2"
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -3566,6 +3578,18 @@ mitt@^3.0.1:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
+moment-timezone@^0.5.40:
+  version "0.5.40"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.40.tgz#c148f5149fd91dd3e29bf481abc8830ecba16b89"
+  integrity sha512-tWfmNkRYmBkPJz5mr9GVDn9vRlVZOTe6yqY92rFxiOdWXbjaR0+9LwQnZGGuNR63X456NqmEkbskte8tWL5ePg==
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0", moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4820,6 +4844,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+uuid-random@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/uuid-random/-/uuid-random-1.3.2.tgz#96715edbaef4e84b1dcf5024b00d16f30220e2d0"
+  integrity sha512-UOzej0Le/UgkbWEO8flm+0y+G+ljUon1QWTEZOq1rnMAsxo2+SckbiZdKzAHHlVh6gJqI1TjC/xwgR50MuCrBQ==
+
 uuid@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"

From 37bc5521f09745df1101f82eac3f91261d6e9d2d Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 5 May 2022 23:39:09 +0200
Subject: [PATCH 45/50] Fix seconds with decimal places in calendar

---
 server/calendar.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/calendar.ts b/server/calendar.ts
index e0e987c0..938695f7 100644
--- a/server/calendar.ts
+++ b/server/calendar.ts
@@ -44,12 +44,12 @@ export default function calendarRouter(domain: string): express.Router {
       const startTime = moment(activity.start_date).tz(activity.timezone.split(' ')[1]);
       const location = activity.start_latlng.join(', ');
 
-      const twoDigits = (val: number) => String(val).padStart(2, '0');
+      const twoDigits = (val: number) => String(val.toFixed(0)).padStart(2, '0');
 
       const toHms = (totalSeconds: number) => {
         const hours = Math.floor(totalSeconds / 60 / 60),
           minutes = Math.floor(totalSeconds / 60) % 60,
-          seconds = totalSeconds / 60;
+          seconds = totalSeconds % 60;
         return (hours ? [hours, twoDigits(minutes), twoDigits(seconds)] : [minutes, twoDigits(seconds)]).join(':');
       };
 

From a254adab8ed9fb260443e742b8dce14c60fb9368 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Thu, 5 May 2022 23:48:59 +0200
Subject: [PATCH 46/50] Fix case of stat labels

---
 server/calendar.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/server/calendar.ts b/server/calendar.ts
index 938695f7..d6f1938a 100644
--- a/server/calendar.ts
+++ b/server/calendar.ts
@@ -55,15 +55,15 @@ export default function calendarRouter(domain: string): express.Router {
 
       const descriptionFields = {
         Distance: activity.distance && `${(activity.distance / 1000).toFixed(2)} km`,
-        'Elevation Gain': activity.total_elevation_gain && `${activity.total_elevation_gain.toFixed(0)} m`,
+        'Elevation gain': activity.total_elevation_gain && `${activity.total_elevation_gain.toFixed(0)} m`,
         'Average speed':
           activity.average_speed &&
           activity.sport_type !== 'Run' &&
           `${(activity.average_speed * 3.6).toFixed(1)} km/h`,
         'Average pace':
           activity.average_speed && activity.sport_type === 'Run' && `${toHms(1000 / activity.average_speed)}/km`,
-        'Average Heart Rate': activity.has_heartrate && `${activity.average_heartrate?.toFixed(0)} bpm`,
-        'Max Heart Rate': activity.has_heartrate && `${activity.max_heartrate?.toFixed(0)} bpm`,
+        'Average heart rate': activity.has_heartrate && `${activity.average_heartrate?.toFixed(0)} bpm`,
+        'Max heart rate': activity.has_heartrate && `${activity.max_heartrate?.toFixed(0)} bpm`,
       };
       const descriptionData = Object.entries(descriptionFields)
         .filter(([, value]) => value)

From 8f04e4e9fb051d8a5bd7fa9cda2ca781ef24d03e Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Fri, 6 May 2022 00:18:36 +0200
Subject: [PATCH 47/50] Add redirect to show the calendar

---
 client/vite.config.js  | 2 +-
 server/calendar.ts     | 8 ++------
 server/strava/index.ts | 4 ++++
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/vite.config.js b/client/vite.config.js
index 8461da9c..9c6a3b41 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -63,7 +63,7 @@ export default defineConfig(({ mode }) => {
     server: {
       port: VITE_DEV_PORT,
       proxy: {
-        '^/(api|calendar)/': { target: `http://localhost:${SERVER_PORT}`, ws: true },
+        '^/(api|calendar)': { target: `http://localhost:${SERVER_PORT}`, ws: true },
       },
     },
     build: {
diff --git a/server/calendar.ts b/server/calendar.ts
index d6f1938a..72bc19e4 100644
--- a/server/calendar.ts
+++ b/server/calendar.ts
@@ -30,15 +30,11 @@ export default function calendarRouter(domain: string): express.Router {
   });
 
   router.get('/:token.ics', async (req: express.Request, res: express.Response) => {
-    async function requestLogin() {
-      res.status(404).send();
-    }
-
-    const strava = new Strava(domain, req.params.token, requestLogin);
+    const strava = new Strava(domain, req.params.token, mkRequestLogin(res));
 
     res.type('text/calendar; charset=UTF-8');
 
-    const cal = ical({ name: 'Strava Calendar' });
+    const cal = ical({ name: 'Strava activities' });
 
     for await (const activity of eagerIterator(strava.getStravaActivities())) {
       const startTime = moment(activity.start_date).tz(activity.timezone.split(' ')[1]);
diff --git a/server/strava/index.ts b/server/strava/index.ts
index 8f41fc36..cbd08c58 100644
--- a/server/strava/index.ts
+++ b/server/strava/index.ts
@@ -99,6 +99,10 @@ export class Strava {
     return await this.rawApi.get(`/activities/${id}`);
   }
 
+  hasToken(): Promise<boolean> {
+    return this.rawApi.hasToken();
+  }
+
   async logout(global?: boolean);
   async logout(global: true, athlete: number);
   async logout(global = false, athlete?: number) {

From 42f62fae0486975be5affbd658d32df77630e7c3 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Fri, 6 May 2022 00:24:45 +0200
Subject: [PATCH 48/50] Serve the response natively

---
 server/calendar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/calendar.ts b/server/calendar.ts
index 72bc19e4..79842516 100644
--- a/server/calendar.ts
+++ b/server/calendar.ts
@@ -76,7 +76,7 @@ export default function calendarRouter(domain: string): express.Router {
       });
     }
 
-    res.send(cal.toString());
+    cal.serve(res);
   });
 
   return router;

From 46576d82fe37debc640fa54490c9ae7ef79cd6da Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Tue, 10 May 2022 18:04:42 +0200
Subject: [PATCH 49/50] Add elapsed time

---
 server/calendar.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/server/calendar.ts b/server/calendar.ts
index 79842516..cb26095f 100644
--- a/server/calendar.ts
+++ b/server/calendar.ts
@@ -50,6 +50,8 @@ export default function calendarRouter(domain: string): express.Router {
       };
 
       const descriptionFields = {
+        'Elapsed time': activity.elapsed_time && `${toHms(activity.elapsed_time)}`,
+        'Moving time': activity.moving_time && `${toHms(activity.moving_time)}`,
         Distance: activity.distance && `${(activity.distance / 1000).toFixed(2)} km`,
         'Elevation gain': activity.total_elevation_gain && `${activity.total_elevation_gain.toFixed(0)} m`,
         'Average speed':

From 5df35e80445df2c1ba1f8c262385fd2641f15f60 Mon Sep 17 00:00:00 2001
From: Charlie Harding <charlie_harding@icloud.com>
Date: Tue, 10 May 2022 18:05:28 +0200
Subject: [PATCH 50/50] Fix timezones

---
 server/calendar.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/server/calendar.ts b/server/calendar.ts
index cb26095f..c06b3d1d 100644
--- a/server/calendar.ts
+++ b/server/calendar.ts
@@ -71,6 +71,7 @@ export default function calendarRouter(domain: string): express.Router {
       cal.createEvent({
         summary: `${activity.name} ${getSportIcon(activity)}`,
         location: location,
+        timezone: startTime.tz(),
         start: startTime,
         end: moment(startTime).add(activity.elapsed_time, 'seconds'),
         url: `https://strava.com/activities/${activity.id}`,