Major UI/UX improvements and system cleanup

- Fix dark mode background color issue in PWA and regular browser modes
- Improve paragraph number styling: same size as body text, better spacing
- Normal mode: add space after paragraph numbers for better readability
- Dense mode: reduce space after and add space before paragraph numbers
- Remove deprecated donation/support components and scripts
- Clean up legacy migration scripts and unused node_modules
- Add new token allocation modal and pie chart components
- Implement global token increment context and subscription warnings
- Enhance mobile navigation and sidebar layouts
- Improve error handling and logging systems
- Update subscription management UI with better state indicators
- Streamline payment and pledge bar implementations

Author: sirjamesgray

app/api/home-dashboard/route.ts

@@ -70,34 +70,34 @@ export async function GET(request: NextRequest) {
 async function getRecentPagesOptimized(limitCount: number, userId?: string | null): Promise<any[]> {
   try {
     let pagesQuery;
-    
+
     if (userId) {
-      // For logged-in users, show their pages + public pages (exclude deleted)
+      // For logged-in users, get recent pages and filter deleted ones in code
+      // This avoids the composite index requirement
       pagesQuery = query(
         collection(db, 'pages'),
-        where('deleted', '!=', true),
         orderBy('lastModified', 'desc'),
-        limit(limitCount * 2) // Get more to filter later
+        limit(limitCount * 3) // Get more to account for filtering deleted pages
       );
     } else {
-      // For anonymous users, only public pages (exclude deleted)
+      // For anonymous users, only public pages
       pagesQuery = query(
         collection(db, 'pages'),
         where('isPublic', '==', true),
-        where('deleted', '!=', true),
         orderBy('lastModified', 'desc'),
-        limit(limitCount)
+        limit(limitCount * 2) // Get more to account for filtering deleted pages
       );
     }
-    
+
     const snapshot = await getDocs(pagesQuery);
     const pages = snapshot.docs.map(doc => ({
       id: doc.id,
       ...doc.data()
     }));
-    
-    // Filter and limit results
+
+    // Filter out deleted pages in application code to avoid composite index requirement
     const filteredPages = pages
+      .filter(page => page.deleted !== true) // Filter deleted pages in code
       .filter(page => {
         if (!userId) return page.isPublic;
         return page.isPublic || page.userId === userId;

app/api/log-console-error/route.ts

@@ -229,7 +229,7 @@ export async function POST(request: NextRequest) {
     }
 
     // Add user agent for debugging browser-specific issues
-    if (userAgent && (level === 'error' || message.includes('Firebase'))) {
+    if (userAgent && (level === 'error' || (message && message.includes('Firebase')))) {
       const browserInfo = userAgent.match(/(Chrome|Firefox|Safari|Edge)\/[\d.]+/)?.[0] || 'Unknown'
       logMessage += `\n🌐 Browser: ${browserInfo}`
     }

app/api/tokens/allocations/route.ts

@@ -27,10 +27,22 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
     }
 
+    // Get pagination parameters
+    const { searchParams } = new URL(request.url);
+    const limit = parseInt(searchParams.get('limit') || '20');
+    const offset = parseInt(searchParams.get('offset') || '0');
+
     // Get token balance first to check if user has any allocations
     console.log(`Fetching token balance for user ${userId}`);
 
     const balance = await ServerTokenService.getUserTokenBalance(userId);
+    console.log('🎯 Token Allocations API: User balance', {
+      userId,
+      balance,
+      hasBalance: !!balance,
+      allocatedTokens: balance?.allocatedTokens
+    });
+
     if (!balance) {
       return NextResponse.json({
         success: true,
@@ -44,18 +56,12 @@ export async function GET(request: NextRequest) {
       });
     }
 
-    // If user has allocated tokens, try to get the detailed allocations
-    if (balance.allocatedTokens === 0) {
-      return NextResponse.json({
-        success: true,
-        allocations: [],
-        summary: {
-          totalAllocations: 0,
-          totalTokensAllocated: 0,
-          balance: balance
-        }
-      });
-    }
+    // Always try to get detailed allocations regardless of balance.allocatedTokens
+    // because the balance.allocatedTokens field might be stale
+    console.log('🎯 Token Allocations API: Checking allocated tokens', {
+      allocatedTokens: balance.allocatedTokens,
+      note: 'Will fetch actual allocations to get real count'
+    });
 
     // Try to get detailed allocations using ServerTokenService
     console.log(`User has ${balance.allocatedTokens} allocated tokens, fetching detailed allocations`);
@@ -68,6 +74,20 @@ export async function GET(request: NextRequest) {
       // Filter for page allocations only
       pageAllocations = allocations.filter(allocation => allocation.resourceType === 'page');
       console.log(`Found ${pageAllocations.length} page allocations for user ${userId}`);
+
+      // If no page allocations found, return empty result
+      if (pageAllocations.length === 0) {
+        console.log('🎯 Token Allocations API: No page allocations found');
+        return NextResponse.json({
+          success: true,
+          allocations: [],
+          summary: {
+            totalAllocations: 0,
+            totalTokensAllocated: 0,
+            balance: balance
+          }
+        });
+      }
     } catch (error) {
       console.error('Error fetching detailed allocations:', error);
       // If we can't get detailed allocations, return summary only
@@ -169,11 +189,23 @@ export async function GET(request: NextRequest) {
     // Sort by tokens (highest first)
     enhancedAllocations.sort((a, b) => b.tokens - a.tokens);
 
+    // Apply pagination
+    const totalAllocations = enhancedAllocations.length;
+    const paginatedAllocations = enhancedAllocations.slice(offset, offset + limit);
+    const hasMore = offset + limit < totalAllocations;
+
     return NextResponse.json({
       success: true,
-      allocations: enhancedAllocations,
+      allocations: paginatedAllocations,
+      pagination: {
+        offset,
+        limit,
+        total: totalAllocations,
+        hasMore,
+        returned: paginatedAllocations.length
+      },
       summary: {
-        totalAllocations: enhancedAllocations.length,
+        totalAllocations: totalAllocations,
         totalTokensAllocated: enhancedAllocations.reduce((sum, allocation) => sum + allocation.tokens, 0),
         balance: balance
       }

app/api/trending/route.js

@@ -55,6 +55,18 @@ export async function GET(request) {
   db = firestore;
 
   try {
+    // Add simple in-memory cache for trending data (5 minute TTL)
+    const cacheKey = `trending_${limitCount}`;
+    const cacheExpiry = 5 * 60 * 1000; // 5 minutes
+
+    // Check if we have cached data (in a real app, use Redis or similar)
+    if (global.trendingCache && global.trendingCache[cacheKey]) {
+      const cached = global.trendingCache[cacheKey];
+      if (Date.now() - cached.timestamp < cacheExpiry) {
+        console.log('Returning cached trending data');
+        return NextResponse.json({ trendingPages: cached.data }, { headers });
+      }
+    }
 
     // Get current date and time
     const now = new Date();
@@ -67,10 +79,12 @@ export async function GET(request) {
     yesterday.setDate(yesterday.getDate() - 1);
     const yesterdayStr = yesterday.toISOString().split('T')[0];
 
-    // Get page views for today and yesterday
+    // Get page views for today and yesterday with optimized queries
     const pageViewsRef = db.collection("pageViews");
-    const todayQuery = pageViewsRef.where("date", "==", todayStr);
-    const yesterdayQuery = pageViewsRef.where("date", "==", yesterdayStr);
+
+    // Limit the initial query to reduce data transfer
+    const todayQuery = pageViewsRef.where("date", "==", todayStr).limit(100);
+    const yesterdayQuery = pageViewsRef.where("date", "==", yesterdayStr).limit(100);
 
     const [todaySnapshot, yesterdaySnapshot] = await Promise.all([
       todayQuery.get(),
@@ -223,56 +237,85 @@ export async function GET(request) {
       });
     }
 
-    // Fetch page titles and user info for the trending pages
-    const pagesWithTitlesPromises = trendingPages.map(async (page) => {
-      try {
-        const pageDoc = await db.collection("pages").doc(page.id).get();
-        if (pageDoc.exists) {
-          const pageData = pageDoc.data();
+    // Optimize: Batch fetch page data and user data separately
+    const pageIds = trendingPages.map(page => page.id);
 
-          // Only include public, non-deleted pages
-          if (pageData.isPublic === false || pageData.deleted === true) {
-            return null;
-          }
+    // Batch fetch all page documents at once
+    const pageDocsPromise = db.getAll(...pageIds.map(id => db.collection("pages").doc(id)));
+
+    // Execute the batch fetch
+    const pageDocs = await pageDocsPromise;
 
-          // Get username if userId exists
-          let username = "Anonymous";
+    // Extract user IDs and prepare page data
+    const pageDataMap = new Map();
+    const userIds = new Set();
+
+    pageDocs.forEach((doc, index) => {
+      if (doc.exists) {
+        const pageData = doc.data();
+        const pageId = pageIds[index];
+
+        // Only include public, non-deleted pages
+        if (pageData.isPublic !== false && pageData.deleted !== true) {
+          pageDataMap.set(pageId, pageData);
           if (pageData.userId) {
-            try {
-              const userDoc = await db.collection("users").doc(pageData.userId).get();
-              if (userDoc.exists) {
-                const userData = userDoc.data();
-                username = userData.username || userData.displayName || "Anonymous";
-              }
-            } catch (usernameError) {
-              // Handle permission denied errors gracefully - this is expected for private user data
-              if (usernameError?.code === 'permission-denied') {
-                console.log(`Permission denied getting username for user ${pageData.userId} - this is expected for private user data`);
-              } else {
-                console.error(`Error getting username for user ${pageData.userId}:`, usernameError);
-              }
-            }
+            userIds.add(pageData.userId);
           }
-
-          return {
-            ...page,
-            title: pageData.title || 'Untitled',
-            userId: pageData.userId,
-            username
-          };
         }
-        return { ...page, title: 'Untitled' };
-      } catch (err) {
-        console.error(`Error fetching page data for ${page.id}:`, err);
-        return { ...page, title: 'Untitled' };
       }
     });
 
-    const pagesWithTitles = await Promise.all(pagesWithTitlesPromises);
+    // Batch fetch user data for all unique user IDs
+    const userDataMap = new Map();
+    if (userIds.size > 0) {
+      try {
+        const userDocs = await db.getAll(...Array.from(userIds).map(id => db.collection("users").doc(id)));
+        userDocs.forEach((doc, index) => {
+          if (doc.exists) {
+            const userData = doc.data();
+            const userId = Array.from(userIds)[index];
+            userDataMap.set(userId, userData);
+          }
+        });
+      } catch (userError) {
+        console.warn('Error batch fetching user data:', userError.message);
+        // Continue without user data if there's an error
+      }
+    }
+
+    // Combine the data efficiently
+    const pagesWithTitles = trendingPages.map(page => {
+      const pageData = pageDataMap.get(page.id);
+      if (!pageData) {
+        return null; // Page was private or deleted
+      }
+
+      let username = "Anonymous";
+      if (pageData.userId && userDataMap.has(pageData.userId)) {
+        const userData = userDataMap.get(pageData.userId);
+        username = userData.username || userData.displayName || "Anonymous";
+      }
+
+      return {
+        ...page,
+        title: pageData.title || 'Untitled',
+        userId: pageData.userId,
+        username
+      };
+    }).filter(page => page !== null);
 
     // Filter out null entries (private pages)
     const publicPages = pagesWithTitles.filter(page => page !== null);
 
+    // Cache the results
+    if (!global.trendingCache) {
+      global.trendingCache = {};
+    }
+    global.trendingCache[cacheKey] = {
+      data: publicPages,
+      timestamp: Date.now()
+    };
+
     return NextResponse.json({ trendingPages: publicPages }, { headers });
   } catch (error) {
     console.error("Error getting trending pages:", error);