Skip to content

Commit bbd37e6

Browse files
sachasayansachasayan
committed
Refactor settings components for improved styling and functionality
- Updated ApiConfigManager to use Tailwind CSS class for width. - Refactored BrowserSettings to utilize utility classes for styling and improved test result display. - Enhanced ModelDescriptionMarkdown with a new StyledMarkdown component for consistent styling. - Adjusted SettingsView to apply conditional class names using utility functions. - Modified Bedrock, Glama, LMStudio, OpenAICompatible, OpenRouter, and Requesty components to use Tailwind CSS classes for width and styling consistency. - Removed unused styles from styles.ts file. - Updated dialog components to improve styling and layout. - Refined markdown components (Blockquote, CodeBlock) for better styling. - Added new CSS variables for improved theme support and fallback colors for Highlight.js. - Implemented animations for smoother UI transitions.
1 parent 302dc2d commit bbd37e6

37 files changed

+660
-1361
lines changed

‎webview-ui/src/components/chat/Announcement.tsx‎

Lines changed: 77 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,94 @@
1-
import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
2-
import { memo } from "react"
3-
import { useAppTranslation } from "@/i18n/TranslationContext"
1+
import { useState, memo } from "react"
42
import { Trans } from "react-i18next"
3+
import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
4+
5+
import { useAppTranslation } from "@src/i18n/TranslationContext"
6+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@src/components/ui"
57

68
interface AnnouncementProps {
79
hideAnnouncement: () => void
810
}
9-
/*
10-
You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
11-
*/
12-
const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
13-
const { t } = useAppTranslation()
1411

