# Hopenity App - Complete Screens Documentation

## Overview
Complete list of all screens implemented in the Hopenity Android application with descriptions, features, and usage.

---

## 1. Authentication Screens (AuthScreen.kt)

### Features
- Login form with email/password validation
- Sign-up form with profile creation
- Forgot password recovery
- Social login integration (Facebook, Google)
- Phone number verification
- One-time password (OTP) verification

### Navigation
- Success → HomeScreen
- Sign-up toggle
- Password recovery link

---

## 2. Home Screen (HomeScreen.kt)

### Features
- Feed with posts from followed users
- Stories carousel at the top
- Real-time like/comment counts
- Share and bookmark options
- Infinite scroll pagination
- Pull-to-refresh functionality

### Components
- Header with app logo and search
- Post card with user info, caption, media, engagement metrics
- Post actions (like, comment, share, save)
- Bottom navigation bar

### Navigation
- Create post button → CreatePostScreen
- Post click → PostDetailScreen
- User avatar → UserProfileScreen
- Comments icon → CommentsScreen

---

## 3. Explore Screen (ExploreScreen.kt)

### Features
- Grid-based post discovery
- Search and filter functionality
- Categorized tabs (For You, Following, Popular)
- Trending content algorithm
- Quick engagement view on hover

### Layout
- 2-column grid layout
- Post preview cards with overlay stats
- Tab switcher for content filtering

### Navigation
- Post card click → PostDetailScreen
- User profile → UserProfileScreen

---

## 4. Search Screen (SearchScreen.kt)

### Features
- Search bar with real-time suggestions
- Recent searches history
- User search with quick follow button
- Post search results
- Hashtag search support
- Advanced search filters

### Sections
- Search input with clear button
- Recent searches list
- User results with follow action
- Post results with author info

### Navigation
- User result → UserProfileScreen
- Post result → PostDetailScreen
- Remove history option

---

## 5. Create Post Screen (CreatePostScreen.kt)

### Features
- Caption text input (multi-line)
- Media selection (image, video)
- Category selection
- Location tagging
- Hashtag suggestion
- Draft saving
- Post privacy settings

### Form Fields
- User info display
- Caption textarea (120 character limit)
- Media preview
- Category chips
- Media upload buttons (Image, Video, Location)

### Navigation
- Close → previous screen
- Post created → HomeScreen

---

## 6. Chat Screen (ChatScreen.kt)

### Features
- List of active conversations
- Last message preview
- Unread message count badges
- Online/offline status indicators
- Search conversations
- New chat creation

### Chat Item Info
- User avatar
- User name and last message
- Message timestamp
- Unread count (if any)
- Online status dot

### Navigation
- Chat item → ChatDetailScreen
- Add button → new conversation

---

## 7. Chat Detail Screen (ChatDetailScreen.kt)

### Features
- Full message history
- Real-time message updates
- Message input with media attachment
- User profile quick view
- Call and video call buttons
- Message reactions
- Delete message option

### Components
- Header with user info and call buttons
- Message list (left/right aligned based on sender)
- Message timestamp display
- Input field with attachment and send buttons

### Navigation
- Back button → ChatScreen
- User header → UserProfileScreen

---

## 8. Notifications Screen (NotificationScreen.kt)

### Features
- Categorized notifications (All, Likes, Comments, Follows)
- Read/unread status indicators
- Notification type icons
- Timestamp display
- Action buttons

### Notification Types
- Like notification
- Follow notification
- Comment notification
- Mention notification
- Post notification

### Navigation
- Notification click → relevant detail screen
- User avatar → UserProfileScreen

---

## 9. Comments Screen (CommentsScreen.kt)

### Features
- Nested comment threads
- Reply to specific comments
- Like/dislike comments
- Edit own comments
- Delete own comments
- Comment author information
- Real-time comment updates

### Comment Display
- User avatar and name
- Comment text with timestamp
- Like count
- Reply count and expand option
- Comment input field at bottom

### Navigation
- User click → UserProfileScreen
- Back button → previous screen

---

## 10. Post Detail Screen (PostDetailScreen.kt)

### Features
- Full post display with media
- User information and follow button
- Engagement metrics (likes, comments, shares)
- Post timestamp
- Action buttons (like, comment, share, save)
- Related posts suggestion

### Components
- Header with user info and options menu
- Full post image/video
- Post caption and description
- Engagement stats display
- Action buttons row

### Navigation
- User info → UserProfileScreen
- Comment button → CommentsScreen
- Like button → updates engagement metrics
- Share button → share options

---

## 11. User Profile Screen (UserProfileScreen.kt)

### Features
- User profile header with avatar
- Bio and profile information
- Follow/Unfollow button
- Follower/Following counts
- Posts grid display
- Saved posts tab
- Tagged posts tab

### Profile Info
- User avatar (large)
- Username and handle
- Bio text
- Stats: Posts, Followers, Following
- Follow/Message buttons

### Tabs
- Posts (3-column grid)
- Saved (user's bookmarked posts)
- Tagged (posts user is tagged in)

### Navigation
- Post grid item → PostDetailScreen
- Followers number → FollowersScreen
- Following number → FollowingScreen
- Edit (if own profile) → EditProfileScreen

---

## 12. Edit Profile Screen (EditProfileScreen.kt)

### Features
- Profile picture upload/change
- Username editing
- Bio/description editing
- Website link editing
- Email and phone editing
- Location editing
- Privacy settings toggle
- Account deletion option

### Form Sections
- Profile picture with change button
- Text fields for each profile info
- Privacy account toggle
- Notification preferences toggle
- Danger zone with account deletion

### Navigation
- Save → ProfileScreen
- Close → previous screen

---

## 13. Followers Screen (FollowersScreen.kt)

### Features
- List of followers/following
- User search filter
- Quick follow/unfollow action
- "Follows you" indicator
- User bio preview
- Mutual follower indicator

### User Item
- User avatar
- Name and username
- Bio/description
- Follow/Following button
- Mutual follower badge

### Navigation
- User item → UserProfileScreen
- Back → previous screen

---

## 14. Stories Screen (StoriesScreen.kt)

### Features
- Stories carousel with user rings
- "Create Story" button (own story)
- Viewed/unviewed indicators
- Quick story preview
- Story expiration info

### Story Rings
- Own story: Add button
- Others' stories: Color ring (gray if viewed, gradient if new)
- User name below ring
- Click to view story

### Navigation
- Create story → Story creation
- Story ring → StoryViewer

---

## 15. Story Viewer Screen (StoryViewer)

### Features
- Full-screen story display
- Progress bar for story duration
- Auto-advance to next story
- Reply to story option
- Story reactions/emojis
- Share story option
- Story info (username, timestamp)

### Display
- Full-screen media
- Progress bar at top
- User info header
- Reply input at bottom

### Navigation
- Close button → StoryScreen
- Auto-advance → next story
- Story duration expires → next story

---

## 16. Reel Screen (ReelScreen.kt)

### Features
- Full-screen vertical video feed
- Swipe to next reel
- Double-tap to like
- Sound on/off toggle
- Video duration display
- User profile quick access
- Comments drawer
- Share options

### Video Display
- Full-screen vertical video
- Like count
- Comment count
- Share count
- User info overlay

### Navigation
- User info → UserProfileScreen
- Comments icon → Comments drawer
- Share icon → share options

---

## 17. Profile Screen (ProfileScreen.kt)

### Features
- Own profile display
- Stats and milestones
- Profile customization
- Edit profile button
- Settings access
- Logout option

### Profile Display
- Large avatar
- Username and handle
- Bio and website
- Stats (Posts, Followers, Following)
- Edit Profile, Settings buttons

### Navigation
- Edit Profile → EditProfileScreen
- Settings → SettingsScreen
- Stats click → corresponding list

---

## 18. Settings Screen (SettingsScreen.kt)

### Features
- Account settings
- Privacy settings
- Notification preferences
- Blocked users list
- Data and privacy policy
- App version info
- Logout functionality

### Settings Sections
- Account management
- Privacy controls
- Notification toggles
- Blocked users
- About & Support
- Logout button

### Navigation
- Back → ProfileScreen
- Logout → AuthScreen

---

## Navigation Graph Structure

```
Auth → Home (main app)
    ├── Explore
    ├── Search
    ├── CreatePost
    ├── Chat
    │   └── ChatDetail
    ├── Notifications
    ├── Profile
    │   ├── EditProfile
    │   ├── Settings
    │   ├── FollowersScreen
    │   └── FollowingScreen
    ├── PostDetail
    │   ├── UserProfile
    │   │   ├── EditProfile
    │   │   ├── FollowersScreen
    │   │   └── FollowingScreen
    │   └── CommentsScreen
    ├── Stories
    │   └── StoryViewer
    └── Reels
```

---

## Screen Specifications

| Screen | Status | Viewmodel | API | Database |
|--------|--------|-----------|-----|----------|
| Auth | ✓ Complete | AuthViewModel | POST /auth/login | users |
| Home | ✓ Complete | PostViewModel | GET /posts/feed | posts |
| Explore | ✓ Complete | PostViewModel | GET /posts/explore | posts |
| Search | ✓ Complete | UserViewModel | GET /search | users/posts |
| CreatePost | ✓ Complete | PostViewModel | POST /posts | posts |
| Chat | ✓ Complete | ChatViewModel | GET /messages | messages |
| ChatDetail | ✓ Complete | ChatViewModel | GET/POST /messages | messages |
| Notifications | ✓ Complete | NotificationViewModel | GET /notifications | notifications |
| Comments | ✓ Complete | CommentViewModel | GET/POST /comments | comments |
| PostDetail | ✓ Complete | PostViewModel | GET /posts/{id} | posts |
| UserProfile | ✓ Complete | UserViewModel | GET /users/{id} | users |
| EditProfile | ✓ Complete | UserViewModel | PUT /users/profile | users |
| Followers | ✓ Complete | UserViewModel | GET /users/{id}/followers | followers |
| Stories | ✓ Complete | StoryViewModel | GET /stories | stories |
| StoryViewer | ✓ Complete | StoryViewModel | GET /stories/{id} | stories |
| Reels | ✓ Complete | ReelViewModel | GET /reels | reels |
| Profile | ✓ Complete | UserViewModel | GET /users/me | users |
| Settings | ✓ Complete | SettingsViewModel | GET/PUT /settings | user_settings |

---

## Key Features Implemented

✓ Authentication (Login/SignUp)
✓ Post Creation & Sharing
✓ Real-time Feed
✓ Search & Discovery
✓ Direct Messaging
✓ Notifications System
✓ Comments & Threads
✓ Stories & Reels
✓ User Profiles
✓ Follow/Unfollow System
✓ Media Upload (Cloudinary)
✓ Theme Customization
✓ Settings Management

---

## Future Screens to Add

- [ ] Live Streaming Screen
- [ ] Shopping/Products Screen
- [ ] Groups Management Screen
- [ ] Trending/Hashtags Screen
- [ ] Payment/Subscription Screen
- [ ] Moderation/Reporting Screen
- [ ] Analytics Dashboard (for creators)
- [ ] Ads Management Screen
- [ ] User Verification Screen

---

## Common Components Used

- CircleShape (profile avatars)
- RoundedCornerShape (cards, buttons)
- LazyColumn (scrollable lists)
- LazyRow (horizontal scrolls)
- LazyVerticalGrid (grid layouts)
- AsyncImage (media loading from Cloudinary)
- Button, IconButton, OutlinedButton
- Switch, Checkbox, RadioButton
- TextField, OutlinedTextField
- Row, Column (layout)
- Box (overlay containers)

---

## Styling System

- **Colors**: AccentMagenta, PrimaryBlue, background, surface, etc.
- **Typography**: FontWeight (Bold, SemiBold, Normal), font sizes (11-28sp)
- **Spacing**: 4dp, 8dp, 12dp, 16dp, 24dp (standard scale)
- **Shapes**: 12dp, 16dp, 20dp border radius
- **Icons**: Material icons (size: 16-36dp)
- **Elevation**: Surface colors for depth

---

## Performance Considerations

- Pagination on feed screens
- Image lazy loading via Cloudinary
- State management with ViewModel
- Coroutine-based async operations
- Efficient list rendering with Compose
- Caching of user and post data
- Optimized navigation transitions

---

## Testing Recommendations

1. **Unit Tests**: ViewModels, Use Cases, Repositories
2. **UI Tests**: Screen navigation, form inputs, interactions
3. **Integration Tests**: API calls, database operations
4. **Performance Tests**: Large list rendering, image loading
5. **E2E Tests**: Complete user flows (auth → post → share → comment)

---

End of Documentation