Skip to content

Commit b5428f2

Browse files
ctecte
committed
Use a Dialog for the announcement
1 parent 6042b7f commit b5428f2

File tree

3 files changed

+93
-99
lines changed

3 files changed

+93
-99
lines changed

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

Lines changed: 77 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +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 className="bg-vscode-editor-background rounded-[3px] p-[12px_16px] m-[5px_15px] relative flex-shrink-0">
46-
<VSCodeButton
47-
appearance="icon"
48-
onClick={hideAnnouncement}
49-
title={t("chat:announcement.hideButton")}
50-
className="absolute top-2 right-2">
51-
<span className="codicon codicon-close"></span>
52-
</VSCodeButton>
53-
<h2 className="m-0 mb-2">{t("chat:announcement.title")}</h2>
54-
55-
<p className="my-[5px]">{t("chat:announcement.description")}</p>
56-
57-
<h3 className="mt-3 mb-[5px] text-sm">{t("chat:announcement.whatsNew")}</h3>
58-
<ul className="my-[5px]">
59-
<li>
60-
•{" "}
61-
<Trans
62-
i18nKey="chat:announcement.feature1"
63-
components={{
64-
bold: <b />,
65-
code: <code />,
66-
}}
67-
/>
68-
</li>
69-
<li>
70-
•{" "}
71-
<Trans
72-
i18nKey="chat:announcement.feature2"
73-
components={{
74-
bold: <b />,
75-
code: <code />,
76-
}}
77-
/>
78-
</li>
79-
<li>
80-
•{" "}
81-
<Trans
82-
i18nKey="chat:announcement.feature3"
83-
components={{
84-
bold: <b />,
85-
code: <code />,
86-
}}
87-
/>
88-
</li>
89-
</ul>
26+
<Dialog
27+
open={open}
28+
onOpenChange={(open) => {
29+
setOpen(open)
9030

91-
<p className="mt-2.5 mb-0">
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>
9256
<Trans
9357
i18nKey="chat:announcement.detailsDiscussLinks"
94-
components={{
95-
discordLink: discordLink,
96-
redditLink: redditLink,
97-
}}
58+
components={{ discordLink: <DiscordLink />, redditLink: <RedditLink /> }}
9859
/>
99-
</p>
100-
</div>
101-
</div>
60+
</div>
61+
</DialogContent>
62+
</Dialog>
10263
)
10364
}
10465

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+
10594
export default memo(Announcement)

‎webview-ui/src/components/ui/dialog.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
4040
<DialogPrimitive.Content
4141
data-slot="dialog-content"
4242
className={cn(
43-
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
43+
"bg-vscode-editor-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
4444
className,
4545
)}
4646
{...props}>
@@ -78,7 +78,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
7878
return (
7979
<DialogPrimitive.Title
8080
data-slot="dialog-title"
81-
className={cn("text-lg leading-none font-semibold", className)}
81+
className={cn("text-lg leading-none font-semibold my-0", className)}
8282
{...props}
8383
/>
8484
)
@@ -88,7 +88,7 @@ function DialogDescription({ className, ...props }: React.ComponentProps<typeof
8888
return (
8989
<DialogPrimitive.Description
9090
data-slot="dialog-description"
91-
className={cn("text-muted-foreground text-sm", className)}
91+
className={cn("text-muted-foreground text-sm my-0", className)}
9292
{...props}
9393
/>
9494
)

‎webview-ui/src/index.css‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,6 @@
1818
@import "tailwindcss/theme.css" layer(theme);
1919
@import "./preflight.css" layer(base);
2020
@import "tailwindcss/utilities.css" layer(utilities);
21-
@keyframes fadeIn {
22-
from {
23-
opacity: 0;
24-
}
25-
to {
26-
opacity: 1;
27-
}
28-
}
2921

3022
@plugin "tailwindcss-animate";
3123

@@ -471,3 +463,16 @@ input[cmdk-input]:focus {
471463
.codicon[class*="codicon-"] {
472464
text-rendering: geometricPrecision !important;
473465
}
466+
467+
/**
468+
* Animations
469+
*/
470+
471+
@keyframes fadeIn {
472+
from {
473+
opacity: 0;
474+
}
475+
to {
476+
opacity: 1;
477+
}
478+
}

0 commit comments

Comments
 (0)