apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-17 18:35:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(sidebar): live premium tokens meter via Zero

Browse source
This commit is contained in:
Anish Sarkar 2026-05-02 03:32:05 +05:30
parent 05eef5a7db
commit 2a14c05282
1 changed files with 6 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
surfsense_web/components/layout/ui/sidebar/PremiumTokenUsageDisplay.tsx
View file

@ -1,23 +1,18 @@
"use client"; "use client";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@rocicorp/zero/react";
import { Progress } from "@/components/ui/progress"; import { Progress } from "@/components/ui/progress";
import { useIsAnonymous } from "@/contexts/anonymous-mode"; import { useIsAnonymous } from "@/contexts/anonymous-mode";
import { stripeApiService } from "@/lib/apis/stripe-api.service"; import { queries } from "@/zero/queries";
export function PremiumTokenUsageDisplay() { export function PremiumTokenUsageDisplay() {
const isAnonymous = useIsAnonymous(); const isAnonymous = useIsAnonymous();
const { data: tokenStatus } = useQuery({ const [me] = useQuery(queries.user.me({}));
queryKey: ["token-status"],
queryFn: () => stripeApiService.getTokenStatus(),
staleTime: 60_000,
enabled: !isAnonymous,
});
if (!tokenStatus) return null; if (isAnonymous || !me) return null;
const usagePercentage = Math.min( const usagePercentage = Math.min(
(tokenStatus.premium_tokens_used / Math.max(tokenStatus.premium_tokens_limit, 1)) * 100, (me.premiumTokensUsed / Math.max(me.premiumTokensLimit, 1)) * 100,
100 100
); );
@ -31,8 +26,7 @@ export function PremiumTokenUsageDisplay() {
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex justify-between items-center text-xs"> <div className="flex justify-between items-center text-xs">
<span className="text-muted-foreground"> <span className="text-muted-foreground">
{formatTokens(tokenStatus.premium_tokens_used)} /{" "} {formatTokens(me.premiumTokensUsed)} / {formatTokens(me.premiumTokensLimit)} tokens
{formatTokens(tokenStatus.premium_tokens_limit)} tokens
</span> </span>
<span className="font-medium">{usagePercentage.toFixed(0)}%</span> <span className="font-medium">{usagePercentage.toFixed(0)}%</span>
</div> </div>