feat(ui): add versions modal permalink

Author: MatteoGabriele

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,13 +35,23 @@ function clearDistributionModalFallbackTimer() {
   }
 }
 
+const router = useRouter()
+const route = useRoute()
+
 async function openDistributionModal() {
   isDistributionModalOpen.value = true
   hasDistributionModalTransitioned.value = false
   // ensure the component renders before opening the dialog
   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()