#62 enh: /webshops

The /webshops UI is too ugly. Modify it to let it be compact but informative following the site's design.

@fszontagh I'm starting work on this issue now! I'll review the current /webshops UI and redesign it to be more compact and informative while following the site's design patterns. I'll examine the existing components and styling to ensure consistency with the rest of the application.

I've analyzed the current /webshops UI. The main issues are:

1. Very wide table with 9 columns making it difficult to read and not compact
2. Too much information crammed into table cells
3. Not following card-based patterns seen in other parts of the app
4. Horizontal scrolling required on smaller screens

My plan:

• Replace the large table with a compact card-based layout
• Each store as a card with organized sections
• Use badge groups and icon indicators for compact information display
• Keep all functionality (sync, disconnect, configure, etc.)
• Make it responsive and visually consistent with the rest of the app
• Maintain the stats cards at the top
• Keep the Quick Setup Wizard section

Starting implementation now...

✅ Implementation Complete!

I've successfully redesigned the /webshops UI with a much more compact and informative layout. Here's what changed:

🎨 Visual Improvements

Before:

• Wide table with 9 columns requiring horizontal scrolling
• Information cramped into table cells
• Difficult to scan and read
• Not responsive-friendly

After:

• Card-based grid layout (1 col mobile → 2 cols tablet → 3 cols desktop)
• Organized sections within each card for better information hierarchy
• Compact design with all information easily accessible
• Visual grouping of related data (phone, sync status, data access, auto sync)
• Hover effects on cards for better interactivity
• Smaller, grouped action buttons in a 2x2 grid + separate disconnect button

📋 Features Maintained

All functionality has been preserved:

• ✅ Manual sync with loading state
• ✅ AI configuration navigation
• ✅ Phone number management
• ✅ Data access permissions configuration
• ✅ Background sync toggle
• ✅ Store disconnection
• ✅ Platform badges and version info
• ✅ Sync status with detailed stats
• ✅ Real-time sync polling

🎯 Design Consistency

The new design follows the site's established patterns:

• Dark slate background (bg-slate-800)
• Cyan accent color for primary actions
• Consistent badge styling
• Card-based layouts (like other pages)
• Proper spacing and typography
• Responsive grid system

📦 Technical Details

• Replaced <table> with responsive grid layout
• Used grid-cols-1 md:grid-cols-2 lg:grid-cols-3 for responsive behavior
• Organized information into logical sections with visual separation
• Maintained all event handlers and state management
• No breaking changes to functionality

Commit: ba31785 - feat: redesign /webshops UI with compact card-based layout #62

The changes are now live and ready for testing! 🚀