Skip to content

Commit 89cedaa

Browse files
robertpiosikrobertpiosik
committed
Standardize drag handle styling and opacity across components and add timeline collapse state persistence
1 parent 98e85ca commit 89cedaa

14 files changed

Lines changed: 80 additions & 93 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@
4242
text-overflow: ellipsis;
4343
height: 100%;
4444

45-
&__drag_handle {
45+
&__drag-handle {
4646
display: flex;
4747
align-items: center;
4848
height: 100%;
4949
cursor: grab;
50-
opacity: 0.5;
50+
opacity: var(--drag-handle-opacity);
5151

5252
&:active {
5353
cursor: grabbing;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,12 @@
7272
white-space: nowrap;
7373
position: relative;
7474

75-
&__drag_handle {
75+
&__drag-handle {
7676
display: flex;
7777
align-items: center;
7878
height: 100%;
7979
cursor: grab;
80-
opacity: 0.5;
80+
opacity: var(--drag-handle-opacity);
8181

8282
&:active {
8383
cursor: grabbing;

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

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,24 @@
1818
display: flex;
1919
flex-direction: column;
2020
align-items: center;
21-
gap: 8px;
21+
gap: 4px;
2222
width: 20px;
2323
flex-shrink: 0;
2424
padding-top: 2px;
2525
}
2626

27-
&__drag_handle {
27+
&__drag-handle {
2828
display: flex;
2929
align-items: center;
3030
justify-content: center;
3131
cursor: grab;
32-
opacity: 0.5;
33-
width: 20px;
34-
height: 20px;
32+
opacity: var(--drag-handle-opacity);
33+
width: 15px;
34+
height: 15px;
3535

3636
&:active {
3737
cursor: grabbing;
3838
}
39-
40-
&:hover {
41-
opacity: 1;
42-
}
4339
}
4440

4541
&__right {
@@ -59,14 +55,12 @@
5955
margin-bottom: 2px;
6056
}
6157

62-
&__star {
58+
&__edit {
6359
cursor: pointer;
60+
6461
&:hover {
6562
color: var(--vscode-icon-foreground);
6663
}
67-
&--active {
68-
color: var(--vscode-button-background);
69-
}
7064
}
7165

7266
&__text {

‎packages/ui/src/components/editor/panel/Tasks/Tasks.stories.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,18 @@ const initialTasks: Task[] = [
1010
id: '1',
1111
text: 'Refactor the authentication middleware',
1212
is_checked: false,
13-
is_starred: true,
1413
created_at: Date.now() - 1000 * 60 * 5 // 5 mins ago
1514
},
1615
{
1716
id: '2',
1817
text: 'Fix bug in user profile update',
1918
is_checked: true,
20-
is_starred: false,
2119
created_at: Date.now() - 1000 * 60 * 60 * 2 // 2 hours ago
2220
},
2321
{
2422
id: '3',
2523
text: '',
2624
is_checked: false,
27-
is_starred: false,
2825
created_at: Date.now() - 1000 * 60 * 60 * 24 // 1 day ago
2926
}
3027
]
@@ -74,7 +71,7 @@ export const NoReorder = () => {
7471
padding: '20px'
7572
}}
7673
>
77-
<Tasks tasks={tasks} on_change={handle_change} />
74+
<Tasks tasks={tasks} on_change={handle_change} on_reorder={() => {}} />
7875
</div>
7976
)
8077
}

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

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,21 @@ export type Task = {
1414
id: string
1515
text: string
1616
is_checked: boolean
17-
is_starred: boolean
1817
created_at: number
1918
}
2019

2120
type Props = {
2221
tasks: Task[]
23-
on_reorder?: (tasks: Task[]) => void
24-
on_change?: (task: Task) => void
22+
on_reorder: (tasks: Task[]) => void
23+
on_change: (task: Task) => void
2524
}
2625

2726
export const Tasks: React.FC<Props> = ({ tasks, on_reorder, on_change }) => {
2827
use_periodic_re_render(60 * 1000)
2928
const [editing_id, set_editing_id] = useState<string | null>(null)
3029

3130
const handle_check_change = (task: Task, checked: boolean) => {
32-
on_change?.({ ...task, is_checked: checked })
33-
}
34-
35-
const handle_star_toggle = (task: Task) => {
36-
on_change?.({ ...task, is_starred: !task.is_starred })
31+
on_change({ ...task, is_checked: checked })
3732
}
3833

3934
const render_item = (task: Task) => {
@@ -46,7 +41,7 @@ export const Tasks: React.FC<Props> = ({ tasks, on_reorder, on_change }) => {
4641
checked={task.is_checked}
4742
on_change={(checked) => handle_check_change(task, checked)}
4843
/>
49-
<div className={styles.item__drag_handle}>
44+
<div className={styles['item__drag-handle']}>
5045
<span className="codicon codicon-gripper" />
5146
</div>
5247
</div>
@@ -56,20 +51,18 @@ export const Tasks: React.FC<Props> = ({ tasks, on_reorder, on_change }) => {
5651
<span
5752
className={cn(
5853
'codicon',
59-
task.is_starred ? 'codicon-star-full' : 'codicon-star-empty',
60-
styles.item__star,
61-
{
62-
[styles['item__star--active']]: task.is_starred
63-
}
54+
is_editing ? 'codicon-check' : 'codicon-edit',
55+
styles.item__edit
6456
)}
65-
onClick={() => handle_star_toggle(task)}
66-
title={task.is_starred ? 'Unstar' : 'Star'}
57+
onMouseDown={(e) => e.preventDefault()}
58+
onClick={() => set_editing_id(is_editing ? null : task.id)}
59+
title={is_editing ? 'Save task' : 'Edit task'}
6760
/>
6861
</div>
6962
{is_editing ? (
7063
<Textarea
7164
value={task.text}
72-
on_change={(value) => on_change?.({ ...task, text: value })}
65+
on_change={(value) => on_change({ ...task, text: value })}
7366
autofocus
7467
on_blur={() => set_editing_id(null)}
7568
on_key_down={(e) => {
@@ -85,7 +78,7 @@ export const Tasks: React.FC<Props> = ({ tasks, on_reorder, on_change }) => {
8578
[styles['item__text--checked']]: task.is_checked,
8679
[styles['item__text--placeholder']]: !task.text
8780
})}
88-
onDoubleClick={() => set_editing_id(task.id)}
81+
onClick={() => set_editing_id(task.id)}
8982
>
9083
{task.text || 'Double click to add text...'}
9184
</div>
@@ -95,19 +88,15 @@ export const Tasks: React.FC<Props> = ({ tasks, on_reorder, on_change }) => {
9588
)
9689
}
9790

98-
if (on_reorder) {
99-
return (
100-
<ReactSortable
101-
list={tasks}
102-
setList={on_reorder}
103-
handle={`.${styles.item__drag_handle}`}
104-
className={styles.tasks}
105-
animation={150}
106-
>
107-
{tasks.map(render_item)}
108-
</ReactSortable>
109-
)
110-
}
111-
112-
return <div className={styles.tasks}>{tasks.map(render_item)}</div>
91+
return (
92+
<ReactSortable
93+
list={tasks}
94+
setList={on_reorder}
95+
handle={`.${styles['item__drag-handle']}`}
96+
className={styles.tasks}
97+
animation={150}
98+
>
99+
{tasks.map(render_item)}
100+
</ReactSortable>
101+
)
113102
}

‎packages/ui/src/styles/foundation/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
--disabled-opacity: 0.5;
66
--dimmed-opacity: 0.7;
7+
--drag-handle-opacity: 0.5;
78

89
--transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
910
--transition-duration-150: 0.15s;

‎packages/vscode/src/constants/state-keys.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export const INSTRUCTIONS_NO_CONTEXT_STATE_KEY = 'instructions-no-context'
4545
export const INSTRUCTIONS_CODE_COMPLETIONS_STATE_KEY =
4646
'instructions-code-completions'
4747

48+
export const IS_TIMELINE_COLLAPSED_STATE_KEY = 'is-timeline-collapsed'
49+
4850
export const HISTORY_ASK_STATE_KEY = 'history-ask'
4951
export const HISTORY_EDIT_STATE_KEY = 'history-edit'
5052
export const HISTORY_CODE_COMPLETIONS_STATE_KEY = 'history-code-completions'

‎packages/vscode/src/views/panel/backend/message-handlers/handle-get-collapsed-states.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
get_configurations_collapsed_state_key,
3-
get_presets_collapsed_state_key
3+
get_presets_collapsed_state_key,
4+
IS_TIMELINE_COLLAPSED_STATE_KEY
45
} from '@/constants/state-keys'
56
import { PanelProvider } from '@/views/panel/backend/panel-provider'
67
import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
@@ -15,6 +16,7 @@ export const handle_get_collapsed_states = (
1516
'no-context'
1617
]
1718
const API_MODES: ApiPromptType[] = ['edit-context', 'code-completions']
19+
1820
panel_provider.send_message({
1921
command: 'COLLAPSED_STATES',
2022
presets_collapsed_by_web_mode: Object.fromEntries(
@@ -34,6 +36,10 @@ export const handle_get_collapsed_states = (
3436
false
3537
)
3638
])
39+
),
40+
is_timeline_collapsed: panel_provider.context.globalState.get<boolean>(
41+
IS_TIMELINE_COLLAPSED_STATE_KEY,
42+
false
3743
)
3844
})
3945
}

‎packages/vscode/src/views/panel/backend/message-handlers/handle-save-component-collapsed-state.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
get_configurations_collapsed_state_key,
3-
get_presets_collapsed_state_key
3+
get_presets_collapsed_state_key,
4+
IS_TIMELINE_COLLAPSED_STATE_KEY
45
} from '@/constants/state-keys'
56
import { PanelProvider } from '@/views/panel/backend/panel-provider'
67
import { SaveComponentCollapsedStateMessage } from '@/views/panel/types/messages'
@@ -20,5 +21,10 @@ export const handle_save_component_collapsed_state = async (
2021
get_configurations_collapsed_state_key(message.mode as ApiPromptType),
2122
message.is_collapsed
2223
)
24+
} else if (message.component == 'timeline') {
25+
await panel_provider.context.globalState.update(
26+
IS_TIMELINE_COLLAPSED_STATE_KEY,
27+
message.is_collapsed
28+
)
2329
}
2430
}

‎packages/vscode/src/views/panel/backend/panel-provider.ts‎

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,8 @@ import {
8181
INSTRUCTIONS_CODE_COMPLETIONS_STATE_KEY,
8282
INSTRUCTIONS_EDIT_CONTEXT_STATE_KEY,
8383
INSTRUCTIONS_NO_CONTEXT_STATE_KEY,
84-
get_configurations_collapsed_state_key,
8584
LAST_SELECTED_CODE_COMPLETION_CONFIG_ID_STATE_KEY,
8685
LAST_SELECTED_EDIT_CONTEXT_CONFIG_ID_STATE_KEY,
87-
get_presets_collapsed_state_key,
8886
WEB_MODE_STATE_KEY,
8987
get_recently_used_presets_or_groups_key
9088
} from '@/constants/state-keys'
@@ -209,34 +207,6 @@ export class PanelProvider implements vscode.WebviewViewProvider {
209207

210208
vscode.window.onDidChangeWindowState(async (e) => {
211209
if (e.focused) {
212-
const WEB_MODES: WebPromptType[] = [
213-
'ask',
214-
'edit-context',
215-
'code-completions',
216-
'no-context'
217-
]
218-
const API_MODES: ApiPromptType[] = ['edit-context', 'code-completions']
219-
this.send_message({
220-
command: 'COLLAPSED_STATES',
221-
presets_collapsed_by_web_mode: Object.fromEntries(
222-
WEB_MODES.map((mode) => [
223-
mode,
224-
this.context.globalState.get<boolean>(
225-
get_presets_collapsed_state_key(mode),
226-
false
227-
)
228-
])
229-
),
230-
configurations_collapsed_by_api_mode: Object.fromEntries(
231-
API_MODES.map((mode) => [
232-
mode,
233-
this.context.globalState.get<boolean>(
234-
get_configurations_collapsed_state_key(mode),
235-
false
236-
)
237-
])
238-
)
239-
})
240210
this.send_message({
241211
command: 'RESET_APPLY_BUTTON_TEMPORARY_DISABLED_STATE'
242212
})
@@ -286,6 +256,10 @@ export class PanelProvider implements vscode.WebviewViewProvider {
286256
) {
287257
handle_get_api_tool_configurations(this)
288258
}
259+
260+
if (event.affectsConfiguration('codeWebChat.isTimelineCollapsed')) {
261+
handle_get_collapsed_states(this)
262+
}
289263
}
290264
)
291265

0 commit comments

Comments
 (0)