Skip to content

Commit fa0054e

Browse files
robertpiosikrobertpiosik
committed
Refactor UI components for consistency and remove the redundant "Open Changes" button from the response preview file list
1 parent 465e5c1 commit fa0054e

9 files changed

Lines changed: 69 additions & 96 deletions

File tree

‎packages/ui/src/components/editor/common/Dropdown/Dropdown.module.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,22 @@
1515
width: 100%;
1616

1717
&:hover {
18-
background: var(--vscode-list-hoverBackground);
18+
border-color: var(--cwc-border-color-hover);
1919
}
2020

21-
&[data-is-open='true'] {
21+
&--open {
2222
border-color: var(--vscode-focusBorder);
23-
outline: 1px solid var(--vscode-focusBorder);
24-
outline-offset: -1px;
23+
24+
&:hover {
25+
border-color: var(--vscode-focusBorder);
26+
}
2527
}
2628
}
2729

2830
.chevron {
29-
transition: transform 0.2s ease;
3031
color: var(--vscode-icon-foreground);
31-
}
3232

33-
.chevron_open {
34-
transform: rotate(180deg);
33+
&--open {
34+
transform: rotate(180deg);
35+
}
3536
}

‎packages/ui/src/components/editor/common/Dropdown/Dropdown.tsx‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,23 @@ export namespace Dropdown {
1313
options: Option<T>[]
1414
value: T
1515
onChange: (value: T) => void
16-
className?: string
1716
}
1817
}
1918

