Contributing Guide

# Click "Fork" on GitHub, then clone your fork
git clone https://github.com/your-username/Zero.git
cd Zero

# Add upstream remote
git remote add upstream https://github.com/Mail-0/Zero.git

pnpm install

# Start database
pnpm docker:db:up

# Setup environment variables
pnpm nizzy env
pnpm nizzy sync

# Initialize database
pnpm db:push

pnpm dev

git checkout -b feature/your-feature-name
# or
git checkout -b fix/your-bug-fix

git commit -m "feat: add new email threading feature

Implements #123"

git fetch upstream
git merge upstream/staging

git push origin your-branch-name

# Apply schema changes to development database
pnpm db:push

# Create migration files after schema changes
pnpm db:generate

# Apply migrations (for production)
pnpm db:migrate

# View and edit data with Drizzle Studio
pnpm db:studio

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/zerodotemail"

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

git commit -m "feat(mail): add email search functionality"
git commit -m "fix(auth): resolve login redirect issue"
git commit -m "docs: update API documentation"
git commit -m "test(mail): add email composer tests"

// Use explicit types when helpful
interface EmailListProps {
  emails: Email[]
  onSelect: (email: Email) => void
  className?: string
}

// Use type guards for runtime checks
function isEmail(value: unknown): value is Email {
  return typeof value === 'object' && 
         value !== null && 
         'id' in value && 
         'subject' in value
}

// Prefer const assertions for immutable data
const EMAIL_STATUSES = ['sent', 'draft', 'failed'] as const
type EmailStatus = typeof EMAIL_STATUSES[number]

// Use generics for reusable components
interface ApiResponse<T> {
  success: boolean
  data: T
  error?: string
}

// Use functional components with hooks
const EmailList = memo<EmailListProps>(({ emails, onSelect, className }) => {
  // State and effects at the top
  const [selectedId, setSelectedId] = useState<string | null>(null)
  
  // Memoized values
  const sortedEmails = useMemo(() => 
    emails.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
    [emails]
  )
  
  // Event handlers
  const handleSelect = useCallback((email: Email) => {
    setSelectedId(email.id)
    onSelect(email)
  }, [onSelect])
  
  // Early returns for loading/error states
  if (emails.length === 0) {
    return <EmptyState />
  }
  
  // Main render
  return (
    <div className={cn("email-list", className)}>
      {sortedEmails.map(email => (
        <EmailItem
          key={email.id}
          email={email}
          isSelected={selectedId === email.id}
          onSelect={handleSelect}
        />
      ))}
    </div>
  )
})
EmailList.displayName = 'EmailList'

{
  "pages": {
    "settings": {
      "connections": {
        "disconnectSuccess": "Account disconnected successfully"
      }
    }
  }
}

# These commands will be available once testing is set up:
 pnpm test            # Run all tests
 pnpm test:watch      # Run tests in watch mode  
 pnpm test:coverage   # Run tests with coverage
 pnpm test:e2e        # Run E2E tests

## Description
Brief description of what this PR does.

## Type of Change
- [ ] Bug fix (non-breaking change that fixes an issue)
- [ ] New feature (non-breaking change that adds functionality)
- [ ] Breaking change (fix or feature that causes existing functionality to not work as expected)
- [ ] Documentation update

## Testing
- [ ] Manual testing completed
- [ ] Code formatting passes (pnpm format)
- [ ] Linting passes (pnpm lint)

## Screenshots
Include screenshots for UI changes.

## Checklist
- [ ] Code follows style guidelines
- [ ] Self-review completed
- [ ] Code is commented where necessary
- [ ] Documentation updated
- [ ] Tests added/updated
- [ ] No new console errors/warnings

**Bug Description**
A clear description of the bug.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected Behavior**
What you expected to happen.

**Screenshots**
If applicable, add screenshots.

**Environment**
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Firefox, Safari]
- Version: [e.g. 1.0.0]

**Additional Context**
Any other context about the problem.

**Feature Description**
A clear description of the feature you'd like to see.

**Problem Statement**
What problem does this feature solve?

**Proposed Solution**
How would you like this feature to work?

**Alternatives Considered**
Any alternative solutions you've considered.

**Additional Context**
Any other context, screenshots, or examples.

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",
    "ms-playwright.playwright",
    "ms-vscode.vscode-json"
  ]
}

# Development environment
NODE_ENV=development
PORT=3000
APP_URL=http://localhost:3000

# Debug settings
DEBUG=zero:*
LOG_LEVEL=debug
ENABLE_QUERY_LOGGING=true

# Test database
TEST_DATABASE_URL=sqlite:./test.db