[PAID BOUNTY - $330] Email Inbox Classic View Page UI

[warpspeedopen-source]

Bounty Overview

Build the refreshed Classic Inbox UI using the latest warpSpeed design system.

The UI should include the new top navigation row, category buttons, updated icons, search and filter UI, opened/unopened email states, and smooth scroll-based header behaviour.

This bounty is part of the warpSpeed OPEN developer bounty programme.

Reward

$330

Difficulty

Medium

Main Skills

• React Native
• TypeScript
• Storybook
• UI Implementation
• Design System Components

Design Reference

https://xd.adobe.com/view/d740108d-8d28-4588-8417-97f05515d3d2-8213/

High-Level Scope

The selected developer will build a reusable Classic Inbox UI that supports multiple inbox views, including Inbox, Sent, Drafts, All Mail, and other email categories.

The implementation should include:

• New top navigation row
• Account selector
• Flow, Dashboard, Classic, and Compose buttons
• Category buttons such as Primary, Promotions, and Updates
• Updated category icons
• Search bar and filter button
• Email list UI
• Clear visual difference between opened and unopened emails
• Smooth scroll behaviour where the header hides on scroll down and reappears at the top
• Storybook implementation for component development and documentation

Full technical requirements, submission rules, acceptance criteria, and final design expectations are available on the official bounty page.

View Full Bounty Details & Sign Up

To see the full bounty specification and apply, visit:

https://warpspeedopen.org/bounties

How to Claim

1. Open the bounty page.
2. Sign up as a developer.
3. Review the full bounty details and rules.
4. Return to this GitHub issue and comment:

"I have signed up and would like to claim this bounty."

A maintainer must confirm before work begins.

Important Rules

• Do not start work until a maintainer confirms your claim.
• Maximum 3 submission attempts.
• Minimum 90% specification match required for consideration.
• Payment is made only at 100% completion.
• Payment is processed only after the pull request is approved and merged.
• First code commit is required at the halfway mark between bounty start and bounty expiration.
• Code must be original or properly licensed.
• The official bounty page is the source of truth for full requirements, rules, and deadlines.

[apoorva-01]

I have signed up and would like to claim this bounty.

[nguyenthekr92-byte]

I have signed up and would like to claim this bounty.

[acdunbrack]

I have signed up and would like to claim this bounty.

[sriraajj-lab]

Bounty Solution Proposal

I've analyzed this issue and here's my proposed solution:

Solution for Email Inbox Classic View Page UI Bounty

Root Cause Analysis

The task requires implementing a refreshed Classic Inbox UI using warpSpeed's design system. The main challenges are:

1. Creating a responsive email list with different states (opened/unopened)
2. Implementing the sticky header with scroll behavior
3. Integrating the design system components consistently
4. Building the search and filter functionality
5. Ensuring all UI elements match the design specifications

Step-by-Step Solution

1. Set up the component structure

We'll create a new ClassicInbox component with these sub-components:

• Header with navigation
• Category filter bar
• Search and filter controls
• Email list
• Individual email row component

2. Implement scroll behavior

Use React Native's Animated API to handle the header animation on scroll

3. Create email list component

Implement FlatList with custom row rendering for different email states

4. Add search and filter functionality

Create controlled components for search input and filter dropdowns

5. Style with design system

Use warpSpeed's design tokens and components consistently

Code Changes Needed

1. Create new component files

src/components/ClassicInbox/ClassicInbox.tsx:

import React, { useState, useRef, useCallback } from 'react';
import { FlatList, Animated, View, StyleSheet } from 'react-native';
import { 
  Header,
  SearchBar,
  FilterDropdown,
  CategoryButton,
  EmailRow,
  IconButton
} from '@warpspeed/design-system';
import { Email } from '../../types';

interface ClassicInboxProps {
  emails: Email[];
  onEmailPress: (email: Email) => void;
}

