Skip to content

Commit eb8d69e

Browse files
robertpiosikrobertpiosik
committed
Update donation UI to include crypto wallet addresses and improve layout and text clarity
1 parent a1ca827 commit eb8d69e

11 files changed

Lines changed: 140 additions & 93 deletions

File tree

‎.github/FUNDING.yml‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1 @@
11
github: robertpiosik
2-
patreon: # Replace with a single Patreon username
3-
open_collective: # Replace with a single Open Collective username
4-
ko_fi: # Replace with a single Ko-fi username
5-
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
6-
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
7-
liberapay: # Replace with a single Liberapay username
8-
issuehunt: # Replace with a single IssueHunt username
9-
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
10-
polar: # Replace with a single Polar username
11-
buy_me_a_coffee: robertpiosik
12-
thanks_dev: # Replace with a single thanks.dev username
13-
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,34 @@
11
.container {
22
display: flex;
33
flex-direction: column;
4-
gap: 8px;
5-
padding: 4px 12px 12px 12px;
4+
padding-top: 4px;
5+
}
6+
7+
.wallets {
8+
display: flex;
9+
flex-direction: column;
10+
gap: 6px;
11+
12+
padding: 4px 12px 4px 12px;
13+
14+
&__wallet {
15+
display: flex;
16+
flex-direction: column;
17+
gap: 2px;
18+
19+
span {
20+
word-break: break-all;
21+
opacity: var(--dimmed-opacity);
22+
user-select: text;
23+
}
24+
}
625
}
726