15-
const discordLink = (
16-
<VSCodeLink
17-
href="https://discord.gg/roocode"
18-
onClick={(e) => {
19-
e.preventDefault()
20-
window.postMessage(
21-
{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
22-
"*",
23-
)
24-
}}>
25-
Discord
26-
</VSCodeLink>
27-
)
12+
/**
13+
* You must update the `latestAnnouncementId` in ClineProvider for new
14+
* announcements to show to users. This new id will be compared with what's in
15+
* state for the 'last announcement shown', and if it's different then the
16+
* announcement will render. As soon as an announcement is shown, the id will be
17+
* updated in state. This ensures that announcements are not shown more than
18+
* once, even if the user doesn't close it themselves.
19+
*/
2820

29-
const redditLink = (
30-
<VSCodeLink
31-
href="https://reddit.com/r/RooCode"
32-
onClick={(e) => {
33-
e.preventDefault()
34-
window.postMessage(
35-
{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
36-
"*",
37-
)
38-
}}>
39-
Reddit
40-
</VSCodeLink>
41-
)
21+
const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
22+
const { t } = useAppTranslation()
23+
const [open, setOpen] = useState(true)
4224

4325
return (
44-
<div className="flex flex-col justify-center absolute top-0 bottom-0 left-0 right-0 z-50 p-10 bg-black/50">
45-
<div
46-
style={{
47-
backgroundColor: "var(--vscode-editor-background)",
48-
borderRadius: "3px",
49-
padding: "12px 16px",
50-
margin: "5px 15px 5px 15px",
51-
position: "relative",
52-
flexShrink: 0,
53-
}}>
54-
<VSCodeButton
55-
appearance="icon"
56-
onClick={hideAnnouncement}
57-
title={t("chat:announcement.hideButton")}
58-
style={{ position: "absolute", top: "8px", right: "8px" }}>
59-
<span className="codicon codicon-close"></span>
60-
</VSCodeButton>
61-
<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
62-
63-
<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
64-
65-
<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
66-
<ul style={{ margin: "5px 0" }}>
67-
<li>
68-
•{" "}
69-
<Trans
70-
i18nKey="chat:announcement.feature1"
71-
components={{
72-
bold: <b />,
73-
code: <code />,
74-
}}
75-
/>
76-
</li>
77-
<li>
78-
•{" "}
79-
<Trans
80-
i18nKey="chat:announcement.feature2"
81-
components={{
82-
bold: <b />,
83-
code: <code />,
84-
}}
85-
/>
86-
</li>
87-
<li>
88-
•{" "}
89-
<Trans
90-
i18nKey="chat:announcement.feature3"
91-
components={{
92-
bold: <b />,
93-
code: <code />,
94-
}}
95-
/>
96-
</li>
97-
</ul>
26+
<Dialog
27+
open={open}
28+
onOpenChange={(open) => {
29+
setOpen(open)
9830

99-
<p style={{ margin: "10px 0px 0px" }}>
31+
if (!open) {
32+
hideAnnouncement()
33+
}
34+
}}>
35+
<DialogContent className="max-w-96">
36+
<DialogHeader>
37+
<DialogTitle>{t("chat:announcement.title")}</DialogTitle>
38+
<DialogDescription>{t("chat:announcement.description")}</DialogDescription>
39+
</DialogHeader>
40+
<div>
41+
<h3>{t("chat:announcement.whatsNew")}</h3>
42+
<ul className="space-y-2">
43+
<li>
44+
•{" "}
45+
<Trans i18nKey="chat:announcement.feature1" components={{ bold: <b />, code: <code /> }} />
46+
</li>
47+
<li>
48+
•{" "}
49+
<Trans i18nKey="chat:announcement.feature2" components={{ bold: <b />, code: <code /> }} />
50+
</li>
51+
<li>
52+
•{" "}
53+
<Trans i18nKey="chat:announcement.feature3" components={{ bold: <b />, code: <code /> }} />
54+
</li>
55+
</ul>
10056
<Trans
10157
i18nKey="chat:announcement.detailsDiscussLinks"
102-
components={{
103-
discordLink: discordLink,
104-
redditLink: redditLink,
105-
}}
58+
components={{ discordLink: <DiscordLink />, redditLink: <RedditLink /> }}
10659
/>
107-
</p>
108-
</div>
109-
</div>
60+
</div>
61+
</DialogContent>
62+
</Dialog>
11063
)
11164
}
11265

66+
const DiscordLink = () => (
67+
<VSCodeLink
68+
href="https://discord.gg/roocode"
69+
onClick={(e) => {
70+
e.preventDefault()
71+
window.postMessage(
72+
{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
73+
"*",
74+
)
75+
}}>
76+
Discord
77+
</VSCodeLink>
78+
)
79+
80+
const RedditLink = () => (
81+
<VSCodeLink
82+
href="https://reddit.com/r/RooCode"
83+
onClick={(e) => {
84+
e.preventDefault()
85+
window.postMessage(
86+
{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
87+
"*",
88+
)
89+
}}>
90+
Reddit
91+
</VSCodeLink>
92+
)
93+
11394
export default memo(Announcement)

‎webview-ui/src/components/chat/AutoApproveMenu.tsx‎

Lines changed: 14 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react"
22
import { Trans } from "react-i18next"
33
import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
44

5+
import { cn } from "@/lib/utils"
56
import { vscode } from "@src/utils/vscode"
67
import { useExtensionState } from "@src/context/ExtensionStateContext"
78
import { useAppTranslation } from "@src/i18n/TranslationContext"
@@ -118,23 +119,13 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
118119

119120
return (
120121
<div
121-
style={{
122-
padding: "0 15px",
123-
userSelect: "none",
124-
borderTop: isExpanded
125-
? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
126-
: "none",
127-
overflowY: "auto",
128-
...style,
129-
}}>
122+
className={cn(
123+
"px-[15px] select-none overflow-y-auto",
124+
isExpanded && "border-t-[0.5px] border-vscode-titleBar-inactiveForeground-20",
125+
)}
126+
style={style}>
130127
<div
131-
style={{
132-
display: "flex",
133-
alignItems: "center",
134-
gap: "8px",
135-
padding: isExpanded ? "8px 0" : "8px 0 0 0",
136-
cursor: "pointer",
137-
}}
128+
className={`flex items-center gap-2 cursor-pointer ${isExpanded ? "py-2" : "pt-2 pb-0"}`}
138129
onClick={toggleExpanded}>
139130
<div onClick={(e) => e.stopPropagation()}>
140131
<VSCodeCheckbox
@@ -146,49 +137,22 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
146137
}}
147138
/>
148139
</div>
149-
<div
150-
style={{
151-
display: "flex",
152-
alignItems: "center",
153-
gap: "4px",
154-
flex: 1,
155-
minWidth: 0,
156-
}}>
157-
<span
158-
style={{
159-
color: "var(--vscode-foreground)",
160-
flexShrink: 0,
161-
}}>
162-
{t("chat:autoApprove.title")}
163-
</span>
164-
<span
165-
style={{
166-
color: "var(--vscode-descriptionForeground)",
167-
overflow: "hidden",
168-
textOverflow: "ellipsis",
169-
whiteSpace: "nowrap",
170-
flex: 1,
171-
minWidth: 0,
172-
}}>
140+
<div className="flex items-center gap-1 flex-1 min-w-0">
141+
<span className="text-vscode-foreground flex-shrink-0">{t("chat:autoApprove.title")}</span>
142+
<span className="text-vscode-descriptionForeground overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
173143
{enabledActionsList || t("chat:autoApprove.none")}
174144
</span>
175145
<span
176-
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
177-
style={{
178-
flexShrink: 0,
179-
marginLeft: isExpanded ? "2px" : "-2px",
180-
}}
146+
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} flex-shrink-0 ${
147+
isExpanded ? "ml-0.5" : "ml-[-2px]"
148+
}`}
181149
/>
182150
</div>
183151
</div>
184152

185153
{isExpanded && (
186154
<div className="flex flex-col gap-2">
187-
<div
188-
style={{
189-
color: "var(--vscode-descriptionForeground)",
190-
fontSize: "12px",
191-
}}>
155+
<div className="text-vscode-descriptionForeground text-xs">
192156
<Trans
193157
i18nKey="chat:autoApprove.description"
194158
components={{

0 commit comments

Comments
 (0)