Skip to content

Commit 9ecc2e9

Browse files
robertpiosikrobertpiosik
committed
Add external URL opening functionality and improve settings UI with notices and color consistency
1 parent 3fe64a2 commit 9ecc2e9

19 files changed

Lines changed: 201 additions & 55 deletions

File tree

‎apps/editor/src/views/settings/backend/message-handlers/handle-open-external-url.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as vscode from 'vscode'
2+
import { OpenExternalUrlMessage } from '@/views/settings/types/messages'
3+
4+
export const handle_open_external_url = async (
5+
message: OpenExternalUrlMessage
6+
) => {
7+
await vscode.env.openExternal(vscode.Uri.parse(message.url))
8+
}

‎apps/editor/src/views/settings/backend/message-handlers/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,4 @@ export * from './handle-get-configurations'
3737
export * from './handle-get-fix-all-automatically'
3838
export * from './handle-update-fix-all-automatically'
3939
export * from './handle-open-keybindings'
40+
export * from './handle-open-external-url'

‎apps/editor/src/views/settings/backend/settings-provider.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ import {
4242
handle_open_allow_patterns_settings,
4343
handle_get_fix_all_automatically,
4444
handle_update_fix_all_automatically,
45-
handle_open_keybindings
45+
handle_open_keybindings,
46+
handle_open_external_url
4647
} from './message-handlers'
4748

4849
export class SettingsProvider {
@@ -334,6 +335,8 @@ export class SettingsProvider {
334335
await handle_update_fix_all_automatically(message)
335336
} else if (message.command == 'OPEN_KEYBINDINGS') {
336337
await handle_open_keybindings(message)
338+
} else if (message.command == 'OPEN_EXTERNAL_URL') {
339+
await handle_open_external_url(message)
337340
}
338341
},
339342
null,