827
.donations {
28+
padding: 4px 12px 12px 12px;
29+
}
30+
31+
.donations__inner {
932
display: flex;
1033
flex-direction: column;
1134
gap: 8px;

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

Lines changed: 106 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import styles from './Donations.module.scss'
2-
import { useEffect, useRef } from 'react'
2+
import { useEffect, useRef, useState } from 'react'
33
import cn from 'classnames'
44
import { Scrollable } from '../Scrollable'
5+
import { ListHeader } from '../ListHeader/ListHeader'
56

67
const get_href_from_url_like_string = (text: string): string | null => {
78
if (/\s/.test(text)) {
@@ -82,6 +83,8 @@ export type DonationsProps = {
8283

8384
export const Donations: React.FC<DonationsProps> = (props) => {
8485
const observer_target = useRef<HTMLDivElement>(null)
86+
const [is_wallets_collapsed, set_is_wallets_collapsed] = useState(true)
87+
const [is_donations_collapsed, set_is_donations_collapsed] = useState(false)
8588

8689
useEffect(() => {
8790
if (!observer_target.current) return
@@ -104,80 +107,112 @@ export const Donations: React.FC<DonationsProps> = (props) => {
104107
return (
105108
<Scrollable>
106109
<div className={styles.container}>
107-
<div>
108-
Hi there! If you enjoy using Code Web Chat, buying a $3 "coffee" is a
109-
great way to show your support for the project.
110-
<br />
111-
Thank you for choosing to donate.
112-
</div>
113-
<div>
114-
{props.is_fetching ? (
115-
<>
116-
<div className={styles.donations__donation}>
110+
<ListHeader
111+
title="Crypto wallets"
112+
is_collapsed={is_wallets_collapsed}
113+
on_toggle_collapsed={() => set_is_wallets_collapsed((v) => !v)}
114+
/>
115+
{!is_wallets_collapsed && (
116+
<div className={styles.wallets}>
117+
<div className={styles.wallets__wallet}>
118+
<strong>Bitcoin</strong>
119+
<span>bc1qfzajl0fc4347knr6n5hhuk52ufr4sau04su5te</span>
120+
</div>
121+
<div className={styles.wallets__wallet}>
122+
<strong>Ethereum</strong>
123+
<span>0x532eA8CA70aBfbA6bfE35e6B3b7b301b175Cf86D</span>
124+
</div>
125+
<div className={styles.wallets__wallet}>
126+
<strong>Monero</strong>
127+
<span>
128+
84whVjApZJtSeRb2eEbZ1pJ7yuBoGoWHGA4JuiFvdXVBXnaRYyQ3S4kTEuzgKjpxyr3nxn1XHt9yWTRqZ3XGfY35L4yDm6R
129+
</span>
130+
</div>
131+
</div>
132+
)}
133+
<ListHeader
134+
title="Recent coffees"
135+
is_collapsed={is_donations_collapsed}
136+
on_toggle_collapsed={() => set_is_donations_collapsed((v) => !v)}
137+
/>
138+
{!is_donations_collapsed && (
139+
<div className={styles.donations}>
140+
{props.is_fetching ? (
141+
<>
142+
<div className={styles.donations__inner__donation}>
143+
<div
144+
className={styles.skeleton}
145+
style={{ width: '50%', height: '14px' }}
146+
/>
147+
<div className={styles.skeleton} style={{ height: '30px' }} />
148+
</div>
149+
<div className={styles.donations__inner__donation}>
150+
<div
151+
className={styles.skeleton}
152+
style={{ width: '70%', height: '14px' }}
153+
/>
154+
<div className={styles.skeleton} style={{ height: '30px' }} />
155+
</div>
156+
<div className={styles.donations__inner__donation}>
157+
<div
158+
className={styles.skeleton}
159+
style={{ width: '40%', height: '14px' }}
160+
/>
161+
<div className={styles.skeleton} style={{ height: '30px' }} />
162+
</div>
163+
</>
164+
) : (
165+
<>
117166
<div
118-
className={styles.skeleton}
119-
style={{ width: '50%', height: '14px' }}
120-
/>
121-
<div className={styles.skeleton} style={{ height: '30px' }} />
122-
</div>
123-
<div className={styles.donations__donation}>
124-
<div
125-
className={styles.skeleton}
126-
style={{ width: '70%', height: '14px' }}
127-
/>
128-
<div className={styles.skeleton} style={{ height: '30px' }} />
129-
</div>
130-
<div className={styles.donations__donation}>
131-
<div
132-
className={styles.skeleton}
133-
style={{ width: '40%', height: '14px' }}
134-
/>
135-
<div className={styles.skeleton} style={{ height: '30px' }} />
136-
</div>
137-
</>
138-
) : (
139-
<>
140-
<div
141-
className={cn(styles.donations, {
142-
[styles['donations--revalidating']]: props.is_revalidating
143-
})}
144-
>
145-
{props.donations?.map((donation, index) => (
146-
<div className={styles.donations__donation} key={index}>
147-
{(() => {
148-
const { username, href, after_text } =
149-
parse_support_message(donation.support_message)
150-
const title = `${username} ${after_text}`
151-
return (
167+
className={cn(styles.donations__inner, {
168+
[styles['donations__inner--revalidating']]:
169+
props.is_revalidating
170+
})}
171+
>
172+
{props.donations?.map((donation, index) => (
173+
<div
174+
className={styles.donations__inner__donation}
175+
key={index}
176+
>
177+
{(() => {
178+
const { username, href, after_text } =
179+
parse_support_message(donation.support_message)
180+
const title = `${username} ${after_text}`
181+
return (
182+
<div
183+
className={
184+
styles.donations__inner__donation__header
185+
}
186+
title={title}
187+
>
188+
<strong>
189+
{href ? (
190+
<a href={href} target="_blank" rel="nofollow">
191+
{username}
192+
</a>
193+
) : (
194+
username
195+
)}
196+
</strong>{' '}
197+
{after_text}
198+
</div>
199+
)
200+
})()}
201+
{donation.support_note && (
152202
<div
153-
className={styles.donations__donation__header}
154-
title={title}
203+
className={styles.donations__inner__donation__note}
155204
>
156-
<strong>
157-
{href ? (
158-
<a href={href} target="_blank" rel="nofollow">
159-
{username}
160-
</a>
161-
) : (
162-
username
163-
)}
164-
</strong>{' '}
165-
{after_text}
205+
{donation.support_note}
166206
</div>
167-
)
168-
})()}
169-
{donation.support_note && (
170-
<div className={styles.donations__donation__note}>
171-
{donation.support_note}
172-
</div>
173-
)}
174-
</div>
175-
))}
176-
</div>
177-
{props.has_more && <div ref={observer_target} />}
178-
</>
179-
)}
180-
</div>
207+
)}
208+
</div>
209+
))}
210+
</div>
211+
{props.has_more && <div ref={observer_target} />}
212+
</>
213+
)}
214+
</div>
215+
)}
181216
</div>
182217
</Scrollable>
183218
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
display: flex;
1111
align-items: center;
1212
justify-content: space-between;
13-
margin: 5px 12px 6px 12px;
13+
margin: 5px 12px 6px 10px;
1414
position: relative;
1515
height: 20px;
1616

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
203203
/>
204204
<IconButton
205205
codicon_icon="file-media"
206-
title="Upload media before submitting message"
206+
title="Run and pause for media upload"
207207
on_click={(e) => {
208208
e.stopPropagation()
209209
props.on_preset_click(preset.name!, true)
@@ -527,7 +527,7 @@ export const Presets: React.FC<Presets.Props> = (props) => {
527527
{preset.chatbot && (
528528
<IconButton
529529
codicon_icon="file-media"
530-
title="Upload media before submitting message"
530+
title="Run and pause for media upload"
531531
on_click={(e) => {
532532
e.stopPropagation()
533533
props.on_preset_click(preset.name!, true)

‎packages/vscode/src/views/panel/backend/message-handlers/handle-send-prompt.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ async function show_preset_quick_pick(params: {
307307

308308
const run_without_submission_button: vscode.QuickInputButton = {
309309
iconPath: new vscode.ThemeIcon('file-media'),
310-
tooltip: 'Upload media before submitting message'
310+
tooltip: 'Run and pause for media upload'
311311
}
312312

313313
const quick_pick = vscode.window.createQuickPick<

‎packages/vscode/src/views/panel/frontend/Home/Home.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
justify-content: space-between;
55
gap: 4px;
66
width: 100%;
7-
padding: 3px 12px 4px 12px;
7+
padding: 3px 12px 4px 10px;
88

99
&__left {
1010
display: flex;

‎packages/vscode/src/views/panel/frontend/Main/MainView/components/Header/Header.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: flex;
33
justify-content: space-between;
44
align-items: center;
5-
padding: 3px 12px 4px 12px;
5+
padding: 3px 12px 4px 10px;
66
gap: 14px;
77

88
&__left {

‎packages/vscode/src/views/panel/frontend/Panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ export const Panel = () => {
385385
{viewing_donations && (
386386
<div className={styles.slot}>
387387
<UiPage
388-
title="Recent Donations"
388+
title="Donations"
389389
on_back_click={() => set_viewing_donations(false)}
390390
footer_slot={
391391
<DonationsFooter

‎packages/vscode/src/views/panel/frontend/components/donations/DonationsFooter/DonationsFooter.module.scss‎

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

55
> * {
66
flex: 1;
7+
white-space: nowrap;
78

89
&:nth-child(2) {
910
background-color: #f7d600;

0 commit comments

Comments
 (0)