feat: :lipstick: UI Improvements!

1 files changed, 23 insertions, 63 deletions

diff --git a/extension/react-app/src/components/Layout.tsx b/extension/react-app/src/components/Layout.tsx
index a3b1946a..0721585d 100644
--- a/extension/react-app/src/components/Layout.tsx
+++ b/extension/react-app/src/components/Layout.tsx
@@ -3,15 +3,13 @@ import { defaultBorderRadius, secondaryDark, vscForeground } from ".";
 import { Outlet } from "react-router-dom";
 import Onboarding from "./Onboarding";
 import TextDialog from "./TextDialog";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { GUIClientContext } from "../App";
 import { useDispatch, useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 import {
   setBottomMessage,
   setBottomMessageCloseTimeout,
-  setDialogEntryOn,
-  setDialogMessage,
   setShowDialog,
 } from "../redux/slices/uiStateSlice";
 import {
@@ -57,8 +55,6 @@ const Footer = styled.footer`
   justify-content: right;
   padding: 8px;
   align-items: center;
-  margin-top: 8px;
-  border-top: 0.1px solid gray;
 `;
 
 // #endregion
@@ -78,9 +74,6 @@ const Layout = () => {
   );
 
   // #region Selectors
-  const vscMediaUrl = useSelector(
-    (state: RootStore) => state.config.vscMediaUrl
-  );
 
   const bottomMessage = useSelector(
     (state: RootStore) => state.uiState.bottomMessage
@@ -91,6 +84,20 @@ const Layout = () => {
 
   // #endregion
 
+  useEffect(() => {
+    const handleKeyDown = (event: any) => {
+      if (event.metaKey && event.key === "n" && event.altKey) {
+        client?.loadSession(undefined);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [client]);
+
   return (
     <LayoutTopDiv>
       <div
@@ -131,51 +138,11 @@ const Layout = () => {
           {bottomMessage}
         </BottomMessageDiv>
         <Footer>
-          {vscMediaUrl && (
-            <a
-              href="https://github.com/continuedev/continue"
-              style={{ marginRight: "auto" }}
-            >
-              <img
-                src={`${vscMediaUrl}/continue-dev-square.png`}
-                width="22px"
-                style={{ backgroundColor: "black", color: "red" }}
-              />
-            </a>
-          )}
-          <HeaderButtonWithText
-            onClick={() => {
-              // Show the dialog
-              dispatch(
-                setDialogMessage(`Continue uses GPT-4 by default, but works with any model. If you'd like to keep your code completely private, there are few options:
-  
-  Run a local model with ggml: [5 minute quickstart](https://github.com/continuedev/ggml-server-example)
-  
-  Use Azure OpenAI service, which is GDPR and HIPAA compliant: [Tutorial](https://continue.dev/docs/customization#azure-openai-service)
-  
-  If you already have an LLM deployed on your own infrastructure, or would like to do so, please contact us at hi@continue.dev.
-              `)
-              );
-              dispatch(setDialogEntryOn(false));
-              dispatch(setShowDialog(true));
-            }}
-            text={"Use Private Model"}
-          >
-            <div
-              style={{
-                fontSize: "18px",
-                marginLeft: "2px",
-                marginRight: "2px",
-              }}
-            >
-              🔒
-            </div>
-          </HeaderButtonWithText>
           <HeaderButtonWithText
             onClick={() => {
               client?.loadSession(undefined);
             }}
-            text="New Session"
+            text="New Session (⌥⌘N)"
           >
             <PlusIcon width="1.4em" height="1.4em" />
           </HeaderButtonWithText>
@@ -195,21 +162,14 @@ const Layout = () => {
               <BookOpenIcon width="1.4em" height="1.4em" />
             </HeaderButtonWithText>
           </a>
-          <HeaderButtonWithText
-            onClick={() => {
-              // Set dialog open
-              dispatch(
-                setDialogMessage(
-                  "Having trouble using Continue? Want a new feature? Let us know! This box is anonymous, but we will promptly address your feedback."
-                )
-              );
-              dispatch(setDialogEntryOn(true));
-              dispatch(setShowDialog(true));
-            }}
-            text="Feedback"
+          <a
+            href="https://github.com/continuedev/continue/issues/new/choose"
+            className="no-underline"
           >
-            <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" />
-          </HeaderButtonWithText>
+            <HeaderButtonWithText text="Feedback">
+              <ChatBubbleOvalLeftEllipsisIcon width="1.4em" height="1.4em" />
+            </HeaderButtonWithText>
+          </a>
         </Footer>
       </div>
     </LayoutTopDiv>