From 84413b7201c67c7545ca67216f2f68b677ab8175 Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 7 Apr 2023 20:04:23 +0800 Subject: [PATCH] chore: update responsible connection sidebar style --- src/components/ConnectionSidebar.tsx | 35 ++++++++++++++++++---- src/components/ConversationView/Header.tsx | 10 +++++-- src/components/ConversationView/index.tsx | 10 +++++-- src/pages/index.tsx | 34 ++------------------- src/store/layout.ts | 10 ++++++- 5 files changed, 56 insertions(+), 43 deletions(-) diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx index b408e22..83554d1 100644 --- a/src/components/ConnectionSidebar.tsx +++ b/src/components/ConnectionSidebar.tsx @@ -1,8 +1,9 @@ +import { Drawer } from "@mui/material"; import { head } from "lodash-es"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { useTranslation } from "react-i18next"; -import { useConversationStore, useConnectionStore, useLayoutStore } from "@/store"; +import { useConversationStore, useConnectionStore, useLayoutStore, ResponsiveWidth } from "@/store"; import { Conversation, Connection } from "@/types"; import Select from "./kit/Select"; import Icon from "./Icon"; @@ -40,6 +41,25 @@ const ConnectionSidebar = () => { conversation.databaseName === currentConnectionCtx?.database?.name ); + useEffect(() => { + const handleWindowResize = () => { + if (window.innerWidth < ResponsiveWidth.sm) { + layoutStore.toggleSidebar(false); + layoutStore.setIsMobileView(true); + } else { + layoutStore.toggleSidebar(true); + layoutStore.setIsMobileView(false); + } + }; + + handleWindowResize(); + window.addEventListener("resize", handleWindowResize); + + return () => { + window.removeEventListener("resize", handleWindowResize); + }; + }, []); + useEffect(() => { if (currentConnectionCtx?.connection) { setIsRequestingDatabase(true); @@ -112,7 +132,9 @@ const ConnectionSidebar = () => { const handleConversationSelect = (conversation: Conversation) => { conversationStore.setCurrentConversation(conversation); - layoutStore.toggleSidebar(false); + if (layoutStore.isMobileView) { + layoutStore.toggleSidebar(false); + } }; const handleEditConversationTitle = (conversation: Conversation) => { @@ -132,8 +154,11 @@ const ConnectionSidebar = () => { return ( <> - + {createPortal( { const { className } = props; + const layoutStore = useLayoutStore(); const conversationStore = useConversationStore(); const currentConversation = conversationStore.currentConversation; const title = currentConversation?.title || "SQL Chat"; @@ -24,9 +25,12 @@ const Header = (props: Props) => { } w-full flex flex-row justify-between items-center lg:grid lg:grid-cols-3 py-1 border-b z-1 transition-all duration-300`} >
-
diff --git a/src/components/ConversationView/index.tsx b/src/components/ConversationView/index.tsx index a2553f8..b81bbaf 100644 --- a/src/components/ConversationView/index.tsx +++ b/src/components/ConversationView/index.tsx @@ -8,6 +8,7 @@ import { useMessageStore, useConnectionStore, useSettingStore, + useLayoutStore, } from "@/store"; import { CreatorRole, Message } from "@/types"; import { countTextTokens, generateUUID } from "@/utils"; @@ -23,6 +24,7 @@ const MAX_TOKENS = 4000; const ConversationView = () => { const settingStore = useSettingStore(); + const layoutStore = useLayoutStore(); const connectionStore = useConnectionStore(); const conversationStore = useConversationStore(); const messageStore = useMessageStore(); @@ -207,9 +209,11 @@ const ConversationView = () => { }; return ( -
@@ -225,7 +229,7 @@ const ConversationView = () => {
-
+ ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 55f7e61..c702f02 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,8 +2,7 @@ import { NextPage } from "next"; import Head from "next/head"; import dynamic from "next/dynamic"; import Script from "next/script"; -import React, { useEffect } from "react"; -import { ResponsiveWidth, useLayoutStore } from "@/store"; +import React from "react"; // Use dynamic import to avoid page hydrated. // reference: https://github.com/pmndrs/zustand/issues/1145#issuecomment-1316431268 @@ -18,25 +17,6 @@ const QueryDrawer = dynamic(() => import("@/components/QueryDrawer"), { }); const IndexPage: NextPage = () => { - const layoutStore = useLayoutStore(); - - useEffect(() => { - const handleWindowResize = () => { - if (window.innerWidth < ResponsiveWidth.lg) { - layoutStore.toggleSidebar(false); - } else { - layoutStore.toggleSidebar(true); - } - }; - - handleWindowResize(); - window.addEventListener("resize", handleWindowResize); - - return () => { - window.removeEventListener("resize", handleWindowResize); - }; - }, []); - return (
@@ -53,17 +33,9 @@ const IndexPage: NextPage = () => {

SQL Chat

-
- layoutStore.toggleSidebar(e.target.checked)} - /> - - {/* Render sidebar after chatview to prevent z-index problem */} +
+
diff --git a/src/store/layout.ts b/src/store/layout.ts index 675905f..52574ff 100644 --- a/src/store/layout.ts +++ b/src/store/layout.ts @@ -4,16 +4,18 @@ import { create } from "zustand"; // reference: https://tailwindcss.com/docs/responsive-design export enum ResponsiveWidth { sm = 640, - lg = 1024, } interface LayoutState { showSidebar: boolean; + isMobileView: boolean; toggleSidebar: (show?: boolean) => void; + setIsMobileView: (value: boolean) => void; } export const useLayoutStore = create()((set) => ({ showSidebar: true, + isMobileView: false, toggleSidebar: (show) => { if (isUndefined(show)) { set((state) => ({ @@ -27,4 +29,10 @@ export const useLayoutStore = create()((set) => ({ })); } }, + setIsMobileView: (value) => { + set((state) => ({ + ...state, + isMobileView: value, + })); + }, }));