20-
export const Dropdown = <T extends string>({
21-
options,
22-
value,
23-
onChange,
24-
className
25-
}: Dropdown.Props<T>) => {
19+
export const Dropdown = <T extends string>(props: Dropdown.Props<T>) => {
2620
const [is_open, set_is_open] = useState(false)
2721
const dropdown_ref = useRef<HTMLDivElement>(null)
2822
const button_ref = useRef<HTMLButtonElement>(null)
2923
const [width, set_width] = useState<number>()
3024

3125
const longest_label = useMemo(
3226
() =>
33-
options.reduce(
27+
props.options.reduce(
3428
(longest, option) =>
3529
option.label.length > longest.length ? option.label : longest,
3630
''
3731
),
38-
[options]
32+
[props.options]
3933
)
4034

4135
useLayoutEffect(() => {
@@ -51,7 +45,7 @@ export const Dropdown = <T extends string>({
5145
}
5246
}, [longest_label])
5347

54-
const selected_option = options.find((opt) => opt.value === value)
48+
const selected_option = props.options.find((opt) => opt.value == props.value)
5549

5650
const handle_click_outside = (event: MouseEvent) => {
5751
if (
@@ -69,36 +63,30 @@ export const Dropdown = <T extends string>({
6963
}
7064
}, [])
7165

72-
const menu_items: DropdownMenu.Item[] = options.map((option) => ({
66+
const menu_items: DropdownMenu.Item[] = props.options.map((option) => ({
7367
label: option.label,
74-
is_selected: option.value === value,
68+
is_selected: option.value == props.value,
7569
on_click: () => {
76-
onChange(option.value)
70+
props.onChange(option.value)
7771
set_is_open(false)
7872
}
7973
}))
8074

8175
const style = width ? { width: `${width}px` } : undefined
8276

8377
return (
84-
<div
85-
className={cn(styles.dropdown, className)}
86-
ref={dropdown_ref}
87-
style={style}
88-
>
78+
<div className={styles.dropdown} ref={dropdown_ref} style={style}>
8979
<button
9080
ref={button_ref}
91-
className={styles.button}
81+
className={cn(styles.button, { [styles['button--open']]: is_open })}
9282
onClick={() => set_is_open(!is_open)}
93-
data-is-open={is_open}
9483
>
9584
<span>{selected_option?.label ?? 'Select...'}</span>
9685
<span
97-
className={cn(
98-
'codicon codicon-chevron-down',
86+
className={cn('codicon codicon-chevron-down', [
9987
styles.chevron,
100-
is_open && styles.chevron_open
101-
)}
88+
{ [styles['chevron--open']]: is_open }
89+
])}
10290
/>
10391
</button>
10492
{is_open && <DropdownMenu items={menu_items} />}

‎packages/ui/src/components/editor/common/Input/Input.module.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
width: 100%;
88
outline: none;
99

10+
&:hover {
11+
border-color: var(--cwc-border-color-hover);
12+
}
13+
1014
&:focus {
11-
outline: 1px solid var(--vscode-focusBorder);
12-
outline-offset: -1px;
15+
border-color: var(--vscode-focusBorder);
1316
}
1417
}

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

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,12 @@
3939
&--small {
4040
font-size: 13px;
4141
}
42-
43-
// &::after {
44-
// position: absolute;
45-
// content: '';
46-
// width: 100%;
47-
// height: 4px;
48-
// bottom: 0;
49-
// left: 0;
50-
// background: var(--vscode-sideBar-background);
51-
// }
5242
}
5343

5444
.list {
55-
display: block;
45+
display: flex;
46+
flex-direction: column;
47+
gap: var(--padding-4px);
5648

5749
> div:first-child {
5850
margin-top: 0;
@@ -67,10 +59,15 @@
6759
align-items: center;
6860
justify-content: space-between;
6961
gap: var(--padding-8px);
70-
padding: 0 var(--padding-12px);
71-
height: var(--list-item-height);
62+
border: 1px solid var(--cwc-border-color-dimmed);
63+
padding: 0 var(--padding-8px);
64+
margin: 0 var(--padding-12px);
65+
height: 34px;
66+
border-radius: 8px;
67+
7268
&:hover {
7369
background-color: var(--vscode-list-hoverBackground);
70+
border-color: var(--cwc-border-color);
7471

7572
.list__file__actions {
7673
display: flex;

‎packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -203,18 +203,6 @@ export const ResponsePreview: FC<Props> = (props) => {
203203
}}
204204
/>
205205
)}
206-
<IconButton
207-
codicon_icon="diff-single"
208-
title="Open Changes"
209-
on_click={(e) => {
210-
e.stopPropagation()
211-
set_last_clicked_file_index(index)
212-
props.on_focus_file({
213-
file_path: file.file_path,
214-
workspace_name: file.workspace_name
215-
})
216-
}}
217-
/>
218206
<IconButton
219207
codicon_icon="go-to-file"
220208
title="Go To File"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
max-height: 50px;
2828
overflow: hidden;
2929
position: relative;
30-
color: var(--vscode-descriptionForeground);
3130

3231
&:hover {
3332
color: inherit;

‎packages/vscode/src/commands/checkpoints-command/checkpoints-command.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,14 +114,14 @@ export const checkpoints_command = (
114114
quick_pick.items = [
115115
{
116116
id: 'add-new',
117-
label: '$(add) New checkpoint',
117+
label: '$(add) New checkpoint...',
118118
alwaysShow: true
119119
},
120120
...(visible_checkpoints.length > 0
121121
? [
122122
{
123123
id: 'clear-all',
124-
label: '$(trash) Clear all checkpoints',
124+
label: '$(trash) Clear all checkpoints...',
125125
alwaysShow: true
126126
}
127127
]

‎packages/vscode/src/commands/save-context-command.ts‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ import {
99
import { SavedContext } from '@/types/context'
1010
import { dictionary } from '@shared/constants/dictionary'
1111

12+
const PROMPT_ENTER_CONTEXT_NAME = 'Enter a name for this context'
13+
const PLACEHOLDER_CONTEXT_NAME = 'e.g., Backend API Context'
14+
const VALIDATION_CONTEXT_NAME_EMPTY = 'Context name cannot be empty.'
15+
const LABEL_BACK = '$(arrow-left) Back'
16+
const LABEL_NEW_SAVED_CONTEXT = '$(add) New saved context...'
17+
const PLACEHOLDER_SELECT_OR_CREATE_CONTEXT =
18+
'Select existing context to overwrite or create a new one'
19+
1220
function condense_paths(
1321
paths: string[],
1422
workspace_root: string,
@@ -311,7 +319,6 @@ export function save_context_command(
311319
return a.localeCompare(b)
312320
})
313321

314-
const BACK_LABEL = '$(arrow-left) Back'
315322
let show_storage_selection = true
316323
while (show_storage_selection) {
317324
show_storage_selection = false
@@ -388,23 +395,19 @@ export function save_context_command(
388395

389396
if (existing_context_names.length == 0) {
390397
context_name = await vscode.window.showInputBox({
391-
prompt: 'Enter a name for this context',
392-
placeHolder: 'e.g., Backend API Context',
398+
prompt: PROMPT_ENTER_CONTEXT_NAME,
399+
placeHolder: PLACEHOLDER_CONTEXT_NAME,
393400
validateInput: (value) =>
394-
value.trim().length > 0
395-
? null
396-
: 'Context name cannot be empty.'
401+
value.trim().length > 0 ? null : VALIDATION_CONTEXT_NAME_EMPTY
397402
})
398403

399404
if (!context_name) {
400405
return
401406
}
402407
} else {
403408
const quick_pick_items = [
404-
{ label: BACK_LABEL },
405-
{
406-
label: '$(add) Create new...'
407-
},
409+
{ label: LABEL_BACK },
410+
{ label: LABEL_NEW_SAVED_CONTEXT },
408411
{ label: '', kind: vscode.QuickPickItemKind.Separator },
409412
...existing_context_names.map((name) => {
410413
const context_info = all_contexts_map.get(name)!
@@ -436,28 +439,27 @@ export function save_context_command(
436439
const selected_item = await vscode.window.showQuickPick(
437440
quick_pick_items,
438441
{
439-
placeHolder:
440-
'Select existing context to overwrite or create a new one'
442+
placeHolder: PLACEHOLDER_SELECT_OR_CREATE_CONTEXT
441443
}
442444
)
443445

444446
if (!selected_item) {
445447
return
446448
}
447449

448-
if (selected_item.label === BACK_LABEL) {
450+
if (selected_item.label === LABEL_BACK) {
449451
show_storage_selection = true
450452
continue
451453
}
452454

453-
if (selected_item.label == '$(add) Create new...') {
455+
if (selected_item.label == LABEL_NEW_SAVED_CONTEXT) {
454456
context_name = await vscode.window.showInputBox({
455-
prompt: 'Enter a name for this context',
456-
placeHolder: 'e.g., Backend API Context',
457+
prompt: PROMPT_ENTER_CONTEXT_NAME,
458+
placeHolder: PLACEHOLDER_CONTEXT_NAME,
457459
validateInput: (value) =>
458460
value.trim().length > 0
459461
? null
460-
: 'Context name cannot be empty.'
462+
: VALIDATION_CONTEXT_NAME_EMPTY
461463
})
462464

463465
if (!context_name) {
@@ -579,10 +581,10 @@ export function save_context_command(
579581

580582
if (saved_contexts.length == 0) {
581583
context_name = await vscode.window.showInputBox({
582-
prompt: 'Enter a name for this context',
583-
placeHolder: 'e.g., Backend API Context',
584+
prompt: PROMPT_ENTER_CONTEXT_NAME,
585+
placeHolder: PLACEHOLDER_CONTEXT_NAME,
584586
validateInput: (value) =>
585-
value.trim().length > 0 ? null : 'Context name cannot be empty.'
587+
value.trim().length > 0 ? null : VALIDATION_CONTEXT_NAME_EMPTY
586588
})
587589

588590
if (!context_name) {
@@ -594,10 +596,8 @@ export function save_context_command(
594596
)
595597

596598
const quick_pick_items = [
597-
{ label: BACK_LABEL },
598-
{
599-
label: '$(add) Create new...'
600-
},
599+
{ label: LABEL_BACK },
600+
{ label: LABEL_NEW_SAVED_CONTEXT },
601601
{ label: '', kind: vscode.QuickPickItemKind.Separator },
602602
...saved_contexts.map((context) => ({
603603
label: context.name,
@@ -610,28 +610,25 @@ export function save_context_command(
610610
const selected_item = await vscode.window.showQuickPick(
611611
quick_pick_items,
612612
{
613-
placeHolder:
614-
'Select existing context to overwrite or create a new one'
613+
placeHolder: PLACEHOLDER_SELECT_OR_CREATE_CONTEXT
615614
}
616615
)
617616

618617
if (!selected_item) {
619618
return
620619
}
621620

622-
if (selected_item.label === BACK_LABEL) {
621+
if (selected_item.label === LABEL_BACK) {
623622
show_storage_selection = true
624623
continue
625624
}
626625

627-
if (selected_item.label == '$(add) Create new...') {
626+
if (selected_item.label == LABEL_NEW_SAVED_CONTEXT) {
628627
context_name = await vscode.window.showInputBox({
629-
prompt: 'Enter a name for this context',
630-
placeHolder: 'e.g., Backend API Context',
628+
prompt: PROMPT_ENTER_CONTEXT_NAME,
629+
placeHolder: PLACEHOLDER_CONTEXT_NAME,
631630
validateInput: (value) =>
632-
value.trim().length > 0
633-
? null
634-
: 'Context name cannot be empty.'
631+
value.trim().length > 0 ? null : VALIDATION_CONTEXT_NAME_EMPTY
635632
})
636633

637634
if (!context_name) {

‎packages/vscode/src/views/panel/backend/message-handlers/handle-show-prompt-template-quick-pick.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type PromptTemplate = {
88
template: string
99
}
1010

11-
const ADD_NEW_TEMPLATE_LABEL = '$(add) New prompt template'
11+
const ADD_NEW_TEMPLATE_LABEL = '$(add) New prompt template...'
1212

1313
export const handle_show_prompt_template_quick_pick = async (
1414
panel_provider: PanelProvider

0 commit comments

Comments
 (0)