From d713d016000e09f245fc9496bd9864293aaa95c0 Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Tue, 19 Sep 2023 01:47:15 +0800 Subject: [PATCH 1/2] feat: close #2848 click drag icon to toggle sidebar width --- app/components/sidebar.tsx | 79 +++++++++++++++++++++++--------------- app/constant.ts | 1 + app/store/config.ts | 9 ++++- 3 files changed, 57 insertions(+), 32 deletions(-) diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx index 4519c4be..3ca16789 100644 --- a/app/components/sidebar.tsx +++ b/app/components/sidebar.tsx @@ -17,6 +17,7 @@ import Locale from "../locales"; import { useAppConfig, useChatStore } from "../store"; import { + DEFAULT_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH, NARROW_SIDEBAR_WIDTH, @@ -57,39 +58,57 @@ function useDragSideBar() { const config = useAppConfig(); const startX = useRef(0); - const startDragWidth = useRef(config.sidebarWidth ?? 300); + const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH); const lastUpdateTime = useRef(Date.now()); - const handleMouseMove = useRef((e: MouseEvent) => { - if (Date.now() < lastUpdateTime.current + 50) { - return; - } - lastUpdateTime.current = Date.now(); - const d = e.clientX - startX.current; - const nextWidth = limit(startDragWidth.current + d); + const toggleSideBar = () => { config.update((config) => { - if (nextWidth < MIN_SIDEBAR_WIDTH) { - config.sidebarWidth = NARROW_SIDEBAR_WIDTH; + if (config.sidebarWidth < MIN_SIDEBAR_WIDTH) { + config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH; } else { - config.sidebarWidth = nextWidth; + config.sidebarWidth = NARROW_SIDEBAR_WIDTH; } }); - }); - - const handleMouseUp = useRef(() => { - // In useRef the data is non-responsive, so `config.sidebarWidth` can't get the dynamic sidebarWidth - // startDragWidth.current = config.sidebarWidth ?? 300; - window.removeEventListener("mousemove", handleMouseMove.current); - window.removeEventListener("mouseup", handleMouseUp.current); - }); - - const onDragMouseDown = (e: MouseEvent) => { - startX.current = e.clientX; - // Remembers the initial width each time the mouse is pressed - startDragWidth.current = config.sidebarWidth; - window.addEventListener("mousemove", handleMouseMove.current); - window.addEventListener("mouseup", handleMouseUp.current); }; + + const onDragStart = (e: MouseEvent) => { + // Remembers the initial width each time the mouse is pressed + startX.current = e.clientX; + startDragWidth.current = config.sidebarWidth; + const dragStartTime = Date.now(); + + const handleDragMove = (e: MouseEvent) => { + if (Date.now() < lastUpdateTime.current + 20) { + return; + } + lastUpdateTime.current = Date.now(); + const d = e.clientX - startX.current; + const nextWidth = limit(startDragWidth.current + d); + config.update((config) => { + if (nextWidth < MIN_SIDEBAR_WIDTH) { + config.sidebarWidth = NARROW_SIDEBAR_WIDTH; + } else { + config.sidebarWidth = nextWidth; + } + }); + }; + + const handleDragEnd = () => { + // In useRef the data is non-responsive, so `config.sidebarWidth` can't get the dynamic sidebarWidth + window.removeEventListener("pointermove", handleDragMove); + window.removeEventListener("pointerup", handleDragEnd); + + // if user click the drag icon, should toggle the sidebar + const shouldFireClick = Date.now() - dragStartTime < 300; + if (shouldFireClick) { + toggleSideBar(); + } + }; + + window.addEventListener("pointermove", handleDragMove); + window.addEventListener("pointerup", handleDragEnd); + }; + const isMobileScreen = useMobileScreen(); const shouldNarrow = !isMobileScreen && config.sidebarWidth < MIN_SIDEBAR_WIDTH; @@ -97,13 +116,13 @@ function useDragSideBar() { useEffect(() => { const barWidth = shouldNarrow ? NARROW_SIDEBAR_WIDTH - : limit(config.sidebarWidth ?? 300); + : limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH); const sideBarWidth = isMobileScreen ? "100vw" : `${barWidth}px`; document.documentElement.style.setProperty("--sidebar-width", sideBarWidth); }, [config.sidebarWidth, isMobileScreen, shouldNarrow]); return { - onDragMouseDown, + onDragStart, shouldNarrow, }; } @@ -112,7 +131,7 @@ export function SideBar(props: { className?: string }) { const chatStore = useChatStore(); // drag side bar - const { onDragMouseDown, shouldNarrow } = useDragSideBar(); + const { onDragStart, shouldNarrow } = useDragSideBar(); const navigate = useNavigate(); const config = useAppConfig(); @@ -206,7 +225,7 @@ export function SideBar(props: { className?: string }) {
onDragMouseDown(e as any)} + onPointerDown={(e) => onDragStart(e as any)} >
diff --git a/app/constant.ts b/app/constant.ts index f76eb3a9..c6cba3ef 100644 --- a/app/constant.ts +++ b/app/constant.ts @@ -43,6 +43,7 @@ export enum StoreKey { Sync = "sync", } +export const DEFAULT_SIDEBAR_WIDTH = 300; export const MAX_SIDEBAR_WIDTH = 500; export const MIN_SIDEBAR_WIDTH = 230; export const NARROW_SIDEBAR_WIDTH = 100; diff --git a/app/store/config.ts b/app/store/config.ts index b0131954..956e5f3e 100644 --- a/app/store/config.ts +++ b/app/store/config.ts @@ -1,6 +1,11 @@ import { LLMModel } from "../client/api"; import { getClientConfig } from "../config/client"; -import { DEFAULT_INPUT_TEMPLATE, DEFAULT_MODELS, StoreKey } from "../constant"; +import { + DEFAULT_INPUT_TEMPLATE, + DEFAULT_MODELS, + DEFAULT_SIDEBAR_WIDTH, + StoreKey, +} from "../constant"; import { createPersistStore } from "../utils/store"; export type ModelType = (typeof DEFAULT_MODELS)[number]["name"]; @@ -29,7 +34,7 @@ export const DEFAULT_CONFIG = { tightBorder: !!getClientConfig()?.isApp, sendPreviewBubble: true, enableAutoGenerateTitle: true, - sidebarWidth: 300, + sidebarWidth: DEFAULT_SIDEBAR_WIDTH, disablePromptHint: false, From 61ca60c550295c75e3e3feb8061455d298c27501 Mon Sep 17 00:00:00 2001 From: Yidadaa Date: Tue, 19 Sep 2023 01:58:52 +0800 Subject: [PATCH 2/2] fix: #2817 min-height for landscape orientation on mobile phone --- app/components/home.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 77f1c853..b836d2be 100644 --- a/app/components/home.module.scss +++ b/app/components/home.module.scss @@ -6,7 +6,7 @@ color: var(--black); background-color: var(--white); min-width: 600px; - min-height: 480px; + min-height: 370px; max-width: 1200px; display: flex;