From 65b3d7610df9c25f005392ff552747fb43b3846a Mon Sep 17 00:00:00 2001 From: MatteoGabriele Date: Mon, 23 Feb 2026 10:47:35 +0100 Subject: [PATCH 1/7] feat(ui): add versions modal permalink --- app/components/Package/Versions.vue | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue index 674ba30b4..505d3d895 100644 --- a/app/components/Package/Versions.vue +++ b/app/components/Package/Versions.vue @@ -22,6 +22,7 @@ const props = defineProps<{ selectedVersion?: string }>() +const QUERY_MODAL_VALUE = 'versions' const chartModal = useModal('chart-modal') const hasDistributionModalTransitioned = shallowRef(false) const isDistributionModalOpen = shallowRef(false) @@ -34,6 +35,9 @@ function clearDistributionModalFallbackTimer() { } } +const router = useRouter() +const route = useRoute() + async function openDistributionModal() { isDistributionModalOpen.value = true hasDistributionModalTransitioned.value = false @@ -41,6 +45,13 @@ async function openDistributionModal() { await nextTick() chartModal.open() + await router.replace({ + query: { + ...route.query, + modal: QUERY_MODAL_VALUE, + }, + }) + // Fallback: Force mount if transition event doesn't fire clearDistributionModalFallbackTimer() distributionModalFallbackTimer = setTimeout(() => { @@ -52,10 +63,24 @@ async function openDistributionModal() { function closeDistributionModal() { isDistributionModalOpen.value = false + + router.replace({ + query: { + ...route.query, + modal: undefined, + }, + }) + hasDistributionModalTransitioned.value = false clearDistributionModalFallbackTimer() } +onMounted(() => { + if (route.query.modal === QUERY_MODAL_VALUE) { + openDistributionModal() + } +}) + function handleDistributionModalTransitioned() { hasDistributionModalTransitioned.value = true clearDistributionModalFallbackTimer() From 32742e8a0ff806ad77ac5308346a0d8d298de7d2 Mon Sep 17 00:00:00 2001 From: MatteoGabriele Date: Mon, 23 Feb 2026 16:16:11 +0100 Subject: [PATCH 2/7] refactor(ui): polish modal --- app/components/Button/Group.vue | 2 +- .../Package/VersionDistribution.vue | 342 ++++++++---------- app/components/Settings/Toggle.client.vue | 2 +- app/pages/package/[[org]]/[name].vue | 4 +- i18n/locales/en.json | 8 + i18n/schema.json | 24 ++ lunaria/files/en-GB.json | 8 + lunaria/files/en-US.json | 8 + 8 files changed, 207 insertions(+), 191 deletions(-) diff --git a/app/components/Button/Group.vue b/app/components/Button/Group.vue index f84d8653d..71f280f02 100644 --- a/app/components/Button/Group.vue +++ b/app/components/Button/Group.vue @@ -7,7 +7,7 @@ const props = defineProps<{