fix: correct z-index in toast

Signed-off-by: Innei <[email protected]>

apps/renderer/src/components/ui/auto-completion/AutoCompletion.tsx

@@ -1,13 +1,12 @@
 import { Input } from "@follow/components/ui/input/index.js"
+import { useCorrectZIndex } from "@follow/components/ui/z-index/ctx.js"
 import { stopPropagation } from "@follow/utils/dom"
 import { cn } from "@follow/utils/utils"
 import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react"
 import { AnimatePresence, m } from "framer-motion"
 import Fuse from "fuse.js"
 import { forwardRef, Fragment, useCallback, useEffect, useState } from "react"
 
-import { useCorrectZIndex } from "../modal/stacked/hooks"
-
 export type Suggestion = {
   name: string
   value: string

apps/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx

@@ -4,6 +4,7 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@follow/components/ui/tooltip/index.jsx"
+import { useCorrectZIndex } from "@follow/components/ui/z-index/ctx.js"
 import { useContext } from "react"
 
 import type { LinkProps } from "../../link"
@@ -17,6 +18,7 @@ export const MarkdownLink = (props: LinkProps) => {
   const populatedFullHref = transformUrl(props.href)
 
   const parseTimeStamp = isAudio(populatedFullHref)
+  const zIndex = useCorrectZIndex(0)
   if (parseTimeStamp) {
     const childrenText = props.children
 
@@ -45,7 +47,7 @@ export const MarkdownLink = (props: LinkProps) => {
       </TooltipTrigger>
       {!!props.href && (
         <TooltipPortal>
-          <TooltipContent align="start" className="break-all" side="bottom">
+          <TooltipContent align="start" className="break-all" style={{ zIndex }} side="bottom">
             {populatedFullHref}
           </TooltipContent>
         </TooltipPortal>

apps/renderer/src/components/ui/modal/stacked/hooks.tsx

@@ -1,8 +1,6 @@
 import type { DragControls } from "framer-motion"
-import { useAtomValue } from "jotai"
-import { selectAtom } from "jotai/utils"
 import type { ResizeCallback, ResizeStartCallback } from "re-resizable"
-import { useCallback, useContext, useId, useMemo, useRef, useState } from "react"
+import { useCallback, useContext, useId, useRef, useState } from "react"
 import { flushSync } from "react-dom"
 import { useContextSelector } from "use-context-selector"
 import { useEventCallback } from "usehooks-ts"
@@ -12,7 +10,6 @@ import { jotaiStore } from "~/lib/jotai"
 
 import { modalStackAtom } from "./atom"
 import { ModalEventBus } from "./bus"
-import { MODAL_STACK_Z_INDEX } from "./constants"
 import { CurrentModalContext, CurrentModalStateContext } from "./context"
 import type { ModalProps, ModalStackOptions } from "./types"
 
@@ -161,17 +158,3 @@ export const useResizeableModal = (
 }
 
 export const useIsTopModal = () => useContextSelector(CurrentModalStateContext, (v) => v.isTop)
-
-export const useCorrectZIndex = (fallbackZIndex = 0) => {
-  const inModal = useCurrentModal()
-
-  return useAtomValue(
-    useMemo(
-      () =>
-        selectAtom(modalStackAtom, (v) =>
-          inModal ? v.length + MODAL_STACK_Z_INDEX + inModal.getIndex() + 1 : fallbackZIndex,
-        ),
-      [fallbackZIndex, inModal],
-    ),
-  )
-}

apps/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -1,13 +1,15 @@
 import { Divider } from "@follow/components/ui/divider/index.js"
 import { RootPortalProvider } from "@follow/components/ui/portal/provider.js"
 import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
+import { ZIndexProvider } from "@follow/components/ui/z-index/index.js"
 import { useRefValue } from "@follow/hooks"
 import { nextFrame, preventDefault, stopPropagation } from "@follow/utils/dom"
 import { cn, getOS } from "@follow/utils/utils"
 import * as Dialog from "@radix-ui/react-dialog"
 import type { BoundingBox } from "framer-motion"
 import { produce } from "immer"
-import { useSetAtom } from "jotai"
+import { useAtomValue, useSetAtom } from "jotai"
+import { selectAtom } from "jotai/utils"
 import { Resizable } from "re-resizable"
 import type { FC, PropsWithChildren, SyntheticEvent } from "react"
 import {
@@ -405,6 +407,14 @@ const ModalContext: FC<
     isTop: boolean
   }
 > = ({ modalContextProps, isTop, children }) => {
+  const { getIndex } = modalContextProps
+  const zIndex = useAtomValue(
+    useMemo(
+      () => selectAtom(modalStackAtom, (v) => v.length + MODAL_STACK_Z_INDEX + getIndex() + 1),
+      [getIndex],
+    ),
+  )
+
   return (
     <CurrentModalContext.Provider value={modalContextProps}>
       <CurrentModalStateContext.Provider
@@ -415,7 +425,7 @@ const ModalContext: FC<
           [isTop],
         )}
       >
-        {children}
+        <ZIndexProvider zIndex={zIndex}>{children}</ZIndexProvider>
       </CurrentModalStateContext.Provider>
     </CurrentModalContext.Provider>
   )

apps/renderer/src/providers/root-providers.tsx

@@ -34,6 +34,7 @@ export const RootProviders: FC<PropsWithChildren> = ({ children }) => (
       <HotkeysProvider initiallyActiveScopes={HotKeyScopeMap.Home}>
         <Provider store={jotaiStore}>
           <I18nProvider>
+            <Toaster />
             <EventProvider />
 
             <UserProvider />
@@ -52,7 +53,6 @@ export const RootProviders: FC<PropsWithChildren> = ({ children }) => (
               <LazyLottieRenderContainer />
               <LazyExternalJumpInProvider />
             </Suspense>
-            <Toaster />
           </I18nProvider>
         </Provider>
       </HotkeysProvider>

packages/components/src/ui/toast/index.tsx

@@ -1,19 +1,23 @@
 import { useIsDark } from "@follow/hooks"
 import { Toaster as Sonner } from "sonner"
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+import { ZIndexProvider } from "../z-index"
 
+type ToasterProps = React.ComponentProps<typeof Sonner>
+const TOAST_Z_INDEX = 999999999
 export const Toaster = ({ ...props }: ToasterProps) => (
-  <Sonner
-    theme={useIsDark() ? "dark" : "light"}
-    toastOptions={{
-      className: tw`pointer-events-auto group`,
-      classNames: {
-        content: "min-w-0",
-        icon: tw`self-start translate-y-[2px]`,
-        closeButton: tw`!border-border bg-background transition-opacity hover:!bg-background will-change-opacity duration-200 opacity-0 group-hover:opacity-100`,
-      },
-    }}
-    {...props}
-  />
+  <ZIndexProvider zIndex={TOAST_Z_INDEX}>
+    <Sonner
+      theme={useIsDark() ? "dark" : "light"}
+      toastOptions={{
+        className: tw`pointer-events-auto group`,
+        classNames: {
+          content: "min-w-0",
+          icon: tw`self-start translate-y-[2px]`,
+          closeButton: tw`!border-border bg-background transition-opacity hover:!bg-background will-change-opacity duration-200 opacity-0 group-hover:opacity-100`,
+        },
+      }}
+      {...props}
+    />
+  </ZIndexProvider>
 )

packages/components/src/ui/z-index/ctx.tsx

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react"
+
+export const ZIndexContext = createContext(0)
+
+export const useCorrectZIndex = (zIndex: number) => useContext(ZIndexContext) + zIndex

packages/components/src/ui/z-index/index.tsx

@@ -0,0 +1,7 @@
+import { ZIndexContext } from "./ctx"
+
+export const ZIndexProvider: Component<{
+  zIndex: number
+}> = (props) => {
+  return <ZIndexContext.Provider value={props.zIndex}>{props.children}</ZIndexContext.Provider>
+}