‎apps/editor/src/views/settings/frontend/Home/Home.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Textarea } from '@ui/components/editor/common/Textarea'
1212
import { Toggler } from '@ui/components/editor/common/Toggler'
1313
import { Button } from '@ui/components/editor/common/Button'
1414
import { TextButton } from '@ui/components/editor/settings/TextButton'
15+
import { Notice } from '@ui/components/editor/settings/Notice'
1516
import {
1617
ConfigurationForClient,
1718
ProviderForClient,
@@ -146,6 +147,7 @@ type Props = {
146147
on_delete_config: (tool_name: string, configuration_id: string) => void
147148
on_set_default_config: (tool_name: string, configuration_id: string) => void
148149
on_unset_default_config: (tool_name: string) => void
150+
on_open_external_url: (url: string) => void
149151
scroll_to_section_on_load?: NavItem
150152
}
151153

@@ -387,6 +389,26 @@ export const Home: React.FC<Props> = (props) => {
387389
<Button on_click={() => props.on_add_provider()}>Add New...</Button>
388390
}
389391
>
392+
<Notice type="info">
393+
API keys are stored securely in the{' '}
394+
<a
395+
href="#"
396+
onClick={(e) => {
397+
e.preventDefault()
398+
props.on_open_external_url(
399+
'https://code.visualstudio.com/api/references/vscode-api#SecretStorage'
400+
)
401+
}}
402+
>
403+
SecretStorage
404+
</a>
405+
.
406+
</Notice>
407+
{props.providers.length == 0 && (
408+
<Notice type="warning">
409+
Add a model provider to use API features.
410+
</Notice>
411+
)}
390412
<Group>
391413
<ModelProvidersSection
392414
providers={props.providers}
@@ -417,6 +439,11 @@ export const Home: React.FC<Props> = (props) => {
417439
</Button>
418440
}
419441
>
442+
{props.edit_context_configs.length == 0 && (
443+
<Notice type="warning">
444+
Add a configuration to use this feature.
445+
</Notice>
446+
)}
420447
<Group>
421448
<ApiToolConfigurationSection
422449
configurations={props.edit_context_configs}
@@ -465,6 +492,11 @@ export const Home: React.FC<Props> = (props) => {
465492
</Button>
466493
}
467494
>
495+
{props.intelligent_update_configs.length == 0 && (
496+
<Notice type="warning">
497+
Add a configuration to use this feature.
498+
</Notice>
499+
)}
468500
<Group>
469501
<ApiToolConfigurationSection
470502
configurations={props.intelligent_update_configs}
@@ -516,6 +548,11 @@ export const Home: React.FC<Props> = (props) => {
516548
</Button>
517549
}
518550
>
551+
{props.prune_context_configs.length == 0 && (
552+
<Notice type="warning">
553+
Add a configuration to use this feature.
554+
</Notice>
555+
)}
519556
<Group>
520557
<ApiToolConfigurationSection
521558
configurations={props.prune_context_configs}
@@ -547,6 +584,11 @@ export const Home: React.FC<Props> = (props) => {
547584
</Button>
548585
}
549586
>
587+
{props.code_at_cursor_configs.length == 0 && (
588+
<Notice type="warning">
589+
Add a configuration to use this feature.
590+
</Notice>
591+
)}
550592
<Group>
551593
<ApiToolConfigurationSection
552594
configurations={props.code_at_cursor_configs}
@@ -599,6 +641,11 @@ export const Home: React.FC<Props> = (props) => {
599641
</Button>
600642
}
601643
>
644+
{props.voice_input_configs.length == 0 && (
645+
<Notice type="warning">
646+
Add a configuration to use this feature.
647+
</Notice>
648+
)}
602649
<Group>
603650
<ApiToolConfigurationSection
604651
configurations={props.voice_input_configs}
@@ -637,6 +684,11 @@ export const Home: React.FC<Props> = (props) => {
637684
</Button>
638685
}
639686
>
687+
{props.commit_messages_configs.length == 0 && (
688+
<Notice type="warning">
689+
Add a configuration to use this feature.
690+
</Notice>
691+
)}
640692
<Group>
641693
<ApiToolConfigurationSection
642694
configurations={props.commit_messages_configs}

‎apps/editor/src/views/settings/frontend/Settings.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ export const Settings = () => {
154154
on_delete_config={settings_hook.handle_delete_config}
155155
on_set_default_config={settings_hook.handle_set_default_config}
156156
on_unset_default_config={settings_hook.handle_unset_default_config}
157+
on_open_external_url={settings_hook.handle_open_external_url}
157158
scroll_to_section_on_load={scroll_to_section_on_load}
158159
/>
159160
)

‎apps/editor/src/views/settings/frontend/hooks/use-settings.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -429,6 +429,13 @@ export const use_settings = (vscode: any) => {
429429
})
430430
}
431431

432+
const handle_open_external_url = (url: string) => {
433+
post_message(vscode, {
434+
command: 'OPEN_EXTERNAL_URL',
435+
url
436+
})
437+
}
438+
432439
return {
433440
providers,
434441
set_providers,
@@ -484,6 +491,7 @@ export const use_settings = (vscode: any) => {
484491
handle_check_new_files_change,
485492
handle_clear_checks_in_workspace_behavior_change,
486493
handle_fix_all_automatically_change,
487-
handle_open_keybindings
494+
handle_open_keybindings,
495+
handle_open_external_url
488496
}
489497
}

‎apps/editor/src/views/settings/types/messages.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,11 @@ export interface OpenKeybindingsMessage {
302302
search?: string
303303
}
304304

305+
export interface OpenExternalUrlMessage {
306+
command: 'OPEN_EXTERNAL_URL'
307+
url: string
308+
}
309+
305310
export type FrontendMessage =
306311
| GetModelProvidersMessage
307312
| ReorderModelProvidersMessage
@@ -363,6 +368,7 @@ export type FrontendMessage =
363368
| GetFixAllAutomaticallyMessage
364369
| UpdateFixAllAutomaticallyMessage
365370
| OpenKeybindingsMessage
371+
| OpenExternalUrlMessage
366372

