feat: add CreditsBalanceButton and CreditsBalanceMenu components

src/components/dashboard/dashboard-header.tsx

@@ -8,10 +8,10 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import React, { type ReactNode } from 'react';
+import { CreditsBalanceButton } from '../layout/credits-balance-button';
 import LocaleSwitcher from '../layout/locale-switcher';
 import { ModeSwitcher } from '../layout/mode-switcher';
 import { ThemeSelector } from '../layout/theme-selector';
-import { CreditsBalance } from '../layout/credits-balance';
 
 interface DashboardBreadcrumbItem {
   label: string;
@@ -73,7 +73,7 @@ export function DashboardHeader({
         <div className="ml-auto flex items-center gap-3 px-4">
           {actions}
 
-          <CreditsBalance />
+          <CreditsBalanceButton />
           {isDemo && <ThemeSelector />}
           <ModeSwitcher />
           <LocaleSwitcher />

src/components/layout/credits-balance-button.tsx

@@ -5,10 +5,10 @@ import { Button } from '@/components/ui/button';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { Routes } from '@/routes';
 import { useTransactionStore } from '@/stores/transaction-store';
-import { CoinsIcon } from 'lucide-react';
+import { CoinsIcon, Loader2Icon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
-export function CreditsBalance() {
+export function CreditsBalanceButton() {
   const router = useLocaleRouter();
   const { refreshTrigger } = useTransactionStore();
   const [credits, setCredits] = useState<number>(0);
@@ -22,7 +22,7 @@ export function CreditsBalance() {
           setCredits(result.data.credits);
         }
       } catch (error) {
-        console.error('CreditsBalance, fetch credits error:', error);
+        console.error('CreditsBalanceButton, fetch credits error:', error);
       } finally {
         setLoading(false);
       }
@@ -37,14 +37,18 @@ export function CreditsBalance() {
 
   return (
     <Button
-      variant="ghost"
+      variant="outline"
       size="sm"
       className="h-8 gap-2 px-2 text-sm font-medium cursor-pointer"
       onClick={handleClick}
     >
-      <CoinsIcon className="h-4 w-4 text-primary" />
-      <span className="text-foreground">
-        {loading ? '...' : credits.toLocaleString()}
+      <CoinsIcon className="h-4 w-4" />
+      <span className="">
+        {loading ? (
+          <Loader2Icon className="h-4 w-4 animate-spin" />
+        ) : (
+          credits.toLocaleString()
+        )}
       </span>
     </Button>
   );

src/components/layout/credits-balance-menu.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { getCreditsAction } from '@/actions/credits.action';
+import { useLocaleRouter } from '@/i18n/navigation';
+import { Routes } from '@/routes';
+import { useTransactionStore } from '@/stores/transaction-store';
+import { CoinsIcon, Loader2Icon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export function CreditsBalanceMenu() {
+  const router = useLocaleRouter();
+  const { refreshTrigger } = useTransactionStore();
+  const [credits, setCredits] = useState<number>(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchCredits = async () => {
+      try {
+        const result = await getCreditsAction();
+        if (result?.data?.success && result.data.credits !== undefined) {
+          setCredits(result.data.credits);
+        }
+      } catch (error) {
+        console.error('CreditsBalanceMenu, fetch credits error:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCredits();
+  }, [refreshTrigger]);
+
+  const handleClick = () => {
+    router.push(Routes.SettingsCredits);
+  };
+
+  return (
+    <div
+      className="flex items-center justify-between cursor-pointer w-full"
+      onClick={handleClick}
+    >
+      <div className="flex items-center space-x-2.5">
+        <CoinsIcon className="h-4 w-4" />
+        <p className="text-sm">Credits</p>
+      </div>
+      <div className="flex items-center">
+        <p className="text-sm font-medium">
+          {loading ? (
+            <Loader2Icon className="h-4 w-4 animate-spin" />
+          ) : (
+            credits.toLocaleString()
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/layout/navbar-mobile.tsx

@@ -28,7 +28,6 @@ import { useEffect, useState } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { Skeleton } from '../ui/skeleton';
 import { UserButtonMobile } from './user-button-mobile';
-import { CreditsBalance } from './credits-balance';
 
 export function NavbarMobile({
   className,
@@ -96,7 +95,7 @@ export function NavbarMobile({
             <Skeleton className="size-8 border rounded-full" />
           ) : currentUser ? (
             <>
-              <CreditsBalance />
+              {/* <CreditsBalanceButton /> */}
               <UserButtonMobile user={currentUser} />
             </>
           ) : null}

src/components/layout/navbar.tsx

@@ -6,8 +6,7 @@ import { Logo } from '@/components/layout/logo';
 import { ModeSwitcher } from '@/components/layout/mode-switcher';
 import { NavbarMobile } from '@/components/layout/navbar-mobile';
 import { UserButton } from '@/components/layout/user-button';
-import { Button } from '@/components/ui/button';
-import { buttonVariants } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/ui/button';
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -25,11 +24,9 @@ import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
 import { ArrowUpRightIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Skeleton } from '../ui/skeleton';
 import LocaleSwitcher from './locale-switcher';
-import { CreditsBalance } from './credits-balance';
 
 interface NavBarProps {
   scroll?: boolean;
@@ -224,7 +221,7 @@ export function Navbar({ scroll }: NavBarProps) {
               <Skeleton className="size-8 border rounded-full" />
             ) : currentUser ? (
               <>
-                <CreditsBalance />
+                {/* <CreditsBalanceButton /> */}
                 <UserButton user={currentUser} />
               </>
             ) : (

src/components/layout/user-button.tsx

@@ -9,6 +9,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { getAvatarLinks } from '@/config/avatar-config';
+import { websiteConfig } from '@/config/website';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { authClient } from '@/lib/auth-client';
 import { usePaymentStore } from '@/stores/payment-store';
@@ -17,6 +18,8 @@ import { LogOutIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { CreditsBalanceButton } from './credits-balance-button';
+import { CreditsBalanceMenu } from './credits-balance-menu';
 
 interface UserButtonProps {
   user: User;
@@ -57,6 +60,7 @@ export function UserButton({ user }: UserButtonProps) {
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
+        {/* show user name and email */}
         <div className="flex items-center justify-start gap-2 p-2">
           <div className="flex flex-col space-y-1 leading-none">
             <p className="font-medium">{user.name}</p>
@@ -67,6 +71,16 @@ export function UserButton({ user }: UserButtonProps) {
         </div>
         <DropdownMenuSeparator />
 
+        {/* show credits balance button if credits are enabled */}
+        {websiteConfig.credits.enableCredits && (
+          <>
+            <DropdownMenuItem className="cursor-pointer">
+              <CreditsBalanceMenu />
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+
         {avatarLinks.map((item) => (
           <DropdownMenuItem
             key={item.title}

src/components/settings/credits/credit-packages.tsx

@@ -15,7 +15,7 @@ import { useLocaleRouter } from '@/i18n/navigation';
 import { formatPrice } from '@/lib/formatter';
 import { cn } from '@/lib/utils';
 import { useTransactionStore } from '@/stores/transaction-store';
-import { CircleCheckBigIcon, CoinsIcon, RefreshCwIcon } from 'lucide-react';
+import { CircleCheckBigIcon, CoinsIcon, Loader2Icon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -95,7 +95,7 @@ export function CreditPackages() {
               {/* <CoinsIcon className="h-4 w-4 text-muted-foreground" /> */}
               <div>
                 {loadingCredits ? (
-                  <RefreshCwIcon className="h-8 w-8 animate-spin" />
+                  <Loader2Icon className="h-8 w-8 animate-spin" />
                 ) : (
                   <div className="text-2xl font-bold">
                     {credits?.toLocaleString() || 0}

src/config/avatar-config.tsx

@@ -3,7 +3,6 @@
 import { Routes } from '@/routes';
 import type { MenuItem } from '@/types';
 import {
-  CoinsIcon,
   CreditCardIcon,
   LayoutDashboardIcon,
   Settings2Icon,
@@ -34,11 +33,6 @@ export function getAvatarLinks(): MenuItem[] {
       href: Routes.SettingsBilling,
       icon: <CreditCardIcon className="size-4 shrink-0" />,
     },
-    {
-      title: t('credits'),
-      href: Routes.SettingsCredits,
-      icon: <CoinsIcon className="size-4 shrink-0" />,
-    },
     {
       title: t('settings'),
       href: Routes.SettingsProfile,

src/config/navbar-config.tsx

@@ -72,13 +72,13 @@ export function getNavbarLinks(): NestedMenuItem[] {
     {
       title: t('ai.title'),
       items: [
-        // {
-        //   title: t('ai.items.text.title'),
-        //   description: t('ai.items.text.description'),
-        //   icon: <SquarePenIcon className="size-4 shrink-0" />,
-        //   href: Routes.AIText,
-        //   external: false,
-        // },
+        {
+          title: t('ai.items.text.title'),
+          description: t('ai.items.text.description'),
+          icon: <SquarePenIcon className="size-4 shrink-0" />,
+          href: Routes.AIText,
+          external: false,
+        },
         {
           title: t('ai.items.image.title'),
           description: t('ai.items.image.description'),