Enhance token allocation UI: bigger controls, consistent data, rounded corners

- Fix token allocation inconsistency by implementing shared TokenBalanceContext
- Increase plus/minus button size from 6x6 to 8x8 with 4x4 icons
- Remove outer container background and reduce card padding for better screen real estate
- Add rounded corners (rounded-md) to all token bar sections with 4px gaps
- Implement optimistic updates for immediate UI feedback
- Ensure consistent available token display across all components
- Clean, minimal design that maximizes usable space

Author: sirjamesgray

app/api/subscription-history/route.ts

@@ -10,12 +10,9 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getUserIdFromRequest } from '../auth-helper';
 import { getCollectionName } from '../../utils/environmentConfig';
-import { initAdmin } from '../../firebase/admin';
+import { getFirebaseAdmin } from '../../firebase/firebaseAdmin';
 import Stripe from 'stripe';
 
-// Initialize Firebase Admin
-const admin = initAdmin();
-const db = admin.firestore();
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   apiVersion: '2023-10-16',
 });
@@ -42,7 +39,7 @@ interface SubscriptionHistoryEvent {
   source: 'stripe' | 'system' | 'user';
 }
 
-async function getSubscriptionHistory(userId: string): Promise<SubscriptionHistoryEvent[]> {
+async function getSubscriptionHistory(userId: string, db: any): Promise<SubscriptionHistoryEvent[]> {
   const events: SubscriptionHistoryEvent[] = [];
 
   try {
@@ -252,6 +249,10 @@ export async function GET(request: NextRequest) {
   try {
     console.log('[SUBSCRIPTION HISTORY API] Starting request');
 
+    // Initialize Firebase Admin
+    const admin = getFirebaseAdmin();
+    const db = admin.firestore();
+
     // Get authenticated user ID
     const userId = await getUserIdFromRequest(request);
     if (!userId) {
@@ -272,7 +273,7 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
     }
 
-    const history = await getSubscriptionHistory(targetUserId);
+    const history = await getSubscriptionHistory(targetUserId, db);
 
     console.log(`[SUBSCRIPTION HISTORY API] Successfully fetched ${history.length} events for user ${targetUserId}`);
 

app/api/subscription/cancel/route.ts

@@ -7,18 +7,18 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getUserIdFromRequest } from '../../auth-helper';
 import { getSubCollectionPath, PAYMENT_COLLECTIONS } from '../../../utils/environmentConfig';
-import { initAdmin } from '../../../firebase/admin';
+import { getFirebaseAdmin } from '../../../firebase/firebaseAdmin';
 import { subscriptionAuditService } from '../../../services/subscriptionAuditService';
-
-// Initialize Firebase Admin
-const admin = initAdmin();
-const adminDb = admin.firestore();
 import { serverTimestamp } from 'firebase-admin/firestore';
 
 const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
 
 export async function POST(request: NextRequest) {
   try {
+    // Initialize Firebase Admin
+    const admin = getFirebaseAdmin();
+    const adminDb = admin.firestore();
+
     // Get authenticated user
     const userId = await getUserIdFromRequest(request);
     if (!userId) {

app/api/tokens/pending-allocations/route.ts

@@ -8,6 +8,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getUserIdFromRequest } from '../../auth-helper';
 import { PendingTokenAllocationService } from '../../../services/pendingTokenAllocationService';
+import { ServerTokenService } from '../../../services/tokenService.server';
 import { getDoc, doc } from 'firebase/firestore';
 import { db } from '../../../firebase/config';
 import { getCollectionName } from "../../../utils/environmentConfig";
@@ -59,7 +60,7 @@ export async function POST(request: NextRequest) {
     }
 
     const body = await request.json();
-    const { recipientUserId, resourceType, resourceId, tokens } = body;
+    const { recipientUserId, resourceType, resourceId, tokens, source } = body;
 
     // Validate input
     if (!recipientUserId || !resourceType || !resourceId || !tokens) {
@@ -138,10 +139,20 @@ export async function POST(request: NextRequest) {
       }, { status: 400 });
     }
 
-    // Get updated summary
-    const updatedSummary = await PendingTokenAllocationService.getUserAllocationSummary(userId);
+    // Get updated summary, current allocation, and balance
+    const [updatedSummary, currentAllocation, balance] = await Promise.all([
+      PendingTokenAllocationService.getUserAllocationSummary(userId),
+      PendingTokenAllocationService.getCurrentPageAllocation(userId, resourceId),
+      ServerTokenService.getUserTokenBalance(userId)
+    ]);
+
+    // Log allocation with source tracking
+    console.log(`Pending tokens allocated: ${tokens} from ${userId} to ${recipientUserId} for ${resourceType}:${resourceId} (source: ${source || 'unknown'})`);
 
-    console.log(`Pending tokens allocated: ${tokens} from ${userId} to ${recipientUserId} for ${resourceType}:${resourceId}`);
+    // Track allocation source for analytics
+    if (source) {
+      console.log(`[ANALYTICS] TokenAllocation: source=${source}, tokens=${tokens}, resourceType=${resourceType}, userId=${userId}`);
+    }
 
     return NextResponse.json({
       success: true,
@@ -152,7 +163,13 @@ export async function POST(request: NextRequest) {
         resourceType,
         resourceId
       },
-      summary: updatedSummary
+      summary: updatedSummary,
+      currentAllocation: currentAllocation,
+      balance: {
+        totalTokens: balance?.totalTokens || 0,
+        allocatedTokens: balance?.allocatedTokens || 0,
+        availableTokens: (balance?.totalTokens || 0) - (balance?.allocatedTokens || 0)
+      }
     });
 
   } catch (error) {

app/api/tokens/pledge-bar-data/route.ts

@@ -32,12 +32,14 @@ export async function GET(request: NextRequest) {
       PendingTokenAllocationService.getCurrentPageAllocation(userId, pageId)
     ]);
 
+    console.log(`🎯 [PLEDGE_BAR_DATA] pageId=${pageId}, userId=${userId}, currentAllocation=${currentAllocation}`);
+
     // Calculate basic token info
     const totalTokens = balance?.totalTokens || 0;
     const allocatedTokens = balance?.allocatedTokens || 0;
     const availableTokens = totalTokens - allocatedTokens;
 
-    return NextResponse.json({
+    const responseData = {
       success: true,
       data: {
         tokenBalance: {
@@ -49,8 +51,18 @@ export async function GET(request: NextRequest) {
         currentPageAllocation: currentAllocation,
         hasSubscription: !!balance && totalTokens > 0
       }
+    };
+
+    console.log(`🎯 [PLEDGE_BAR_DATA] Response for pageId=${pageId}, userId=${userId}:`, {
+      totalTokens,
+      allocatedTokens,
+      availableTokens,
+      currentPageAllocation: currentAllocation,
+      hasSubscription: !!balance && totalTokens > 0
     });
 
+    return NextResponse.json(responseData);
+
   } catch (error) {
     console.error('Error getting pledge bar data:', error);
     return NextResponse.json(

app/components/activity/ActivityCard.tsx

@@ -24,6 +24,7 @@ import { useDateFormat } from "../../contexts/DateFormatContext";
 import { useToast } from "../ui/use-toast";
 import { Button } from "../ui/button";
 import { RotateCcw } from "lucide-react";
+import { EmbeddedTokenAllocation } from "../payments/EmbeddedTokenAllocation";
 
 
 /**
@@ -321,8 +322,8 @@ const ActivityCard = ({ activity, isCarousel = false, compactLayout = false }) =
       className={cn(
         "w-full border border-theme-strong rounded-xl shadow-sm dark:bg-card/90 dark:hover:bg-card/100 hover:bg-muted/30 cursor-pointer no-underline bg-card overflow-hidden",
         "flex flex-col",
-        // Mobile-first padding with better spacing
-        "p-5 md:p-4",
+        // Reduced padding for better screen real estate
+        "p-3 md:p-3",
         // Ensure proper spacing between cards (handled by grid gap)
         "md:mb-0"
       )}
@@ -468,6 +469,19 @@ const ActivityCard = ({ activity, isCarousel = false, compactLayout = false }) =
             </div>
           </div>
         )}
+
+        {/* Token allocation UI */}
+        {activity.userId && activity.pageId && (
+          <div className="pt-3 border-t border-border/20 mt-3">
+            <EmbeddedTokenAllocation
+              pageId={activity.pageId}
+              authorId={activity.userId}
+              pageTitle={currentPageName}
+              source="HomePage"
+              className="w-full"
+            />
+          </div>
+        )}
       </div>
     </div>
   );

app/components/features/Home.tsx

@@ -5,10 +5,8 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import Header from "../layout/Header";
 // Removed useOptimizedHome - now using UnifiedRecentActivity
-import { Activity, Search } from "lucide-react";
+import { Activity } from "lucide-react";
 import SimpleRecentEdits from "./SimpleRecentEdits";
-
-import { Input } from "../ui/input";
 import DailyNotesSection from "../daily-notes/DailyNotesSection";
 import EmailVerificationAlert from "../utils/EmailVerificationAlert";
 import EmptyState from "../ui/EmptyState";
@@ -24,12 +22,6 @@ const Home: React.FC = () => {
   const router = useRouter();
   // Removed recentEditsFilterState - now handled by UnifiedRecentActivity component
 
-  // Handle search functionality - navigate to search page
-  const handleSearchFocus = () => {
-    // Navigate to search page when user clicks on the search input
-    router.push('/search');
-  };
-
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
       router.push("/auth/login");
@@ -58,26 +50,10 @@ const Home: React.FC = () => {
       <Header />
       {/* Main content area with proper sidebar spacing */}
       <main className="transition-all duration-300 ease-in-out">
-          <div className="container mx-auto px-4 py-6 space-y-8">
+          <div className="container mx-auto px-4 py-4 space-y-6">
             {/* Email Verification Alert */}
             <EmailVerificationAlert className="max-w-2xl mx-auto" />
 
-            {/* Search Section */}
-            <div className="max-w-2xl mx-auto">
-              <div className="relative cursor-pointer" onClick={handleSearchFocus}>
-                <Input
-                  type="text"
-                  placeholder="Search for pages, users..."
-                  className="w-full pl-10 pr-4 rounded-2xl cursor-pointer"
-                  readOnly
-                  onClick={handleSearchFocus}
-                />
-                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                  <Search className="h-5 w-5 text-muted-foreground" />
-                </div>
-              </div>
-            </div>
-
             {/* Daily Notes Section */}
             <DailyNotesSection />
 

app/components/features/SimpleRecentEdits.tsx

@@ -58,7 +58,7 @@ export default function SimpleRecentEdits() {
   const [hasMore, setHasMore] = useState(true);
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [filters, setFilters] = useState<Filters>({
-    includeOwn: true, // TEMPORARILY show own edits by default for debugging
+    includeOwn: false, // Hide my edits by default
     followingOnly: false
   });
   const [isFollowingAnyone, setIsFollowingAnyone] = useState<boolean | null>(null);
@@ -167,13 +167,13 @@ export default function SimpleRecentEdits() {
 
   if (loading) {
     return (
-      <div className="space-y-4">
+      <div className="space-y-3">
         <div className="flex items-center justify-between">
           <h2 className="text-xl font-semibold">Recent Edits</h2>
         </div>
-        <div className="space-y-3">
+        <div className="space-y-2">
           {[...Array(5)].map((_, i) => (
-            <div key={i} className="h-24 bg-muted rounded-lg animate-pulse" />
+            <div key={i} className="h-20 bg-muted rounded-lg animate-pulse" />
           ))}
         </div>
       </div>
@@ -182,7 +182,7 @@ export default function SimpleRecentEdits() {
 
   if (error) {
     return (
-      <div className="space-y-4">
+      <div className="space-y-3">
         <div className="flex items-center justify-between">
           <h2 className="text-xl font-semibold">Recent Edits</h2>
         </div>
@@ -194,7 +194,7 @@ export default function SimpleRecentEdits() {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {/* Static Section Header */}
       <SectionTitle
         icon={Activity}
@@ -284,7 +284,7 @@ export default function SimpleRecentEdits() {
           </p>
         </div>
       ) : (
-        <div className="space-y-4">
+        <div className="space-y-3">
           {edits.map((edit) => {
             const activityCardData = {
               pageId: edit.id,