diff options
Diffstat (limited to 'extension/react-app/src/components')
| -rw-r--r-- | extension/react-app/src/components/ContinueButton.tsx | 25 | ||||
| -rw-r--r-- | extension/react-app/src/components/Layout.tsx | 146 |
2 files changed, 103 insertions, 68 deletions
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx index 6d03c820..632acc75 100644 --- a/extension/react-app/src/components/ContinueButton.tsx +++ b/extension/react-app/src/components/ContinueButton.tsx @@ -3,14 +3,16 @@ import { Button } from "."; import { PlayIcon } from "@heroicons/react/24/outline"; import { useSelector } from "react-redux"; import { RootStore } from "../redux/store"; +import { useEffect, useState } from "react"; -let StyledButton = styled(Button)` +let StyledButton = styled(Button)<{ color?: string | null }>` margin: auto; margin-top: 8px; + margin-bottom: 16px; display: grid; grid-template-columns: 30px 1fr; align-items: center; - background: #be1b55; + background: ${(props) => props.color || "#be1b55"}; &:hover { transition-property: "background"; @@ -23,8 +25,27 @@ function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) { (state: RootStore) => state.config.vscMediaUrl ); + const [buttonColor, setButtonColor] = useState<string | null>( + localStorage.getItem("continueButtonColor") + ); + + useEffect(() => { + const handleStorageChange = (e: any) => { + if (e.key === "continueButtonColor") { + // Update your state or do whatever you need to do here + setButtonColor(e.newValue); + } + }; + + window.addEventListener("storage", handleStorageChange); + + // Don't forget to cleanup the event listener + return () => window.removeEventListener("storage", handleStorageChange); + }, []); + return ( <StyledButton + color={buttonColor as any} hidden={props.hidden} style={{ fontSize: "10px" }} className="m-auto press-start-2p" diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx index 897fd683..143b2302 100644 --- a/extension/react-app/src/components/Layout.tsx +++ b/extension/react-app/src/components/Layout.tsx @@ -25,6 +25,7 @@ import { useNavigate } from "react-router-dom"; import ModelSelect from "./ModelSelect"; // #region Styled Components +const FOOTER_HEIGHT = "1.8em"; const LayoutTopDiv = styled.div` height: 100%; @@ -58,6 +59,14 @@ const Footer = styled.footer` justify-content: right; padding: 8px; align-items: center; + width: calc(100% - 16px); + height: ${FOOTER_HEIGHT}; +`; + +const GridDiv = styled.div` + display: grid; + grid-template-rows: 1fr auto; + height: 100vh; `; // #endregion @@ -122,7 +131,77 @@ const Layout = () => { }} message={dialogMessage} /> - <Outlet /> + + <GridDiv> + <div style={{ overflow: "scroll" }}> + <Outlet /> + </div> + <Footer> + {localStorage.getItem("hideFeature") === "true" || ( + <SparklesIcon + className="mr-auto cursor-pointer" + onClick={() => { + localStorage.setItem("hideFeature", "true"); + }} + onMouseEnter={() => { + dispatch( + setBottomMessage( + "🎁 New Feature: Use ⌘⇧R automatically debug errors in the terminal (you can click the sparkle icon to make it go away)" + ) + ); + }} + onMouseLeave={() => { + dispatch(setBottomMessage(undefined)); + }} + width="1.3em" + height="1.3em" + color="yellow" + /> + )} + + <ModelSelect /> + <HeaderButtonWithText + onClick={() => { + client?.loadSession(undefined); + }} + text="New Session (⌥⌘N)" + > + <PlusIcon width="1.4em" height="1.4em" /> + </HeaderButtonWithText> + <HeaderButtonWithText + onClick={() => { + navigate("/history"); + }} + text="History" + > + <FolderIcon width="1.4em" height="1.4em" /> + </HeaderButtonWithText> + <a + href="https://continue.dev/docs/how-to-use-continue" + className="no-underline" + > + <HeaderButtonWithText text="Docs"> + <BookOpenIcon width="1.4em" height="1.4em" /> + </HeaderButtonWithText> + </a> + <a + href="https://github.com/continuedev/continue/issues/new/choose" + className="no-underline" + > + <HeaderButtonWithText text="Feedback"> + <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" /> + </HeaderButtonWithText> + </a> + <HeaderButtonWithText + onClick={() => { + navigate("/settings"); + }} + text="Settings" + > + <Cog6ToothIcon width="1.4em" height="1.4em" /> + </HeaderButtonWithText> + </Footer> + </GridDiv> <BottomMessageDiv displayOnBottom={displayBottomMessageOnBottom} @@ -138,71 +217,6 @@ const Layout = () => { > {bottomMessage} </BottomMessageDiv> - <Footer> - {localStorage.getItem("hideFeature") === "true" || ( - <SparklesIcon - className="mr-auto cursor-pointer" - onClick={() => { - localStorage.setItem("hideFeature", "true"); - }} - onMouseEnter={() => { - dispatch( - setBottomMessage( - "🎁 New Feature: Use ⌘⇧R automatically debug errors in the terminal (you can click the sparkle icon to make it go away)" - ) - ); - }} - onMouseLeave={() => { - dispatch(setBottomMessage(undefined)); - }} - width="1.3em" - height="1.3em" - color="yellow" - /> - )} - - <ModelSelect /> - <HeaderButtonWithText - onClick={() => { - client?.loadSession(undefined); - }} - text="New Session (⌥⌘N)" - > - <PlusIcon width="1.4em" height="1.4em" /> - </HeaderButtonWithText> - <HeaderButtonWithText - onClick={() => { - navigate("/history"); - }} - text="History" - > - <FolderIcon width="1.4em" height="1.4em" /> - </HeaderButtonWithText> - <a - href="https://continue.dev/docs/how-to-use-continue" - className="no-underline" - > - <HeaderButtonWithText text="Docs"> - <BookOpenIcon width="1.4em" height="1.4em" /> - </HeaderButtonWithText> - </a> - <a - href="https://github.com/continuedev/continue/issues/new/choose" - className="no-underline" - > - <HeaderButtonWithText text="Feedback"> - <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" /> - </HeaderButtonWithText> - </a> - <HeaderButtonWithText - onClick={() => { - navigate("/settings"); - }} - text="Settings" - > - <Cog6ToothIcon width="1.4em" height="1.4em" /> - </HeaderButtonWithText> - </Footer> </div> </LayoutTopDiv> ); |