# Dewemoji User Dashboard Implementation Plan

**Source:** `dewemoji-ux-flow-brief.md`  
**Goal:** Build the Personal user dashboard + inline personalization flows aligned with the UX brief.

---

## 1) Scope & Principles

- **Primary flow**: Add keywords directly on emoji detail pages (fast, contextual).
- **Secondary flow**: Manage keywords in the dashboard (bulk + power tools).
- **Zero friction** for Visitors/Free users; gentle upgrade prompts.
- **Shared layout** with admin (same shell, role-based sidebar).

---

## 2) User States & Routing

### Visitor (non-logged)
- Public search + emoji detail only.
- CTA: “Sign up free” / “Upgrade to Personal”.

### Free user (logged, no subscription)
- See public content, “Your keywords” section locked.
- Upgrade nudges on detail + empty states in dashboard.

### Personal user (paid)
- Full access: quick add on detail + dashboard CRUD.

---

## 3) UI Screens (User Dashboard)

### 3.1 Dashboard shell (shared)
- Same layout as admin (sidebar, top bar).
- Role-based sidebar menu:
  - Overview
  - My Keywords
  - API Keys
  - Billing
  - Preferences
  - Support / Logout

### 3.2 Overview (user)
- Show:
  - Total keywords
  - Recent keyword additions (last 7 days)
  - Synced devices (optional later)
- Small quick link to “My Keywords”.

### 3.3 My Keywords (primary management)
- Table: Emoji | Your keywords | Language | Actions
- Toolbar:
  - + Add Keyword
  - Import JSON
  - Export JSON
  - Search/filter
- Modal: emoji picker → add keywords + language.

### 3.4 API Keys
- List user API keys
- Create/revoke key

### 3.5 Billing
- Current plan + renewal / expiry
- Payment method (future)
- Upgrade CTA if free

### 3.6 Preferences
- Theme
- Tone lock / preferred skin tone (future)
- Locale

---

## 4) Site Page Enhancements (Non-dashboard)

### 4.1 Emoji Detail Page (critical)
- Show public keywords for everyone.
- If Personal: show “Your Keywords” list + quick add modal.
- If Free: show locked section + upgrade CTA.
- If Visitor: CTA to sign up.

### 4.2 Search Results Page
- Personal user: blend public + user keywords.
- Show “Your keyword” badge and “quick edit” button.

---

## 5) API Endpoints (v1)

### Keyword CRUD
- `GET /v1/emoji/{slug}?include_user_keywords=true`
- `POST /v1/keywords` (add keyword)
- `PUT /v1/keywords/{id}` (edit)
- `DELETE /v1/keywords/{id}`
- `GET /v1/keywords` (list user keywords)

### User keyword import/export
- `POST /v1/keywords/import`
- `GET /v1/keywords/export`

### Dashboard data
- `GET /v1/user/summary` (counts + recents)
- `GET /v1/user/apikeys` / `POST /v1/user/apikeys`
- `GET /v1/user/billing` (subscription status)

---

## 6) Database / Models

Existing:
- `user_keywords`
- `subscriptions`

Add if needed:
- `user_keyword_imports` (optional audit)

---

## 7) Implementation Phases

### Phase A — Foundation
- Add user routes + dashboard views
- Layout reuse with role‑based sidebar

### Phase B — Keywords UX
- Detail page quick add
- Dashboard keyword CRUD + import/export

### Phase C — Billing & API Keys
- Billing summary + upgrade CTA
- API key list + create/revoke

---

## 8) Acceptance Criteria

- Personal user can add keywords from detail page in <5 seconds.
- Keyword appears in search results immediately.
- Dashboard keyword table supports filter + edit + delete.
- Free users see upgrade prompts, not broken UI.