feat: WIP create teleport composable

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>

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>

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>

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;