UI Redesign and fixing many details (#496)

* feat: :lipstick: start of major design upgrade

* feat: :lipstick: model selection page

* feat: :lipstick: use shortcut to add highlighted code as ctx

* feat: :lipstick: better display of errors

* feat: :lipstick: ui for learning keyboard shortcuts, more details

* refactor: :construction: testing slash commands ui

* Truncate continue.log

* refactor: :construction: refactoring client_session, ui, more

* feat: :bug: layout fixes

* refactor: :lipstick: ui to enter OpenAI Key

* refactor: :truck: rename MaybeProxyOpenAI -> OpenAIFreeTrial

* starting help center

* removing old shortcut docs

* fix: :bug: fix model setting logic to avoid overwrites

* feat: :lipstick: tutorial and model descriptions

* refactor: :truck: rename unused -> saved

* refactor: :truck: rename model roles

* feat: :lipstick: edit indicator

* refactor: :lipstick: move +, folder icons

* feat: :lipstick: tab to clear all context

* fix: :bug: context providers ui fixes

* fix: :bug: fix lag when stopping step

* fix: :bug: don't override system message for models

* fix: :bug: fix continue button cursor

* feat: :lipstick: title bar

* fix: :bug: updates to code highlighting logic and more

* fix: :bug: fix renaming of summarize model role

* feat: :lipstick: help page and better session title

* feat: :lipstick: more help page / ui improvements

* feat: :lipstick: set session title

* fix: :bug: small fixes for changing sessions

* fix: :bug: perfecting the highlighting code and ctx interactions

* style: :lipstick: sticky headers for scroll, ollama warming

* fix: :bug: fix toggle bug

---------

Co-authored-by: Ty Dunn <ty@tydunn.com>

1 files changed, 25 insertions, 8 deletions

diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index 10ecd94a..95dde177 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -1,26 +1,42 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 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)<{ color?: string | null }>`
+const StyledButton = styled(Button)<{
+  color?: string | null;
+  isDisabled: boolean;
+}>`
   margin: auto;
   margin-top: 8px;
   margin-bottom: 16px;
   display: grid;
   grid-template-columns: 22px 1fr;
   align-items: center;
-  background: ${(props) => props.color || "#be1b55"};
+  background-color: ${(props) => props.color || "#be1b55"};
 
-  &:hover {
-    transition-property: "background";
-    opacity: 0.7;
+  opacity: ${(props) => (props.isDisabled ? 0.5 : 1.0)};
+
+  cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
+
+  &:hover:enabled {
+    background-color: ${(props) => props.color || "#be1b55"};
+    ${(props) =>
+      props.isDisabled
+        ? "cursor: default;"
+        : `
+      opacity: 0.7;
+      `}
   }
 `;
 
-function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
+function ContinueButton(props: {
+  onClick?: () => void;
+  hidden?: boolean;
+  disabled: boolean;
+}) {
   const vscMediaUrl = useSelector(
     (state: RootStore) => state.config.vscMediaUrl
   );
@@ -49,7 +65,8 @@ function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
       hidden={props.hidden}
       style={{ fontSize: "10px" }}
       className="m-auto press-start-2p"
-      onClick={props.onClick}
+      onClick={props.disabled ? undefined : props.onClick}
+      isDisabled={props.disabled}
     >
       {vscMediaUrl ? (
         <img src={`${vscMediaUrl}/play_button.png`} width="16px" />