💄 make font size configurable in config.json ui.fontSize

core/index.d.ts

@@ -699,6 +699,7 @@ export interface TabAutocompleteOptions {
 
 export interface ContinueUIConfig {
   codeBlockToolbarPosition?: "top" | "bottom";
+  fontSize?: number;
 }
 
 interface ContextMenuConfig {

extensions/vscode/config_schema.json

@@ -1963,6 +1963,9 @@
               "enum": ["top", "bottom"],
               "default": "top",
               "description": "Whether to show the copy and apply code buttons at the top or bottom of code blocks in the sidebar."
+            },
+            "fontSize": {
+              "type": "number"
             }
           }
         },

gui/src/components/Layout.tsx

@@ -301,7 +301,10 @@ const Layout = () => {
           {bottomMessage}
         </BottomMessageDiv>
       </div>
-      <div className="text-sm" id="tooltip-portal-div" />
+      <div
+        style={{ fontSize: `${getFontSize() - 4}px` }}
+        id="tooltip-portal-div"
+      />
     </LayoutTopDiv>
   );
 };

gui/src/components/index.tsx

@@ -160,7 +160,7 @@ export const CustomScrollbarDiv = styled.div`
 `;
 
 const TooltipStyles = {
-  fontSize: "12px",
+  fontSize: `${getFontSize() - 2}px`,
   backgroundColor: vscInputBackground,
   boxShadow: `0px 0px 2px 1px ${vscBadgeBackground}`,
   color: vscForeground,
@@ -304,18 +304,6 @@ export const MainContainerWithBorder = styled.div<{ borderWidth?: string }>`
   background-color: white;
 `;
 
-export const MainTextInput = styled.textarea`
-  padding: 8px;
-  font-size: 16px;
-  border-radius: ${defaultBorderRadius};
-  border: 1px solid #ccc;
-  margin: 8px 8px;
-  background-color: ${vscBackground};
-  color: ${vscForeground};
-  outline: 1px solid orange;
-  resize: none;
-`;
-
 export const appear = keyframes`
     from {
         opacity: 0;

gui/src/components/loaders/IndexingProgressBar.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
 import { StyledTooltip, lightGray, vscForeground } from "..";
+import { getFontSize } from "../../util";
 import { postToIde } from "../../util/ide";
 
 const DIAMETER = 6;
@@ -41,7 +42,7 @@ const GridDiv = styled.div`
 const P = styled.p`
   margin: 0;
   margin-top: 2px;
-  font-size: 11.5px;
+  font-size: ${getFontSize() - 2.5}px;
   color: ${lightGray};
   text-align: center;
   white-space: nowrap;

gui/src/components/loaders/ProgressBar.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { StyledTooltip, lightGray, vscForeground } from "..";
+import { getFontSize } from "../../util";
 
 const ProgressBarWrapper = styled.div`
   width: 100px;
@@ -27,7 +28,7 @@ const GridDiv = styled.div`
 const P = styled.p`
   margin: 0;
   margin-top: 2px;
-  font-size: 11.5px;
+  font-size: ${getFontSize() - 2.5}px;
   color: ${lightGray};
   text-align: center;
   white-space: nowrap;

gui/src/components/mainInput/ContextItemsPeek.tsx

@@ -9,6 +9,7 @@ import {
   vscBackground,
   vscForeground,
 } from "..";
+import { getFontSize } from "../../util";
 import { WebviewIde } from "../../util/webviewIde";
 import FileIcon from "../FileIcon";
 
@@ -77,7 +78,7 @@ const ContextItemsPeek = (props: ContextItemsPeekProps) => {
           display: "flex",
           justifyContent: "left",
           alignItems: "center",
-          fontSize: "11px",
+          fontSize: `${getFontSize() - 3}px`,
         }}
         onClick={() => setOpen((prev) => !prev)}
       >

gui/src/components/mainInput/ContinueButton.tsx

