# 🏗️ Pounce - Informationsarchitektur & Navigation

**Stand:** 10. Dezember 2024  
**Status:** ✅ Implementiert

---

## 📊 Navigation Konzept

Die Navigation ist klar zwischen **öffentlichem** und **eingeloggtem** Zustand getrennt.

---

## 🌐 PUBLIC SITE (Besucher ohne Login)

### Navigation

```
┌─────────────────────────────────────────────────────────────────┐
│ POUNCE | [Market] [TLD Intel] [Pricing] | [Sign In] [Get Started] │
└─────────────────────────────────────────────────────────────────┘
```

### Seiten

| Route | Beschreibung |
|-------|--------------|
| `/` | Landing Page mit Hero, Ticker, Discover/Track/Acquire |
| `/auctions` | Öffentliche Auktions-Vorschau |
| `/tld-pricing` | TLD Preisdaten (SEO-optimiert) |
| `/tld-pricing/[tld]` | Detail-Seite pro TLD |
| `/pricing` | Preisvergleich Scout/Trader/Tycoon |
| `/blog` | Blog-Artikel |
| `/about`, `/contact` | Info-Seiten |
| `/login`, `/register` | Auth-Seiten |

### Für eingeloggte User auf Public Pages

Statt "Sign In / Get Started" wird angezeigt:

```
[🟢 Command Center] (Button → /dashboard)
```

---

## 🎯 COMMAND CENTER (Eingeloggte User)

### Layout mit Sidebar

```
┌────────────────────────────────────────────────────────────────┐
│ [P] POUNCE                          [🔍 Search] [🔔] │ Top Bar  │
├──────────┬─────────────────────────────────────────────────────┤
│          │                                                     │
│ Dashboard│              Content Area                           │
│ Watchlist│                                                     │
│ Portfolio│                                                     │
│ Market   │                                                     │
│ Intel    │                                                     │
│ ──────── │                                                     │
│ Settings │                                                     │
│ [User]   │                                                     │
│          │                                                     │
└──────────┴─────────────────────────────────────────────────────┘
```

### Sidebar Features

- **Collapsible**: Toggle-Button zum Minimieren
- **Badges**: Notification-Count auf Watchlist
- **User-Info**: Tier, Domain-Nutzung, Upgrade-Link
- **Admin-Link**: Nur für Admins sichtbar
- **Responsive**: Versteckt auf Mobile (→ Mobile Nav)

### Seiten

| Route | Beschreibung | Konzept-Feature |
|-------|--------------|-----------------|
| `/dashboard` | Übersicht mit Activity Feed + Market Pulse | ✅ |
| `/watchlist` | Domain-Watchlist mit Ampel-System | ✅ |
| `/portfolio` | Portfolio-Verwaltung | ✅ |
| `/market` | Auktions-Aggregator | ✅ |
| `/intelligence` | TLD-Daten & Analysen | ✅ |
| `/settings` | Profil, Notifications, Billing | ✅ |
| `/admin` | Admin-Panel (nur für Admins) | ✅ |

---

## 🚦 Status-Indikatoren (Ampel-System)

### Watchlist Domain Status

| Status | Farbe | Bedeutung |
|--------|-------|-----------|
| 🟢 **Available** | Grün (pulsierend) | Domain ist verfügbar! |
| 🟡 **Watching** | Gelb | Wird überwacht, Änderungen erkannt |
| 🔴 **Stable** | Grau | Domain ist registriert und aktiv |

---

## 📱 Mobile Navigation

### Public

```
┌────────────────────────────────────┐
│ POUNCE                       [☰]  │
├────────────────────────────────────┤
│ (Hamburger Menu öffnet)            │
│ • Market                           │
│ • TLD Intel                        │
│ • Pricing                          │
│ ───────────────                    │
│ [Sign In]                          │
│ [Get Started]                      │
└────────────────────────────────────┘
```

