From 4ea176007d2228364d4d3fa4519898047cef988f Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Sun, 24 Sep 2023 11:27:24 -0700
Subject: feat: :lipstick: setting to change font size

---
 continuedev/src/continuedev/core/autopilot.py      |  2 +-
 continuedev/src/continuedev/plugins/steps/main.py  |  2 +-
 extension/react-app/src/components/EditableDiv.tsx |  6 ++++--
 .../react-app/src/components/ModelSettings.tsx     |  5 +++--
 extension/react-app/src/components/PillButton.tsx  |  6 ++++--
 .../react-app/src/components/StepContainer.tsx     | 12 ++++++++---
 .../src/components/StyledMarkdownPreview.tsx       |  8 ++++++--
 extension/react-app/src/components/Suggestions.tsx |  7 ++++---
 .../react-app/src/components/TimelineItem.tsx      | 11 +++++-----
 .../src/components/UserInputContainer.tsx          | 11 +++++++---
 extension/react-app/src/components/index.ts        | 20 ++++++++++++++++--
 extension/react-app/src/pages/gui.tsx              |  2 +-
 extension/react-app/src/pages/settings.tsx         | 24 +++++++++++++++++++---
 extension/react-app/src/util/index.ts              |  5 +++++
 14 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/continuedev/src/continuedev/core/autopilot.py b/continuedev/src/continuedev/core/autopilot.py
index 5804ce6b..0155e755 100644
--- a/continuedev/src/continuedev/core/autopilot.py
+++ b/continuedev/src/continuedev/core/autopilot.py
@@ -68,7 +68,7 @@ def get_error_title(e: Exception) -> str:
     ):
         return e._message
     elif isinstance(e, ClientPayloadError):
-        return "The request to OpenAI failed. Please try again."
+        return "The request failed. Please try again."
     elif isinstance(e, openai_errors.APIConnectionError):
         return 'The request failed. Please check your internet connection and try again. If this issue persists, you can use our API key for free by going to VS Code settings and changing the value of continue.OPENAI_API_KEY to ""'
     elif isinstance(e, openai_errors.InvalidRequestError):
diff --git a/continuedev/src/continuedev/plugins/steps/main.py b/continuedev/src/continuedev/plugins/steps/main.py
index 241afe31..0698f1ae 100644
--- a/continuedev/src/continuedev/plugins/steps/main.py
+++ b/continuedev/src/continuedev/plugins/steps/main.py
@@ -333,7 +333,7 @@ class EditHighlightedCodeStep(Step):
         if len(range_in_files) == 0:
             raise ContinueCustomException(
                 message="Please highlight some code and try again.",
-                title="No Code Selected",
+                title="No Code Selected (highlight and select with cmd+shift+M)",
             )
 
         # If all of the ranges are point ranges, only edit the last one
diff --git a/extension/react-app/src/components/EditableDiv.tsx b/extension/react-app/src/components/EditableDiv.tsx
index a86bd692..1c295843 100644
--- a/extension/react-app/src/components/EditableDiv.tsx
+++ b/extension/react-app/src/components/EditableDiv.tsx
@@ -5,12 +5,13 @@ import {
   secondaryDark,
   vscForeground,
 } from ".";
+import { getFontSize } from "../util";
 
-const Div = styled.div`
+const Div = styled.div<{ fontSize?: number }>`
   resize: none;
 
   padding: 8px;
-  font-size: 13px;
+  font-size: ${(props) => props.fontSize || getFontSize()}px;
   font-family: inherit;
   border-radius: ${defaultBorderRadius};
   margin: 8px auto;
