aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-25 11:44:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

ignore: mobile styles zen

Browse Source
This commit is contained in:
Jay V
2025-09-16 19:39:34 -04:00
parent 479cf2fa4f
commit 9f46068c57
5 changed files with 77 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
cloud/app/src/component/workspace/billing-section.module.css
View File

@@ -39,6 +39,10 @@
min-width: 14.5rem;
width: fit-content;
@media (max-width: 30rem) {
width: 100%;
}
[data-slot="credit-card"] {
padding: var(--space-3-5) var(--space-4);
background-color: var(--color-bg-surface);
@@ -50,6 +54,7 @@
[data-slot="card-icon"] {
display: flex;
align-items: center;
color: var(--color-text-muted);
}
[data-slot="card-details"] {
@@ -78,6 +83,14 @@
gap: var(--space-2);
align-items: center;
@media (max-width: 30rem) {
flex-direction: column;
> button {
width: 100%;
}
}
[data-slot="create-form"] {
margin: 0;
}

39
cloud/app/src/component/workspace/billing-section.tsx
View File

@@ -38,6 +38,7 @@ const getBillingInfo = query(async (workspaceID: string) => {
export function BillingSection() {
const params = useParams()
// ORIGINAL CODE - COMMENTED OUT FOR TESTING
const balanceInfo = createAsync(() => getBillingInfo(params.id))
const createCheckoutUrlAction = useAction(createCheckoutUrl)
const createCheckoutUrlSubmission = useSubmission(createCheckoutUrl)
@@ -46,6 +47,44 @@ export function BillingSection() {
const disableReloadSubmission = useSubmission(disableReload)
const reloadSubmission = useSubmission(reload)
// DUMMY DATA FOR TESTING - UNCOMMENT ONE OF THE SCENARIOS BELOW
// Scenario 1: User has not added billing details and has no balance
// const balanceInfo = () => ({
// balance: 0,
// paymentMethodLast4: null as string | null,
// reload: false,
// reloadError: null as string | null,
// timeReloadError: null as Date | null,
// })
// Scenario 2: User has not added billing details but has a balance
// const balanceInfo = () => ({
// balance: 1500000000, // $15.00
// paymentMethodLast4: null as string | null,
// reload: false,
// reloadError: null as string | null,
// timeReloadError: null as Date | null
// })
// Scenario 3: User has added billing details (reload enabled)
// const balanceInfo = () => ({
// balance: 750000000, // $7.50
// paymentMethodLast4: "4242",
// reload: true,
// reloadError: null as string | null,
// timeReloadError: null as Date | null
// })
// Scenario 4: User has billing details but reload failed
// const balanceInfo = () => ({
// balance: 250000000, // $2.50
// paymentMethodLast4: "4242",
// reload: true,
// reloadError: "Your card was declined." as string,
// timeReloadError: new Date(Date.now() - 3600000) as Date // 1 hour ago
// })
const balanceAmount = createMemo(() => {
return ((balanceInfo()?.balance ?? 0) / 100000000).toFixed(2)
})

4
cloud/app/src/component/workspace/monthly-limit-section.module.css
View File

@@ -15,6 +15,10 @@
min-width: 15rem;
width: fit-content;
@media (max-width: 30rem) {
width: 100%;
}
[data-slot="amount"] {
padding: var(--space-3-5) var(--space-4);
background-color: var(--color-bg-surface);

20
cloud/app/src/routes/workspace/[id].css
View File

@@ -26,7 +26,11 @@
section {
display: flex;
flex-direction: column;
gap: var(--space-6);
gap: var(--space-8);
@media (max-width: 30rem) {
gap: var(--space-6);
}
/* Section titles */
[data-slot="section-title"] {
@@ -47,6 +51,20 @@
font-size: var(--font-size-md);
}
}
p {
line-height: 1.5;
font-size: var(--font-size-md);
color: var(--color-text-muted);
a {
color: var(--color-text-muted);
}
@media (max-width: 30rem) {
font-size: var(--font-size-sm);
}
}
}
}
section:not(:last-child) {

3
cloud/app/src/routes/workspace/[id].tsx
View File

@@ -38,7 +38,8 @@ export default function () {
<NewUserSection />
<KeySection />
<BillingSection />
<Show when={balanceInfo()?.reload}>
<Show when={true}>
{/*<Show when={balanceInfo()?.reload}>*/}
<MonthlyLimitSection />
</Show>
<UsageSection />