367373
// === FROM BACKEND TO FRONTEND ===
368374
export interface ModelProvidersMessage {

‎packages/ui/.storybook/styles.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
var(--vscode-foreground) 75%,
66
transparent
77
);
8+
--cwc-text-color-green: var(--vscode-gitDecoration-addedResourceForeground);
9+
--cwc-text-color-orange: var(
10+
--vscode-gitDecoration-modifiedResourceForeground
11+
);
12+
--cwc-text-color-red: var(--vscode-gitDecoration-deletedResourceForeground);
13+
814
--cwc-bg-primary: color-mix(
915
in srgb,
1016
var(--vscode-foreground) 20%,

‎packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,20 @@
1616
overflow: hidden;
1717

1818
&--error {
19-
color: var(--vscode-gitDecoration-deletedResourceForeground);
20-
background-color: var(--cwc-bg-error);
19+
color: var(--cwc-text-color-red);
20+
background-color: var(--cwc-bg-red);
2121

2222
.info__action:hover {
23-
background-color: var(--cwc-bg-error);
23+
background-color: var(--cwc-bg-red);
2424
}
2525
}
2626

2727
&--warning {
28-
color: var(--vscode-gitDecoration-modifiedResourceForeground);
29-
background-color: var(--cwc-bg-warning);
28+
color: var(--cwc-text-color-orange);
29+
background-color: var(--cwc-bg-orange);
3030

3131
.info__action:hover {
32-
background-color: var(--cwc-bg-warning);
32+
background-color: var(--cwc-bg-orange);
3333
}
3434
}
3535

‎packages/ui/src/components/editor/panel/ResponsePreview/components/FileItem/FileItem.module.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,12 @@
7676
}
7777

7878
&--new {
79-
color: var(--vscode-gitDecoration-untrackedResourceForeground);
79+
color: var(--cwc-text-color-green);
8080
}
8181

8282
&--deleted {
8383
text-decoration: line-through;
84-
color: var(--vscode-gitDecoration-deletedResourceForeground);
84+
color: var(--cwc-text-color-red);
8585
}
8686
}
8787
}
@@ -102,11 +102,11 @@
102102
gap: 3px;
103103

104104
&__added {
105-
color: var(--vscode-gitDecoration-addedResourceForeground);
105+
color: var(--cwc-text-color-green);
106106
}
107107

108108
&__removed {
109-
color: var(--vscode-gitDecoration-deletedResourceForeground);
109+
color: var(--cwc-text-color-red);
110110
}
111111
}
112112
}
@@ -121,38 +121,38 @@
121121
overflow: hidden;
122122

123123
&--error {
124-
color: var(--vscode-gitDecoration-deletedResourceForeground);
125-
background-color: var(--cwc-bg-error);
124+
color: var(--cwc-text-color-red);
125+
background-color: var(--cwc-bg-red);
126126

127127
.message__actions__item:hover {
128-
background-color: var(--cwc-bg-error);
128+
background-color: var(--cwc-bg-red);
129129
}
130130
}
131131

132132
&--warning {
133-
color: var(--vscode-gitDecoration-modifiedResourceForeground);
134-
background-color: var(--cwc-bg-warning);
133+
color: var(--cwc-text-color-orange);
134+
background-color: var(--cwc-bg-orange);
135135

136136
.message__actions__item:hover {
137-
background-color: var(--cwc-bg-warning);
137+
background-color: var(--cwc-bg-orange);
138138
}
139139
}
140140

141141
&--success {
142-
color: var(--vscode-gitDecoration-addedResourceForeground);
143-
background-color: var(--cwc-bg-success);
142+
color: var(--cwc-text-color-green);
143+
background-color: var(--cwc-bg-green);
144144

145145
.message__actions__item:hover {
146-
background-color: var(--cwc-bg-success);
146+
background-color: var(--cwc-bg-green);
147147
}
148148
}
149149

150150
&--loading {
151151
color: var(--cwc-text-color);
152-
background-color: var(--cwc-bg-secondary);
152+
background-color: var(--cwc-bg-tertiary);
153153

154154
.message__actions__item:hover {
155-
background-color: var(--cwc-bg-secondary);
155+
background-color: var(--cwc-bg-tertiary);
156156
}
157157
}
158158

0 commit comments

Comments
 (0)