mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-25 19:15:18 +02:00
Merge pull request #1432 from suryo12/refactor/1358-jotai-slideout-tick
refactor(web): replace slideout panel window event with jotai atom (f…
This commit is contained in:
commit
ba18d932e6
3 changed files with 28 additions and 13 deletions
|
|
@ -105,7 +105,7 @@ import { useMediaQuery } from "@/hooks/use-media-query";
|
||||||
import { useElectronAPI } from "@/hooks/use-platform";
|
import { useElectronAPI } from "@/hooks/use-platform";
|
||||||
import { captureDisplayToPngDataUrl } from "@/lib/chat/display-media-capture";
|
import { captureDisplayToPngDataUrl } from "@/lib/chat/display-media-capture";
|
||||||
import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
|
import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
|
||||||
import { SLIDEOUT_PANEL_OPENED_EVENT } from "@/lib/layout-events";
|
import { slideoutOpenedTickAtom } from "@/lib/layout-events";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
const COMPOSER_PLACEHOLDER = "Ask anything, type / for prompts, type @ to mention docs";
|
const COMPOSER_PLACEHOLDER = "Ask anything, type / for prompts, type @ to mention docs";
|
||||||
|
|
@ -478,15 +478,18 @@ const Composer: FC = () => {
|
||||||
editorRef.current?.focus();
|
editorRef.current?.focus();
|
||||||
}, [isDesktop, showDocumentPopover, showPromptPicker, threadId]);
|
}, [isDesktop, showDocumentPopover, showPromptPicker, threadId]);
|
||||||
|
|
||||||
// Close document picker when a slide-out panel (inbox, etc.) opens.
|
// Close document picker when a sidebar slide-out panel (inbox, etc.) opens.
|
||||||
|
// React only on changes to the tick — comparing against the previously-seen
|
||||||
|
// value preserves the one-shot semantics of the prior window-event approach
|
||||||
|
// (no retroactive close on mount if a panel had already opened earlier).
|
||||||
|
const slideoutOpenedTick = useAtomValue(slideoutOpenedTickAtom);
|
||||||
|
const lastSeenSlideoutTickRef = useRef(slideoutOpenedTick);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handler = () => {
|
if (lastSeenSlideoutTickRef.current === slideoutOpenedTick) return;
|
||||||
setShowDocumentPopover(false);
|
lastSeenSlideoutTickRef.current = slideoutOpenedTick;
|
||||||
setMentionQuery("");
|
setShowDocumentPopover(false);
|
||||||
};
|
setMentionQuery("");
|
||||||
window.addEventListener(SLIDEOUT_PANEL_OPENED_EVENT, handler);
|
}, [slideoutOpenedTick]);
|
||||||
return () => window.removeEventListener(SLIDEOUT_PANEL_OPENED_EVENT, handler);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Sync editor text into assistant-ui's composer and mirror the chip
|
// Sync editor text into assistant-ui's composer and mirror the chip
|
||||||
// atom from the editor's reported ``docs``. The editor is the
|
// atom from the editor's reported ``docs``. The editor is the
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useSetAtom } from "jotai";
|
||||||
import { AnimatePresence, motion } from "motion/react";
|
import { AnimatePresence, motion } from "motion/react";
|
||||||
import { useCallback, useEffect } from "react";
|
import { useCallback, useEffect } from "react";
|
||||||
import { useIsMobile } from "@/hooks/use-mobile";
|
import { useIsMobile } from "@/hooks/use-mobile";
|
||||||
import { SLIDEOUT_PANEL_OPENED_EVENT } from "@/lib/layout-events";
|
import { slideoutOpenedTickAtom } from "@/lib/layout-events";
|
||||||
|
|
||||||
interface SidebarSlideOutPanelProps {
|
interface SidebarSlideOutPanelProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
|
|
@ -29,12 +30,13 @@ export function SidebarSlideOutPanel({
|
||||||
children,
|
children,
|
||||||
}: SidebarSlideOutPanelProps) {
|
}: SidebarSlideOutPanelProps) {
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
const bumpSlideoutOpenedTick = useSetAtom(slideoutOpenedTickAtom);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (open) {
|
if (open) {
|
||||||
window.dispatchEvent(new Event(SLIDEOUT_PANEL_OPENED_EVENT));
|
bumpSlideoutOpenedTick((tick) => tick + 1);
|
||||||
}
|
}
|
||||||
}, [open]);
|
}, [open, bumpSlideoutOpenedTick]);
|
||||||
|
|
||||||
const handleEscape = useCallback(
|
const handleEscape = useCallback(
|
||||||
(e: KeyboardEvent) => {
|
(e: KeyboardEvent) => {
|
||||||
|
|
|
||||||
|
|
@ -1 +1,11 @@
|
||||||
export const SLIDEOUT_PANEL_OPENED_EVENT = "slideout-panel-opened";
|
import { atom } from "jotai";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tick counter that increments each time a sidebar slide-out panel opens.
|
||||||
|
* Consumers read this with `useAtomValue` and store the last-seen value in
|
||||||
|
* a ref so the effect fires only when the tick changes. This preserves the
|
||||||
|
* one-shot semantics of the previous window-event implementation: a
|
||||||
|
* subscriber that mounts after a panel has already opened does not
|
||||||
|
* retroactively re-trigger.
|
||||||
|
*/
|
||||||
|
export const slideoutOpenedTickAtom = atom(0);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue