iiitl / iiitl/CForge

[Feature Request]: Display Codeforces avatar on Profile and create reusable Empty State component

Open
#1 0 comments 0 reactions 0 assignees View on GitHub
architecture enhancement medium ui
Dominant language
Swift
Stars
0
Forks
4
PR merge metrics
No merged PRs in 30d

Description

### Description:

This issue addresses two related UI improvements: loading the user's actual Codeforces avatar on the Profile screen, and creating a shared `EmptyStateView` component to standardize how empty, error, and loading states are presented across all screens.

---

### Part A: Profile Avatar

**Current Behavior:**

The profile header uses a placeholder SF Symbol (`person.fill`), even though:
- The Codeforces `user.info` API returns an avatar URL (`titlePhoto` / `avatar` field).
- `SDWebImageSwiftUI` is already imported in `ProfileView.swift` but is never used.

**Feature Requirements:**

- Add `avatar` and `titlePhoto` fields to the `CodeforcesUser` model in `ProfileModels.swift`.
- Replace the placeholder icon in `profileHeader()` with a `WebImage` from SDWebImageSwiftUI that loads the actual avatar.
- Provide a fallback to the existing SF Symbol if the image URL is `nil` or fails to load.
- Retain the existing circular shape with gradient border styling.

> **Note:** Codeforces avatar URLs are often protocol-relative (e.g., `//userpic.codeforces.org/...`). Prepend `https:` before using them.

---

### Part B: Reusable Empty State Component

**Current Behavior:**

Empty, error, and loading states are handled inconsistently across the app:

| Screen | Implementation |
|--------|----------------|
| `ContestListView` | Plain `ProgressView()` with no empty results or error state |
| `ProblemListView` | Custom `VStack` with icon and retry button |
| `ProfileView` | Raw error text string |
| `ProblemSubmissionsView` | `ContentUnavailableView` (iOS 17+ only) |

**Feature Requirements:**

- Create a reusable `EmptyStateView` in `CForge/Views/Common/EmptyStateView.swift` with configurable icon, title, subtitle, and optional action button.
- Style it with the app's neon dark theme (gradient icon, `.textPrimary` title, gradient action button).
- Replace all inconsistent empty/error/loading state implementations across `ContestListView`, `ProblemListView`, `ProfileView`, and `ProblemSubmissionsView` with the shared component.

---

### Steps to Implement:

**Part A:**
1. Add `avatar: String?` and `titlePhoto: String?` to `CodeforcesUser` in `ProfileModels.swift`.
2. In `ProfileView.profileHeader()`, replace the SF Symbol with `WebImage(url:)` from SDWebImageSwiftUI.
3. Add a `.placeholder { ... }` modifier for fallback.
4. Ensure the avatar retains circular clipping and the gradient border overlay.

**Part B:**
1. Create `CForge/Views/Common/EmptyStateView.swift` with a configurable initializer.
2. Apply the neon theme: gradient-colored SF Symbol icon, proper text hierarchy, optional neon-styled retry button.
3. Replace empty/error states in `ContestListView`, `ProblemListView`, `ProfileView`, and `ProblemSubmissionsView`.
4. Optionally update the existing `LoadingView.swift` to match the new design.

### Key Files:

| Action | File |
|--------|------|
| **MODIFY** | `CForge/Views/Profile/ProfileModels.swift` |
| **MODIFY** | `CForge/Views/Profile/ProfileView.swift` |
| **CREATE** | `CForge/Views/Common/EmptyStateView.swift` |
| **MODIFY** | `CForge/Views/Contest/ContestListView.swift` |
| **MODIFY** | `CForge/Views/Problem/ProblemListView.swift` |
| **MODIFY** | `CForge/Views/Problem/ProblemSubmissionsView.swift` |

### Expected Outcome:

- The Profile screen displays the user's actual Codeforces avatar with a graceful fallback.
- All screens use the shared `EmptyStateView` for consistent empty, error, and loading presentations.
- The UI across the entire app feels polished and unified.

Contributor guide

Open the contributing guide

Research direction

Start by reading ProfileModels.swift and ProfileView.swift, then compare the existing state handling in ContestListView, ProblemListView, ProfileView, and ProblemSubmissionsView. Create the named EmptyStateView.swift component and update those screens so avatar fallback behavior and consistent empty, error, and loading presentations match the listed requirements.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, swift
Domain
frontend, mobile
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.