Matthias Meister
1fb8fd2863
- Introduced a new `CanvasPresetsProvider` to manage adjustment presets for nodes, enhancing state management and reducing reactivity. - Updated storage URL resolution to utilize a mutation instead of a reactive query, improving performance and reducing unnecessary re-renders. - Refactored adjustment nodes (color-adjust, curves, detail-adjust, light-adjust) to use the new preset context for fetching user presets. - Improved overall canvas functionality by streamlining storage ID collection and URL resolution processes.
93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useMutation } from "convex/react";
|
|
import { useAuthQuery } from "@/hooks/use-auth-query";
|
|
import { useTranslations } from "next-intl";
|
|
import { api } from "@/convex/_generated/api";
|
|
import { Coins } from "lucide-react";
|
|
import { toast } from "@/lib/toast";
|
|
|
|
const showTestCreditGrant =
|
|
typeof process.env.NEXT_PUBLIC_ALLOW_TEST_CREDIT_GRANT === "string" &&
|
|
process.env.NEXT_PUBLIC_ALLOW_TEST_CREDIT_GRANT === "true";
|
|
|
|
export function CreditDisplay() {
|
|
const t = useTranslations('toasts');
|
|
const balance = useAuthQuery(api.credits.getBalance);
|
|
const grantTestCredits = useMutation(api.credits.grantTestCredits);
|
|
|
|
if (balance === undefined) {
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-1.5 animate-pulse">
|
|
<Coins className="h-4 w-4 text-muted-foreground" />
|
|
<div className="h-4 w-16 rounded bg-muted" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const available = balance.balance - balance.reserved;
|
|
|
|
const isLow = available < 10;
|
|
const isEmpty = available <= 0;
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className={`flex items-center gap-2 rounded-lg px-3 py-1.5 transition-colors ${
|
|
isEmpty
|
|
? "bg-destructive/10"
|
|
: isLow
|
|
? "bg-amber-500/10"
|
|
: "bg-muted/50"
|
|
}`}
|
|
>
|
|
<Coins
|
|
className={`h-4 w-4 ${
|
|
isEmpty
|
|
? "text-destructive"
|
|
: isLow
|
|
? "text-amber-500"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
/>
|
|
<span
|
|
className={`text-sm font-medium tabular-nums ${
|
|
isEmpty ? "text-destructive" : isLow ? "text-amber-500" : "text-foreground"
|
|
}`}
|
|
>
|
|
{available.toLocaleString("de-DE")} Cr
|
|
</span>
|
|
{balance.reserved > 0 && (
|
|
<span className="text-xs text-muted-foreground/70">
|
|
({balance.reserved} reserved)
|
|
</span>
|
|
)}
|
|
</div>
|
|
{showTestCreditGrant && (
|
|
<button
|
|
type="button"
|
|
title="Testphase: +2000 Cr"
|
|
className="rounded-md border border-dashed border-border px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
onClick={() => {
|
|
void grantTestCredits({ amount: 2000 })
|
|
.then((r) => {
|
|
toast.success(
|
|
t('billing.creditsAddedTitle'),
|
|
`${t('billing.creditsAddedDesc', { credits: 2000 })} — Stand: ${r.newBalance.toLocaleString("de-DE")}`,
|
|
);
|
|
})
|
|
.catch((e: unknown) => {
|
|
toast.error(
|
|
t('billing.testGrantFailedTitle'),
|
|
e instanceof Error ? e.message : undefined,
|
|
);
|
|
});
|
|
}}
|
|
>
|
|
Test +2000
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|