refactor & perf: declare constant object for inline style of file Announcement (RooCodeInc#2650)

Author: samuel871211

.changeset/brown-rats-cheat.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+refactor & perf: declare constant object for inline style of file `Announcement`

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

@@ -1,42 +1,54 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { memo } from "react"
+import { CSSProperties, memo } from "react"
 import { getAsVar, VSC_DESCRIPTION_FOREGROUND, VSC_INACTIVE_SELECTION_BACKGROUND } from "../../utils/vscStyles"
-import { vscode } from "../../utils/vscode"
 
 interface AnnouncementProps {
 	version: string
 	hideAnnouncement: () => void
 }
 
+const containerStyle: CSSProperties = {
+	backgroundColor: getAsVar(VSC_INACTIVE_SELECTION_BACKGROUND),
+	borderRadius: "3px",
+	padding: "12px 16px",
+	margin: "5px 15px 5px 15px",
+	position: "relative",
+	flexShrink: 0,
+}
+const closeIconStyle: CSSProperties = { position: "absolute", top: "8px", right: "8px" }
+const h3TitleStyle: CSSProperties = { margin: "0 0 8px" }
+const ulStyle: CSSProperties = { margin: "0 0 8px", paddingLeft: "12px" }
+const accountIconStyle: CSSProperties = { fontSize: 11 }
+const hrStyle: CSSProperties = {
+	height: "1px",
+	background: getAsVar(VSC_DESCRIPTION_FOREGROUND),
+	opacity: 0.1,
+	margin: "8px 0",
+}
+const linkContainerStyle: CSSProperties = { margin: "0" }
+const linkStyle: CSSProperties = { display: "inline" }
+
 /*
 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.
 */
 const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 	const minorVersion = version.split(".").slice(0, 2).join(".") // 2.0.0 -> 2.0
 	return (
-		<div
-			style={{
-				backgroundColor: getAsVar(VSC_INACTIVE_SELECTION_BACKGROUND),
-				borderRadius: "3px",
-				padding: "12px 16px",
-				margin: "5px 15px 5px 15px",
-				position: "relative",
-				flexShrink: 0,
-			}}>
-			<VSCodeButton appearance="icon" onClick={hideAnnouncement} style={{ position: "absolute", top: "8px", right: "8px" }}>
+		<div style={containerStyle}>
+			<VSCodeButton appearance="icon" onClick={hideAnnouncement} style={closeIconStyle}>
 				<span className="codicon codicon-close"></span>
 			</VSCodeButton>
-			<h3 style={{ margin: "0 0 8px" }}>
+			<h3 style={h3TitleStyle}>
 				🎉{"  "}New in v{minorVersion}
 			</h3>
-			<ul style={{ margin: "0 0 8px", paddingLeft: "12px" }}>
+			<ul style={ulStyle}>
 				<li>
 					<b>Add to Cline:</b> Right-click selected text in any file or terminal to quickly add context to your current
 					task! Plus, when you see a lightbulb icon, select 'Fix with Cline' to have Cline fix errors in your code.
 				</li>
 				<li>
 					<b>Billing Dashboard:</b> Track your remaining credits and transaction history right in the extension with a{" "}
-					<span className="codicon codicon-account" style={{ fontSize: 11 }}></span> Cline account!
+					<span className="codicon codicon-account" style={accountIconStyle}></span> Cline account!
 				</li>
 				<li>
 					<b>Faster Inference:</b> Cline/OpenRouter users can sort underlying providers used by throughput, price, and
@@ -94,24 +106,17 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 					environments)
 				</li>
 			</ul>*/}
-			<div
-				style={{
-					height: "1px",
-					background: getAsVar(VSC_DESCRIPTION_FOREGROUND),
-					opacity: 0.1,
-					margin: "8px 0",
-				}}
-			/>
-			<p style={{ margin: "0" }}>
+			<div style={hrStyle} />
+			<p style={linkContainerStyle}>
 				Join us on{" "}
-				<VSCodeLink style={{ display: "inline" }} href="https://x.com/cline">
+				<VSCodeLink style={linkStyle} href="https://x.com/cline">
 					X,
 				</VSCodeLink>{" "}
-				<VSCodeLink style={{ display: "inline" }} href="https://discord.gg/cline">
+				<VSCodeLink style={linkStyle} href="https://discord.gg/cline">
 					discord,
 				</VSCodeLink>{" "}
 				or{" "}
-				<VSCodeLink style={{ display: "inline" }} href="https://www.reddit.com/r/cline/">
+				<VSCodeLink style={linkStyle} href="https://www.reddit.com/r/cline/">
 					r/cline
 				</VSCodeLink>
 				for more updates!