Skip to content

Commit bb6c446

Browse files
robertpiosikrobertpiosik
committed
Prefix shared UI component imports with Ui in panel and settings views
1 parent 137f2c2 commit bb6c446

9 files changed

Lines changed: 258 additions & 241 deletions

File tree

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import { useState, useRef, useEffect } from 'react'
22
import styles from './Home.module.scss'
3-
import { Scrollable } from '@ui/components/editor/panel/Scrollable'
4-
import { Timeline } from '@ui/components/editor/panel/Timeline'
5-
import { ModeButton } from '@ui/components/editor/panel/ModeButton'
3+
import { Scrollable as UiScrollable } from '@ui/components/editor/panel/Scrollable'
4+
import { Timeline as UiTimeline } from '@ui/components/editor/panel/Timeline'
5+
import { ModeButton as UiModeButton } from '@ui/components/editor/panel/ModeButton'
66
import cn from 'classnames'
77
import { post_message } from '../utils/post_message'
88
import { Checkpoint, FrontendMessage } from '@/views/panel/types/messages'
99
import { Responses as UiResponses } from '@ui/components/editor/panel/Responses'
1010
import { ResponseHistoryItem } from '@shared/types/response-history-item'
11-
import { Separator } from '@ui/components/editor/panel/Separator'
12-
import { ListHeader } from '@ui/components/editor/panel/ListHeader'
11+
import { Separator as UiSeparator } from '@ui/components/editor/panel/Separator'
12+
import { ListHeader as UiListHeader } from '@ui/components/editor/panel/ListHeader'
1313
import { Translation, use_translation } from '@/views/i18n/use-translation'
14-
import { IconButton } from '@ui/components/editor/common/IconButton'
15-
import { Tasks } from '@ui/components/editor/panel/Tasks'
14+
import { IconButton as UiIconButton } from '@ui/components/editor/common/IconButton'
15+
import { Tasks as UiTasks } from '@ui/components/editor/panel/Tasks'
1616
import { Task } from '@shared/types/task'
1717
import { use_tasks } from './hooks/use-tasks'
1818
import { use_timeline_scroll } from './hooks/use-timeline-scroll'
19-
import { SettingsButton } from '@ui/components/editor/panel/SettingsButton'
19+
import { SettingsButton as UiSettingsButton } from '@ui/components/editor/panel/SettingsButton'
2020

