1 files changed, 30 insertions, 15 deletions
diff --git a/extension/react-app/src/pages/settings.tsx b/extension/react-app/src/pages/settings.tsx
index 8b3d9c5b..4bd51163 100644
--- a/extension/react-app/src/pages/settings.tsx
+++ b/extension/react-app/src/pages/settings.tsx
@@ -1,15 +1,23 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext } from "react";
 import { GUIClientContext } from "../App";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 import { useNavigate } from "react-router-dom";
 import { ContinueConfig } from "../../../schema/ContinueConfig";
-import { Button, TextArea, lightGray, secondaryDark } from "../components";
+import {
+  Button,
+  TextArea,
+  lightGray,
+  secondaryDark,
+  vscBackground,
+} from "../components";
 import styled from "styled-components";
-import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { ArrowLeftIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 import Loader from "../components/Loader";
 import InfoHover from "../components/InfoHover";
 import { FormProvider, useForm } from "react-hook-form";
+import { setDialogMessage, setShowDialog } from "../redux/slices/uiStateSlice";
+import KeyboardShortcutsDialog from "../components/dialogs/KeyboardShortcuts";
 
 const Hr = styled.hr`
   border: 0.5px solid ${lightGray};
@@ -70,7 +78,7 @@ const Slider = styled.input.attrs({ type: "range" })`
     border: none;
   }
 `;
-const ALL_MODEL_ROLES = ["default", "small", "medium", "large", "edit", "chat"];
+const ALL_MODEL_ROLES = ["default", "summarize", "edit", "chat"];
 
 function Settings() {
   const formMethods = useForm<ContinueConfig>();
@@ -79,6 +87,7 @@ function Settings() {
   const navigate = useNavigate();
   const client = useContext(GUIClientContext);
   const config = useSelector((state: RootStore) => state.serverState.config);
+  const dispatch = useDispatch();
 
   const submitChanges = () => {
     if (!client) return;
@@ -106,17 +115,23 @@ function Settings() {
 
   return (
     <FormProvider {...formMethods}>
-      <div className="w-full">
+      <div className="overflow-scroll">
+        <div
+          className="items-center flex sticky top-0"
+          style={{
+            borderBottom: `0.5px solid ${lightGray}`,
+            backgroundColor: vscBackground,
+          }}
+        >
+          <ArrowLeftIcon
+            width="1.2em"
+            height="1.2em"
+            onClick={submitAndLeave}
+            className="inline-block ml-4 cursor-pointer"
+          />
+          <h3 className="text-lg font-bold m-2 inline-block">Settings</h3>
+        </div>
         <form onSubmit={formMethods.handleSubmit(onSubmit)}>
-          <div className="items-center flex">
-            <ArrowLeftIcon
-              width="1.4em"
-              height="1.4em"
-              onClick={submitAndLeave}
-              className="inline-block ml-4 cursor-pointer"
-            />
-            <h1 className="text-2xl font-bold m-4 inline-block">Settings</h1>
-          </div>
           {config ? (
             <div className="p-2">
               <h3 className="flex gap-1">