Feat/670 671 672 673 UI improvements

[Barbieple-Devstem]

UI/UX Improvements: Dark Mode & Loading States

Closes #670
Closes #671
Closes #672
Closes #673

This PR implements four UI/UX enhancements to improve the user experience across the FlowStar dashboard, batch creation, and webhook management pages.

Summary of Changes

This pull request addresses four GitHub issues with focused improvements to dark mode compatibility, overflow handling, loading state feedback, and
empty state messaging.

🎨 Issue #670: Dark Mode Colors in Batch Create Page

Fixed hardcoded Tailwind color classes in the batch create page that didn't adapt to dark mode:

Changes:

• Replaced bg-red-50 with semantic token bg-destructive/5 dark:bg-destructive/10 for error row highlighting
• Updated valid badge from bg-emerald-100 text-emerald-700 to bg-emerald-500/10 text-emerald-600 dark:text-emerald-400
• Added dark mode support to warning text: text-yellow-600 dark:text-yellow-400

Files Modified:

• app/app/create/batch/page.tsx

Impact: Users now see properly themed colors in both light and dark modes throughout the batch create interface.

---

🏷️ Issue #671: TokenAmount Overflow in Dashboard Stats Card

Fixed TokenAmount display overflow in the dashboard stats card that broke layout at smaller breakpoints:

Changes:

• Added optional truncate prop to TokenAmount component
• When truncated, displays full value in title attribute (tooltip on hover)
• Applied truncation to "Available to withdraw" stat card value
• Gracefully handles large formatted balances without breaking card layout

Files Modified:

• components/ui/token-amount.tsx - Added truncate prop and tooltip functionality
• components/streams/dashboard-stats.tsx - Applied truncation to withdrawable amount display

Impact: Large token amounts no longer overflow the stat cards at smaller screen sizes, improving mobile responsiveness.

---

⏳ Issue #672: Loading States for Route Transitions

Implemented Next.js loading.tsx route-level files for instant loading UI during route transitions:

Changes:
Created 6 new loading indicator files that provide immediate visual feedback during navigation:

• app/app/loading.tsx - Dashboard with DashboardStatsSkeleton and StreamCardSkeleton
• app/app/streams/loading.tsx - Stream list view with StreamCardSkeleton
• app/app/analytics/loading.tsx - Analytics page with ChartSkeleton components
• app/app/settings/loading.tsx - Settings form placeholder skeleton
• app/app/stream/[id]/loading.tsx - Stream detail page skeleton with header and timeline
• app/app/create/loading.tsx - Create stream form skeleton

Files Created:

• app/app/loading.tsx
• app/app/streams/loading.tsx
• app/app/analytics/loading.tsx
• app/app/settings/loading.tsx
• app/app/stream/[id]/loading.tsx
• app/app/create/loading.tsx

Implementation Details:

• Reuses existing skeleton components (DashboardStatsSkeleton, StreamCardSkeleton, ChartSkeleton) for consistency
• Each loading file provides appropriate placeholder content matching the target route's layout
• Follows Next.js App Router conventions for handling asynchronous operations gracefully
• Improves perceived performance by showing immediate feedback during route transitions

Impact: Users experience smoother page transitions with instant loading indicators rather than blank screens.

---

🪝 Issue #673: Empty State for Webhook Settings

Implemented user-friendly empty state when no webhooks are registered:

Changes:

• Added Webhook icon indicator with secondary background
• Displays helpful messaging: "No webhooks registered yet"
• Includes descriptive text guiding users to register webhooks
• CTA button to "Register your first webhook" with smooth scroll anchor
• Follows existing empty-state design patterns used in streams list component
• Added id attribute to registration section for anchor linking

Files Modified:

• components/webhooks/webhook-settings.tsx

Implementation Details:

• Imported Webhook icon from lucide-react
• Conditional rendering: shows empty state when webhooks.length === 0, otherwise shows webhook list
• Styled consistently with app's existing EmptyStreams component pattern
• Improved accessibility and user guidance for new webhook setup

Impact: New users are no longer greeted with a blank screen in the webhooks section; instead receive clear guidance on how to register their first
webhook.

---

Technical Details

Files Changed

• app/app/create/batch/page.tsx - 3 insertions, 3 deletions
• components/ui/token-amount.tsx - 10 insertions, 1 deletion
• components/streams/dashboard-stats.tsx - 1 insertion
• components/webhooks/webhook-settings.tsx - 40 insertions, 11 deletions
• 6 new loading.tsx files - 167 insertions

Total: 10 files affected, 209 insertions (+), 15 deletions (-)

Testing Recommendations

1. Dark Mode: Verify batch create page displays correctly in both light and dark modes
2. Responsive: Test TokenAmount truncation on mobile (sm breakpoint) with large balances
3. Loading States: Navigate between routes and verify loading skeletons display before content
4. Empty Webhooks: Clear all webhooks from localStorage and verify empty state displays
5. Accessibility: Test keyboard navigation and screen reader compatibility

Related Issues

Closes #670
Closes #671
Closes #672
Closes #673

---

[drips-wave]

@Barbieple-Devstem Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits