From 9d2405bd2124e4265f5449f4e4bc7f1ed6f5b75a Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Wed, 18 Dec 2024 12:51:20 -0500
Subject: [PATCH] feat: viewport watch refactor

---
 web/components/shadcn/sheet/Sheet.vue | 43 +++++++++++++++++++--------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/web/components/shadcn/sheet/Sheet.vue b/web/components/shadcn/sheet/Sheet.vue
index 7d74d8a26..441f5a24d 100644
--- a/web/components/shadcn/sheet/Sheet.vue
+++ b/web/components/shadcn/sheet/Sheet.vue
@@ -1,22 +1,39 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
 
-const props = defineProps<DialogRootProps & { class?: string }>()
-const emits = defineEmits<DialogRootEmits>()
+const MOBILE_VIEWPORT = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' as const;
 
-const forwarded = useForwardPropsEmits(props, emits)
-const initialViewport = ref(document.querySelector('meta[name="viewport"]')?.getAttribute('content') ?? 'width=1300');
-const openListener = (opened: boolean) => {
-  /**
-   * Update meta tags for the root page when oepned
-   */
+const props = defineProps<DialogRootProps & { class?: string }>();
+const emits = defineEmits<DialogRootEmits>();
 
-  if (opened) {
-    document.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0')
+const getViewport = (): string => {
+  return document.querySelector('meta[name="viewport"]')?.getAttribute('content') ?? 'width=1300';
+};
+const updateViewport = (viewport: string): void => {
+  const meta = document.querySelector('meta[name="viewport"]');
+  if (meta) {
+    meta.setAttribute('content', viewport);
   } else {
-    document.querySelector('meta[name="viewport"]')?.setAttribute('content', initialViewport.value);
+    const meta = document.createElement('meta');
+    meta.name = 'viewport';
+    meta.content = viewport;
+    document.head.appendChild(meta);
   }
-}
+};
+
+const forwarded = useForwardPropsEmits(props, emits);
+const initialViewport = ref(getViewport());
+const openListener = (opened: boolean) => {
+  if (opened) {
+    updateViewport(MOBILE_VIEWPORT);
+  } else {
+    updateViewport(initialViewport.value);
+  }
+};
+
+onUnmounted(() => {
+  updateViewport(initialViewport.value);
+});
 </script>
 
 <template>