Enable plus button to redirect to subscription page when out of tokens

- Update PledgeBar plus button to redirect to /settings/subscription when user is out of tokens instead of being disabled
- Update TokenAllocationModal plus button to use handleSubscribe() when out of tokens
- Update subscription manage page plus button to redirect to main subscription page when out of tokens
- Remove disabled state from plus buttons when out of tokens to allow subscription upgrades
- Improve user experience by providing clear path to increase token allocation

Author: sirjamesgray

app/components/payments/PledgeBar.tsx

@@ -683,13 +683,15 @@ const PledgeBar = React.forwardRef<HTMLDivElement, PledgeBarProps>(({
                     variant="outline"
                     onClick={(e) => {
                       e.stopPropagation();
-                      // Don't allow plus button when out of tokens
-                      if (!isOutOfTokens) {
+                      if (isOutOfTokens) {
+                        // Redirect to subscription page when out of tokens
+                        router.push('/settings/subscription');
+                      } else {
                         handleTokenChange(incrementAmount);
                       }
                     }}
-                    className={`h-8 w-8 p-0 ${isOutOfTokens ? 'opacity-50' : ''} ${isRefreshing ? 'opacity-75' : ''}`}
-                    disabled={isOutOfTokens}
+                    className={`h-8 w-8 p-0 ${isRefreshing ? 'opacity-75' : ''}`}
+                    disabled={isRefreshing}
                   >
                     <Plus className="h-4 w-4" />
                   </Button>

app/components/payments/TokenAllocationModal.tsx

@@ -243,9 +243,14 @@ export function TokenAllocationModal({
             className="h-10 w-10 p-0 flex-shrink-0"
             onClick={(e) => {
               e.stopPropagation();
-              handleTokenChange(incrementAmount);
+              if (availableTokens <= 0) {
+                // Redirect to subscription page when out of tokens
+                handleSubscribe();
+              } else {
+                handleTokenChange(incrementAmount);
+              }
             }}
-            disabled={availableTokens <= 0}
+            disabled={false}
           >
             <Plus className="h-4 w-4" />
           </Button>

app/settings/subscription/manage/page.tsx

@@ -381,8 +381,15 @@ export default function SubscriptionManagePage() {
                       <Button
                         size="sm"
                         variant="outline"
-                        onClick={() => handleTokenAllocationChange(allocation.id, incrementAmount)}
-                        disabled={updatingAllocation === allocation.id || (tokenBalance?.availableTokens || 0) <= 0}
+                        onClick={() => {
+                          if ((tokenBalance?.availableTokens || 0) <= 0) {
+                            // Redirect to main subscription page to upgrade
+                            router.push('/settings/subscription');
+                          } else {
+                            handleTokenAllocationChange(allocation.id, incrementAmount);
+                          }
+                        }}
+                        disabled={updatingAllocation === allocation.id}
                         className="h-8 w-8 p-0"
                       >
                         <Plus className="h-4 w-4" />