@@ -2,6 +2,7 @@ import { PlayIcon, StopIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Button } from "..";
+import { getFontSize } from "../../util";
 
 const StyledButton = styled(Button)<{
   color?: string | null;
@@ -44,7 +45,7 @@ function ContinueButton(props: {
   showStop: boolean;
 }) {
   const [buttonColor, setButtonColor] = useState<string | null>(
-    localStorage.getItem("continueButtonColor")
+    localStorage.getItem("continueButtonColor"),
   );
 
   useEffect(() => {
@@ -66,7 +67,7 @@ function ContinueButton(props: {
       showStop={props.showStop}
       color={buttonColor as any}
       hidden={props.hidden}
-      style={{ fontSize: "10px" }}
+      style={{ fontSize: `${getFontSize() - 4}px` }}
       className="m-auto"
       onClick={props.disabled ? undefined : props.onClick}
       isDisabled={props.disabled}

gui/src/components/mainInput/InputToolbar.tsx

@@ -17,6 +17,7 @@ import { selectUseActiveFile } from "../../redux/selectors";
 import { defaultModelSelector } from "../../redux/selectors/modelSelectors";
 import {
   getAltKeyLabel,
+  getFontSize,
   getMetaKeyLabel,
   isMetaEquivalentKeyPressed,
 } from "../../util";
@@ -35,7 +36,7 @@ const StyledDiv = styled.div<{ hidden?: boolean }>`
 
   align-items: center;
   z-index: 50;
-  font-size: 10px;
+  font-size: ${getFontSize() - 4}px;
 
   cursor: text;
 

gui/src/components/mainInput/TipTapEditor.tsx

@@ -37,7 +37,7 @@ import {
   setEditingContextItemAtIndex,
 } from "../../redux/slices/stateSlice";
 import { RootState } from "../../redux/store";
-import { isMetaEquivalentKeyPressed } from "../../util";
+import { getFontSize, isMetaEquivalentKeyPressed } from "../../util";
 import { isJetBrains, postToIde } from "../../util/ide";
 import CodeBlockExtension from "./CodeBlockExtension";
 import { SlashCommand } from "./CommandsExtension";
@@ -62,7 +62,7 @@ const InputBoxDiv = styled.div`
   z-index: 1;
   border: 0.5px solid ${vscInputBorder};
   outline: none;
-  font-size: 14px;
+  font-size: ${getFontSize()}px;
 
   &:focus {
     outline: none;
@@ -378,7 +378,7 @@ function TipTapEditor(props: TipTapEditorProps) {
     editorProps: {
       attributes: {
         class: "outline-none -mt-1 overflow-hidden",
-        style: "font-size: 14px;",
+        style: `font-size: ${getFontSize()}px;`,
       },
     },
     content: props.editorState || mainEditorContent || "",

gui/src/components/markdown/StyledMarkdownPreview.tsx

@@ -48,7 +48,7 @@ const StyledMarkdown = styled.div<{
     word-wrap: break-word;
     border-radius: ${defaultBorderRadius};
     background-color: ${vscEditorBackground};
-    font-size: 12px;
+    font-size: ${getFontSize() - 2}px;
     font-family: var(--vscode-editor-font-family);
   }
 

gui/src/hooks/useSetup.ts

@@ -10,6 +10,7 @@ import {
 } from "../redux/slices/stateSlice";
 import { RootState } from "../redux/store";
 import { ideRequest, isJetBrains } from "../util/ide";
+import { setLocalStorage } from "../util/localStorage";
 import useChatHandler from "./useChatHandler";
 import { useWebviewListener } from "./useWebviewListener";
 
@@ -20,6 +21,12 @@ function useSetup(dispatch: Dispatch<any>) {
     const config = await ideRequest("config/getBrowserSerialized", undefined);
     dispatch(setConfig(config));
     setConfigLoaded(true);
+
+    // Perform any actions needed with the config
+    if (config.ui?.fontSize) {
+      setLocalStorage("fontSize", config.ui.fontSize);
+      document.body.style.fontSize = `${config.ui.fontSize}px`;
+    }
   };
 
   // Load config from the IDE