apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-03 21:02:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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