Skip to content

Commit 4191cc8

Browse files
robertpiosikrobertpiosik
committed
Add sponsors section and GitHub Sponsors link to donations panel while improving API manager modal styling
1 parent fd5f8dc commit 4191cc8

4 files changed

Lines changed: 108 additions & 99 deletions

File tree

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@
99
padding: 0 12px;
1010
}
1111

12+
.sponsors {
13+
padding: 0 12px;
14+
15+
&__content > p {
16+
margin: 0;
17+
}
18+
}
19+
1220
.links {
1321
display: flex;
1422
flex-direction: column;

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

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,10 @@ export type DonationsProps = {
8484

8585
export const Donations: React.FC<DonationsProps> = (props) => {
8686
const observer_target = useRef<HTMLDivElement>(null)
87-
const [is_wallets_collapsed, set_wallets_collapsed] = useState(true)
87+
const [is_about_collapsed, set_about_collapsed] = useState(false)
88+
const [is_sponsors_collapsed, set_sponsors_collapsed] = useState(true)
8889
const [is_links_collapsed, set_links_collapsed] = useState(true)
90+
const [is_wallets_collapsed, set_wallets_collapsed] = useState(true)
8991

9092
useEffect(() => {
9193
if (!observer_target.current) return
@@ -106,8 +108,15 @@ export const Donations: React.FC<DonationsProps> = (props) => {
106108
}, [props.on_fetch_next_page])
107109

108110
const links = [
109-
{ label: 'Buy Me A Coffee', url: 'https://buymeacoffee.com/robertpiosik' },
110-
{ label: 'PayPal', url: 'https://www.paypal.com/paypalme/robertpiosik' }
111+
{
112+
label: 'GitHub Sponsors ↗',
113+
url: 'https://github.com/sponsors/robertpiosik'
114+
},
115+
{
116+
label: 'Buy Me A Coffee ↗',
117+
url: 'https://buymeacoffee.com/robertpiosik'
118+
},
119+
{ label: 'PayPal ↗', url: 'https://www.paypal.com/paypalme/robertpiosik' }
111120
]
112121

113122
const wallets = [
@@ -135,11 +144,33 @@ export const Donations: React.FC<DonationsProps> = (props) => {
135144
<Scrollable>
136145
<div className={styles.container}>
137146
<div className={styles.about}>
138-
Hi there! By donating to Code Web Chat, you’re supporting my mission
139-
to independently build the world’s best, free and open-source AI
140-
coding tools.
141-
<br />
142-
Thank you for your support!
147+
<Fieldset
148+
is_collapsed={is_about_collapsed}
149+
label="About"
150+
on_toggle_collapsed={() =>
151+
set_about_collapsed(!is_about_collapsed)
152+
}
153+
>
154+
Hi there! Donating is a great way to show your support for the
155+
project. Thank you.
156+
</Fieldset>
157+
</div>
158+
<div className={styles.sponsors}>
159+
<Fieldset
160+
is_collapsed={is_sponsors_collapsed}
161+
label="Sponsors"
162+
on_toggle_collapsed={() =>
163+
set_sponsors_collapsed(!is_sponsors_collapsed)
164+
}
165+
>
166+
<div className={styles.sponsors__content}>
167+
<p>
168+
Please{' '}
169+
<a href="https://github.com/robertpiosik">contact me</a> if
170+
you are interested in sponsorship.
171+
</p>
172+
</div>
173+
</Fieldset>
143174
</div>
144175
<div className={styles.links}>
145176
<Fieldset

‎packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.module.scss‎

Lines changed: 20 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111
pointer-events: none;
1212
}
1313

14-
.icon {
15-
font-size: 30px !important;
16-
text-align: center;
17-
padding-top: 16px;
14+
.container {
1815
display: flex;
19-
justify-content: center;
20-
21-
&--success {
22-
color: var(--vscode-testing-iconPassed);
23-
}
24-
25-
&--warning {
26-
color: var(--vscode-list-warningForeground);
27-
}
16+
flex-direction: column;
17+
position: relative;
18+
pointer-events: all;
19+
z-index: 1;
20+
border-radius: 12px;
21+
color: var(--vscode-quickInput-foreground);
22+
background-color: var(--vscode-quickInput-background);
23+
border: 1px solid var(--vscode-focusBorder);
24+
box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
25+
width: 100%;
26+
max-width: 260px;
27+
overflow: hidden;
2828
}
2929

3030
.title {
@@ -46,41 +46,10 @@
4646
}
4747
}
4848

49-
.content {
50-
padding: 0px 10px 4px 10px;
51-
width: 100%;
52-
}
53-
54-
.footer {
55-
display: flex;
56-
gap: 8px;
57-
padding: 12px;
58-
border-top: 1px solid var(--vscode-widget-border);
59-
60-
> button {
61-
flex: 1;
62-
}
63-
}
64-
65-
.container {
66-
display: flex;
67-
flex-direction: column;
68-
position: relative;
69-
pointer-events: all;
70-
z-index: 1;
71-
border-radius: 12px;
72-
color: var(--vscode-quickInput-foreground);
73-
background-color: var(--vscode-quickInput-background);
74-
border: 1px solid var(--vscode-widget-border);
75-
box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
76-
width: 100%;
77-
max-width: 260px;
78-
}
79-
8049
.requests-container {
8150
display: flex;
8251
flex-direction: column;
83-
gap: 0;
52+
padding-bottom: 4px;
8453
}
8554

8655
.item {
@@ -89,6 +58,8 @@
8958
width: 100%;
9059

9160
&:hover {
61+
background-color: var(--vscode-list-hoverBackground);
62+
9263
& .item__abort {
9364
visibility: visible;
9465
}
@@ -99,7 +70,8 @@
9970
align-items: center;
10071
justify-content: space-between;
10172
gap: 4px;
102-
padding: 3px 0;
73+
padding: 0 10px;
74+
height: 22px;
10375
width: 100%;
10476
}
10577

@@ -122,11 +94,11 @@
12294
display: flex;
12395
height: 100%;
12496
align-items: center;
125-
right: 0;
97+
right: 4px;
12698
font-size: 12px;
12799
background: linear-gradient(
128100
to left,
129-
var(--vscode-sideBar-background) 56%,
101+
var(--vscode-list-hoverBackground) 56%,
130102
transparent
131103
);
132104
padding-left: 30px;

‎packages/ui/src/components/editor/panel/modals/ApiManagerModal/ApiManagerModal.tsx‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from 'react'
2-
import styles from './ApiManagerModal.module.scss'
3-
import { Scrollable } from '../../Scrollable'
42
import cn from 'classnames'
3+
import { Scrollable } from '../../Scrollable'
4+
import styles from './ApiManagerModal.module.scss'
55

66
type Props = {
77
progress_items: {
@@ -70,51 +70,49 @@ export const ApiManagerModal: React.FC<Props> = (props) => {
7070
API Manager
7171
</div>
7272
<Scrollable max_height="20vh" on_scrolled_change={set_is_scrolled}>
73-
<div className={styles.content}>
74-
<div className={styles['requests-container']}>
75-
{props.progress_items.map((item) => {
76-
const item_start_time = start_times[item.id]
77-
const current_start_time = item_start_time || Date.now()
78-
const elapsed_ms = now - current_start_time
73+
<div className={styles['requests-container']}>
74+
{props.progress_items.map((item) => {
75+
const item_start_time = start_times[item.id]
76+
const current_start_time = item_start_time || Date.now()
77+
const elapsed_ms = now - current_start_time
7978

80-
if (item.delay_visibility && elapsed_ms < 1000) {
81-
return null
82-
}
79+
if (item.delay_visibility && elapsed_ms < 1000) {
80+
return null
81+
}
8382

84-
return (
85-
<div key={item.id} className={styles.item}>
86-
<div className={styles.item__content}>
87-
<div className={styles.item__title}>{item.title}</div>
88-
<div className={styles.item__right}>
89-
{item.tokens_per_second !== undefined && (
90-
<div className={styles['tokens-per-second']}>
91-
{format_tokens(item.tokens_per_second)} tokens/s
92-
</div>
93-
)}
94-
{item.total_tokens !== undefined && (
95-
<div className={styles['tokens-per-second']}>
96-
({format_tokens(item.total_tokens)})
97-
</div>
98-
)}
99-
{item.show_elapsed_time !== false && (
100-
<div className={styles['elapsed-time']}>
101-
{(elapsed_ms / 1000).toFixed(1)}s
102-
</div>
103-
)}
104-
</div>
105-
</div>
106-
<div className={styles.item__abort}>
107-
<button
108-
className={styles.item__abort__button}
109-
onClick={() => props.on_cancel(item.id)}
110-
>
111-
Abort
112-
</button>
83+
return (
84+
<div key={item.id} className={styles.item}>
85+
<div className={styles.item__content}>
86+
<div className={styles.item__title}>{item.title}</div>
87+
<div className={styles.item__right}>
88+
{item.tokens_per_second !== undefined && (
89+
<div className={styles['tokens-per-second']}>
90+
{format_tokens(item.tokens_per_second)} tokens/s
91+
</div>
92+
)}
93+
{item.total_tokens !== undefined && (
94+
<div className={styles['tokens-per-second']}>
95+
({format_tokens(item.total_tokens)})
96+
</div>
97+
)}
98+
{item.show_elapsed_time !== false && (
99+
<div className={styles['elapsed-time']}>
100+
{(elapsed_ms / 1000).toFixed(1)}s
101+
</div>
102+
)}
113103
</div>
114104
</div>
115-
)
116-
})}
117-
</div>
105+
<div className={styles.item__abort}>
106+
<button
107+
className={styles.item__abort__button}
108+
onClick={() => props.on_cancel(item.id)}
109+
>
110+
Abort
111+
</button>
112+
</div>
113+
</div>
114+
)
115+
})}
118116
</div>
119117
</Scrollable>
120118
</div>

0 commit comments

Comments
 (0)