From 0db42801ecd96934b7007fc54b284eb975a94c68 Mon Sep 17 00:00:00 2001 From: Nate Date: Thu, 26 Jun 2025 22:52:31 -0700 Subject: [PATCH 1/9] enable diff syntax highlighting on diff tool output file --- core/tools/implementations/viewDiff.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/tools/implementations/viewDiff.ts b/core/tools/implementations/viewDiff.ts index fd1dfdb8ab..330172dff1 100644 --- a/core/tools/implementations/viewDiff.ts +++ b/core/tools/implementations/viewDiff.ts @@ -7,7 +7,7 @@ export const viewDiffImpl: ToolImpl = async (args, extras) => { return [ { - name: "Diff", + name: ".diff", description: "The current git diff", content: diffs.join("\n"), }, From cbae30ad53f60aac966b4d66bd747180c514a976 Mon Sep 17 00:00:00 2001 From: Nate Date: Thu, 26 Jun 2025 23:38:16 -0700 Subject: [PATCH 2/9] refactor gradient border to its own file --- .../components/mainInput/ContinueInputBox.tsx | 40 +------------------ .../components/mainInput/GradientBorder.tsx | 38 ++++++++++++++++++ 2 files changed, 40 insertions(+), 38 deletions(-) create mode 100644 gui/src/components/mainInput/GradientBorder.tsx diff --git a/gui/src/components/mainInput/ContinueInputBox.tsx b/gui/src/components/mainInput/ContinueInputBox.tsx index b50edfdbb1..af75216666 100644 --- a/gui/src/components/mainInput/ContinueInputBox.tsx +++ b/gui/src/components/mainInput/ContinueInputBox.tsx @@ -1,12 +1,12 @@ import { Editor, JSONContent } from "@tiptap/react"; import { ContextItemWithId, InputModifiers, RuleWithSource } from "core"; import { useMemo } from "react"; -import styled, { keyframes } from "styled-components"; import { defaultBorderRadius, vscBackground } from ".."; import { useAppSelector } from "../../redux/hooks"; import { selectSlashCommandComboBoxInputs } from "../../redux/selectors"; import { ContextItemsPeek } from "./belowMainInput/ContextItemsPeek"; import { RulesPeek } from "./belowMainInput/RulesPeek"; +import { GradientBorder } from "./GradientBorder"; import { ToolbarOptions } from "./InputToolbar"; import { Lump } from "./Lump"; import { TipTapEditor } from "./TipTapEditor"; @@ -38,43 +38,6 @@ const EDIT_DISALLOWED_CONTEXT_PROVIDERS = [ "repo-map", ]; -const gradient = keyframes` - 0% { - background-position: 0px 0; - } - 100% { - background-position: 100em 0; - } -`; - -const GradientBorder = styled.div<{ - borderRadius?: string; - borderColor?: string; - loading: 0 | 1; -}>` - border-radius: ${(props) => props.borderRadius || "0"}; - padding: 1px; - background: ${(props) => - props.borderColor - ? props.borderColor - : `repeating-linear-gradient( - 101.79deg, - #1BBE84 0%, - #331BBE 16%, - #BE1B55 33%, - #A6BE1B 55%, - #BE1B55 67%, - #331BBE 85%, - #1BBE84 99% - )`}; - animation: ${(props) => (props.loading ? gradient : "")} 6s linear infinite; - background-size: 200% 200%; - width: 100%; - display: flex; - flex-direction: row; - align-items: center; -`; - function ContinueInputBox(props: ContinueInputBoxProps) { const isStreaming = useAppSelector((state) => state.session.isStreaming); const availableSlashCommands = useAppSelector( @@ -146,6 +109,7 @@ function ContinueInputBox(props: ContinueInputBoxProps) { /> + {(appliedRules.length > 0 || contextItems.length > 0) && (
diff --git a/gui/src/components/mainInput/GradientBorder.tsx b/gui/src/components/mainInput/GradientBorder.tsx new file mode 100644 index 0000000000..6cbf263d5b --- /dev/null +++ b/gui/src/components/mainInput/GradientBorder.tsx @@ -0,0 +1,38 @@ +import styled, { keyframes } from "styled-components"; + +const gradient = keyframes` + 0% { + background-position: 0px 0; + } + 100% { + background-position: 100em 0; + } +`; + +export const GradientBorder = styled.div<{ + borderRadius?: string; + borderColor?: string; + loading: 0 | 1; +}>` + border-radius: ${(props) => props.borderRadius || "0"}; + padding: 1px; + background: ${(props) => + props.borderColor + ? props.borderColor + : `repeating-linear-gradient( + 101.79deg, + #1BBE84 0%, + #331BBE 16%, + #BE1B55 33%, + #A6BE1B 55%, + #BE1B55 67%, + #331BBE 85%, + #1BBE84 99% + )`}; + animation: ${(props) => (props.loading ? gradient : "")} 6s linear infinite; + background-size: 200% 200%; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; +`; From 7addf2c9eab47d6d3ad4a31592bdc4f83e359c24 Mon Sep 17 00:00:00 2001 From: Nate Date: Thu, 26 Jun 2025 23:47:45 -0700 Subject: [PATCH 3/9] nicer hover effects on input boxes --- gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx b/gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx index 8e659f1e84..a5f9dbc565 100644 --- a/gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx +++ b/gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx @@ -179,7 +179,11 @@ export function TipTapEditor(props: TipTapEditorProps) { onBlur={handleBlur} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp} - className={shouldHideToolbar ? "cursor-default" : "cursor-text"} + className={ + !props.isMainInput && shouldHideToolbar + ? "cursor-pointer hover:brightness-105" + : "cursor-text" + } onClick={() => { editor?.commands.focus(); }} From 4604369fb4cfe33756f33aa6b8f7a56fee106efa Mon Sep 17 00:00:00 2001 From: Nate Date: Fri, 27 Jun 2025 00:01:46 -0700 Subject: [PATCH 4/9] improve styling for links --- gui/src/components/StyledMarkdownPreview/index.tsx | 3 +-- gui/src/components/index.ts | 3 +++ gui/src/styles/theme.ts | 4 ++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx index f648dd61bb..98ca83881a 100644 --- a/gui/src/components/StyledMarkdownPreview/index.tsx +++ b/gui/src/components/StyledMarkdownPreview/index.tsx @@ -77,14 +77,13 @@ const StyledMarkdown = styled.div<{ } word-wrap: break-word; border-radius: ${defaultBorderRadius}; - background-color: ${vscEditorBackground}; + background-color: var(--vscode-textCodeBlock-background); font-size: ${getFontSize() - 2}px; font-family: var(--vscode-editor-font-family); } code:not(pre > code) { font-family: var(--vscode-editor-font-family); - color: var(--vscode-input-placeholderForeground); } background-color: ${(props) => props.bgColor}; diff --git a/gui/src/components/index.ts b/gui/src/components/index.ts index 71fd4ae0c6..a1d2ed387c 100644 --- a/gui/src/components/index.ts +++ b/gui/src/components/index.ts @@ -12,6 +12,9 @@ export const vscForeground = varWithFallback("foreground"); export const vscButtonBackground = varWithFallback("primary-background"); export const vscButtonForeground = varWithFallback("primary-foreground"); export const vscEditorBackground = varWithFallback("editor-background"); +export const vscTextCodeBlockBackground = varWithFallback( + "textCodeBlockBackground", +); export const vscListActiveBackground = varWithFallback("list-active"); export const vscFocusBorder = varWithFallback("border-focus"); export const vscListActiveForeground = varWithFallback( diff --git a/gui/src/styles/theme.ts b/gui/src/styles/theme.ts index ad0ee0bd73..144a9d8d6c 100644 --- a/gui/src/styles/theme.ts +++ b/gui/src/styles/theme.ts @@ -140,6 +140,10 @@ export const THEME_COLORS = { vars: ["--vscode-textLink-foreground"], default: "#5c9ce6", // medium blue }, + textCodeBlockBackground: { + vars: ["--vscode-textCodeBlock-background"], + default: "#1e1e1e", // same as editor-background + }, accent: { vars: ["--vscode-tab-activeBorderTop", "--vscode-focusBorder"], default: "#4d8bf0", // bright blue From 1ce30606ae3e639a4b98f0235753e8a8b372165e Mon Sep 17 00:00:00 2001 From: Nate Date: Fri, 27 Jun 2025 00:26:05 -0700 Subject: [PATCH 5/9] update defaultBorderRadius and use rem instead of px --- .continue/rules/css-units.md | 5 +++++ gui/src/components/Layout.tsx | 3 +-- gui/src/components/StyledMarkdownPreview/index.tsx | 2 +- gui/src/components/index.ts | 2 +- gui/src/components/mainInput/InputToolbar/EnterButton.tsx | 3 +-- .../mainInput/TipTapEditor/components/StyledComponents.ts | 3 +-- gui/tailwind.config.cjs | 2 +- 7 files changed, 11 insertions(+), 9 deletions(-) create mode 100644 .continue/rules/css-units.md diff --git a/.continue/rules/css-units.md b/.continue/rules/css-units.md new file mode 100644 index 0000000000..a270a383dd --- /dev/null +++ b/.continue/rules/css-units.md @@ -0,0 +1,5 @@ +--- +globs: "gui/**/*.tsx" +--- + +You should try to use the `rem` CSS unit whenever possible for scalability instead of `px`. diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx index 1e2134e7ac..20d750d420 100644 --- a/gui/src/components/Layout.tsx +++ b/gui/src/components/Layout.tsx @@ -2,7 +2,7 @@ import { OnboardingModes } from "core/protocol/core"; import { useContext, useEffect } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import styled from "styled-components"; -import { CustomScrollbarDiv, defaultBorderRadius } from "."; +import { CustomScrollbarDiv } from "."; import { AuthProvider } from "../context/Auth"; import { IdeMessengerContext } from "../context/IdeMessenger"; import { LocalStorageProvider } from "../context/LocalStorage"; @@ -30,7 +30,6 @@ import PostHogPageView from "./PosthogPageView"; const LayoutTopDiv = styled(CustomScrollbarDiv)` height: 100%; - border-radius: ${defaultBorderRadius}; position: relative; overflow-x: hidden; `; diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx index 98ca83881a..45dd743fb3 100644 --- a/gui/src/components/StyledMarkdownPreview/index.tsx +++ b/gui/src/components/StyledMarkdownPreview/index.tsx @@ -76,7 +76,7 @@ const StyledMarkdown = styled.div<{ display: none; } word-wrap: break-word; - border-radius: ${defaultBorderRadius}; + border-radius: 0.3125rem; background-color: var(--vscode-textCodeBlock-background); font-size: ${getFontSize() - 2}px; font-family: var(--vscode-editor-font-family); diff --git a/gui/src/components/index.ts b/gui/src/components/index.ts index a1d2ed387c..ee20d73650 100644 --- a/gui/src/components/index.ts +++ b/gui/src/components/index.ts @@ -1,7 +1,7 @@ import styled from "styled-components"; import { varWithFallback } from "../styles/theme"; -export const defaultBorderRadius = "5px"; +export const defaultBorderRadius = "0.5rem"; export const lightGray = "#999998"; export const greenButtonColor = "#189e72"; diff --git a/gui/src/components/mainInput/InputToolbar/EnterButton.tsx b/gui/src/components/mainInput/InputToolbar/EnterButton.tsx index 21dae2642c..6d26ca690d 100644 --- a/gui/src/components/mainInput/InputToolbar/EnterButton.tsx +++ b/gui/src/components/mainInput/InputToolbar/EnterButton.tsx @@ -1,6 +1,5 @@ import styled from "styled-components"; import { - defaultBorderRadius, lightGray, vscButtonBackground, vscButtonForeground, @@ -18,7 +17,7 @@ export const EnterButton = styled.button<{ isPrimary?: boolean }>` !props.disabled && props.isPrimary ? vscButtonBackground : lightGray + "33"}; - border-radius: ${defaultBorderRadius}; + border-radius: 0.3125rem; color: ${(props) => !props.disabled && props.isPrimary ? vscButtonForeground : vscForeground}; cursor: pointer; diff --git a/gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts b/gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts index f994b53d60..3889a7ef99 100644 --- a/gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts +++ b/gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts @@ -1,6 +1,5 @@ import styled from "styled-components"; import { - defaultBorderRadius, lightGray, vscBadgeBackground, vscCommandCenterActiveBorder, @@ -14,7 +13,7 @@ import { getFontSize } from "../../../../util"; export const InputBoxDiv = styled.div<{}>` resize: none; font-family: inherit; - border-radius: ${defaultBorderRadius}; + border-radius: 0.5rem; padding-bottom: 1px; margin: 0; height: auto; diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs index ed91cee113..d5871cc80d 100644 --- a/gui/tailwind.config.cjs +++ b/gui/tailwind.config.cjs @@ -27,7 +27,7 @@ module.exports = { "spin-slow": "spin 6s linear infinite", }, borderRadius: { - default: "5px", + default: "0.5rem", }, colors: { background: varWithFallback("background"), From 5df9aa2a2bb514a211ff79006a6ebf0eef7dc1e7 Mon Sep 17 00:00:00 2001 From: Nate Date: Fri, 27 Jun 2025 00:30:31 -0700 Subject: [PATCH 6/9] increase lump x margin --- gui/src/components/mainInput/Lump/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gui/src/components/mainInput/Lump/index.tsx b/gui/src/components/mainInput/Lump/index.tsx index f6ff453ced..993ed64cc5 100644 --- a/gui/src/components/mainInput/Lump/index.tsx +++ b/gui/src/components/mainInput/Lump/index.tsx @@ -10,8 +10,8 @@ import { SelectedSection } from "./sections/SelectedSection"; const LumpDiv = styled.div` background-color: ${vscInputBackground}; - margin-left: 4px; - margin-right: 4px; + margin-left: 6px; + margin-right: 6px; border-radius: ${defaultBorderRadius} ${defaultBorderRadius} 0 0; border-top: 1px solid ${vscCommandCenterInactiveBorder}; border-left: 1px solid ${vscCommandCenterInactiveBorder}; From 0d26551ae0e8779cfcec408915b7052fb2af15b6 Mon Sep 17 00:00:00 2001 From: Nate Date: Fri, 27 Jun 2025 00:35:59 -0700 Subject: [PATCH 7/9] fix code bg --- gui/src/components/StyledMarkdownPreview/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx index 45dd743fb3..0f2d1af0df 100644 --- a/gui/src/components/StyledMarkdownPreview/index.tsx +++ b/gui/src/components/StyledMarkdownPreview/index.tsx @@ -77,7 +77,7 @@ const StyledMarkdown = styled.div<{ } word-wrap: break-word; border-radius: 0.3125rem; - background-color: var(--vscode-textCodeBlock-background); + background-color: ${vscEditorBackground}; font-size: ${getFontSize() - 2}px; font-family: var(--vscode-editor-font-family); } From 4d20c8ad50c86bb98306a7e76deacc24da1d3abb Mon Sep 17 00:00:00 2001 From: Nate Date: Mon, 30 Jun 2025 14:07:08 -0700 Subject: [PATCH 8/9] add textCodeBlcokBackground to GetTheme.kt --- .../continueintellijextension/continue/GetTheme.kt | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt b/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt index 0ee4c2bd09..3a01f05fc7 100644 --- a/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt +++ b/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt @@ -166,6 +166,9 @@ class GetTheme { val findMatchSelectedBackground = namedColor("SearchMatch.selectedBackground") ?: editorScheme.getAttributes(EditorColors.SEARCH_RESULT_ATTRIBUTES)?.backgroundColor + // Use editor background with slight tint for code blocks + val textCodeBlockBackground = slightChange(editorBackground, 3) ?: editorBackground + // These should match the keys in GUI's theme.ts val theme = mapOf( "background" to background, @@ -197,6 +200,7 @@ class GetTheme { "warning" to warningColor, "error" to errorColor, "link" to link, + "textCodeBlockBackground" to textCodeBlockBackground, "accent" to accentColor, "find-match" to findMatchBackground, "find-match-selected" to findMatchSelectedBackground, From ee278f4c4e503e70d16d509c7fcb5e3d0b1aaddd Mon Sep 17 00:00:00 2001 From: Nate Date: Thu, 3 Jul 2025 18:12:30 -0700 Subject: [PATCH 9/9] back to "Diff" --- core/tools/implementations/viewDiff.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/tools/implementations/viewDiff.ts b/core/tools/implementations/viewDiff.ts index 330172dff1..fd1dfdb8ab 100644 --- a/core/tools/implementations/viewDiff.ts +++ b/core/tools/implementations/viewDiff.ts @@ -7,7 +7,7 @@ export const viewDiffImpl: ToolImpl = async (args, extras) => { return [ { - name: ".diff", + name: "Diff", description: "The current git diff", content: diffs.join("\n"), },