@@ -45,6 +46,7 @@ interface EditableDivProps {
 function EditableDiv(props: EditableDivProps) {
   return (
     <Div
+      fontSize={getFontSize()}
       suppressContentEditableWarning={true}
       contentEditable={true}
       onChange={(e) => {
diff --git a/extension/react-app/src/components/ModelSettings.tsx b/extension/react-app/src/components/ModelSettings.tsx
index 06516687..ac5a344b 100644
--- a/extension/react-app/src/components/ModelSettings.tsx
+++ b/extension/react-app/src/components/ModelSettings.tsx
@@ -10,6 +10,7 @@ import {
 } from ".";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
+import { getFontSize } from "../util";
 
 const Div = styled.div<{ dashed: boolean }>`
   border: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${lightGray};
@@ -56,7 +57,7 @@ function ModelSettings(props: { llm: any | undefined; role: string }) {
           <form>
             {typeof modelOptions.api_key !== undefined && (
               <>
-                <Label>API Key</Label>
+                <Label fontSize={getFontSize()}>API Key</Label>
                 <TextInput
                   type="text"
                   defaultValue={props.llm.api_key}
@@ -67,7 +68,7 @@ function ModelSettings(props: { llm: any | undefined; role: string }) {
             )}
             {modelOptions.model && (
               <>
-                <Label>Model</Label>
+                <Label fontSize={getFontSize()}>Model</Label>
                 <TextInput
                   type="text"
                   defaultValue={props.llm.model}
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 4e13428d..fb685a82 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -17,8 +17,9 @@ import { GUIClientContext } from "../App";
 import { useDispatch } from "react-redux";
 import { setBottomMessage } from "../redux/slices/uiStateSlice";
 import { ContextItem } from "../../../schema/FullState";
+import { getFontSize } from "../util";
 
-const Button = styled.button`
+const Button = styled.button<{ fontSize?: number }>`
   border: none;
   color: ${vscForeground};
   background-color: ${secondaryDark};
@@ -27,7 +28,7 @@ const Button = styled.button`
   padding-left: 8px;
   padding-right: 8px;
   overflow: hidden;
-  font-size: 13px;
+  font-size: ${(props) => props.fontSize || getFontSize()}px;
 
   cursor: pointer;
 `;
@@ -120,6 +121,7 @@ const PillButton = (props: PillButtonProps) => {
   return (
     <div style={{ position: "relative" }}>
       <StyledButton
+        fontSize={getFontSize()}
         borderColor={props.editing ? (warning ? "red" : undefined) : undefined}
         onMouseEnter={() => {
           setIsHovered(true);
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 61529227..e7264c5d 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -5,6 +5,7 @@ import { ArrowPathIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import StyledMarkdownPreview from "./StyledMarkdownPreview";
+import { getFontSize } from "../util";
 
 interface StepContainerProps {
   historyNode: HistoryNode;
@@ -41,12 +42,12 @@ const ButtonsDiv = styled.div`
   height: 0;
 `;
 
-const ContentDiv = styled.div<{ isUserInput: boolean }>`
+const ContentDiv = styled.div<{ isUserInput: boolean; fontSize?: number }>`
   padding: 2px;
   padding-right: 0px;
   background-color: ${(props) =>
     props.isUserInput ? secondaryDark : vscBackground};
-  font-size: 13px;
+  font-size: ${(props) => props.fontSize || getFontSize()}px;
   border-radius: ${defaultBorderRadius};
   overflow: hidden;
 `;
@@ -122,8 +123,13 @@ function StepContainer(props: StepContainerProps) {
             </ButtonsDiv>
           )}
 
-        <ContentDiv hidden={!props.open} isUserInput={isUserInput}>
+        <ContentDiv
+          hidden={!props.open}
+          isUserInput={isUserInput}
+          fontSize={getFontSize()}
+        >
           <StyledMarkdownPreview
+            fontSize={getFontSize()}
             source={props.historyNode.step.description || ""}
             wrapperElement={{
               "data-color-mode": "dark",
diff --git a/extension/react-app/src/components/StyledMarkdownPreview.tsx b/extension/react-app/src/components/StyledMarkdownPreview.tsx
index f77360b2..78d4234c 100644
--- a/extension/react-app/src/components/StyledMarkdownPreview.tsx
+++ b/extension/react-app/src/components/StyledMarkdownPreview.tsx
@@ -7,8 +7,12 @@ import {
   vscForeground,
 } from ".";
 import MarkdownPreview from "@uiw/react-markdown-preview";
+import { getFontSize } from "../util";
 
-const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
+const StyledMarkdownPreview = styled(MarkdownPreview)<{
+  light?: boolean;
+  fontSize?: number;
+}>`
   pre {
     background-color: ${(props) =>
       props.light ? vscBackground : secondaryDark};
@@ -34,7 +38,7 @@ const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
 
   background-color: ${(props) => (props.light ? "transparent" : vscBackground)};
   font-family: "Lexend", sans-serif;
-  font-size: 13px;
+  font-size: ${(props) => props.fontSize || getFontSize()}px;
   padding: 8px;
   color: ${vscForeground};
 `;
diff --git a/extension/react-app/src/components/Suggestions.tsx b/extension/react-app/src/components/Suggestions.tsx
index c9d30de6..f0ee3bc0 100644
--- a/extension/react-app/src/components/Suggestions.tsx
+++ b/extension/react-app/src/components/Suggestions.tsx
@@ -15,6 +15,7 @@ import {
 import { useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 import HeaderButtonWithText from "./HeaderButtonWithText";
+import { getFontSize } from "../util";
 
 const Div = styled.div<{ isDisabled: boolean }>`
   border-radius: ${defaultBorderRadius};
@@ -35,8 +36,8 @@ const Div = styled.div<{ isDisabled: boolean }>`
   }
 `;
 
-const P = styled.p`
-  font-size: 13px;
+const P = styled.p<{ fontSize: number }>`
+  font-size: ${(props) => props.fontSize}px;
   margin: 0;
 `;
 
@@ -66,7 +67,7 @@ function SuggestionsDiv(props: SuggestionsDivProps) {
         onMouseLeave={() => setIsHovered(false)}
         isDisabled={props.disabled}
       >
-        <P>{props.description}</P>
+        <P fontSize={getFontSize()}>{props.description}</P>
         <PaperAirplaneIcon
           width="1.6em"
           height="1.6em"
diff --git a/extension/react-app/src/components/TimelineItem.tsx b/extension/react-app/src/components/TimelineItem.tsx
index 78568890..f54788eb 100644
--- a/extension/react-app/src/components/TimelineItem.tsx
+++ b/extension/react-app/src/components/TimelineItem.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { lightGray, secondaryDark, vscBackground } from ".";
+import { lightGray, vscBackground } from ".";
 import styled from "styled-components";
-import { ChatBubbleOvalLeftIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { ChatBubbleOvalLeftIcon } from "@heroicons/react/24/outline";
+import { getFontSize } from "../util";
 
 const CollapseButton = styled.div`
   background-color: ${vscBackground};
@@ -14,14 +15,14 @@ const CollapseButton = styled.div`
   cursor: pointer;
 `;
 
-const CollapsedDiv = styled.div`
+const CollapsedDiv = styled.div<{ fontSize?: number }>`
   margin-top: 8px;
   margin-bottom: 8px;
   margin-left: 8px;
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 13px;
+  font-size: ${(props) => props.fontSize || getFontSize()}px;
   min-height: 16px;
 `;
 
@@ -37,7 +38,7 @@ function TimelineItem(props: TimelineItemProps) {
   return props.open ? (
     props.children
   ) : (
-    <CollapsedDiv>
+    <CollapsedDiv fontSize={getFontSize()}>
       <CollapseButton
         onClick={() => {
           props.onToggle();
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 15f1752f..11671526 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -24,7 +24,11 @@ import {
 } from "@heroicons/react/24/outline";
 import { HistoryNode } from "../../../schema/HistoryNode";
 import { GUIClientContext } from "../App";
-import { getMetaKeyLabel, isMetaEquivalentKeyPressed } from "../util";
+import {
+  getFontSize,
+  getMetaKeyLabel,
+  isMetaEquivalentKeyPressed,
+} from "../util";
 import { RootStore } from "../redux/store";
 import { useSelector } from "react-redux";
 
@@ -91,8 +95,8 @@ const GradientBorder = styled.div<{
   background-size: 200% 200%;
 `;
 
-const StyledDiv = styled.div<{ editing: boolean }>`
-  font-size: 13px;
+const StyledDiv = styled.div<{ editing: boolean; fontSize?: number }>`
+  font-size: ${(props) => props.fontSize || getFontSize()}px;
   font-family: inherit;
   border-radius: ${defaultBorderRadius};
   height: auto;
@@ -204,6 +208,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
       borderRadius={defaultBorderRadius}
     >
       <StyledDiv
+        fontSize={getFontSize()}
         editing={isEditing}
         onMouseEnter={() => {
           setIsHovered(true);
diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 510740f8..1c27527c 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -1,5 +1,6 @@
 import { Tooltip } from "react-tooltip";
 import styled, { keyframes } from "styled-components";
+import { getFontSize } from "../util";
 
 export const defaultBorderRadius = "5px";
 export const lightGray = "#646464";
@@ -107,6 +108,21 @@ export const TextInput = styled.input.attrs({ type: "text" })`
   }
 `;
 
+export const NumberInput = styled.input.attrs({ type: "number" })`
+  padding: 8px 12px;
+  margin: 8px 4px;
+  box-sizing: border-box;
+  border-radius: ${defaultBorderRadius};
+  outline: 1px solid ${lightGray};
+  border: none;
+  background-color: ${vscBackground};
+  color: ${vscForeground};
+
+  &:focus {
+    background: ${secondaryDark};
+  }
+`;
+
 export const Select = styled.select`
   padding: 8px 12px;
   margin: 8px 0;
@@ -118,8 +134,8 @@ export const Select = styled.select`
   color: ${vscForeground};
 `;
 
-export const Label = styled.label`
-  font-size: 13px;
+export const Label = styled.label<{ fontSize?: number }>`
+  font-size: ${(props) => props.fontSize || getFontSize()}px;
 `;
 
 const spin = keyframes`
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index f6a09bbc..576abd40 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -279,7 +279,7 @@ function GUI(props: GUIProps) {
       }
 
       // cmd+enter to /edit
-      if (isMetaEquivalentKeyPressed(event)) {
+      if (event && isMetaEquivalentKeyPressed(event)) {
         input = `/edit ${input}`;
       }
       (mainTextInputRef.current as any).setInputValue("");
diff --git a/extension/react-app/src/pages/settings.tsx b/extension/react-app/src/pages/settings.tsx
index 4bd51163..cb269d7b 100644
--- a/extension/react-app/src/pages/settings.tsx
+++ b/extension/react-app/src/pages/settings.tsx
@@ -6,18 +6,18 @@ import { useNavigate } from "react-router-dom";
 import { ContinueConfig } from "../../../schema/ContinueConfig";
 import {
   Button,
+  NumberInput,
   TextArea,
   lightGray,
   secondaryDark,
   vscBackground,
 } from "../components";
 import styled from "styled-components";
-import { ArrowLeftIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { ArrowLeftIcon } 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";
+import { getFontSize } from "../util";
 
 const Hr = styled.hr`
   border: 0.5px solid ${lightGray};
@@ -219,6 +219,24 @@ function Settings() {
           )}
         </form>
 
+        <hr />
+
+        <div className="px-2">
+          <h3>Appearance</h3>
+
+          <p>Font Size</p>
+          <NumberInput
+            type="number"
+            min="8"
+            max="48"
+            step="1"
+            defaultValue={getFontSize()}
+            onChange={(e) => {
+              localStorage.setItem("fontSize", e.target.value);
+            }}
+          />
+        </div>
+
         <div className="flex gap-2 justify-end px-4">
           <CancelButton
             onClick={() => {
diff --git a/extension/react-app/src/util/index.ts b/extension/react-app/src/util/index.ts
index c4168e13..fd74044d 100644
--- a/extension/react-app/src/util/index.ts
+++ b/extension/react-app/src/util/index.ts
@@ -41,3 +41,8 @@ export function getMetaKeyLabel(): string {
       return "⌘";
   }
 }
+
+export function getFontSize(): number {
+  const fontSize = localStorage.getItem("fontSize");
+  return fontSize ? parseInt(fontSize) : 13;
+}
-- 
cgit v1.2.3-70-g09d2