## Welcome Screen ### Overview The initial landing screen that greets new users, establishes the app's brand identity, and prompts them to begin the account creation or login process. ### UI Elements - **Header Text:** "Welcome to Lemon8" - **Slogan:** "Fresh discoveries everyday" - **Primary Action Button:** "Get started" - **Legal Disclaimer:** "By tapping Get started, you agree to the %1$s and acknowledge that you have read the %2$s on how we collect and use your data." (with clickable placeholders for Terms of Service and Privacy Policy) - **Background/Visuals:** Clean, branded background imagery or gradient consistent with Lemon8's aesthetic. ### Interactions - Tapping "Get started" advances the user to the Login & Sign Up screen. - Tapping the Terms of Service or Privacy Policy links opens a full-screen web view or modal containing the respective legal documents. - The screen is static until user interaction; no auto-advance timers are present. ### Sample Data - Header: Welcome to Lemon8 - Slogan: Fresh discoveries everyday - Button: Get started - Legal Text: By tapping Get started, you agree to the Terms of Service and acknowledge that you have read the Privacy Policy on how we collect and use your data. --- ## Login & Sign Up Screen ### Overview The authentication hub where users can create a new account or log into an existing one using supported third-party identity providers. ### UI Elements - **Title:** "Create or log in to a TikTok account" - **Social Login Buttons:** "Continue with Google", "Continue with Apple" - **Divider Text:** "or" - **Utility Toggle:** "Save login info" (checkbox or switch) - **Status Indicator:** "Last login" (displays timestamp or provider used for returning users) - **Footer Links:** Standard support/help links for account recovery. ### Interactions - Tapping a provider button initiates the respective OAuth flow in a secure browser or native dialog. - Toggling "Save login info" enables or disables local credential caching for future sessions. - Successful authentication automatically transitions the user to the Personalization & Interests Setup screen. - Failed authentication displays an inline error message (e.g., "Internet error. Try again later.") without leaving the screen. ### Sample Data - Title: Create or log in to a TikTok account - Buttons: Continue with Google, Continue with Apple - Toggle: Save login info (Checked) - Status: Last login: 2 days ago via Google --- ## Personalization & Interests Setup ### Overview A multi-step configuration screen that collects demographic and preference data to algorithmically tailor the user's initial content feed. ### UI Elements - **Header:** "Tell us more about you for a feed you'll love" - **Interests Section:** "Pick your interests" (scrollable grid of selectable topic tags) - **Pronoun Section:** "Select your pronoun (Hidden from everyone)" with radio-style options: "He", "She", "They" - **Disclaimer Text:** "(Hidden from everyone)" displayed beneath the pronoun selector - **Age & Gender Pickers:** Dropdown or wheel selectors for birth year/month and gender identity (implied by navigation routes) - **Primary Action Button:** "Done" ### Interactions - Tapping an interest tag toggles its selected state (highlighted border/background). - Selecting a pronoun updates the active radio state; the selection is marked as private. - Adjusting age/gender updates the picker values in real-time. - Tapping "Done" validates that at least one interest is selected, saves preferences to the user profile, and navigates to the Account Privacy Configuration screen. ### Sample Data - Interests Selected: Streetwear, Home Decor, Skincare Routine, Vegan Recipes, DIY Crafts - Pronoun: They - Age: 24 - Gender: Non-binary --- ## Account Privacy Configuration ### Overview A decision screen that prompts users to set their default post visibility before entering the main application experience. ### UI Elements - **Header:** "Manage account privacy" - **Body Text:** "Choose who can see your posts. You can change it in Settings anytime." - **Option 1:** "Public account" with description "Anyone can see your posts." - **Option 2:** "Private account" with description "Only your followers can see your posts." - **Skip Button:** "Set up later" - **Confirmation Modal:** Appears if the user attempts to change the default later, containing "OK" and "Cancel" buttons. ### Interactions - Tapping either account type option selects it and highlights the choice. - Tapping "Set up later" bypasses the selection and proceeds to the Social Sync screen. - If a selection is made, the app records the preference and automatically advances. - The confirmation modal appears only if the user tries to modify this setting post-onboarding; tapping "OK" applies the change, "Cancel" dismisses it. ### Sample Data - Selected Option: Public account - Description: Anyone can see your posts. - Skip Action: Set up later --- ## Social Sync & Follow Suggestions ### Overview An optional onboarding step that surfaces accounts the user already follows on connected platforms, allowing them to quickly build their initial Lemon8 network. ### UI Elements - **Header:** "Follow the same accounts you follow on TikTok" - **Subtitle:** "These accounts may not have joined Lemon8 yet. You’ll automatically follow them when they join." - **User List:** Vertical scrollable list of profile cards, each containing: - Avatar image - Username - Status badge ("Following", "Pending", or "Requested") - Action button ("Follow") - **Bulk Action Button:** "Follow all" (fixed at bottom or top of list) - **Empty State Text:** "Accounts you may want to follow that haven't joined Lemon8 yet will appear here." ### Interactions - Tapping "Follow" on an individual card changes the button state to "Pending" or "Following" and triggers a toast: "You will automatically follow @username when they join Lemon8". - Tapping "Follow all" queues follow requests for all visible accounts and updates their statuses to "Pending". - Scrolling loads additional suggestions via infinite scroll. - Tapping the header or a "Next" arrow (if present) skips to the main feed. ### Sample Data - User 1: @travelwithsarah (Status: Following) - User 2: @diy_crafts_daily (Status: Pending) - User 3: @minimalist_home (Status: Requested) - Toast Message: You will automatically follow @diy_crafts_daily when they join Lemon8 --- ## Third-Party Account Authorization ### Overview A permission consent screen that appears when linking external social accounts to the Lemon8 profile, detailing exactly what data will be shared. ### UI Elements - **Header:** "Authorize TikTok to link your Lemon8 account" - **App Identifier:** "{app} would like to:" (dynamically populated with the requesting platform name) - **Permission List:** - "Access your profile info, namely your avatar and name" - "Access your Lemon8 posts" - **Primary Action Button:** "Authorize" - **Secondary Action Button:** "Cancel" - **Legal Footer:** "By continuing, you agree with Lemon8’s Terms of Service and Privacy Policy." - **Revocation Notice:** "You can remove permissions anytime on the Lemon8 app in Settings and privacy > Account > Manage app permissions." ### Interactions - Tapping "Authorize" grants the requested scopes, links the external account, and returns the user to their profile or feed with a success toast ("Linked"). - Tapping "Cancel" aborts the linking process and returns to the previous screen. - Tapping "Terms of Service" or "Privacy Policy" opens the respective legal documents in a new view. - If authorization fails, an error toast appears: "Couldn’t link. Try again later." ### Sample Data - App: TikTok - Permissions: Access your profile info, namely your avatar and name / Access your Lemon8 posts - Buttons: Authorize, Cancel - Footer: By continuing, you agree with Lemon8’s Terms of Service and Privacy Policy. --- ## Splash & Loading Screen ### Overview The initial screen displayed when launching the app, showing branding, loading animations, and optional promotional ads before transitioning to the main feed or onboarding flow. ### UI Elements - Full-screen background featuring either a Lottie animation or a static brand image. - App slogan displayed prominently: `"Fresh discoveries every day"` - Optional full-screen splash advertisement with a countdown timer and a close/skip button. - Loading indicator (dual-ball animation or spinner) shown when fetching initial configuration or user data. - Transparent status bar overlay for an immersive look. ### Interactions - Automatically transitions to the next screen after a short duration (typically 2-3 seconds) or when the splash ad completes. - Tapping the splash ad opens the advertiser's landing page or app store listing. - If the user is launching the app for the first time, proceeds to the Onboarding & Interest Selection screen. Otherwise, navigates directly to the Main Feed. - Pulling down or tapping outside the ad area does not interrupt the loading sequence. ### Sample Data - Brand animation: Lemon8 logo fading in with a soft gradient background. - Ad: "Summer Skincare Essentials" with a 3-second countdown and a "Skip" button in the top-right corner. - Loading state: Subtle pulsing dots while user preferences and feed cache are initialized. --- ## Onboarding & Interest Selection ### Overview A multi-step setup flow for new users to configure their account, select content preferences, and choose privacy settings to personalize their home feed. ### UI Elements - Welcome header: `"Welcome to Lemon8"` - Primary action button: `"Get started"` - Legal disclaimer: `"By tapping Get started, you agree to the %1$s and acknowledge that you have read the %2$s on how we collect and use your data."` (with links to Terms of Service and Privacy Policy) - Step indicators for Age, Gender, Pronouns, and Interests. - Interest selection grid with selectable chips/tags. - Pronoun selector with options: `"He"`, `"She"`, `"They"` and a disclaimer: `"(Hidden from everyone)"` - Account privacy toggle with options: `"Public account"` (`"Anyone can see your posts."`) and `"Private account"` (`"Only your followers can see your posts."`) - Confirmation button: `"Done"` ### Interactions - Tapping `"Get started"` advances to the interest and preference selection steps. - Tapping interest chips toggles their selected state (highlighted when active). - Selecting a pronoun updates the user's profile metadata without public visibility. - Toggling account privacy shows a confirmation modal explaining the default behavior. - Tapping `"Done"` saves all preferences, triggers feed personalization, and navigates to the Main Feed. - Back navigation is disabled during the final step to ensure completion. ### Sample Data - Interests: `"Fashion"`, `"Home Decor"`, `"Travel"`, `"Food & Drink"`, `"Fitness"`, `"Beauty"`, `"Photography"` - Pronoun: `"She/Her"` - Privacy: `"Public account"` selected by default. --- ## Main Feed (Home) ### Overview The primary browsing interface displaying a vertically scrollable stream of photo and video posts, organized by category tabs, with integrated promotional banners and challenge cards. ### UI Elements - Top navigation bar with horizontally scrollable category tabs (e.g., `"For You"`, `"Following"`, `"Fizz"`). - Feed list containing post cards. Each card displays: - Cover image or video thumbnail - Post title or caption preview - Author avatar and username - Engagement metrics (likes, comments, saves) - Promotional banner at the top: `"Activities"` with a `"View all"` button and a `"NEW"` tag. - Empty state for the Following tab: `"Follow the same people you follow on TikTok"` with a `"Follow all"` button and descriptive text: `"For those who aren't on Lemon8 yet, follow them now to stay connected when they join."` - Pull-to-refresh indicator at the top of the list. - Bottom navigation bar with icons for Home, Discover, Create (+), Inbox, and Profile. ### Interactions - Tapping a category tab instantly switches the feed content and updates the active tab indicator. - Tapping a post card opens the Content Detail View. - Pulling down from the top triggers a feed refresh and shows a loading spinner. - Tapping `"View all"` on the Activities banner opens the Campaign Center. - Tapping `"Follow all"` syncs the user's TikTok following list and shows pending/following states. - Scrolling vertically loads more posts automatically (infinite scroll). - Tapping the Create (+) button opens the camera/editor flow. ### Sample Data - Active Tab: `"For You"` - Post Card 1: `"10 Minimalist Living Room Ideas"` by @cozy_spaces, 14.2K likes, 320 comments. - Post Card 2: `"My Morning Coffee Routine"` by @brew_daily, 8.9K likes, 156 comments. - Banner: `"Active posting event"` with `"NEW"` badge. --- ## Content Detail View ### Overview An immersive, full-screen interface for consuming a single post, supporting photo galleries, long-form articles, or video playback with interactive engagement tools. ### UI Elements - Top app bar with a back arrow, share icon, and more options menu. - Main content area: - Photo mode: Swipeable image carousel with pagination dots. - Video mode: Full-screen auto-playing video with drag-to-seek guide. - Article mode: Scrollable rich text with embedded images and formatting. - Author info bar: Avatar, username, follow button, and post timestamp. - Action bar: Like (heart), Comment (speech bubble), Save/Bookmark, Share. - Comment preview section showing top comments with a `"View all"` prompt. - Related posts carousel at the bottom for continued discovery. ### Interactions - Swiping left/right navigates between images in a gallery post. - Tapping the Like button toggles the heart animation and increments the counter. - Tapping the Comment icon opens a bottom sheet with the full comment thread and input field. - Tapping Save adds the post to the user's collection and shows a confirmation toast: `"Added to board"` - Tapping the author's avatar or username navigates to their Profile screen. - Back button or swipe-down gesture returns to the previous feed position. - Dragging the video progress bar allows manual seeking. ### Sample Data - Title: `"Weekend Getaway: Coastal Cabin Vibes"` - Media: 6 high-resolution photos of interior decor, landscape, and food. - Author: @wanderlust_diaries - Engagement: 22.1K likes, 845 comments, 3.4K saves. - Top Comment: `"The lighting in the third photo is absolutely stunning! 😍"` --- ## Diary Challenge Card ### Overview An interactive promotional component embedded in the feed or profile that encourages users to participate in daily posting challenges with progress tracking and rewards. ### UI Elements - Two visual states: `"Not Started"` and `"Started"` - Not Started State: - Challenge title image and description text. - Primary action button: `"Start Challenge"` - Decorative illustration on the right side. - `"More"` arrow icon to expand details. - Started State: - Challenge title and description. - Horizontal scrollable list of daily post cards. Each day card shows: - Day number (e.g., `"Day 1"`) - Post count for that day - Checkmark icon for completed days - Plus icon for days without posts - Fixed progress card at the bottom-right showing current day/total days. - Reward image (unlocked upon completion). - Bottom indicator dot for scroll position. ### Interactions - Tapping `"Start Challenge"` initializes tracking and switches the card to the Started state. - Tapping a day card with a checkmark opens that day's published post. - Tapping a day card with a plus icon opens the camera/editor pre-filled with the challenge template. - Tapping `"More"` expands a modal with full challenge rules, timeline, and reward details. - Horizontal scrolling reveals all days in the challenge sequence. - Completing all days triggers a success animation and unlocks the reward image. ### Sample Data - Challenge Title: `"7-Day Morning Routine"` - Description: `"Share your daily moments and build a consistent posting habit."` - Progress: `"Day 3/7"` - Day Cards: Day 1 (✓, 1 post), Day 2 (✓, 2 posts), Day 3 (+, 0 posts), Day 4 (+, 0 posts)... - Reward: `"Exclusive Creator Badge"` --- ## Video Viewer ### Overview A full-screen, immersive playback interface where users watch video posts, view creator details and captions, and interact with the content through likes, comments, shares, and saves. ### UI Elements - **Video Canvas:** Occupies the entire screen. Renders the video content with adaptive aspect ratio scaling. Displays a centered loading spinner while the stream buffers. - **Top Navigation Overlay:** Transparent bar at the top of the screen. Contains a back/close arrow on the left to exit the viewer. The system status bar is hidden or rendered transparent for full immersion. - **Bottom Content Overlay:** Semi-transparent gradient overlay anchored to the bottom-left. - **Creator Info:** Circular profile picture followed by the creator's display name. Tapping either navigates to the creator's profile. - **Title & Description:** Displays the video title (if provided) and the full caption text. Long descriptions are truncated with a "See more" expansion toggle. - **Duration Indicator:** Shows current playback position versus total length (e.g., `0:12 / 1:30`). - **Right-Side Action Panel:** Vertical stack of interactive icons aligned to the right edge. - **Like/Heart:** Toggles the liked state with a fill animation. - **Comment:** Opens a bottom sheet containing the comment thread and a text input field pre-filled with `Add comment…`. - **Share:** Opens a system or in-app sharing menu. - **Save/Bookmark:** Adds the video to a user collection or board. - **Playback Controls:** - **Center Play/Pause:** Large icon that briefly appears when tapping the video canvas. - **Progress/Seek Bar:** Thin, draggable track at the very bottom of the screen. Shows buffered and played segments. - **Mute/Unmute Toggle:** Speaker icon indicating current audio state. Videos may enter with audio muted based on user preferences or content settings. - **State Indicators:** - **Buffering:** Circular progress animation centered on the canvas when network speed drops. - **Muted Badge:** Small visual cue (e.g., "Muted" text or crossed-out speaker) appears briefly when audio is disabled. ### Interactions - **Tap Video Canvas:** Toggles play/pause and shows or hides the top, bottom, and side overlays. - **Swipe Up/Down:** Navigates to the next or previous video in the feed sequence. - **Tap Back Arrow:** Closes the viewer and returns to the originating feed, profile, or search screen. - **Tap Creator Name/Avatar:** Opens the creator's public profile page. - **Tap Comment Icon:** Slides up a comment sheet. Users can scroll through existing comments or type in the `Add comment…` field to post a new comment. - **Drag Progress Bar:** Scrubs the video to the selected timestamp. Playback pauses during the drag gesture and automatically resumes when released. - **Tap Mute Icon:** Toggles audio on or off. The state persists for the current viewing session. - **Tap Action Icons:** Triggers immediate visual feedback (e.g., heart pop animation, bookmark checkmark) and syncs the action with the server in the background. - **Long-Press Canvas:** Pauses playback and may trigger a context menu for reporting or saving the video frame. ### Sample Data - **Title:** `Morning Routine for Productive Days ☕` - **Description:** `Starting my day at 6 AM with journaling, a quick workout, and matcha. What’s your go-to morning habit? #MorningRoutine #Productivity #SelfCare` - **Creator:** `LifestyleWithMia` - **Duration:** `2:15` - **Mute Status:** Muted by default on entry - **Comments Preview:** `Love this routine! 😍`, `What journal do you use?`, `Trying this tomorrow!` --- ## Camera Capture Screen ### Overview The entry point for creating visual content, providing a full-screen camera preview with real-time filter application, media switching, and permission handling for photo and video capture. ### UI Elements - **Camera Preview**: Full-screen live viewfinder. - **Permission Dialog**: Appears on first launch with the title `"Lemon8" Would Like to Access the Camera` and description `Allow Lemon8 to access camera to take photos?`. Contains two buttons: `ALLOW` and `DENY`. - **Filter Carousel**: Horizontal scrollable list at the bottom showing available filters. Default options include `Default` and `Original`. - **Capture Controls**: Large circular shutter button in the center-bottom, gallery thumbnail on the left, and camera switch/flash toggles on the right. - **Exit/Back Button**: Top-left navigation arrow to leave the camera. ### Interactions - Tapping `ALLOW` grants camera access and initializes the preview. Tapping `DENY` closes the dialog and shows a fallback state. - Swiping left/right on the filter carousel applies different visual effects to the live preview. - Tapping the shutter button captures a photo or starts/stops video recording. - Tapping the gallery thumbnail opens the device media picker to import existing content. - Tapping the back button triggers a confirmation dialog: `If you exit to camera now, your edits will be discarded. Exit?` with `Cancel` and `Exit` options. ### Sample Data - **Permission Prompt**: `"Lemon8" Would Like to Access the Camera` / `Allow Lemon8 to access camera to take photos?` - **Filter Labels**: `Default`, `Original` - **Exit Warning**: `If you exit to camera now, your edits will be discarded. Exit?` --- ## Photo & Gallery Editor ### Overview A multi-image editing workspace where users enhance photos, apply adjustments, add text and stickers, and arrange their image gallery before publishing. ### UI Elements - **Main Canvas**: Large central area displaying the currently selected image. - **Gallery Strip**: Horizontal scrollable row at the bottom showing thumbnails of all selected images. Includes a `+` button to add more photos and drag handles for reordering. - **Bottom Toolbar**: Row of editing tools: `Adjust`, `Text`, `Sticker`, `Filter`, `Template`, `Cutout`, `Label`. - **Adjustment Panel**: Contextual panel that slides up when a tool is selected. Contains sliders labeled `Opacity`, `Intensity`, `Size`, and `Level`. - **Text Customization Controls**: Color picker with tooltip `Drag to pick color`, background toggle with tooltip `Tap to adjust background opacity and corner radius`, stroke toggle with tooltip `Text stroke is here. Try it now!`, and options for `Alignment` and `Direction`. - **Navigation**: Forward arrow button to proceed to publishing. ### Interactions - Dragging thumbnails in the gallery strip reorders the post sequence. - Tapping a toolbar icon opens its corresponding adjustment panel. - Sliding `Opacity`, `Intensity`, `Size`, or `Level` updates the canvas preview in real-time. - Tapping `Text` opens a keyboard and formatting overlay. Users can drag text on the canvas, change colors, and toggle background/stroke effects. - Tapping the forward arrow saves edits and navigates to the Post Publishing Screen. ### Sample Data - **Toolbar Labels**: `Adjust`, `Text`, `Sticker`, `Filter`, `Template`, `Cutout`, `Label` - **Slider Labels**: `Opacity`, `Intensity`, `Size`, `Level` - **Tooltips**: `Tap to enhance and adjust photos`, `Drag to pick color`, `Tap to adjust background opacity and corner radius`, `Add stroke and background`, `Text stroke is here. Try it now!` --- ## Video Editor ### Overview A timeline-based editing interface for trimming video clips, mixing audio tracks, selecting cover frames, and preparing video content for upload. ### UI Elements - **Video Preview**: Central playback area with play/pause controls. - **Timeline Track**: Horizontal scrubber with draggable start and end trim handles. Displays time markers. - **Volume Mixer**: Two sliders for balancing audio: `Original` (video audio) and `BGM` (background music). - **Cover Selector**: Grid of frames extracted from the video for thumbnail selection. - **BGM Library Button**: Opens a music picker to add background tracks. - **Export/Next Button**: Proceeds to compilation and publishing. ### Interactions - Dragging the timeline handles sets the `sceneIn` and `sceneOut` trim points. The preview updates to show only the selected segment. - Adjusting the `Original` and `BGM` sliders mixes the audio levels. Muting one sets its value to zero. - Tapping the cover selector opens a frame grid. Selecting a frame sets it as the post thumbnail. - Tapping the BGM button opens a searchable music library. Selecting a track adds it to the timeline. - Tapping Next triggers video compilation and moves to the publishing screen. ### Sample Data - **Volume Labels**: `Original`, `BGM` - **Timeline Markers**: `0:00`, `0:05`, `0:10`, `0:15` - **Cover Grid**: 6 evenly spaced frames from the video clip - **BGM Track**: `Summer Vibes - Upbeat Acoustic` --- ## Post Publishing Screen ### Overview The final composition screen where users add captions, hashtags, location tags, and external links before sharing their content to their feed. ### UI Elements - **Caption Input**: Multi-line text field for writing the post description. - **Hashtag Selector**: Button labeled `Add Hashtags` that opens a search modal. Selected tags display as chips with the tag name and view count. - **Location Toggle**: Switch between `Add location` and `Hide location`. - **Link Input**: Field labeled `Add Lemon8 link` with placeholder `Example: https://lemon8–app.com` and helper text `Only Lemon8 links of posts, profile pages and more are supported.` - **Media Preview**: Small thumbnail strip showing the edited images or video cover. - **Publish Button**: Primary action button to upload the post. ### Interactions - Typing in the caption field updates the post text in real-time. - Tapping `Add Hashtags` opens a search interface. Selecting a tag adds it to the post. Tags display their name and popularity (e.g., `1.2M views`). - Tapping the location toggle switches between showing a selected POI or hiding it entirely. - Pasting a URL into the link field validates it. Valid Lemon8 links are accepted; invalid or third-party links trigger an error state: `Couldn’t add the link from 3rd–party platforms.` - Tapping the publish button uploads the media, caption, and metadata, then redirects to the user's profile or feed. ### Sample Data - **Hashtag**: `#SummerVibes` (1.2M views) - **Location**: `Central Park, New York` - **Link Hint**: `Example: https://lemon8–app.com` - **Link Error**: `Couldn’t add the link from 3rd–party platforms.` - **Button**: `Post` --- ## Profile Avatar & Bio Editor ### Overview A dedicated settings panel for creators to update their public profile information, including profile picture, display name, username, bio, gender, and linked social accounts. ### UI Elements - **Header**: Title `Edit Profile` with a close button on the right. - **Avatar Section**: Large circular preview with a camera icon overlay and label `Set profile photo`. - **Info Fields**: List of editable rows: - `Nickname` with placeholder `Enter nickname` - `Username` with placeholder `Enter username` - `Bio` with placeholder `Tell us about yourself` - `Gender` with placeholder `Select gender` - **Divider**: Section header labeled `Other profile` - **Social & Theme Links**: List of rows for `Profile Skin`, `TikTok`, `Instagram`, `Twitter`, `YouTube`, and `Website`. Each shows a placeholder or current value. - **Save Button**: Full-width button at the bottom labeled `Done`. ### Interactions - Tapping the avatar opens a bottom sheet to choose a new photo from the gallery or camera. - Tapping any text field opens the keyboard for editing. The username field may show validation feedback. - Tapping `Gender` opens a selection modal. - Tapping social link rows opens a URL input dialog. Valid links are saved and displayed as clickable text. - Tapping `Done` validates all inputs, saves changes to the server, and returns to the main profile view. ### Sample Data - **Field Labels**: `Nickname`, `Username`, `Bio`, `Gender`, `Profile Skin`, `TikTok`, `Instagram`, `Twitter`, `YouTube`, `Website` - **Placeholders**: `Enter nickname`, `Enter username`, `Tell us about yourself`, `Select gender` - **Section Header**: `Other profile` - **Save Button**: `Done` --- ## Main Camera Screen ### Overview The primary interface for capturing photos, featuring a live camera preview, permission handling, and quick access to editing tools and filters before or after capture. ### UI Elements - Full-screen live camera preview area - Top toolbar: Back/Close button, Flash toggle, Camera switch button - Bottom control panel: Large circular capture button, recent photo thumbnail, horizontal filter carousel - Permission overlay: Title `"Lemon8" Would Like to Access the Camera`, description `To take photos on Lemon8, allow access to your camera.`, and action buttons `Allow` and `"Don't allow"` - Exit confirmation dialog: Message `If you exit to camera now, your edits will be discarded. Exit?` with an `Exit` button - Quick editing toolbar (accessible from preview): Options for `Filter`, `Sticker`, `Text`, `Label`, `Cutout`, and `Adjust` ### Interactions - Tap the capture button to take a photo. The app saves the image and transitions to the editor or gallery. - Swipe horizontally across the bottom carousel to switch between filters like `Original` and `Default`. - Tap editing tools to open contextual customization panels for text, stickers, or adjustments. - If the user attempts to leave the screen with unsaved edits, a confirmation dialog appears. Tapping `Exit` discards changes and returns to the previous screen. - If camera permissions are not granted, the permission overlay appears. Tapping `Allow` enables the preview; tapping `"Don't allow"` disables camera functionality and shows a fallback state. ### Sample Data - Filter names: `Original`, `Default`, `Warm Glow`, `Cool Tone` - Permission prompt text: `"Lemon8" Would Like to Access the Camera` / `To take photos on Lemon8, allow access to your camera.` - Exit dialog text: `If you exit to camera now, your edits will be discarded. Exit?` --- ## Skin Analysis Camera Mode ### Overview A guided camera mode that captures facial images to generate a personalized skin condition report, featuring real-time alignment guidance and progress tracking. ### UI Elements - Camera preview with a semi-transparent face alignment mask overlay - Top navigation bar with a back/close icon - Bottom action panel: Capture button and Cancel button - Dynamic tip text carousel cycling through guidance prompts - Animated progress indicator showing analysis stages (smoothly animates from 0% → 35% → 95% → 100%) - Report generation overlay with status hints and a blurred preview placeholder - Cancel button to abort the process ### Interactions - User positions their face within the alignment mask. The UI provides real-time visual feedback. - Tapping capture initiates the skin scan. The capture button hides, and the progress indicator begins animating. - The tip text carousel automatically cycles through guidance messages to ensure optimal capture conditions. - Once the progress reaches 100%, the UI transitions to the skin report screen. - Tapping Cancel at any point aborts the scan, clears the progress state, and returns the user to the main camera screen. ### Sample Data - Tip prompts: `Ensure even lighting`, `Keep your face centered`, `Hold still for accurate results`, `Remove glasses or heavy makeup` - Progress status hints: `Uploading image...`, `Analyzing skin texture...`, `Generating report...` - Progress animation: Smooth fill from 0% to 35%, pause, then accelerate to 95%, and complete at 100% --- ## Template & Editor Workspace ### Overview A creative workspace where users apply pre-designed templates, adjust media properties, and add custom text or stickers before publishing their content. ### UI Elements - Central media preview canvas displaying the selected photo/video - Template selection grid at the bottom of the screen - Editing toolbar with tabs: `Filter`, `Sticker`, `Text`, `Label`, `Cutout`, `Adjust` - Contextual customization panels: - Text background panel: Prompt `Tap to adjust background opacity and corner radius` - Text stroke panel: Prompt `Text stroke is here. Try it now!` - Color picker: Prompt `Drag to pick color` - Adjustment sliders/controls labeled `Alignment`, `Direction`, `Level`, `Intensity`, `Size` - Action buttons: `Start creating`, `Try it`, `Done` - Editor entry modal: Body text `Start creating with our editing tools to share your unique lifestyle on Lemon8.` or `Try template {template} to make your photo stunning. Share your unique lifestyle on Lemon8.` ### Interactions - Users browse and tap a template to apply it to their media. A modal may appear prompting them to `Start creating` or `Try it`. - Tapping text tools opens the customization panel. Users drag the color picker to select colors, adjust opacity and corner radius for text backgrounds, and toggle stroke effects. - Sliders for `Alignment`, `Direction`, `Level`, `Intensity`, and `Size` allow precise control over text and sticker placement. - Tapping `Done` saves all edits and proceeds to the post creation screen. - Tapping `Cancel` or the back arrow discards unsaved template changes. ### Sample Data - Template name: `Summer Diary` - Text settings: Opacity 75%, Corner radius 16px, Alignment Center, Direction Horizontal, Intensity 80%, Size 24pt - Modal prompt: `Try template Summer Diary to make your photo stunning. Share your unique lifestyle on Lemon8.` --- ## AR Services Installation Prompt ### Overview A system-level dialog that appears when an augmented reality feature requires updated Google Play Services for AR to function properly. ### UI Elements - Dialog message area displaying: `This application requires the latest version of Google Play Services for AR.` - Action buttons: `Cancel` (borderless, neutral style) and `Continue` (borderless, colored style) ### Interactions - Tapping `Continue` redirects the user to the device's app store to download or update the required AR services. The camera session pauses in the background. - Tapping `Cancel` dismisses the dialog and disables the AR feature for the current session, returning the user to the standard camera view. - If the user returns to the app after installing the services, the AR feature automatically becomes available without requiring a restart. ### Sample Data - Message: `This application requires the latest version of Google Play Services for AR.` - Buttons: `Cancel`, `Continue` --- ## Post Creation Screen ### Overview The primary composition interface where users assemble a new Lemon8 post by adding media, writing a title and caption, selecting hashtags and location, and configuring publishing options before posting or saving as a draft. ### UI Elements - **Header/Toolbar**: Back arrow on the left, screen title (e.g., "New Post"), and a close/cancel icon on the right. - **Contextual Tips Banner**: A dismissible banner at the top providing real-time guidance (e.g., "Add a title to get more views" or "Select a cover image"). - **Media Carousel**: A horizontally scrollable strip of selected photos and videos. Each thumbnail shows a small delete icon, a reorder handle, and a "Cover" badge on the first item. Tapping a thumbnail opens a full-screen preview/editor. - **Title Input**: Single-line text field with placeholder text prompting for a post title. - **Caption Input**: Multi-line text area supporting rich text, mentions, and inline hashtags. Placeholder: "Add a caption…" - **Hashtag Row**: Horizontal scrollable list of selected hashtags. Tapping the `add_tag` ("Add Hashtags") button opens a search overlay. - **Location Row**: Displays the selected location or shows `add_location_poi` ("Add location") when empty. - **Link Row**: Shows `add_link` ("Add Lemon8 link") to attach a supported Lemon8 URL. - **Cross-Post Toggle**: A switch labeled "Share to TikTok" with a small info icon. - **More Options Button**: A text or icon button that opens the Publish Settings sheet. - **Bottom Action Bar**: Two primary buttons: "Save Draft" (secondary style) on the left, and "Post" (primary style) on the right. ### Interactions - **Media Management**: Drag thumbnails to reorder. Tap the delete icon to remove an item. Tap the first thumbnail to change the cover image. - **Text Input**: Tapping the title or caption field focuses the input and automatically adjusts the layout to prevent the keyboard from overlapping the text area. - **Hashtag/Location/Link**: Tapping any of these rows opens a search or input modal. Selected items populate the respective rows on the main screen. - **Cross-Post Toggle**: Tapping the switch enables/disables TikTok cross-posting. Tapping the info icon opens the Share to TikTok Info Modal. - **Save Draft**: Saves all current inputs and media locally, displays a brief confirmation toast, and navigates back to the previous screen. - **Post**: Validates required fields (at least one media item), initiates upload, shows a loading state, and navigates to the published post or feed on success. - **Auto-Save**: The screen periodically saves progress in the background to prevent data loss if the app is minimized. ### Sample Data - **Title**: "Weekend Cafe Hopping in Seoul ☕️" - **Caption**: "Found the coziest spots in Hongdae! Swipe for my top 3 picks and their signature drinks. Which one would you try first? #seoulcafe #hongdae #weekendvibes #coffeelover" - **Media**: 4 photos (storefront, latte art, interior seating, pastry flatlay) - **Location**: "Hongdae, Seoul" - **Hashtags**: #seoulcafe, #hongdae, #weekendvibes, #coffeelover - **Link**: None - **Cross-Post**: Enabled --- ## Drafts Management Screen ### Overview A dedicated list view for managing locally saved post drafts, allowing users to resume editing, publish immediately, or delete unfinished posts. ### UI Elements - **Header**: "Drafts" title centered or left-aligned, with a back/close button. - **Draft List**: Vertical scrollable list of draft cards. Each card contains: - Thumbnail of the first media item - Draft title (or "Untitled Draft" if empty) - Last edited timestamp (e.g., "Edited 2 hours ago") - Action buttons: "Edit", "Post", and a delete icon - **Empty State**: Centered illustration with text "No drafts yet" and a primary "Create Post" button. - **Bottom Navigation/Back**: Standard navigation to return to the profile or feed. ### Interactions - **Tap Draft Card**: Opens the Post Creation Screen pre-filled with the saved title, caption, media, and settings. - **Tap "Post"**: Immediately publishes the draft without returning to the editor. Shows a loading spinner, then navigates to the published post. - **Tap "Edit"**: Same as tapping the card, but explicitly signals intent to modify. - **Tap Delete Icon**: Removes the draft after a confirmation prompt ("Delete this draft?"). - **Pull to Refresh**: Syncs draft metadata and clears any corrupted or expired temporary files. ### Sample Data - **Draft 1**: Thumbnail of a mirror selfie, Title: "Fall Outfit Inspo 🍂", Edited: "Yesterday at 4:12 PM" - **Draft 2**: Thumbnail of a recipe flatlay, Title: "Easy Matcha Latte Recipe", Edited: "Oct 15, 2023" - **Draft 3**: Thumbnail of a sunset landscape, Title: "Untitled Draft", Edited: "3 days ago" --- ## Publish Settings & Cross-Posting Sheet ### Overview A bottom sheet or modal panel accessed from the Post Creation Screen to configure advanced publishing options, metadata, and cross-platform sharing preferences. ### UI Elements - **Header**: "More Options" title with a close/back icon. - **Share to TikTok Toggle**: Switch with label "Share to TikTok" and a brief description: "Your post will also appear on your linked TikTok account." - **Add Hypic Anchor Toggle**: Switch with label "Add Hypic Anchor" (for linking to external editing tools). - **Location Selector**: Searchable input field pre-filled with the location from the main screen. - **Link Input Field**: Text input for attaching a Lemon8 URL, with helper text: `add_link_desc` ("Only Lemon8 links of posts, profile pages and more are supported.") - **Action Buttons**: `done_btn` ("Done") to apply changes and close the sheet. ### Interactions - **Toggle Switches**: Instantly update the publishing configuration. State is reflected back on the main Post Creation Screen. - **Location/Link Input**: Tapping opens a search or validation flow. Invalid URLs show an error state: `add_link_error_state` ("Couldn’t add the link from 3rd–party platforms.") - **Apply Changes**: Tapping `done_btn` ("Done") saves the settings, closes the sheet, and returns focus to the Post Creation Screen. - **Dismiss**: Swiping down or tapping outside the sheet closes it without saving changes. ### Sample Data - **Share to TikTok**: ON - **Add Hypic Anchor**: OFF - **Location**: "Central Park, New York" - **Link**: "https://lemon8-app.com/post/89234" - **Status**: Settings applied successfully --- ## Share to TikTok Info Modal ### Overview An informational dialog that explains how cross-posting to TikTok works, triggered by tapping the info icon next to the "Share to TikTok" toggle. ### UI Elements - **Header**: `shareEntry_learnMore_panel_title` ("Share to TikTok") - **Body Content**: A list of bullet points or short paragraphs explaining: - How the post will appear on TikTok - Privacy and account linking requirements - How to manage permissions later - **Action Button**: `shareEntry_learnMore_panel_btn` ("Got it") to dismiss the modal. - **Close/Dismiss**: Tap outside the modal or use the system back gesture. ### Interactions - **Open**: Triggered by tapping the info icon next to the TikTok toggle. - **Read & Dismiss**: Scrolling through the explanation and tapping `shareEntry_learnMore_panel_btn` ("Got it") closes the modal and returns to the Post Creation Screen. - **Permission Management**: Text references that permissions can be adjusted later in Settings > Account > Manage app permissions. ### Sample Data - **Header**: "Share to TikTok" - **Body**: - "Your Lemon8 post will be shared to your connected TikTok account." - "You can manage linked accounts and permissions anytime in Settings." - "Cross-posted content follows TikTok’s community guidelines." - **Button**: "Got it" --- ## Profile Edit Screen ### Overview A scrollable settings page where users can view and modify their personal profile information, social media connections, and display preferences. ### UI Elements - **Header/Toolbar:** Custom navigation bar with a back/close control. - **Profile Picture Section:** Large circular avatar preview with a camera icon overlay and a "Set profile photo" text link beneath it. - **Editable Profile Fields (Vertical List):** - **Nickname:** Row with label "Nickname" and a placeholder for entering a display name. - **Username:** Row with label "Username", a placeholder for the unique handle, and a copy icon on the right. - **Bio/Introduction:** Row with label "Introduction" and a placeholder for a short personal description. - **Gender:** Row with label "Gender" and a placeholder for selecting pronouns/gender identity. - **Creator Badge Section:** Title "Top Creator Badge" with a dedicated area displaying earned or available creator badges. - **Section Divider & Header:** Horizontal divider followed by the section title "Other profile". - **External Links & Preferences (Vertical List):** - **Theme/Skin:** Row labeled "Theme" for app appearance settings. - **TikTok:** Row labeled "TikTok" with a placeholder to connect the account. - **Instagram:** Row labeled "Instagram" with a placeholder to connect the account. - **Twitter:** Row labeled "Twitter" with a placeholder to connect the account. - **YouTube:** Row labeled "YouTube" with a placeholder to connect the account. - **Website:** Row labeled "Website" with a placeholder to add a personal link. - **Error State:** Full-screen network error view with retry prompt (appears if profile data fails to load). ### Interactions - Tapping "Set profile photo" or the camera overlay opens the **Edit Avatar Panel**. - Tapping any profile field row (Nickname, Username, Bio, Gender) opens a corresponding bottom sheet or input dialog for editing. - Tapping the copy icon next to the username copies the handle to the device clipboard and shows a brief confirmation toast. - Tapping any social media row (TikTok, Instagram, etc.) initiates an OAuth authorization flow or opens a link input field. - Scrolling vertically reveals all fields and external link options. - If the network is unavailable, the error state replaces the content and provides a retry action. ### Sample Data - **Nickname:** "TravelWithSarah" - **Username:** "@sarahexplores" - **Bio:** "📍 NYC | 📸 Lifestyle & Travel | ✨ Sharing daily moments" - **Gender:** "She/Her" - **TikTok:** "Connected" - **Instagram:** "Not connected" - **Website:** "sarahblog.com" --- ## Edit Avatar Panel ### Overview A bottom sheet that allows users to preview, select, and confirm a new profile picture using the device camera or photo gallery. ### UI Elements - **Header:** Title "Change profile photo" and a close (X) button aligned to the top right. - **Divider:** Thin horizontal line separating the header from the content. - **Avatar Preview:** Large circular image view showing the currently selected or existing profile photo. - **Camera Overlay:** Centered camera icon on the avatar to trigger image selection. - **Action Text:** "Set profile photo" link positioned below the preview. - **Confirm Button:** Full-width primary button labeled "Done" at the bottom of the sheet. ### Interactions - Tapping the close (X) button dismisses the panel without saving changes. - Tapping the avatar preview or camera icon opens the system image picker or camera app. - After selecting or capturing an image, the circular preview updates instantly to reflect the new photo. - Tapping "Done" uploads the selected image, updates the profile, and closes the panel. - The panel uses a slide-up animation from the bottom of the screen. ### Sample Data - **Current Preview:** User's existing profile photo (e.g., a portrait of a person holding a coffee cup). - **Selected Image:** A newly chosen landscape photo from the gallery. - **Button State:** "Done" is enabled once an image is selected, disabled if no change is made. --- ## Edit Bio Panel ### Overview A focused bottom sheet for composing, editing, and saving the user's profile biography text. ### UI Elements - **Header:** Title "Edit bio" and a close (X) button aligned to the top right. - **Divider:** Thin horizontal line below the header. - **Text Input Area:** Multi-line text box with placeholder text "Write something about yourself..." and a subtle border/background. - **Character Counter:** Right-aligned text showing current character count vs. maximum limit (e.g., "45/80"). - **Confirm Button:** Full-width primary button labeled "Done" at the bottom. ### Interactions - Tapping the text input area focuses the field and opens the on-screen keyboard. - The character counter updates in real-time as the user types, deletes, or pastes text. - If the character limit is exceeded, the counter turns red and the "Done" button may become disabled or show a warning. - Tapping "Done" saves the entered text to the profile and closes the panel. - Tapping the close (X) button discards unsaved changes and closes the panel. ### Sample Data - **Input Text:** "🌿 Plant mom | ☕ Coffee enthusiast | 📖 Book lover\nSharing cozy corners of my life." - **Character Count:** "68/80" - **Placeholder:** "Write something about yourself..." --- ## Diary Challenge Banner ### Overview A promotional card displayed on the user's profile page that encourages participation in a time-limited posting challenge, tracks daily progress, and highlights rewards. ### UI Elements - **Challenge Header:** Decorative title image and descriptive text explaining the challenge rules or theme. - **Action Button:** Primary button labeled "Join Challenge" (or similar CTA) positioned to the right of the description. - **Post Preview List:** Horizontally scrollable row of thumbnail cards representing recent challenge posts or daily entries. - **Progress Tracker Card:** Fixed card showing: - Current day number (e.g., "Day 3") - Completion checkmark icon - Creation/plus icon for adding today's post - Small decorative dot indicator at the bottom - **Reward Image:** Optional image showcasing the challenge reward (hidden until the user joins or completes milestones). - **More Options Icon:** Small arrow or three-dot icon in the top-right corner to view full challenge details. ### Interactions - Tapping "Join Challenge" enrolls the user, changes the card state to "Started", and updates the progress tracker. - Tapping a thumbnail in the horizontal list opens the corresponding post in the feed. - Tapping the progress tracker or the "More" icon navigates to a detailed challenge overview screen with rules, full calendar, and reward tiers. - The card dynamically updates to show completed days, current streak, and unlocks the reward image upon completion. - If the user hasn't started, the banner shows the "Not Started" state with the join button prominently displayed. ### Sample Data - **Challenge Title:** "7-Day Summer Diary" - **Description:** "Share your daily summer moments for a week and unlock exclusive badges!" - **Progress:** "Day 3/7" - **Thumbnails:** 3 recent post images (beach sunset, iced coffee, hiking trail) - **Reward:** "Summer Explorer Badge" (unlocked graphic) --- ## Search Home & Input Screen ### Overview The initial discovery interface that appears when users tap the search icon. It provides a focused input field, quick access to recent searches, trending topics, and category shortcuts to help users find content efficiently. ### UI Elements - **Search Bar:** A prominent text input field at the top of the screen. Displays the placeholder text `"Search…"`. Includes a microphone icon on the left for `"Voice search"` and a clear (X) icon on the right that appears only when text is entered. - **Navigation/Dismiss Control:** A `"Cancel"` or back arrow button on the far right to exit the search interface. - **Recent Searches List:** A vertical list of previously entered queries, each accompanied by a small clock icon. A `"Clear all"` action is available to wipe the history. - **Trending & Hot Topics:** A horizontally scrollable or grid section displaying popular hashtags and challenges, often marked with a trending indicator. - **Quick Discovery Categories:** Tappable shortcut cards for navigating directly to specific content types, including `"Activities"`, `"Add Hashtags"`, Sounds, and Users. - **Live Suggestions Dropdown:** Appears directly below the search bar when the user begins typing. Shows auto-completed queries, matching hashtags, and suggested users. ### Interactions - Tapping the search bar focuses the input, opens the system keyboard, and reveals the live suggestions dropdown. - Typing triggers real-time filtering of the suggestions list. Tapping a suggestion immediately executes the search and navigates to the results screen. - Tapping the clear (X) button removes the current input, hides the keyboard, and returns the screen to its default state. - Tapping any item in the Recent Searches, Trending Topics, or Quick Discovery Categories executes a search or navigates to the corresponding category feed. - Swiping down anywhere on the screen dismisses the entire search interface and returns the user to the previous screen. ### Sample Data - **Recent Searches:** `"Summer outfit ideas"`, `"Tokyo cafe guide"`, `"Skincare routine"` - **Trending Topics:** `"#Lemon8Challenge"`, `"#BookTok"`, `"Minimalist decor"` - **Quick Categories:** `"Activities"`, `"Add Hashtags"`, `"Sounds"`, `"Users"` - **Live Suggestions (typing "plan"):** `"Plant care tips"`, `"Plant based recipes"`, `"#PlantMom"`, `"@PlantEnthusiast"` --- ## Search Results Screen ### Overview Displays content matching the user's query, organized into filterable tabs. Features an infinite-scrolling feed of posts, users, media, and location results, with pull-to-refresh and dynamic loading states. ### UI Elements - **Persistent Search Header:** Contains the active search query in the input field, a clear (X) button to reset the query, and a back arrow to return to the home screen. - **Filter Tabs:** A horizontally scrollable tab bar positioned directly below the header. Default tabs include `"Top"`, `"Posts"`, `"Users"`, `"Sounds"`, `"Hashtags"`, and `"Places"`. The active tab is highlighted with an underline or bold text. - **Results Feed:** A vertically scrolling list of content cards. Each card displays: - A thumbnail image or video preview with a play indicator for media. - Post title or description text. - Creator avatar, username, and verification badge (if applicable). - Engagement metrics (likes, comments, saves). - **Location/POI Cards:** When the `"Places"` tab is active, cards show business names, distance from the user, star ratings, and address snippets. - **Loading & Empty States:** Skeleton placeholders appear while content is fetching. If no matches are found, a centered message displays with a prompt to try different keywords or check spelling. - **Pull-to-Refresh Indicator:** A circular loading spinner at the top of the feed that activates when the user drags down. ### Interactions - Tapping a filter tab instantly switches the result type, clears the current feed, and fetches new data for the selected category. - Tapping a content card opens the full detail view (post viewer, user profile, sound page, or location map). - Pulling down from the top of the feed triggers a manual refresh of the current results and resets pagination. - Scrolling to the bottom automatically loads the next page of results (infinite scroll) with a subtle loading spinner at the bottom. - Tapping the search bar in the header returns focus to the input field, reopens the keyboard, and allows the user to modify the query without leaving the screen. - Swiping down on the screen dismisses the results view and returns to the previous screen. ### Sample Data - **Active Query:** `"Plant care tips"` - **Active Tab:** `"Top"` - **Result Card 1 (Post):** - Thumbnail: Bright indoor plants on a windowsill - Title: `"10 Easy Houseplants for Beginners"` - Creator: `@GreenThumb` (Verified) - Metrics: `12.4K likes • 342 comments` - **Result Card 2 (Video):** - Preview: `"How to propagate pothos"` (0:45 duration) - Creator: `@UrbanJungle` - Metrics: `8.2K likes • 1.1K saves` - **Result Card 3 (User):** - Avatar: Profile photo of a woman holding a monstera - Username: `@PlantMom` - Bio: `"Plant enthusiast & educator 🌿"` - Metrics: `24.5K followers` - **Result Card 4 (Place):** - Name: `"The Plant Shop NYC"` - Distance: `"0.8 mi away"` - Rating: `"4.8★"` --- ## Notifications & Messages Inbox ### Overview A centralized hub where users view activity alerts, system updates, and direct message previews. The screen organizes incoming notifications and conversation threads into a single scrollable feed, allowing users to quickly catch up on interactions and jump into chats. ### UI Elements - **Header/Toolbar**: Displays the screen title, a settings gear icon for notification preferences, and a search/filter toggle. - **Tab Navigation**: Segmented controls to switch between "All", "Mentions", "Messages", and "System" categories. - **Notification List**: A vertical list of activity items. Each row shows a circular avatar or icon, a bold title, a descriptive subtitle, a relative timestamp, and a small dot indicator for unread items. - **Message Preview Cards**: Distinct rows for direct conversations. Each card displays the contact's avatar, username, a preview of the latest message, the time it was sent, and a numeric badge showing the unread message count (`tip_cnt`). - **Empty State**: A centered illustration with a prompt to start interacting when the inbox is empty. - **Bottom Navigation Bar**: Standard app tabs including Home, Discover, Create, Notifications (active), and Profile. ### Interactions - **Tap a notification item**: Navigates to the relevant content (e.g., opens the specific post, comment thread, or user profile that triggered the alert). - **Tap a message preview card**: Opens the Chat Conversation Detail screen for that specific user. - **Swipe left on any item**: Reveals quick actions such as "Mark as read", "Delete", or "Mute". - **Pull down from the top**: Refreshes the feed to fetch the latest notifications and message updates. - **Tap the settings icon**: Opens a modal or new screen to manage notification preferences, privacy settings, and permission toggles. - **Tap the search/filter toggle**: Expands a search bar to find specific users, keywords, or notification types. ### Sample Data - **Notification**: `@sarah_design` liked your note: "Summer Outfit Inspo" • 2m ago - **Notification**: New follower: `@travel_diaries` • 15m ago - **Message Preview**: `Alex Chen` • "Hey! Loved your recent post about the cafe downtown..." • 1h ago • 🔴 2 - **System**: Your account verification is complete. • 1d ago - **Message Preview**: `Lemon8 Support` • "Thanks for reaching out! We're looking into your request." • 3d ago --- ## Chat Conversation Detail ### Overview A direct messaging interface where users exchange text, images, and media with another user. The screen displays the full conversation history, relationship status, and provides intuitive controls for composing and sending new messages. ### UI Elements - **Header/Toolbar**: A back arrow on the left, the contact's avatar and username centered, and a "More" (⋮) menu on the right. Below the username, a subtle tag displays the current follow relationship (e.g., "Following", "Mutual", or "Requested"). - **Message List**: A vertically scrollable area showing chronological chat bubbles. Messages sent by the user are aligned to the right with a distinct background color, while received messages are aligned to the left. System messages (e.g., connection confirmations) appear centered in a muted style. - **Typing Indicator**: A subtle animated dot sequence that appears above the input area when the other user is composing a message. - **Input Area**: A fixed bar at the bottom containing a text field with the placeholder `Add comment…`, an attachment/camera icon on the left, an emoji picker icon, and a prominent Send button on the right. - **Swipe-to-Dismiss Gesture**: The entire screen supports a rightward swipe gesture to quickly return to the previous screen without tapping the back button. ### Interactions - **Tap the back arrow or swipe right**: Closes the chat and returns to the Notifications & Messages Inbox. - **Tap a message bubble**: Opens a context menu with options to Copy, Delete, or Report the message. Tapping an image bubble opens a full-screen media viewer. - **Tap the attachment/camera icon**: Opens the device's media picker or launches the camera to capture and send a photo directly. - **Type in the input field and tap Send**: Delivers the message, automatically scrolls the list to the newest entry, and clears the input field. - **Tap the "More" (⋮) menu**: Opens a bottom sheet with chat management options: Mute Notifications, Clear Chat History, View User Profile, Block User, and Report Conversation. - **Tap the relationship tag**: Opens a quick-action sheet to follow, unfollow, or send a follow request to the contact. ### Sample Data - **[System]**: You can now send messages to each other. - **[Contact]**: Hey! I saw your post about the cafe downtown. Is it good? - **[You]**: Yes! The matcha latte is amazing. I'll send you the location. - **[Contact]**: Thanks! See you there 😊 - **[You]**: *Image attachment: Cafe exterior photo* - **[Contact]**: Looks perfect. I'll be there around 3 PM. --- ## Collection Detail View ### Overview Displays all saved posts within a specific user-created collection or board, showing the collection title, total number of saved items, and a scrollable grid of post thumbnails for easy browsing. ### UI Elements - **Header/Toolbar**: - Back arrow to return to the previous screen. - Collection title (e.g., "Summer Outfit Inspo") displayed prominently. - Item count badge showing the total number of saved posts (e.g., "24 posts"). - "Edit" icon to enter management mode. - **Content Grid**: - Responsive grid of saved post cards. Each card displays the post's cover image, creator's profile picture, and a small bookmark indicator. - Pull-to-refresh gesture to sync the latest saved content. - **Empty State**: - Appears when the collection contains zero items. Shows a minimalist illustration, a prompt encouraging users to explore and save posts, and a "Discover" button that redirects to the main feed. - **Bottom Action Bar**: - A primary action button labeled `Add_to_collections` ("Add") to quickly save new content directly to this collection. ### Interactions - **Tap a post card**: Opens the full post detail view for that specific note. - **Swipe from left edge**: Smoothly dismisses the screen and returns to the previous view (enabled by native swipe-to-dismiss behavior). - **Tap "Edit"**: Toggles multi-select mode. Users can tap multiple posts to reveal options for "Remove from collection" or "Move to another collection". - **Tap "Add"**: Opens the Add to Collection sheet to save a new post. - **Pull down on grid**: Refreshes the collection to fetch any newly saved items or sync across devices. ### Sample Data - **Collection Title**: "Minimalist Home Decor" - **Item Count**: 42 posts - **Grid Content**: - Card 1: Cover image of a sunlit living room, creator "@cozy_spaces", 1.2k saves - Card 2: Cover image of a ceramic vase arrangement, creator "@studio_clay", 890 saves - Card 3: Cover image of a neutral-toned bedroom setup, creator "@linen_and_oak", 2.1k saves --- ## Add to Collection Sheet ### Overview A modal bottom sheet that allows users to assign a post to one or more existing collections, or quickly create a new collection on the fly. ### UI Elements - **Header**: Title reading `add_to_title` ("Add to"). - **Collection List**: - Scrollable list of the user's existing collections. - Each row shows the collection name, a small preview thumbnail, and the current item count. - Selected collections display a filled checkmark icon. - **Create New Section**: - Text input field with placeholder "Create new collection". - A "+" icon that appears when typing to confirm creation. - **Primary Action Button**: - Button labeled `Add_to_collections` ("Add") positioned at the bottom of the sheet. - **Feedback Toasts**: - Success state: Displays `added_to_collection` ("Added to [Collection Name]"). - Error state: Displays `add_collection_failed` ("Couldn't add to collection") if network or storage fails. ### Interactions - **Tap a collection row**: Toggles selection. Users can select multiple collections to save the post to all of them simultaneously. - **Type in "Create new collection"**: Enables the "Add" button. Tapping it creates the new collection, saves the post to it, and closes the sheet. - **Tap "Add"**: Saves the post to all selected collections, triggers the success toast, and automatically dismisses the sheet. - **Tap outside the sheet or swipe down**: Closes the modal without saving changes. - **Network failure during save**: Sheet remains open, displays the error toast, and allows the user to retry by tapping "Add" again. ### Sample Data - **Existing Collections Listed**: - "Travel Inspo" (24 items) - "Skincare Routine" (8 items) - "Book Recommendations" (12 items) - **User Action**: Taps "Travel Inspo", types "Weekend Recipes" into the create field, taps "Add". - **Result**: Sheet closes, toast appears reading "Added to Travel Inspo", and the post is now visible in both the "Travel Inspo" and newly created "Weekend Recipes" collections. --- ## Settings & Privacy (Main Menu) ### Overview The central hub where users navigate to manage their account details, privacy controls, content preferences, and legal information. ### UI Elements - **Header:** Title reading "Settings and privacy" with a back navigation arrow. - **Settings Categories List:** A vertically scrollable list of grouped options, each with a leading icon, label, and trailing chevron. Categories include: - "Account" - "Content & Display" - "Privacy" - "Support & About" - **Legal & Info Section:** Located at the bottom, containing links to "About Lemon8", "Terms of Service", and "Privacy Policy". - **Version/Build Info:** Small text at the very bottom displaying the current app version. ### Interactions - Tapping any category navigates to a dedicated sub-screen with granular controls. - Tapping legal links opens an in-app web view or a full-screen modal displaying the respective policy. - Swiping from the left edge or tapping the back arrow returns the user to their previous screen. ### Sample Data - Categories: `Account`, `Content & Display`, `Privacy`, `Support & About` - Legal Links: `About Lemon8`, `Terms of Service`, `Privacy Policy` - Version: `v2.4.1 (Release)` --- ## Edit Profile ### Overview A comprehensive form where users update their public-facing profile information, including display name, username, bio, gender, and linked social media accounts. ### UI Elements - **Header:** Title "Edit profile" with a back/close button. - **Avatar Section:** Large circular preview of the current profile picture with a camera icon overlay and a "Set profile photo" label beneath it. - **Profile Fields List:** - "Nickname" (with edit arrow) - "Username" (with a trailing copy icon) - "Introduction" (shows current bio preview) - "Gender" (shows current selection, e.g., "She/Her") - "Top Creator Badge" (toggle or status indicator) - **Divider:** A subtle horizontal separator labeled "Other profile". - **Linked Accounts List:** - "Skin" (theme/appearance setting) - "TikTok" - "Instagram" - "Twitter" - "YouTube" - "Website" - **Scroll Container:** The entire form is wrapped in a scrollable area to accommodate smaller screens. ### Interactions - Tapping the avatar or "Set profile photo" opens the photo selection panel. - Tapping "Nickname", "Username", "Introduction", or "Gender" opens a bottom sheet or inline editor. - Tapping the copy icon next to the username copies it to the clipboard and shows a brief confirmation toast. - Tapping any social platform opens an authorization flow or input field to link/unlink the account. - Changes are saved automatically or via a "Done" button depending on the sub-panel. ### Sample Data - Nickname: `TravelWithSarah` - Username: `@sarahexplores` - Introduction: `📍 NYC | 📸 Lifestyle & Travel | ✨ Sharing daily moments` - Gender: `She/Her` - TikTok: `@sarahexplores` - Instagram: `sarah.travels` - Website: `sarahblog.com` --- ## Change Profile Photo ### Overview A focused panel that allows users to capture a new photo or select one from their device gallery to use as their profile avatar. ### UI Elements - **Header:** Title "Change profile photo" with a close (X) button on the right. - **Avatar Preview:** Large centered circular image showing the currently selected or default avatar. - **Camera Overlay:** A camera icon positioned at the bottom-right of the preview circle. - **Instruction Text:** "Set profile photo" displayed below the preview. - **Action Button:** A full-width primary button labeled "Done" at the bottom of the panel. ### Interactions - Tapping the preview area or camera icon triggers the device's native camera or gallery picker. - Once an image is selected, the preview updates instantly with a cropping/adjustment step. - Tapping "Done" saves the new avatar, closes the panel, and returns to the Edit Profile screen. - Tapping the close button cancels the operation and discards unsaved changes. ### Sample Data - Header: `Change profile photo` - Instruction: `Set profile photo` - Button: `Done` --- ## Edit Bio ### Overview A dedicated text input screen for composing or modifying the user's profile introduction. ### UI Elements - **Header:** Title "Edit bio" with a close (X) button. - **Text Input Area:** A multi-line text box with a placeholder prompt. - **Character Counter:** Right-aligned text showing current character count vs. maximum limit (e.g., "0/80"). - **Action Button:** Full-width primary button labeled "Done" at the bottom. ### Interactions - Typing in the text box updates the content and dynamically adjusts the character counter. - Exceeding the limit disables the "Done" button and highlights the counter in red. - Tapping "Done" saves the text, closes the screen, and updates the profile preview. - Tapping the close button discards changes and returns to the previous screen. ### Sample Data - Header: `Edit bio` - Placeholder: `Tell us about yourself...` - Counter: `42/80` - Button: `Done` --- ## Account Privacy & Content Permissions ### Overview A control panel where users manage post visibility, account privacy status, and opt-in/out of marketing features. ### UI Elements - **Header:** Title "Manage account privacy". - **Description Text:** "Choose who can see your posts. You can change it in Settings anytime." - **Visibility Options:** Two selectable cards: - "Private account" with subtitle: "Only your followers can see your posts." - "Public account" with subtitle: "Anyone can see your posts." - **Marketing Toggle Section:** - Header: "Disallow Lemon8 to feature your posts" - Body: "Turning this on will disallow your name and posts everyone can see to be featured in Lemon8 ads, social media, and marketing campaigns." - Toggle switch (On/Off) - **Footer Action:** "Set up later" button for users who want to defer the decision. ### Interactions - Selecting "Private" or "Public" immediately updates the account status and shows a confirmation checkmark. - Toggling the marketing switch enables/disables the Lemon8 Boost program participation. - Tapping "Set up later" closes the panel and defaults to private visibility until changed. - A confirmation modal may appear if switching from public to private, warning about visibility changes. ### Sample Data - Selected: `Public account` - Toggle State: `Off` (Lemon8 can feature posts) - Footer: `Set up later` --- ## Manage App Permissions & Linked Accounts ### Overview A security and integration screen where users view third-party apps authorized to access their Lemon8 account and manage TikTok account linking. ### UI Elements - **Header:** Title "Authorize TikTok to link your Lemon8 account". - **Empty State:** Centered illustration with text "No apps authorized yet" when no connections exist. - **Authorized Apps List:** (When populated) Each item shows: - App name and icon - Permission details: "Access your profile info, namely your avatar and name" and "Access your Lemon8 posts" - "Remove" action button - **Legal Disclaimer:** Text at the bottom: "You can remove permissions anytime on the Lemon8 app in Settings and privacy > Account > Manage app permissions. By continuing, you agree with TikTok’s Terms of Service and Privacy Policy." - **Primary Action:** "Authorize" button to initiate the TikTok linking flow. ### Interactions - Tapping "Authorize" redirects to a secure TikTok OAuth login page. - Tapping "Remove" on an authorized app revokes access immediately and displays a "Removed" toast notification. - If removal fails, an error toast "Couldn’t remove" appears. - Tapping legal links opens the respective policy documents. ### Sample Data - Empty State: `No apps authorized yet` - Authorized App: `TikTok` - Permissions: `Access your profile info, namely your avatar and name`, `Access your Lemon8 posts` - Toast on Success: `Removed` - Toast on Failure: `Couldn’t remove` --- ## Download Your Data ### Overview A utility screen that allows users to request a complete archive of their personal data, posts, and activity history stored by Lemon8. ### UI Elements - **Header:** Title "Download account data". - **Description:** Explains what is included in the export (profile info, posts, comments, likes, messages) and estimated processing time. - **Status Indicator:** Shows current state: "Not requested", "Preparing...", or "Ready to download". - **Action Button:** Primary button labeled "Download your Lemon8 data". - **Security Note:** Brief text explaining data encryption and expiration of download links. ### Interactions - Tapping the download button initiates a background data compilation process. - The status indicator updates to "Preparing..." and the button becomes disabled. - Once ready, the status changes to "Ready to download" and the button becomes active again. - Tapping the active button downloads a password-protected ZIP file to the device. - Users can request a new export after a cooldown period (e.g., 30 days). ### Sample Data - Header: `Download account data` - Description: `Get a copy of your posts, profile information, and activity history. This may take up to 48 hours.` - Status: `Ready to download` - Button: `Download your Lemon8 data` --- ## Comments Bottom Sheet ### Overview A slide-up modal sheet that overlays the post view, displaying a scrollable list of comments for a specific post. Users can read, like, reply, search, and post new comments, with support for quick emojis, draft restoration, and rich media attachments. ### UI Elements - **Header Bar** - Dynamic title showing total comment count (e.g., "247 Comments") - Close button (X icon) on the top-right to dismiss the sheet - Search icon (visible on video posts) to filter comments by keyword - **Comment List** - Vertical scrollable list of comment cards - Each comment card displays: - Circular user avatar (supports animated pendant/decoration overlays) - Username (bold, tappable) - Comment text (supports plain text, @mentions, and embedded images) - Action row: Like button (heart icon + count), Reply button (text + reply count), relative timestamp (e.g., "2h ago") - Optional badges: Verified checkmark, Creator tag, or Pinned indicator - Loading spinner at the top during initial fetch - Empty state illustration with text "No comments yet. Start the conversation!" - Error state with retry button if network fails - **Input Bar (Fixed at bottom)** - Text input field with placeholder "Add comment…" - Left side: Current user's avatar (tappable to open profile) - Right side: Emoji picker button, Image attachment button (conditionally visible), Send button (appears when text is entered) - Draft indicator: Small "Restore draft" chip appears if a previous unsent comment exists - **Quick Emoji Row** - Horizontal scrollable strip of 3–4 frequently used emojis (e.g., 🍋, 🥰, ❤️, 🤩) positioned just above the input bar - **Comments Disabled State** - Full-screen overlay with message "Comments are disabled for this post" and a "Done" button to close the sheet ### Interactions - **Tap Close (X) or "Done":** Dismisses the bottom sheet and returns focus to the underlying post. - **Tap Search Icon:** Opens an inline search overlay within the sheet. Typing filters the comment list in real-time. Clearing the search restores the full list. - **Tap Username or Avatar:** Navigates to the commenter’s public profile page in a new view. - **Tap Like Button:** Toggles the like state, instantly updates the count, and triggers a subtle heart pulse animation. - **Tap Reply Button:** Focuses the input field, prepends "@Username " to the text, and changes the placeholder to "Reply to @Username…". The sheet scrolls to keep the input visible. - **Tap Emoji Button:** Expands a full emoji picker panel above the input bar. Selecting an emoji inserts it at the cursor position. Tapping outside the panel collapses it. - **Tap Quick Emoji:** Inserts the selected emoji into the input field. If the input is empty, tapping sends the emoji as a standalone comment immediately. - **Tap Image Attachment:** Opens the device media picker. Selected images appear as thumbnails in the input bar before sending. - **Type in Input:** The Send button becomes active. The input auto-expands up to 3 lines, then scrolls internally. Character limit is enforced with a counter if exceeded. - **Tap Send:** Posts the comment, shows a brief Lottie success animation, clears the input, and prepends the new comment to the list with a "Sending…" state until server confirmation. - **Tap Restore Draft:** Pre-fills the input field with the saved draft text and clears the draft indicator. - **Pull to Refresh:** Dragging down on the comment list fetches the latest comments and updates the header count. - **Comments Disabled:** If the post owner restricts comments, the input bar and emoji row are hidden, and the disabled state overlay is shown. ### Sample Data - **Header:** `247 Comments` - **Comment 1:** - User: `@TravelWithMia` (Verified) - Text: `This café in Kyoto is absolutely magical! ☕️✨ The matcha latte was the best I’ve ever had. Highly recommend visiting before 10 AM to avoid the crowd.` - Actions: `❤️ 1.2K` | `💬 42 replies` | `3h ago` - **Comment 2 (Reply):** - User: `@LeoAdventures` - Text: `@TravelWithMia Thanks for the tip! Is it near the Gion district?` - Actions: `❤️ 89` | `💬 5 replies` | `2h ago` - **Input Placeholder:** `Add comment…` - **Quick Emojis:** `🍋` `🥰` `❤️` `🤩` - **Empty State:** `No comments yet. Start the conversation!` - **Disabled State Message:** `Comments are disabled for this post.` - **Success/Confirm Button:** `Done` --- ## Music Library / Sound Picker ### Overview A full-screen, swipe-dismissable interface where users browse, search, and preview background music or sound effects to attach to their video. The screen filters and highlights tracks that match the video's duration and allows users to select a song to return to the editor. ### UI Elements - **Header Bar**: - Left: Close/Back icon to dismiss the screen without making a selection. - Center: Screen title (e.g., "Add Sound"). - Right: Search icon that expands into a search field. - **Search Field**: Text input with placeholder `Search…` for finding specific tracks, artists, or genres. - **Category Tabs**: Horizontal toggle tabs to switch between `Recommend` and `Favorite` music lists. - **Track List**: Vertical scrollable list of available audio tracks. Each row displays: - Track title and artist name. - Duration badge (e.g., "0:15"). - Play/Preview button (circular icon) to listen to a snippet. - Selection indicator (checkmark or highlight) for the currently chosen track. - **Footer Action Bar**: - Primary button labeled `Add` to confirm the selection and return to the video editor. - Secondary `Cancel` button to exit. ### Interactions - **Swipe Down / Tap Close**: Dismisses the screen and returns to the video editor without adding music. - **Tap Search Field**: Opens the keyboard and filters the track list in real-time as the user types. - **Tap Category Tabs**: Instantly switches the displayed list between algorithmically recommended tracks and the user's saved favorites. - **Tap Play Icon**: Plays a 5–10 second preview of the track. Tapping again pauses playback. Only one preview plays at a time. - **Tap Track Row**: Selects the track, highlights the row, and enables the `Add` button. - **Tap Add**: Closes the screen, passes the selected song data back to the editor, and automatically attaches the audio to the video timeline. - **Duration Filtering**: If the video is shorter than a track, the UI visually indicates that the track will be trimmed to fit. ### Sample Data - **Track 1**: "Golden Hour Acoustic" • Artist: Indie Folk Collective • Duration: 0:30 - **Track 2**: "City Lights Lo-Fi" • Artist: ChillBeats Studio • Duration: 0:15 - **Track 3**: "Upbeat Summer Pop" • Artist: Trending Sounds • Duration: 0:20 - **Track 4**: "Original Audio" • Creator: @travel_diaries • Duration: 0:12 --- ## Video Editor (Audio & Music Controls) ### Overview The primary video editing workspace where users preview their footage, manage background music, adjust audio mixing levels, and trim soundtracks to perfectly sync with their video clips. ### UI Elements - **Top Navigation Bar**: - Left: Back arrow to exit (triggers draft save prompt). - Center: Title "Edit Video". - Right: `Next` button to proceed to the posting screen. - **Video Preview Canvas**: Large central area showing the video playback. Includes a play/pause toggle and a horizontal timeline scrubber at the bottom of the canvas. - **Audio Track Timeline**: A dedicated horizontal bar below the video preview showing: - Video clip segments (visual thumbnails or colored blocks). - Background music waveform or progress bar overlaid or aligned beneath the video track. - Draggable trim handles (left and right markers) on the audio track. - **Bottom Editing Toolbar**: Horizontal scrollable menu with icons for editing features. Active tab is `Sound` or `Audio`. - **Audio Control Panel** (expands when `Sound` is selected): - **Volume Sliders**: Two independent sliders labeled `Original` (video audio) and `Music` (added BGM), each with a percentage indicator. - **Trim Controls**: `Adjust` button to enter precise start/end trimming mode. - **Delete Button**: Trash icon to remove the currently attached background track. - **Add Music Button**: Opens the Music Library screen. ### Interactions - **Tap Play/Pause**: Toggles video playback with the current audio mix applied. - **Drag Timeline Scrubber**: Moves the playhead forward or backward to preview specific moments. - **Drag Trim Handles**: Adjusts the start and end points of the background music. The UI shows real-time duration updates (e.g., "0:05 – 0:15"). - **Adjust Volume Sliders**: - Dragging `Original` up/down increases/decreases the native video audio. - Dragging `Music` up/down controls the background track volume. Both sliders update audio levels in real-time during playback. - **Tap Adjust**: Opens a focused trimming view with a zoomed-in waveform for precise frame-by-frame audio alignment. - **Tap Delete**: Removes the background music track, resets volume sliders to default, and clears the audio timeline. - **Tap Add Music**: Navigates to the Music Library screen. Upon returning, the selected track automatically populates the audio timeline. - **Tap Next**: Finalizes edits, compiles the video with the mixed audio, and navigates to the post details screen. - **Tap Back**: Displays a confirmation dialog (`Cancel` / `OK`) asking if the user wants to save the current edit as a draft or discard changes. ### Sample Data - **Video Duration**: 0:15 - **Attached Track**: "City Lights Lo-Fi" (0:00 – 0:15) - **Original Volume**: 100% - **Music Volume**: 45% - **Trim Range**: Start: 0:02 | End: 0:15 - **Timeline State**: Single video clip with a continuous background audio track aligned to the full duration. --- ## In-App Web Browser ### Overview A full-screen, immersive container that loads and displays external web pages, promotional campaigns, or help articles directly within the Lemon8 app, allowing users to browse third-party or marketing content without leaving the app. ### UI Elements - **Header/Toolbar** (visible by default, can be hidden for immersive campaigns): - Back arrow: Navigates to the previous page in the browsing history. - Page title/URL: Displays the current page title or truncated domain. - Close/Done button: Exits the web view and returns to the previous app screen. - More options menu (⋮): Opens a contextual action sheet. - **Content Area:** - Web page renderer: Displays HTML, CSS, JavaScript, and embedded media. - Top progress bar: Thin horizontal indicator that fills left-to-right while the page loads. - Error state overlay: Centered message with a "Retry" button, shown when the network fails or the URL is invalid. - **Embedded Video Player** (appears when web content contains video): - Play/Pause toggle - Progress scrubber with current time and duration - Fullscreen expand/collapse button - Mute/Volume toggle - Poster image: Displayed before playback begins - **Action Sheet** (triggered from More options menu): - "Open in Browser" - "Share" - "Copy Link" ### Interactions - **Tap Back arrow:** Moves to the previous page in the web history stack. If already on the first page, the button is disabled or acts as a close action. - **Tap Close/Done:** Immediately dismisses the web view using a slide-down or fade-out animation and returns the user to the originating screen (e.g., Feed, Profile, or Notification). - **Tap More options (⋮):** Slides up a bottom sheet with three actions: - *Open in Browser:* Launches the device's default external browser with the current URL. - *Share:* Opens the native system share sheet to send the link via messaging, social apps, or clipboard. - *Copy Link:* Copies the current URL to the clipboard and displays a brief "Link copied" confirmation toast. - **Tap Retry (on error state):** Re-attempts to load the current URL. The progress bar reappears, and the error overlay hides. - **Tap Video Play/Pause:** Starts or pauses video playback. Controls automatically fade out after 3 seconds of inactivity. - **Tap Fullscreen button:** Expands the video to fill the entire screen, hiding the web view header and system status bar. Tapping again or swiping down returns to inline playback. - **Swipe down from top edge:** (When enabled) Dismisses the web view and returns to the previous screen, matching the app's native gesture navigation. - **State changes:** - *Loading → Ready:* Progress bar fills and disappears; page content fades in. - *Online → Offline:* If connectivity drops during browsing, the error overlay appears over the last loaded content. - *Video Playback:* Progress scrubber updates in real-time; mute state toggles icon; fullscreen state resizes the viewport and adjusts system UI visibility. ### Sample Data - **URL:** `https://www.lemon8-app.com/topic/summerstyle2024` - **Page Title:** "Summer Style Guide 2024 | Lemon8" - **Error Message:** "Couldn't load this page. Check your internet connection and try again." - **Embedded Video:** Promotional clip for a creator campaign, 15 seconds long, poster shows a model in summer attire. - **Campaign Metadata (tracked silently):** `campaign_id: "summer_boost_q3"`, `page_name: "editorial_landing"`, `group_type: "creator_feature"` --- ## TikTok Follow Sync Onboarding ### Overview A dedicated onboarding or settings screen that allows users to automatically follow the same creators they follow on TikTok, with clear status indicators for accounts that haven't yet joined Lemon8. ### UI Elements - **Header Text:** "Follow the same accounts you follow on TikTok" - **Subtitle Text:** "These accounts may not have joined Lemon8 yet. You’ll automatically follow them when they join." - **Account List:** A scrollable list of TikTok creator profiles, each displaying: - Profile avatar and username - Status badge showing one of: "Following", "Pending", or "Requested" - **Primary Action Button:** "Follow all" - **Empty State View:** Displays when no pending accounts are available, showing the text: "Accounts you may want to follow that haven't joined Lemon8 yet will appear here." - **Navigation/Dismissal:** Standard back button and edge-swipe gesture to close the screen. ### Interactions - **Tap "Follow all":** Sends follow requests to all listed creators. Triggers contextual toasts based on account status: - For public accounts: "You will automatically follow [username] when they join Lemon8" - For private accounts: "This account is private. You’ll follow them after they approve your follow requests." - **Tap individual account:** Follows that specific creator and updates its status badge in real-time. - **Swipe from screen edge:** Dismisses the screen and returns to the previous view (leveraging the app's swipe-to-dismiss navigation pattern). - **Scroll:** Users can browse through the list of suggested creators. ### Sample Data - `@wanderlust_jane` | Status: Pending - `@chef_marcus` | Status: Following - `@diy_home_hacks` | Status: Requested - `@fitness_with_alex` | Status: Pending --- ## TikTok Account Authorization ### Overview A permission and consent screen that appears when a user initiates the process of linking their TikTok account to Lemon8, detailing exactly what data will be shared. ### UI Elements - **Header Text:** "Authorize TikTok to link your Lemon8 account" - **App Request Prompt:** "TikTok would like to:" - **Permission Checklist:** - "Access your profile info, namely your avatar and name" - "Access your Lemon8 posts" - **Legal Disclaimer:** "By continuing, you agree with Lemon8’s Terms of Service and Privacy Policy." (Both "Terms of Service" and "Privacy Policy" are tappable links) - **Primary Action Button:** "Authorize" - **Secondary Action:** Close/Back icon in the top corner. ### Interactions - **Tap "Authorize":** Initiates the secure OAuth handshake with TikTok. On success, redirects to the profile link confirmation screen. On network or API failure, displays toast: "Couldn’t link. Try again later." - **Tap "Terms of Service" / "Privacy Policy":** Opens the respective legal documents in an in-app web browser. - **Tap Close/Back:** Cancels the linking process and returns to the previous screen. ### Sample Data - Standard OAuth permission layout with TikTok's official branding, a clean checklist UI, and a prominent blue "Authorize" button at the bottom. --- ## TikTok Profile Link Confirmation ### Overview A success modal or full-screen confirmation that informs the user their Lemon8 profile link has been successfully published to their TikTok profile. ### UI Elements - **Header Text:** "Your Lemon8 link is now shown on your TikTok profile" - **Body Text:** "You can check it out on TikTok." - **Primary Action Button:** "Got it" - **Background:** Semi-transparent overlay or clean card layout centered on screen. ### Interactions - **Tap "Got it":** Dismisses the confirmation and returns the user to their Lemon8 profile or settings page. - **Tap outside modal (if applicable):** Dismisses the screen without action. ### Sample Data - A clean, centered success card with a checkmark icon, the header and body text, and a full-width "Got it" button. --- ## TikTok Account Conflict Warning ### Overview A warning dialog that appears when a user attempts to link a TikTok account that is already paired with a different Lemon8 account, preventing duplicate or conflicting integrations. ### UI Elements - **Warning Body Text:** "This Lemon8 account has been paired with another TikTok account. Switch account and try again." - **Primary Action Button:** "Log out" - **Secondary Action Button:** "Cancel" - **Toast Notification (if triggered from background):** "Can’t connect current Lemon8 account with this TikTok account. Switch Tiktok account and try again." ### Interactions - **Tap "Log out":** Securely logs the user out of the current Lemon8 session and redirects to the login screen so they can sign in with the correct account. - **Tap "Cancel":** Closes the warning dialog and returns to the previous screen without making changes. - **System Back Press:** Behaves identically to tapping "Cancel". ### Sample Data - A modal dialog with a warning icon, the explanatory text, and two clearly differentiated buttons (primary "Log out" in brand color, secondary "Cancel" in neutral/outline style). --- ## Sync TikTok Posts ### Overview A content import screen that allows users to select and transfer their existing TikTok videos to their Lemon8 feed, featuring swipe-to-dismiss navigation and batch selection capabilities. ### UI Elements - **Header/Title:** "Sync TikTok Posts" - **Content Grid:** A responsive grid of video thumbnails from the user's TikTok account, each showing: - Video preview image - Duration overlay - Checkbox or toggle for selection - **Selection Counter:** Dynamic text showing "X posts selected" - **Primary Action Button:** "Sync Selected" (disabled until at least one post is chosen) - **Loading State:** Dual-ball loading animation or progress bar during initial fetch or sync process. - **Empty State:** "No TikTok posts found to sync." (shown if account has no public videos) ### Interactions - **Tap video thumbnail:** Opens a full-screen preview of the TikTok video. - **Tap checkbox/toggle:** Adds or removes the video from the sync queue. Updates the selection counter. - **Tap "Sync Selected":** Begins background upload of selected videos to Lemon8. Shows a progress indicator. On completion, displays a success toast and navigates to the user's Lemon8 profile. - **Swipe from left/right edge:** Dismisses the screen and cancels any pending sync operation (utilizing the app's built-in swipe-dismiss layout behavior). ### Sample Data - `@user's TikTok Grid:` - "Summer Beach Vlog 🌊" (0:45) | ☑️ Selected - "Quick 5-Min Pasta Recipe 🍝" (0:32) | ☐ Unselected - "My Morning Routine ☀️" (1:10) | ☑️ Selected - "OOTD: Fall Layers 🍂" (0:28) | ☐ Unselected --- ## ARCore Installation Prompt ### Overview A system-level dialog that appears when a user attempts to use an augmented reality feature, informing them that Google Play Services for AR must be installed or updated. ### UI Elements - **Message Text**: Centered instructional text explaining the AR requirement. - **Cancel Button**: Text-only button aligned to the bottom-left. - **Continue Button**: Text-only button aligned to the bottom-right, styled as a primary action. ### Interactions - Tapping **Cancel** dismisses the dialog and returns the user to the previous screen. - Tapping **Continue** redirects the user to the device's app store to download or update the required AR service. - The dialog blocks interaction with the underlying screen until an action is selected. ### Sample Data - **Message**: "This application requires the latest version of Google Play Services for AR." - **Buttons**: "Cancel", "Continue" --- ## Diary Challenge Hub ### Overview A profile widget that displays an active or upcoming content challenge, tracking daily posting progress and showcasing rewards. ### UI Elements - **Challenge Header**: Title image and descriptive text explaining the challenge rules. - **Horizontal Post List**: A scrollable row of daily challenge cards, each showing a day number, completion status, and a create icon. - **Progress Tracker**: A fixed floating card displaying the current day count, completed days, and a reward preview image. - **Action Buttons**: "Start Challenge" button (for unstarted challenges) and a "More" chevron icon to expand details. - **Tooltip Container**: An overlay area for contextual hints or onboarding tooltips. ### Interactions - Tapping a **daily card** opens the specific post or shows a locked state if the day hasn't arrived. - Tapping the **create icon** on a card opens the post editor pre-filled with the challenge template. - Tapping **Start Challenge** registers the user and transitions the widget to the active state. - Tapping **More** expands a detailed view of challenge rules, deadlines, and reward tiers. ### Sample Data - **Title**: "7-Day Summer Diary" - **Description**: "Share your daily summer moments to unlock exclusive badges!" - **Progress**: Day 1 (✓), Day 2 (Current), Day 3 (🔒), Day 4 (🔒) - **Reward**: "Summer Explorer Badge" - **Button**: "Start Challenge" --- ## Splash Screen ### Overview The initial full-screen loading interface displayed immediately upon app launch, featuring branded motion graphics or a static hero image. ### UI Elements - **Full-Screen Animation Container**: Renders a Lottie animation or high-resolution background image. - **Transparent Overlay**: Ensures smooth transition without visual clipping. ### Interactions - Automatically plays the animation on mount. - Once assets are cached and the initial data fetch completes, the screen fades out and navigates to the Home Feed or Onboarding flow. - No user interaction is required; tapping does not interrupt the loading sequence. ### Sample Data - **Animation**: Lemon8 logo morphing into a camera aperture, followed by a soft gradient fade. - **Duration**: ~2.5 seconds before auto-transition. --- ## Profile Edit: Avatar Panel ### Overview A bottom sheet or modal panel that allows users to preview, crop, and update their profile picture. ### UI Elements - **Header Bar**: Title text ("Avatar") and a close (X) button on the right. - **Avatar Preview**: Large circular image container showing the current or newly selected photo. - **Camera Overlay**: Centered camera icon positioned over the avatar preview. - **Action Link**: "Set profile photo" text link below the preview. - **Confirm Button**: Full-width "Done" button at the bottom of the panel. ### Interactions - Tapping the **camera icon** or **"Set profile photo"** opens the device's image picker or camera. - After selecting an image, the preview updates instantly. - Tapping **Done** saves the new avatar, closes the panel, and triggers a profile refresh. - Tapping the **close (X)** button discards unsaved changes and closes the panel. ### Sample Data - **Title**: "Avatar" - **Preview**: User's uploaded beach sunset photo - **Link**: "Set profile photo" - **Button**: "Done" --- ## Profile Edit: Bio Panel ### Overview A bottom sheet or modal panel dedicated to editing the user's profile biography text with real-time character tracking. ### UI Elements - **Header Bar**: Title text ("Bio") and a close (X) button on the right. - **Text Input Area**: Multi-line text field with placeholder text and subtle border styling. - **Character Counter**: Right-aligned text showing current character count vs. maximum limit. - **Confirm Button**: Full-width "Done" button at the bottom. ### Interactions - Typing in the **text field** updates the character counter dynamically. - Exceeding the character limit disables the "Done" button and highlights the counter in a warning color. - Tapping **Done** saves the bio, closes the panel, and updates the profile view. - Tapping the **close (X)** button discards changes and closes the panel. ### Sample Data - **Title**: "Bio" - **Placeholder**: "Tell us about yourself..." - **Current Text**: "Travel enthusiast 🌍 | Coffee lover ☕ | Sharing daily aesthetics" - **Counter**: "42/150" - **Button**: "Done" --- ## Profile Edit: Main Page ### Overview The comprehensive profile settings screen where users manage personal details, social media links, and account preferences in a scrollable list format. ### UI Elements - **Top Navigation Bar**: Back/close icon and page title. - **Avatar Section**: Circular profile picture with a camera overlay and "Set profile photo" link. - **Editable List Rows**: - Nickname (with placeholder) - Username (with a copy-to-clipboard icon) - Bio/Introduction (with placeholder) - Gender selection - Top Creator Badge status - **Social & External Links Section** (separated by a divider): - Theme/Skin settings - TikTok - Instagram - Twitter/X - YouTube - Personal Website - **Network Error Overlay**: Full-screen retry state with a refresh button if data fails to load. ### Interactions - Tapping any **list row** opens a dedicated input modal or navigates to a sub-settings page. - Tapping the **copy icon** next to the username copies it to the clipboard and shows a toast confirmation. - Tapping **social link rows** opens an authorization flow or URL input field. - Pulling down or tapping the **retry button** on the error overlay re-fetches profile data. - Changes are saved automatically or via a dedicated save action depending on the sub-screen. ### Sample Data - **Nickname**: "Lemon8Creator" - **Username**: "@lemon8_user_2024" (Copy icon present) - **Bio**: "Digital artist & lifestyle blogger" - **Gender**: "Prefer not to say" - **Top Creator Badge**: "Verified Creator" - **TikTok**: "@tiktok_handle" - **Instagram**: "@insta_handle" - **Twitter**: "@x_handle" - **YouTube**: "MyVlogChannel" - **Website**: "https://myportfolio.com"