From 93dec0c15f72a79b05d7a9b6094d3fd75094e027 Mon Sep 17 00:00:00 2001
From: Wurielle <noahfenghom@gmail.com>
Date: Mon, 1 Jan 2024 11:49:52 +0100
Subject: [PATCH 1/2] fix: fix tooltip position on focuswithin

---
 .../modules/electron-window-manager/index.ts  | 10 ++++----
 .../components/NvMessengerLinksBar.vue        |  2 +-
 .../components/overlay/Tooltip/NvTooltip.vue  | 24 ++++++++++++++-----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/app/src/modules/electron-window-manager/index.ts b/apps/app/src/modules/electron-window-manager/index.ts
index 35ea4be0..7b06cbef 100644
--- a/apps/app/src/modules/electron-window-manager/index.ts
+++ b/apps/app/src/modules/electron-window-manager/index.ts
@@ -1,9 +1,9 @@
-export type Instance = {
+export type ElectronWindowManagerInstance = {
   name: string
   window: Electron.BrowserWindow
 }
 export type Instances = {
-  [key: string]: Instance
+  [key: string]: ElectronWindowManagerInstance
 }
 
 const ElectronWindowManager = () => {
@@ -12,7 +12,7 @@ const ElectronWindowManager = () => {
   async function registerInstance(
     name: string,
     createWindow: (winName: string) => Promise<Electron.BrowserWindow>,
-  ): Promise<Instance> {
+  ): Promise<ElectronWindowManagerInstance> {
     const window = await createWindow(name)
     instances[name] = {
       name,
@@ -21,11 +21,11 @@ const ElectronWindowManager = () => {
     return instances[name]
   }
 
-  function getInstanceByName(name: string): Instance | undefined {
+  function getInstanceByName(name: string): ElectronWindowManagerInstance | undefined {
     return instances[name]
   }
 
-  function getInstances(): Instance[] {
+  function getInstances(): ElectronWindowManagerInstance[] {
     return Object.values(instances)
   }
 
diff --git a/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue b/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue
index b3ec9844..f9af25c9 100644
--- a/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue
+++ b/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue
@@ -22,7 +22,7 @@
       <NvTooltip>
         <NvText>Follow on Twitter</NvText>
         <template #reference>
-          <a href="https://twitter.com/wurielle" target="_blank">
+          <a href="https://twitter.com/joyfuldeceased" target="_blank">
             <span class="hidden">Twitter</span>
             <NvButton icon-name="twitter-alt" size="sm"/>
           </a>
diff --git a/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue b/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue
index 3b6ca377..2e5d1a22 100644
--- a/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue
+++ b/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue
@@ -1,6 +1,6 @@
 <template>
-  <StTooltip v-bind="props">
-    <tippy v-bind="tippyProps">
+  <StTooltip ref="tooltip" v-bind="props">
+    <tippy ref="tippyInstance" v-bind="tippyProps">
       <slot name="reference"/>
       <template #content>
         <slot/>
@@ -9,14 +9,15 @@
   </StTooltip>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
+import { defineProps, ref, watch } from 'vue'
 import { StTooltip } from './tooltip.styled'
 import { props as propsDefinition } from './tooltip.shared'
-import { Tippy } from 'vue-tippy'
+import { Tippy, TippyInstance, TippyOptions } from 'vue-tippy'
 import tokens from '@/styles/tokens'
+import { MaybeElement, useFocusWithin } from '@vueuse/core'
 
 const props = defineProps(propsDefinition)
-const tippyProps: typeof props['tippyOptions'] = {
+const tippyProps: TippyOptions = {
   trigger: 'mouseenter focus',
   delay: [250, 0],
   interactive: false,
@@ -26,5 +27,16 @@ const tippyProps: typeof props['tippyOptions'] = {
   theme: `tooltip`,
   maxWidth: 300,
   ...props.tippyOptions,
-}
+} as TippyOptions
+const tooltip = ref<MaybeElement>()
+const tippyInstance = ref<TippyInstance>()
+const { focused } = useFocusWithin(tooltip)
+watch(focused, (value) => {
+  const instance = tippyInstance.value
+  if (value) {
+    if (instance && 'disable' in instance) instance.disable()
+  } else {
+    if (instance && 'enable' in instance) instance.enable()
+  }
+})
 </script>

From e2486f6f9d58f0f760e6ad3060a79d4b961f22e0 Mon Sep 17 00:00:00 2001
From: Wurielle <Wurielle@users.noreply.github.com>
Date: Mon, 1 Jan 2024 10:50:24 +0000
Subject: [PATCH 2/2] style: prettier formatting

---
 .../messenger/components/NvMessengerLinksBar.vue      | 11 ++++++-----
 .../ui/src/components/overlay/Tooltip/NvTooltip.vue   |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue b/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue
index f9af25c9..cc5350d0 100644
--- a/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue
+++ b/apps/app/src/teams/messenger/components/NvMessengerLinksBar.vue
@@ -4,7 +4,7 @@
     <template #reference>
       <a href="https://github.com/nature-heart-software/izabela" target="_blank">
         <span class="hidden">GitHub</span>
-        <NvButton icon-name="info" type="plain"/>
+        <NvButton icon-name="info" type="plain" />
       </a>
     </template>
   </NvTooltip>
@@ -15,7 +15,7 @@
         <template #reference>
           <a href="https://github.com/nature-heart-software/izabela" target="_blank">
             <span class="hidden">GitHub</span>
-            <NvButton icon-name="github-alt" size="sm"/>
+            <NvButton icon-name="github-alt" size="sm" />
           </a>
         </template>
       </NvTooltip>
@@ -24,7 +24,7 @@
         <template #reference>
           <a href="https://twitter.com/joyfuldeceased" target="_blank">
             <span class="hidden">Twitter</span>
-            <NvButton icon-name="twitter-alt" size="sm"/>
+            <NvButton icon-name="twitter-alt" size="sm" />
           </a>
         </template>
       </NvTooltip>
@@ -33,7 +33,7 @@
         <template #reference>
           <a href="https://discord.gg/BmWtmYmaeQ" target="_blank">
             <span class="hidden">Discord</span>
-            <NvButton icon-name="discord" size="sm"/>
+            <NvButton icon-name="discord" size="sm" />
           </a>
         </template>
       </NvTooltip>
@@ -41,4 +41,5 @@
   </NvCard>
 </template>
 <script lang="ts" setup>
-import { NvButton, NvCard, NvGroup, NvText, NvTooltip } from '@packages/ui'</script>
+import { NvButton, NvCard, NvGroup, NvText, NvTooltip } from '@packages/ui'
+</script>
diff --git a/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue b/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue
index 2e5d1a22..107dd79c 100644
--- a/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue
+++ b/packages/ui/src/components/overlay/Tooltip/NvTooltip.vue
@@ -1,9 +1,9 @@
 <template>
   <StTooltip ref="tooltip" v-bind="props">
     <tippy ref="tippyInstance" v-bind="tippyProps">
-      <slot name="reference"/>
+      <slot name="reference" />
       <template #content>
-        <slot/>
+        <slot />
       </template>
     </tippy>
   </StTooltip>