Skip to content

Commit 70374e5

Browse files
bramburnbramburn
committed
✨ feat(settings): implement settings categories
- add general, permissions, and about settings - add placeholder settings for other categories - render settings based on selected category - add background color to webview
1 parent 60a17e2 commit 70374e5

File tree

15 files changed

+906
-206
lines changed

15 files changed

+906
-206
lines changed

‎settings-webview/src/App.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,31 @@ import { FluentProvider, webLightTheme, webDarkTheme } from "@fluentui/react-com
44
import SettingsView from "./components/SettingsView"
55
import "./App.css"
66

7+
// Define the VS Code API
8+
declare global {
9+
interface Window {
10+
acquireVsCodeApi?: () => {
11+
postMessage: (message: any) => void
12+
getState: () => any
13+
setState: (state: any) => void
14+
}
15+
}
16+
}
17+
18+
// Initialize VS Code API
19+
const vscode = (() => {
20+
if (window.acquireVsCodeApi) {
21+
return window.acquireVsCodeApi()
22+
}
23+
24+
// Fallback for when running outside of VS Code (e.g., in a browser for development)
25+
return {
26+
postMessage: (message: any) => console.log("VS Code message:", message),
27+
getState: () => ({}),
28+
setState: () => {},
29+
}
30+
})()
31+
732
// Define the message type for communication with the extension
833
interface VSCodeMessage {
934
type: string
@@ -21,8 +46,10 @@ function App() {
2146
// Setup message handler from extension to webview
2247
window.addEventListener("message", (event) => {
2348
const message = event.data as VSCodeMessage
49+
console.log("Received message:", message)
2450
switch (message.type) {
2551
case "init":
52+
console.log("Initializing settings webview")
2653
setInitialized(true)
2754
break
2855
case "theme":
@@ -40,6 +67,7 @@ function App() {
4067
})
4168

4269
// Notify the extension that the webview is ready
70+
console.log("Sending webviewDidLaunch message")
4371
vscode.postMessage({ type: "webviewDidLaunch" })
4472
}, [])
4573

‎settings-webview/src/components/settings/AboutSettings.tsx‎

Lines changed: 69 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,79 @@
1-
import { makeStyles, shorthands, Title3, Text, Card, CardHeader, Link } from "@fluentui/react-components"
1+
import { useState } from "react"
2+
import { makeStyles, shorthands, Text, Link, tokens } from "@fluentui/react-components"
3+
import { Section, SectionHeader, Card, Toggle } from "../shared"
24

35
const useStyles = makeStyles({
4-
root: {
5-
display: "flex",
6-
flexDirection: "column",
7-
...shorthands.gap("16px"),
8-
},
9-
card: {
10-
width: "100%",
11-
},
12-
section: {
13-
marginBottom: "24px",
14-
},
15-
infoRow: {
16-
display: "flex",
17-
...shorthands.gap("8px"),
18-
marginBottom: "8px",
19-
},
20-
label: {
21-
fontWeight: "600",
22-
minWidth: "120px",
23-
},
6+
root: {
7+
display: "flex",
8+
flexDirection: "column",
9+
...shorthands.gap("16px"),
10+
},
11+
infoRow: {
12+
display: "flex",
13+
...shorthands.gap("8px"),
14+
marginBottom: "12px",
15+
},
16+
label: {
17+
fontWeight: tokens.fontWeightSemibold,
18+
minWidth: "120px",
19+
color: tokens.colorNeutralForeground1,
20+
},
21+
value: {
22+
color: tokens.colorNeutralForeground1,
23+
},
2424
})
2525

2626
const AboutSettings = () => {
27-
const styles = useStyles()
27+
const styles = useStyles()
28+
const [telemetryEnabled, setTelemetryEnabled] = useState(true)
29+
const [crashReportsEnabled, setCrashReportsEnabled] = useState(true)
2830

29-
return (
30-
<div className={styles.root}>
31-
<div className={styles.section}>
32-
<Title3>About Roo Code</Title3>
33-
<Text>Information about the extension.</Text>
34-
<Card className={styles.card}>
35-
<CardHeader header="Version Information" />
36-
<div style={{ padding: "16px" }}>
37-
<div className={styles.infoRow}>
38-
<Text className={styles.label}>Version:</Text>
39-
<Text>3.11.12</Text>
40-
</div>
41-
<div className={styles.infoRow}>
42-
<Text className={styles.label}>Build Date:</Text>
43-
<Text>April 11, 2025</Text>
44-
</div>
45-
<div className={styles.infoRow}>
46-
<Text className={styles.label}>Documentation:</Text>
47-
<Link href="https://github.com/Roo-Code/roo-code" target="_blank">
48-
GitHub Repository
49-
</Link>
50-
</div>
51-
</div>
52-
</Card>
53-
</div>
31+
return (
32+
<div className={styles.root}>
33+
<Section>
34+
<SectionHeader description="Information about the extension">About Roo Code</SectionHeader>
5435

55-
<div className={styles.section}>
56-
<Title3>Telemetry Settings</Title3>
57-
<Text>Configure telemetry preferences.</Text>
58-
<Card className={styles.card}>
59-
<CardHeader header="Telemetry" />
60-
<div style={{ padding: "16px" }}>
61-
<Text>Telemetry settings will be implemented here.</Text>
62-
</div>
63-
</Card>
64-
</div>
65-
</div>
66-
)
36+
<Card title="Version Information">
37+
<div className={styles.infoRow}>
38+
<Text className={styles.label}>Version:</Text>
39+
<Text className={styles.value}>3.11.12</Text>
40+
</div>
41+
<div className={styles.infoRow}>
42+
<Text className={styles.label}>Build Date:</Text>
43+
<Text className={styles.value}>April 11, 2025</Text>
44+
</div>
45+
<div className={styles.infoRow}>
46+
<Text className={styles.label}>Documentation:</Text>
47+
<Link href="https://github.com/Roo-Code/roo-code" target="_blank">
48+
GitHub Repository
49+
</Link>
50+
</div>
51+
</Card>
52+
</Section>
53+
54+
<Section>
55+
<SectionHeader description="Configure telemetry preferences">Telemetry Settings</SectionHeader>
56+
57+
<Card>
58+
<Toggle
59+
id="telemetry-enabled"
60+
label="Enable Telemetry"
61+
description="Allow the extension to collect anonymous usage data to help improve the product"
62+
checked={telemetryEnabled}
63+
onChange={setTelemetryEnabled}
64+
/>
65+
66+
<Toggle
67+
id="crash-reports-enabled"
68+
label="Enable Crash Reports"
69+
description="Allow the extension to send crash reports to help improve stability"
70+
checked={crashReportsEnabled}
71+
onChange={setCrashReportsEnabled}
72+
/>
73+
</Card>
74+
</Section>
75+
</div>
76+
)
6777
}
6878

6979
export default AboutSettings

‎settings-webview/src/components/settings/GeneralSettings.tsx‎

Lines changed: 131 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,139 @@
1-
import { makeStyles, shorthands, Title3, Text, Card, CardHeader } from "@fluentui/react-components"
1+
import { useState } from "react"
2+
import { makeStyles, shorthands } from "@fluentui/react-components"
3+
import {
4+
Section,
5+
SectionHeader,
6+
Card,
7+
TextInput,
8+
Dropdown,
9+
Toggle,
10+
SearchableDropdown,
11+
DropdownOption,
12+
SearchableDropdownOption,
13+
} from "../shared"
214

315
const useStyles = makeStyles({
4-
root: {
5-
display: "flex",
6-
flexDirection: "column",
7-
...shorthands.gap("16px"),
8-
},
9-
card: {
10-
width: "100%",
11-
},
12-
section: {
13-
marginBottom: "24px",
14-
},
16+
root: {
17+
display: "flex",
18+
flexDirection: "column",
19+
...shorthands.gap("16px"),
20+
},
1521
})
1622

23+
const languageOptions: DropdownOption[] = [
24+
{ key: "en", text: "English" },
25+
{ key: "fr", text: "French" },
26+
{ key: "de", text: "German" },
27+
{ key: "es", text: "Spanish" },
28+
{ key: "it", text: "Italian" },
29+
{ key: "ja", text: "Japanese" },
30+
{ key: "ko", text: "Korean" },
31+
{ key: "pt", text: "Portuguese" },
32+
{ key: "ru", text: "Russian" },
33+
{ key: "zh", text: "Chinese" },
34+
]
35+
36+
const modelOptions: SearchableDropdownOption[] = [
37+
{ key: "gpt-4", text: "GPT-4" },
38+
{ key: "gpt-4-turbo", text: "GPT-4 Turbo" },
39+
{ key: "gpt-3.5-turbo", text: "GPT-3.5 Turbo" },
40+
{ key: "claude-3-opus", text: "Claude 3 Opus" },
41+
{ key: "claude-3-sonnet", text: "Claude 3 Sonnet" },
42+
{ key: "claude-3-haiku", text: "Claude 3 Haiku" },
43+
{ key: "gemini-pro", text: "Gemini Pro" },
44+
{ key: "gemini-ultra", text: "Gemini Ultra" },
45+
]
46+
1747
const GeneralSettings = () => {
18-
const styles = useStyles()
19-
20-
return (
21-
<div className={styles.root}>
22-
<div className={styles.section}>
23-
<Title3>API Configuration</Title3>
24-
<Text>Configure your API settings for different providers.</Text>
25-
<Card className={styles.card}>
26-
<CardHeader header="API Keys" />
27-
<div style={{ padding: "16px" }}>
28-
<Text>API key settings will be implemented here.</Text>
29-
</div>
30-
</Card>
31-
</div>
32-
33-
<div className={styles.section}>
34-
<Title3>Language Settings</Title3>
35-
<Text>Configure language preferences for the extension.</Text>
36-
<Card className={styles.card}>
37-
<CardHeader header="Language" />
38-
<div style={{ padding: "16px" }}>
39-
<Text>Language settings will be implemented here.</Text>
40-
</div>
41-
</Card>
42-
</div>
43-
</div>
44-
)
48+
const styles = useStyles()
49+
50+
// State for form values
51+
const [openAIKey, setOpenAIKey] = useState("")
52+
const [anthropicKey, setAnthropicKey] = useState("")
53+
const [googleKey, setGoogleKey] = useState("")
54+
const [selectedLanguage, setSelectedLanguage] = useState("en")
55+
const [selectedModel, setSelectedModel] = useState("gpt-4")
56+
const [autoSave, setAutoSave] = useState(true)
57+
58+
return (
59+
<div className={styles.root}>
60+
<Section>
61+
<SectionHeader description="Configure your API settings for different providers">
62+
API Configuration
63+
</SectionHeader>
64+
65+
<Card title="OpenAI">
66+
<TextInput
67+
id="openai-key"
68+
label="API Key"
69+
description="Your OpenAI API key"
70+
value={openAIKey}
71+
onChange={setOpenAIKey}
72+
placeholder="sk-..."
73+
type="password"
74+
/>
75+
76+
<SearchableDropdown
77+
id="openai-model"
78+
label="Default Model"
79+
description="Select the default model to use"
80+
options={modelOptions}
81+
selectedKey={selectedModel}
82+
onChange={setSelectedModel}
83+
/>
84+
</Card>
85+
86+
<Card title="Anthropic">
87+
<TextInput
88+
id="anthropic-key"
89+
label="API Key"
90+
description="Your Anthropic API key"
91+
value={anthropicKey}
92+
onChange={setAnthropicKey}
93+
placeholder="sk-ant-..."
94+
type="password"
95+
/>
96+
</Card>
97+
98+
<Card title="Google">
99+
<TextInput
100+
id="google-key"
101+
label="API Key"
102+
description="Your Google API key"
103+
value={googleKey}
104+
onChange={setGoogleKey}
105+
placeholder="AIza..."
106+
type="password"
107+
/>
108+
</Card>
109+
</Section>
110+
111+
<Section>
112+
<SectionHeader description="Configure language preferences for the extension">
113+
Language Settings
114+
</SectionHeader>
115+
116+
<Card>
117+
<Dropdown
118+
id="language"
119+
label="Interface Language"
120+
description="Select the language for the user interface"
121+
options={languageOptions}
122+
selectedKey={selectedLanguage}
123+
onChange={setSelectedLanguage}
124+
/>
125+
126+
<Toggle
127+
id="auto-save"
128+
label="Auto-save Settings"
129+
description="Automatically save settings when changed"
130+
checked={autoSave}
131+
onChange={setAutoSave}
132+
/>
133+
</Card>
134+
</Section>
135+
</div>
136+
)
45137
}
46138

47139
export default GeneralSettings

0 commit comments

Comments
 (0)