Skip to content

Commit 970bd97

Browse files
sachasayancte
sachasayan
and
cte
authored
Tailwind migration (#3235)
Co-authored-by: cte <[email protected]>
1 parent 80e04a4 commit 970bd97

39 files changed

+848
-1682
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)