const ClassicInbox: React.FC<ClassicInboxProps> = ({ emails, onEmailPress }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('primary');
  const scrollY = useRef(new Animated.Value(0)).current;
  
  const headerTranslateY = scrollY.interpolate({
    inputRange: [0, 100],
    outputRange: [0, -100],
    extrapolate: 'clamp',
  });

  const renderEmailItem = useCallback(({ item }: { item: Email }) => (
    <EmailRow 
      email={item} 
      onPress={() => onEmailPress(item)}
      isRead={item.isRead}
    />
  ), [onEmailPress]);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.header, { transform: [{ translateY: headerTranslateY }] }]}>
        <Header 
          title="Inbox"
          rightActions={[
            <IconButton icon="settings" onPress={() => {}} />,
            <IconButton icon="compose" onPress={() => {}} />
          ]}
        />
        <View style={styles.searchRow}>
          <SearchBar 
            value={searchQuery}
            onChangeText={setSearchQuery}
            placeholder="Search emails..."
          />
          <FilterDropdown 
            options={['All', 'Unread', 'Starred', 'Important']}
            onSelect={(value) => console.log('Filter:', value)}
          />
        </View>
        <View style={styles.categoryRow}>
          {['primary', 'social', 'promotions'].map((category) => (
            <CategoryButton
              key={category}
              label={category}
              isActive={selectedCategory === category}
              onPress={() => setSelectedCategory(category)}
            />
          ))}
        </View>
      </Animated.View>

      <FlatList
        data={emails}
        renderItem={renderEmailItem}
        keyExtractor={(item) => item.id}
        contentContainerStyle={styles.listContent}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: true }
        )}
        scrollEventThrottle={16}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 10,
    backgroundColor: '#fff',
    elevation: 4,
  },
  searchRow: {
    flexDirection: 'row',
    padding: 12,
    alignItems: 'center',
  },
  categoryRow: {
    flexDirection: 'row',
    paddingHorizontal: 12,
    paddingBottom: 8,
  },
  listContent: {
    paddingTop: 180, // Adjust based on header height
  },
});

export default ClassicInbox;

2. Create EmailRow component

src/components/ClassicInbox/EmailRow.tsx:

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Avatar, Icon } from '@warpspeed/design-system';
import { Email } from '../../types';

interface EmailRowProps {
  email: Email;
  onPress: () => void;
  isRead: boolean;
}

const EmailRow: React.FC<EmailRowProps> = ({ email, onPress, isRead }) => {
  return (
    <TouchableOpacity 
      style={[styles.container, isRead && styles.readContainer]}
      onPress={onPress}
    >
      <View style={styles.avatarContainer}>
        <Avatar source={{ uri: email.sender.avatar }} size="small" />
      </View>
      <View style={styles.content}>
        <View style={styles.header}>
          <Text 
            style={[styles.sender, isRead && styles.readText]}
            numberOfLines={1}
          >
            {email.sender.name}
          </Text>
          <Text style={[styles.time, isRead && styles.readText]}>
            {email.time}
          </Text>
        </View>
        <Text 
          style={[styles.subject, isRead && styles.readText]}
          numberOfLines={1}
        >
          {email.subject}
        </Text>
        <Text 
          style={[styles.preview, isRead && styles.readText]}
          numberOfLines={1}
        >
          {email.preview}
        </Text>
      </View>
      <View style={styles.actions}>
        <Icon 
          name={email.starred ? 'star-filled' : 'star'} 
          color={email.starred ? '#FFC107' : '#9E9E9E'} 
          size={20}
        />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.cre

---
*This solution was generated by [DenialsDoctor Hermes](https://denialsdoctor.com) — AI-powered claim denial management.*

[zhaog100]

👋 Hi! I am @zhaog100 (小米辣 🌶️). I would like to claim this bounty!

Plan:

1. Build Classic Inbox UI with latest warpSpeed design system
2. Implement top navigation row, category buttons, updated icons
3. Add search/filter UI with opened/unopened email states
4. Implement smooth scroll-based header behavior

Skills: React Native, TypeScript, Storybook, UI Implementation, Design System