2121
type Props = {
2222
vscode: any
@@ -105,14 +105,14 @@ export const Home: React.FC<Props> = (props) => {
105105
{t('panel.header.home')}
106106
</span>
107107
</div>
108-
<SettingsButton
108+
<UiSettingsButton
109109
on_click={handle_settings_click}
110110
label={t('panel.header.settings')}
111111
show_warning_icon={!props.is_setup_complete}
112112
/>
113113
</div>
114114

115-
<Scrollable
115+
<UiScrollable
116116
on_scroll={(top) => {
117117
const responses_height = responses_ref.current?.clientHeight || 0
118118
const current_mode_height = mode_ref.current?.offsetHeight || 0
@@ -160,31 +160,31 @@ export const Home: React.FC<Props> = (props) => {
160160
})}
161161
ref={mode_ref}
162162
>
163-
<ModeButton
163+
<UiModeButton
164164
pre="Autofill"
165165
label="Chatbots"
166166
on_click={props.on_chatbots_click}
167167
is_compact={is_mode_sticky}
168168
/>
169-
<ModeButton
169+
<UiModeButton
170170
pre="Make"
171171
label="API calls"
172172
on_click={props.on_api_calls_click}
173173
is_compact={is_mode_sticky}
174174
/>
175175
</div>
176176

177-
<Separator height={8} />
177+
<UiSeparator height={8} />
178178

179-
<ListHeader
179+
<UiListHeader
180180
title={t('panel.home.tasks')}
181181
is_collapsed={props.are_tasks_collapsed}
182182
on_toggle_collapsed={() =>
183183
props.on_tasks_collapsed_change(!props.are_tasks_collapsed)
184184
}
185185
actions={
186186
Object.keys(props.tasks).length == 1 ? (
187-
<IconButton
187+
<UiIconButton
188188
codicon_icon="add"
189189
title={t('panel.home.tasks.add')}
190190
on_click={(e) => {
@@ -234,7 +234,7 @@ export const Home: React.FC<Props> = (props) => {
234234
</div>
235235
)}
236236
{tasks.length > 0 && (
237-
<Tasks
237+
<UiTasks
238238
tasks={tasks}
239239
on_reorder={(new_tasks) =>
240240
handle_reorder(workspace_root_folder, new_tasks)
@@ -268,7 +268,7 @@ export const Home: React.FC<Props> = (props) => {
268268
</div>
269269
))}
270270

271-
<ListHeader
271+
<UiListHeader
272272
ref={timeline_ref}
273273
title={t('panel.home.timeline')}
274274
is_collapsed={props.is_timeline_collapsed}
@@ -277,7 +277,7 @@ export const Home: React.FC<Props> = (props) => {
277277
}
278278
actions={
279279
<>
280-
<IconButton
280+
<UiIconButton
281281
codicon_icon="add"
282282
title={t('panel.home.timeline.new-checkpoint')}
283283
on_click={(e) => {
@@ -286,7 +286,7 @@ export const Home: React.FC<Props> = (props) => {
286286
}}
287287
/>
288288
{props.checkpoints.length > 0 && (
289-
<IconButton
289+
<UiIconButton
290290
codicon_icon="trash"
291291
title={t('panel.home.timeline.delete-all')}
292292
on_click={(e) => {
@@ -300,7 +300,7 @@ export const Home: React.FC<Props> = (props) => {
300300
/>
301301
{!props.is_timeline_collapsed &&
302302
(props.checkpoints.length > 0 ? (
303-
<Timeline
303+
<UiTimeline
304304
items={props.checkpoints.map((c) => ({
305305
id: c.timestamp,
306306
label: c.title,
@@ -350,7 +350,7 @@ export const Home: React.FC<Props> = (props) => {
350350
</div>
351351
</div>
352352
</div>
353-
</Scrollable>
353+
</UiScrollable>
354354

355355
{!is_timeline_reached && (
356356
<button

‎apps/editor/src/views/panel/frontend/Main/MainView/MainView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ResponseHistoryItem } from '@shared/types/response-history-item'
99
import { EditFormat } from '@shared/types/edit-format'
1010
import { MODE, Mode } from '@/views/panel/types/main-view-mode'
1111
import { ApiPromptType, WebPromptType } from '@shared/types/prompt-types'
12-
import { Scrollable } from '@ui/components/editor/panel/Scrollable'
12+
import { Scrollable as UiScrollable } from '@ui/components/editor/panel/Scrollable'
1313
import { BrowserExtensionMessage as UiBrowserExtensionMessage } from '@ui/components/editor/panel/BrowserExtensionMessage'
1414
import { ApiToolConfiguration } from '@/views/panel/types/messages'
1515
import { use_last_choice_button_title } from './hooks/use-last-choice-button-title'
@@ -205,7 +205,7 @@ export const MainView: React.FC<Props> = (props) => {
205205
are_keyboard_shortcuts_disabled={props.are_keyboard_shortcuts_disabled}
206206
is_setup_complete={props.is_setup_complete}
207207
/>
208-
<Scrollable scroll_to_top_key={props.scroll_reset_key}>
208+
<UiScrollable scroll_to_top_key={props.scroll_reset_key}>
209209
<UiSeparator height={4} />
210210

211211
{!props.is_connected && props.mode == MODE.WEB && (
@@ -404,7 +404,7 @@ export const MainView: React.FC<Props> = (props) => {
404404
/>
405405
</>
406406
)}
407-
</Scrollable>
407+
</UiScrollable>
408408
</>
409409
)
410410
}

‎apps/editor/src/views/panel/frontend/Panel.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { EditPresetFormFooter } from './components/edit-preset-form/EditPresetFo
2626
import { Donations as UiDonations } from '@ui/components/editor/panel/Donations/Donations'
2727
import { use_latest_donations } from './hooks/latest-donations'
2828
import { DonationsFooter } from './components/donations/DonationsFooter'
29-
import { IconButton } from '@ui/components/editor/common/IconButton'
29+
import { IconButton as UiIconButton } from '@ui/components/editor/common/IconButton'
3030
import { use_modal_manager } from './hooks/use-modal-manager'
3131
import { use_tasks } from './hooks/use-tasks'
3232
import { use_response_history } from './hooks/panel/use-response-history'
@@ -589,7 +589,10 @@ export const Panel = () => {
589589
}}
590590
header_slot={
591591
preview_url && (
592-
<IconButton codicon_icon="link-external" href={preview_url} />
592+
<UiIconButton
593+
codicon_icon="link-external"
594+
href={preview_url}
595+
/>
593596
)
594597
}
595598
footer_slot={

‎apps/editor/src/views/panel/frontend/components/Layout/Footer/Footer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect, useContext, useRef, useLayoutEffect } from 'react'
22
import cn from 'classnames'
3-
import { Icon } from '@ui/components/editor/common/Icon'
3+
import { Icon as UiIcon } from '@ui/components/editor/common/Icon'
44
import styles from './Footer.module.scss'
55
import { use_compacting } from '@shared/hooks'
66
import { LayoutContext } from '../../../contexts/LayoutContext'
@@ -76,7 +76,7 @@ export const Footer: React.FC<Props> = (props) => {
7676
}}
7777
title="Donate"
7878
>
79-
<Icon variant="BUY_ME_A_COFFEE_LOGO" />
79+
<UiIcon variant="BUY_ME_A_COFFEE_LOGO" />
8080
</a>
8181
<a
8282
className={cn(
@@ -86,7 +86,7 @@ export const Footer: React.FC<Props> = (props) => {
8686
href="https://www.reddit.com/r/CodeWebChat/"
8787
title="Reddit"
8888
>
89-
<Icon variant="REDDIT" />
89+
<UiIcon variant="REDDIT" />
9090
</a>
9191
<a
9292
className={cn(
@@ -96,7 +96,7 @@ export const Footer: React.FC<Props> = (props) => {
9696
href="https://discord.gg/KJySXsrSX5"
9797
title="Get involved"
9898
>
99-
<Icon variant="DISCORD" />
99+
<UiIcon variant="DISCORD" />
100100
</a>
101101
</div>
102102

0 commit comments

Comments
 (0)