From d764cd9815066b6477c4403f4178cbce5fb7209e Mon Sep 17 00:00:00 2001
From: Stanyslas Bres <dzetah@pm.me>
Date: Fri, 27 Feb 2026 23:27:08 +0100
Subject: [PATCH 1/2] feat: keep versions modal options in query params

---
 app/components/Package/Versions.vue       |  3 +++
 app/composables/useVersionDistribution.ts | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index ceb19705a6..58fa2c4a9e 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -68,6 +68,9 @@ function closeDistributionModal() {
     query: {
       ...route.query,
       modal: undefined,
+      grouping: undefined,
+      recent: undefined,
+      lowUsage: undefined,
     },
   })
 
diff --git a/app/composables/useVersionDistribution.ts b/app/composables/useVersionDistribution.ts
index cd4b1b5fcc..5cea722423 100644
--- a/app/composables/useVersionDistribution.ts
+++ b/app/composables/useVersionDistribution.ts
@@ -21,9 +21,9 @@ interface ChartDataItem {
  * @returns Reactive state and computed chart data
  */
 export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
-  const groupingMode = ref<VersionGroupingMode>('major')
-  const showRecentOnly = ref(false)
-  const showLowUsageVersions = ref(false)
+  const groupingMode = useRouteQuery<VersionGroupingMode>('grouping', 'major', { mode: 'replace' })
+  const showRecentOnly = useBooleanRouteQuery('recent', false)
+  const showLowUsageVersions = useBooleanRouteQuery('lowUsage', false)
   const pending = ref(false)
   const error = ref<Error | null>(null)
   const data = ref<VersionDistributionResponse | null>(null)
@@ -173,3 +173,13 @@ export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
     fetchDistribution,
   }
 }
+
+function useBooleanRouteQuery(key: string, defaultValue = false) {
+  return useRouteQuery(key, defaultValue ? 'true' : 'false', {
+    transform: {
+      get: (v: string) => v === 'true',
+      set: (v: boolean) => (v ? 'true' : 'false'),
+    },
+    mode: 'replace',
+  })
+}

From 1beff9bac4d8f6251d04b8441f84a5eed9769de6 Mon Sep 17 00:00:00 2001
From: Stanyslas Bres <dzetah@pm.me>
Date: Fri, 27 Feb 2026 23:39:06 +0100
Subject: [PATCH 2/2] fix: validate grouping query param

---
 app/composables/useVersionDistribution.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/composables/useVersionDistribution.ts b/app/composables/useVersionDistribution.ts
index 5cea722423..bcbc7c0ec9 100644
--- a/app/composables/useVersionDistribution.ts
+++ b/app/composables/useVersionDistribution.ts
@@ -21,7 +21,10 @@ interface ChartDataItem {
  * @returns Reactive state and computed chart data
  */
 export function useVersionDistribution(packageName: MaybeRefOrGetter<string>) {
-  const groupingMode = useRouteQuery<VersionGroupingMode>('grouping', 'major', { mode: 'replace' })
+  const groupingMode = useRouteQuery<VersionGroupingMode>('grouping', 'major', {
+    transform: (v: string) => (v === 'minor' ? 'minor' : 'major'),
+    mode: 'replace',
+  })
   const showRecentOnly = useBooleanRouteQuery('recent', false)
   const showLowUsageVersions = useBooleanRouteQuery('lowUsage', false)
   const pending = ref(false)