From d04001e0526639954ce66f2bd750a82c8c99e075 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 3 Oct 2024 14:40:31 -0700
Subject: [PATCH] feat: WIP create teleport composable

---
 web/components/Notifications/Item.vue         |  5 +---
 web/components/Notifications/Sidebar.vue      | 15 +----------
 .../shadcn/tooltip/TooltipContent.vue         |  4 ++-
 web/composables/useTeleport.ts                | 27 +++++++++++++++++++
 4 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 web/composables/useTeleport.ts

diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue
index 4128a4226..6f7a33a7f 100644
--- a/web/components/Notifications/Item.vue
+++ b/web/components/Notifications/Item.vue
@@ -45,10 +45,7 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
 
       <div class="shrink-0 flex flex-row items-center justify-end gap-2 mt-1">
         <p class="text-12px opacity-75">{{ date }}</p>
-        <button class="relative z-20" title="Archive Notification">
-          <span class="sr-only">Archive Notification</span>
-          <ArchiveBoxIcon class="size-4" />
-        </button>
+
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger as-child>
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 45998d319..b312261a3 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -72,20 +72,7 @@ const archiveNotifications: NotificationItemProps[] = [
   },
 ];
 
-const teleportTarget = ref<string | HTMLElement | Element>("#modals");
-const determineTeleportTarget = () => {
-  const myModalsComponent = document.querySelector("unraid-modals");
-  if (!myModalsComponent?.shadowRoot) return;
-
-  const potentialTarget = myModalsComponent.shadowRoot.querySelector("#modals");
-  if (!potentialTarget) return;
-
-  teleportTarget.value = potentialTarget;
-  console.log("[determineTeleportTarget] teleportTarget", teleportTarget.value);
-};
-onMounted(() => {
-  determineTeleportTarget();
-});
+const { teleportTarget, determineTeleportTarget } = useTeleport();
 </script>
 
 <template>
diff --git a/web/components/shadcn/tooltip/TooltipContent.vue b/web/components/shadcn/tooltip/TooltipContent.vue
index 794fdb10b..6adea244c 100644
--- a/web/components/shadcn/tooltip/TooltipContent.vue
+++ b/web/components/shadcn/tooltip/TooltipContent.vue
@@ -20,10 +20,12 @@ const delegatedProps = computed(() => {
 })
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const { teleportTarget } = useTeleport();
 </script>
 
 <template>
-  <TooltipPortal>
+  <TooltipPortal :to="teleportTarget" defer>
     <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
       <slot />
     </TooltipContent>
diff --git a/web/composables/useTeleport.ts b/web/composables/useTeleport.ts
new file mode 100644
index 000000000..fb965dbc2
--- /dev/null
+++ b/web/composables/useTeleport.ts
@@ -0,0 +1,27 @@
+import { ref, onMounted } from "vue";
+
+const useTeleport = () => {
+  const teleportTarget = ref<string | HTMLElement | Element>("#modals");
+
+  const determineTeleportTarget = () => {
+    const myModalsComponent = document.querySelector("unraid-modals");
+    if (!myModalsComponent?.shadowRoot) return;
+
+    const potentialTarget = myModalsComponent.shadowRoot.querySelector("#modals");
+    if (!potentialTarget) return;
+
+    teleportTarget.value = potentialTarget;
+    console.log("[determineTeleportTarget] teleportTarget", teleportTarget.value);
+  };
+
+  onMounted(() => {
+    determineTeleportTarget();
+  });
+
+  return {
+    teleportTarget,
+    determineTeleportTarget,
+  };
+};
+
+export default useTeleport;