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

refactor: implement tab navigation in BuyMorePage and enhance button styles in BuyPagesContent and BuyTokensContent

Browse source
This commit is contained in:
Anish Sarkar 2026-05-17 23:29:41 +05:30
parent 88a43cdd65
commit 10527ddb7c
6 changed files with 114 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

16
surfsense_web/components/settings/buy-pages-content.tsx
View file

@ -74,11 +74,11 @@ export function BuyPagesContent() {
<div className="flex items-center justify-center gap-3">
<Button
type="button"
variant="outline"
variant="ghost"
size="icon"
onClick={() => setQuantity((q) => Math.max(1, q - 1))}
disabled={quantity <= 1 || purchaseMutation.isPending}
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
>
<Minus className="h-3.5 w-3.5" />
</Button>
@ -87,11 +87,11 @@ export function BuyPagesContent() {
</span>
<Button
type="button"
variant="outline"
variant="ghost"
size="icon"
onClick={() => setQuantity((q) => Math.min(100, q + 1))}
disabled={quantity >= 100 || purchaseMutation.isPending}
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
>
<Plus className="h-3.5 w-3.5" />
</Button>
@ -107,10 +107,10 @@ export function BuyPagesContent() {
onClick={() => setQuantity(m)}
disabled={purchaseMutation.isPending}
className={cn(
"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
"h-auto rounded-md px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
quantity === m
? "border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
: "border-border hover:border-emerald-500/40 hover:bg-muted/40"
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)}
>
{(m * PAGE_PACK_SIZE).toLocaleString()}
@ -126,7 +126,7 @@ export function BuyPagesContent() {
</div>
<Button
className="w-full bg-emerald-600 text-white hover:bg-emerald-700"
className="w-full"
disabled={purchaseMutation.isPending || !hasValidSearchSpace}
onClick={handleBuyNow}
>

18
surfsense_web/components/settings/buy-tokens-content.tsx
View file

@ -96,7 +96,7 @@ export function BuyTokensContent() {
</span>
<span className="font-medium">{usagePercentage.toFixed(0)}%</span>
</div>
<Progress value={usagePercentage} className="h-1.5" />
<Progress value={usagePercentage} className="h-1.5 [&>div]:bg-purple-500" />
<p className="text-[11px] text-muted-foreground">
{formatUsd(remaining)} of credit remaining
</p>
@ -107,11 +107,11 @@ export function BuyTokensContent() {
<div className="flex items-center justify-center gap-3">
<Button
type="button"
variant="outline"
variant="ghost"
size="icon"
onClick={() => setQuantity((q) => Math.max(1, q - 1))}
disabled={quantity <= 1 || purchaseMutation.isPending}
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
>
<Minus className="h-3.5 w-3.5" />
</Button>
@ -120,11 +120,11 @@ export function BuyTokensContent() {
</span>
<Button
type="button"
variant="outline"
variant="ghost"
size="icon"
onClick={() => setQuantity((q) => Math.min(100, q + 1))}
disabled={quantity >= 100 || purchaseMutation.isPending}
className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
>
<Plus className="h-3.5 w-3.5" />
</Button>
@ -139,10 +139,10 @@ export function BuyTokensContent() {
onClick={() => setQuantity(m)}
disabled={purchaseMutation.isPending}
className={cn(
"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
"h-auto rounded-md px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
quantity === m
? "border-purple-500 bg-purple-500/10 text-purple-600 dark:text-purple-400"
: "border-border hover:border-purple-500/40 hover:bg-muted/40"
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)}
>
${m}
@ -158,7 +158,7 @@ export function BuyTokensContent() {
</div>
<Button
className="w-full bg-purple-600 text-white hover:bg-purple-700"
className="w-full"
disabled={purchaseMutation.isPending}
onClick={() => purchaseMutation.mutate({ quantity, search_space_id: searchSpaceId })}
>

20
surfsense_web/components/settings/more-pages-content.tsx
View file

@ -76,15 +76,17 @@ export function MorePagesContent() {
<div className="space-y-2">
<h3 className="text-sm font-semibold">Earn Bonus Pages</h3>
{isLoading ? (
<Card>
<CardContent className="flex items-center gap-3 p-3">
<Skeleton className="h-8 w-8 rounded-full" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-3/4" />
</div>
<Skeleton className="h-8 w-16" />
</CardContent>
</Card>
<div className="space-y-1.5">
{["github", "reddit", "discord"].map((task) => (
<Card key={task} className="bg-transparent">
<CardContent className="flex items-center gap-3 p-3">
<Skeleton className="h-8 w-8 rounded-full bg-muted" />
<Skeleton className="h-4 flex-1 bg-muted" />
<Skeleton className="h-8 w-16 bg-muted" />
</CardContent>
</Card>
))}
</div>
) : (
<div className="space-y-1.5">
{data?.tasks.map((task) => (