Merge branch 'fix/dock-safe-area-on-anchor' into fix/dock-safe-area-px

Author: omridevk

packages/hub-ui/src/client/components/dock/Dock.vue

@@ -10,6 +10,7 @@ import { docksSplitGroupsWithCapacity, getEntryGroup, resolveNextRecentDockIds,
 import { setDocksOverflowPanel, useDocksGroupPanel } from '../../state/floating-tooltip'
 import { useSettings } from '../../state/settings-defaults'
 import { useIsRpcTrusted } from '../../utils/useIsRpcTrusted'
+import { useSafeArea } from '../../utils/useSafeArea'
 import BrandMark from '../icons/BrandMark.vue'
 import {
   dockLayoutCssVars,
@@ -41,22 +42,7 @@ const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.
 
 const anchorEl = useTemplateRef<HTMLDivElement>('anchorEl')
 
-const safeArea = {
-  top: ref(''),
-  right: ref(''),
-  bottom: ref(''),
-  left: ref(''),
-}
-
-function updateSafeArea() {
-  if (!anchorEl.value)
-    return
-  const style = getComputedStyle(anchorEl.value)
-  safeArea.top.value = style.getPropertyValue('--devframes-safe-area-top')
-  safeArea.right.value = style.getPropertyValue('--devframes-safe-area-right')
-  safeArea.bottom.value = style.getPropertyValue('--devframes-safe-area-bottom')
-  safeArea.left.value = style.getPropertyValue('--devframes-safe-area-left')
-}
+const safeArea = useSafeArea(anchorEl)
 
 function toNumber(value: string) {
   const num = Number.parseFloat(value)
@@ -169,12 +155,10 @@ watch(selectedEntry, (entry) => {
 onMounted(async () => {
   windowSize.width = window.innerWidth
   windowSize.height = window.innerHeight
-  updateSafeArea()
 
   useEventListener(window, 'resize', () => {
     windowSize.width = window.innerWidth
     windowSize.height = window.innerHeight
-    updateSafeArea()
   })
 
   useEventListener(window, 'pointermove', (e: PointerEvent) => {

packages/hub-ui/src/client/utils/useSafeArea.ts

@@ -0,0 +1,30 @@
+import type { MaybeElementRef } from '@vueuse/core'
+import { tryOnMounted, unrefElement, useDebounceFn, useEventListener } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+/**
+ * Ported from VueUse's `useScreenSafeArea` for now: it always sets its CSS variables on
+ * `<html>` and has no option for a custom element, which breaks hydration on SSR hosts.
+ */
+export function useSafeArea(target: MaybeElementRef) {
+  const top = shallowRef('')
+  const right = shallowRef('')
+  const bottom = shallowRef('')
+  const left = shallowRef('')
+
+  function update() {
+    const element = unrefElement(target)
+    if (!element)
+      return
+    const style = getComputedStyle(element)
+    top.value = style.getPropertyValue('--devframes-safe-area-top')
+    right.value = style.getPropertyValue('--devframes-safe-area-right')
+    bottom.value = style.getPropertyValue('--devframes-safe-area-bottom')
+    left.value = style.getPropertyValue('--devframes-safe-area-left')
+  }
+
+  tryOnMounted(update)
+  useEventListener('resize', useDebounceFn(update), { passive: true })
+
+  return { top, right, bottom, left, update }
+}