feat: Few improvements specially in the Threads post display, Notifications page and on token #25

Merged

rdenadai merged 1 commit from rdenadai/improvements-v0.0.3 into main

2025-10-31 22:17:55 +00:00

rdenadai commented

2025-10-31 22:09:32 +00:00

Owner

🎨 Improvements v0.0.3

Overview

This PR introduces several UI/UX enhancements and important authentication improvements focused on better post display, notifications management, and token lifecycle handling.

✨ Key Features

🔐 Enhanced Authentication & Token Management

Automatic Token Refresh: Implemented proactive token refresh system that checks validity every 5 minutes
Smart Refresh Logic: Tokens refresh when less than 24 minutes remain (80% of token lifetime)
PWA-Ready: Added event listeners for visibility changes, online/offline status, and focus events to maintain session across app lifecycle
Session Restoration: Enhanced session check on app startup with immediate token validation and refresh

🔔 Notifications Improvements

Infinite Scroll: Added automatic loading of more notifications when scrolling near bottom (500px threshold)
Better Grouping: Refactored notification grouping logic into reusable groupNotifications() function
Extended Support: Added support for quote and quote-via-repost notification types
Enhanced Navigation: Improved URL parsing for all notification types with proper fallback handling
Timestamp Tracking: Group notifications now track the most recent timestamp

🎯 Post Display Enhancements

Social Card Preview: Moved social card images to the top of external element cards for better visual hierarchy
Loading States: Added visual loading indicator for social card previews
Image Sizing: Limited image height to max-h-[30em] in ImageList for consistent layout
Thread UI: Enhanced thread display with visual connector line between posts (styled with capivara-brown/50)
Quote Post Support: Added proper rendering for quoted/embedded posts in threads
Media Handling: Improved support for various embed types (images, external links, media combinations)

🎨 UI/UX Polish

Border Styling: Updated external element cards with border-capivara-brown/30 for cohesive branding
Code Formatting: Standardized code style across components (single quotes, proper spacing)
Comment Improvements: Better documentation in Portuguese for notification grouping logic

📝 Technical Changes

Modified Files:

auth.js - Token lifecycle management and PWA event listeners
index.js - Enhanced token validation before route navigation
NotificationsList.vue - Infinite scroll and improved grouping
index.vue - Added quote notification support
ExternalElement.vue - Reorganized layout with image on top
ImageList.vue - Added max-height constraint
PostView.vue - Better embed handling
RedirectPostView.vue - Thread UI improvements
FollowersView.vue - Minor cursor handling fix

## 🎨 Improvements v0.0.3 ### Overview This PR introduces several UI/UX enhancements and important authentication improvements focused on better post display, notifications management, and token lifecycle handling. ### ✨ Key Features #### 🔐 Enhanced Authentication & Token Management - **Automatic Token Refresh**: Implemented proactive token refresh system that checks validity every 5 minutes - **Smart Refresh Logic**: Tokens refresh when less than 24 minutes remain (80% of token lifetime) - **PWA-Ready**: Added event listeners for visibility changes, online/offline status, and focus events to maintain session across app lifecycle - **Session Restoration**: Enhanced session check on app startup with immediate token validation and refresh #### 🔔 Notifications Improvements - **Infinite Scroll**: Added automatic loading of more notifications when scrolling near bottom (500px threshold) - **Better Grouping**: Refactored notification grouping logic into reusable `groupNotifications()` function - **Extended Support**: Added support for `quote` and `quote-via-repost` notification types - **Enhanced Navigation**: Improved URL parsing for all notification types with proper fallback handling - **Timestamp Tracking**: Group notifications now track the most recent timestamp #### 🎯 Post Display Enhancements - **Social Card Preview**: Moved social card images to the top of external element cards for better visual hierarchy - **Loading States**: Added visual loading indicator for social card previews - **Image Sizing**: Limited image height to `max-h-[30em]` in ImageList for consistent layout - **Thread UI**: Enhanced thread display with visual connector line between posts (styled with `capivara-brown/50`) - **Quote Post Support**: Added proper rendering for quoted/embedded posts in threads - **Media Handling**: Improved support for various embed types (images, external links, media combinations) #### 🎨 UI/UX Polish - **Border Styling**: Updated external element cards with `border-capivara-brown/30` for cohesive branding - **Code Formatting**: Standardized code style across components (single quotes, proper spacing) - **Comment Improvements**: Better documentation in Portuguese for notification grouping logic ### 📝 Technical Changes **Modified Files:** - auth.js - Token lifecycle management and PWA event listeners - index.js - Enhanced token validation before route navigation - NotificationsList.vue - Infinite scroll and improved grouping - index.vue - Added quote notification support - ExternalElement.vue - Reorganized layout with image on top - ImageList.vue - Added max-height constraint - PostView.vue - Better embed handling - RedirectPostView.vue - Thread UI improvements - FollowersView.vue - Minor cursor handling fix

rdenadai added 1 commit

2025-10-31 22:09:33 +00:00