diff --git a/apps/renderer/src/components/ui/modal/stacked/context.tsx b/apps/renderer/src/components/ui/modal/stacked/context.tsx index 138a2d986..76d9e2006 100644 --- a/apps/renderer/src/components/ui/modal/stacked/context.tsx +++ b/apps/renderer/src/components/ui/modal/stacked/context.tsx @@ -21,9 +21,9 @@ const defaultCtxValue: CurrentModalContentProps = { export const CurrentModalContext = reactCreateContext(defaultCtxValue) export const CurrentModalStateContext = createContextSelector<{ - isActive: boolean + isTop: boolean }>({ - isActive: false, + isTop: true, }) export type ModalContentComponent = FC diff --git a/apps/renderer/src/components/ui/modal/stacked/hooks.tsx b/apps/renderer/src/components/ui/modal/stacked/hooks.tsx index 79d59d7da..50d0694cb 100644 --- a/apps/renderer/src/components/ui/modal/stacked/hooks.tsx +++ b/apps/renderer/src/components/ui/modal/stacked/hooks.tsx @@ -2,13 +2,14 @@ import type { DragControls } from "framer-motion" import type { ResizeCallback, ResizeStartCallback } from "re-resizable" import { useCallback, useContext, useId, useRef, useState } from "react" import { flushSync } from "react-dom" +import { useContextSelector } from "use-context-selector" import { useEventCallback } from "usehooks-ts" import { getUISettings } from "~/atoms/settings/ui" import { jotaiStore } from "~/lib/jotai" import { modalStackAtom } from "./atom" -import { CurrentModalContext } from "./context" +import { CurrentModalContext, CurrentModalStateContext } from "./context" import type { ModalProps, ModalStackOptions } from "./types" export const modalIdToPropsMap = {} as Record @@ -147,3 +148,5 @@ export const useResizeableModal = ( preferDragDir, } } + +export const useIsTopModal = () => useContextSelector(CurrentModalStateContext, (v) => v.isTop) diff --git a/apps/renderer/src/components/ui/modal/stacked/modal.tsx b/apps/renderer/src/components/ui/modal/stacked/modal.tsx index f81e749e1..52909166e 100644 --- a/apps/renderer/src/components/ui/modal/stacked/modal.tsx +++ b/apps/renderer/src/components/ui/modal/stacked/modal.tsx @@ -3,7 +3,7 @@ import type { BoundingBox } from "framer-motion" import { produce } from "immer" import { useSetAtom } from "jotai" import { Resizable } from "re-resizable" -import type { PropsWithChildren, SyntheticEvent } from "react" +import type { FC, PropsWithChildren, SyntheticEvent } from "react" import { createElement, forwardRef, @@ -34,7 +34,7 @@ import { EllipsisHorizontalTextWithTooltip } from "../../typography" import { modalStackAtom } from "./atom" import { MODAL_STACK_Z_INDEX, modalMontionConfig } from "./constants" import type { CurrentModalContentProps, ModalActionsInternal } from "./context" -import { CurrentModalContext } from "./context" +import { CurrentModalContext, CurrentModalStateContext } from "./context" import { useModalAnimate } from "./internal/use-animate" import { useModalResizeAndDrag } from "./internal/use-drag" import { useModalSelect } from "./internal/use-select" @@ -220,6 +220,7 @@ export const ModalInternal = memo( } /> ) + if (CustomModalComponent) { return ( @@ -251,9 +252,9 @@ export const ModalInternal = memo( onSelect={handleSelectStart} onKeyUp={handleDetectSelectEnd} > - + {finalChildren} - + @@ -350,9 +351,9 @@ export const ModalInternal = memo(
- + {finalChildren} - +
@@ -374,3 +375,25 @@ const useShortcutScope = () => { } }, [switchHotkeyScope]) } + +const ModalContext: FC< + PropsWithChildren & { + modalContextProps: CurrentModalContentProps + isTop: boolean + } +> = ({ modalContextProps, isTop, children }) => { + return ( + + ({ + isTop: !!isTop, + }), + [isTop], + )} + > + {children} + + + ) +} diff --git a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx index 10d3fbae8..833888505 100644 --- a/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx +++ b/apps/renderer/src/modules/discover/DiscoverFeedForm.tsx @@ -14,7 +14,7 @@ import { CopyButton } from "~/components/ui/code-highlighter" import { Form, FormItem, FormLabel } from "~/components/ui/form" import { Input } from "~/components/ui/input" import { Markdown } from "~/components/ui/markdown" -import { useCurrentModal, useModalStack } from "~/components/ui/modal" +import { useCurrentModal, useIsTopModal, useModalStack } from "~/components/ui/modal" import { Select, SelectContent, @@ -226,12 +226,13 @@ export const DiscoverFeedForm = ({ ) const formElRef = useRef(null) - + const isTop = useIsTopModal() useLayoutEffect(() => { + if (!isTop) return const $form = formElRef.current if (!$form) return $form.querySelectorAll("input")[0]?.focus() - }, [formElRef]) + }, [formElRef, isTop]) const modal = useCurrentModal()