Feature: Show a feed of posts from your groups (Fixes #362) + mobile UI improvements and bug fixes

[NotThatKindOfDrLiz]

Comprehensive Feature Implementation and Improvements

Core Feature Implementation: Group Posts Feed

1. Group Posts Feed View

   • Implemented a dedicated feed view showing posts from all user-joined groups
   • Created tabbed interface to toggle between "Approved" and "All" posts
   • Added sophisticated post sorting by recency (newest first)
   • Implemented group context display showing which group each post belongs to
   • Built UI elements for post interaction (replies, reactions, zaps)

2. Group Post Filtering

   • Implemented filter system to show only approved posts or all posts
   • Created automatic detection of user's moderation status across groups
   • Added special handling for banned users (filtering their posts)
   • Created post approval indicators with appropriate styling
   • Built handling for pending posts vs. auto-approved posts

3. Real-Time Group Updates

   • Implemented refresh mechanism for posts feed
   • Added loading states with skeleton UI for smooth transitions
   • Created empty state handling for new users with no joined groups
   • Built caching system for faster loading on subsequent visits
   • Implemented error handling for network issues during post fetching

Post Interaction and Engagement

1. Group Post Interaction Suite

   • Implemented reply functionality directly from feed
   • Created emoji reaction system with post-specific state
   • Integrated zap/payment functionality with proper author crediting
   • Added sharing capabilities with rich preview generation
   • Implemented "View in Group" navigation with direct post targeting

2. Rich Content Support

   • Added multi-media support (images, videos, audio)
   • Implemented link preview generation with metadata extraction
   • Created hashtag detection and linking to tag-specific feeds
   • Added support for Nostr-specific identifiers (npub, note, etc.)
   • Implemented media gallery for posts with multiple attachments

3. Social Discoverability Features

   • Added group context information for each post
   • Implemented author profiles with avatar and display name
   • Created clickable elements leading to full group/user pages
   • Added post statistics (reactions, replies, zaps)
   • Implemented verified identifier display (when available)

Mobile and Responsive Enhancements

1. Mobile-First Design

   • Implemented responsive layout that adapts to screen sizes
   • Created compact mobile views with space-efficient UI
   • Added touch-friendly tap targets for all interactive elements
   • Implemented swipe gestures for common actions
   • Designed layouts that prevent overlap of critical UI elements

2. Mobile UI Optimizations

   • Replaced text labels with icons on mobile for space efficiency
   • Added tooltips for icon-only buttons to maintain usability
   • Created responsive spacing system that adapts to available screen real estate
   • Implemented collapsible sections to reduce vertical scrolling
   • Built mobile-specific interaction patterns for common tasks

3. Performance Optimizations for Mobile

   • Implemented lazy loading for images and media content
   • Reduced API calls to preserve bandwidth on mobile connections
   • Added skeleton loading states to improve perceived performance
   • Implemented virtualization for long lists to reduce memory usage
   • Created efficient render cycles to minimize battery impact

UI/UX Improvements and Bug Fixes

1. Layout and Style Refinements

   • Fixed overlap between group titles, badges, and menu buttons
   • Implemented proper text truncation with ellipsis for long names
   • Created consistent spacing throughout the application
   • Added proper visual hierarchy with size and color variations
   • Implemented subtle visual cues for different post states

2. Navigation Enhancements

   • Fixed "View in Group" to properly target and highlight specific posts
   • Implemented scroll behavior for smoother transitions between views
   • Added proper handling of browser history for navigation actions
   • Created breadcrumb-like context indicators for nested content
   • Fixed back/forward navigation with proper state preservation

3. Visual Feedback Improvements

   • Added hover states for clickable elements
   • Implemented loading indicators for asynchronous actions
   • Created success/error feedback for user actions
   • Added highlight effects for newly loaded or targeted content
   • Implemented transition animations for state changes

Error Handling and Edge Cases

1. Robust Error Management

   • Implemented comprehensive error handling for network failures
   • Created fallback UI for missing or invalid content
   • Added retry mechanisms for transient errors
   • Built graceful degradation for unavailable services
   • Implemented user-facing error messages with recovery options

2. Empty and Edge State Handling

   • Created user-friendly empty states for feeds with no content
   • Implemented first-time user experiences with helpful guidance
   • Added loading states that prevent layout shifts
   • Built handling for partial data availability scenarios
   • Implemented recovery paths for interrupted operations

3. Content Fallbacks

   • Enhanced image error handling with retry and format switching
   • Implemented link preview fallbacks for CORS and rate-limit issues
   • Created text-only alternatives for rich media when unavailable
   • Built intelligent content type detection with format-specific handling
   • Added specialized handling for common platforms (YouTube, Twitter, etc.)

Technical Improvements

1. Code Architecture Upgrades

   • Updated package imports to use modern @jsr module system
   • Implemented proper TypeScript typing throughout the codebase
   • Created reusable components for common UI patterns
   • Built proper separation of concerns in component design
   • Implemented consistent state management patterns

2. Performance Engineering

   • Optimized API calls to reduce server load and improve response times
   • Implemented memoization for expensive calculations
   • Created efficient render logic to prevent unnecessary updates
   • Built proper cleanup routines to prevent memory leaks
   • Implemented caching strategies for frequently accessed data

3. Developer Experience Improvements

   • Fixed 50+ TypeScript errors for better code validation
   • Improved error logging with contextual information
   • Created consistent component patterns for easier maintenance
   • Built proper documentation within code for future developers
   • Implemented safer type guards and assertions for cleaner code

4. Accessibility Enhancements

   • Fixed DOM nesting issues affecting screen readers
   • Added proper ARIA attributes for interactive elements
   • Implemented keyboard navigation support for critical actions
   • Created focus management for modal interactions
   • Built high-contrast visual indicators for important state changes

[marykatefain]

@NotThatKindOfDrLiz I think we're blocked on this until we change the event types for following a group (which is a much larger issue with consequences across the whole site), see the convo here: #362

[NotThatKindOfDrLiz]

@NotThatKindOfDrLiz I think we're blocked on this until we change the event types for following a group (which is a much larger issue with consequences across the whole site), see the convo here: #362

Agree. And, we need to solve the Kind 6(66) issue as part of it, see here: #391