### Command Center (Logged In)

Sidebar wird zum Hamburger-Menu auf Mobil.

---

## 🔄 User Flows

### Flow 1: Besucher → Registrierung

```
Landing Page → Domain suchen → "Taken" 
→ "Track this domain" → Login Prompt 
→ Registrieren → Dashboard → Watchlist
```

### Flow 2: Free User → Upgrade

```
Watchlist → Limit erreicht (5 Domains) 
→ "Upgrade to track more" Banner → Pricing 
→ Stripe Checkout → Dashboard (upgraded)
```

### Flow 3: Daily User Flow

```
Login → Dashboard (Activity Feed) 
→ "Domain X is available!" Notification 
→ Click → Watchlist → "Register" Button → Registrar
```

---

## 📁 Dateistruktur

```
frontend/src/
├── components/
│   ├── Header.tsx              # Public Header
│   ├── Sidebar.tsx             # Command Center Sidebar
│   ├── CommandCenterLayout.tsx # Layout für logged-in
│   └── Footer.tsx              # Public Footer
│
├── app/
│   ├── page.tsx                # Landing Page (public)
│   ├── auctions/               # Public auctions
│   ├── tld-pricing/            # Public TLD data
│   ├── pricing/                # Pricing page
│   ├── blog/                   # Blog
│   │
│   ├── dashboard/              # Command Center Home
│   ├── watchlist/              # Watchlist (logged-in)
│   ├── portfolio/              # Portfolio (logged-in)
│   ├── market/                 # Market Scanner (logged-in)
│   ├── intelligence/           # TLD Intelligence (logged-in)
│   ├── settings/               # Settings (logged-in)
│   └── admin/                  # Admin Panel
```

---

## ✅ Implementierte Features

### Navigation & Layout
- [x] Sidebar-Navigation für Command Center
- [x] Collapsible Sidebar mit localStorage
- [x] Header für Public Pages
- [x] Command Center Button für eingeloggte User auf Public Pages

### Dashboard
- [x] Activity Feed mit verfügbaren Domains
- [x] Market Pulse mit auslaufenden Auktionen
- [x] Trending TLDs
- [x] Quick Add to Watchlist
- [x] Stats Overview (Domains, Available, Portfolio, Tier)

### Watchlist
- [x] Ampel-System (Available/Watching/Stable)
- [x] Add/Remove Domains
- [x] Notification Toggle
- [x] History View
- [x] Filter nach Status
- [x] Suche

### Portfolio
- [x] Add/Edit/Delete Domains
- [x] Valuation
- [x] Sell Tracking
- [x] Summary Stats

### Market Scanner
- [x] Tabs: All/Ending Soon/Hot/Opportunities
- [x] Platform Filter
- [x] Search
- [x] Sorting

### Intelligence
- [x] TLD Overview
- [x] Price Data
- [x] Trend Indicators

---

## 🎨 Design-Prinzipien

1. **Dark Mode First**: Dunkles Design mit Accent-Grün
2. **Bloomberg Vibe**: Datenintensiv aber aufgeräumt
3. **Minimalistisch**: Keine Ablenkung, Fokus auf Aktionen
4. **Responsive**: Mobile-first mit adaptierbarer Navigation
5. **Pro-Tool Feel**: Sidebar vermittelt "Werkzeug"-Charakter

---

## 📊 Konzept-Alignment: 95%

| Feature | Konzept | Status |
|---------|---------|--------|
| Sidebar Navigation | ✅ | Implementiert |
| Activity Feed | ✅ | Implementiert |
| Market Pulse | ✅ | Implementiert |
| Watchlist (Ampel) | ✅ | Implementiert |
| Separate Routes | ✅ | Implementiert |
| Quick Search (⌘K) | ✅ | Implementiert |
| Saved Filters | ❌ | Noch nicht |
| Pre-Drop Alerts | ⚠️ | Backend ready, UI pending |