# 🎨 Activity Feed Features & Animations

## ✨ Implementierte Features

### 1. **Dynamische Activity Bubbles**
Jede Aktivität hat ihre eigene:
- 🎨 Einzigartige Pastellfarben
- 🎭 Spezifische Animationen
- 🔗 Interaktive Links
- 💫 Hintergrundeffekte

---

## 🎬 Animations-Typen

### 🔨 Coding Activity
**Visueller Effekt:**
- **Matrix Rain** im Hintergrund (grüne 0/1 Zahlen fallen)
- Rotierendes Terminal-Icon
- Grüner Pulsing-Dot

**Daten:**
```json
{
  "type": "coding",
  "details": "Building Portfolio Website",
  "project": "portfolio",
  "language": "TypeScript",
  "repo": "https://github.com/user/repo",
  "link": "https://github.com/user/repo/commit/abc123"
}
```

**Animation:**
- 15 vertikal fallende Spalten mit 0/1 Zeichen
- Unterschiedliche Geschwindigkeiten (2-5s)
- Opacity fade in/out
- Mint-grüne Farbe (liquid-mint)

---

### 🎵 Music Activity (Now Playing)
**Visueller Effekt:**
- **Sound Waves** (5 animierte Balken)
- Rotierendes Album Cover (10s pro Rotation)
- Pulsierendes Headphone-Icon
- Progress Bar

**Daten:**
```json
{
  "isPlaying": true,
  "track": "Song Title",
  "artist": "Artist Name",
  "album": "Album Name",
  "progress": 45,
  "albumArt": "https://url-to-image.jpg",
  "spotifyUrl": "https://open.spotify.com/track/..."
}
```

**Features:**
- ✅ Link "Listen with me" → Spotify Track
- ✅ Live Progress Bar (0-100%)
- ✅ Verschwindet automatisch wenn Musik stoppt
- ✅ Album Cover rotiert kontinuierlich

**Animation:**
- 5 vertikale Balken bewegen sich wellenförmig (20-80% Höhe)
- Jeder Balken 0.1s delay
- 0.8s Animationsdauer
- Rose/Coral Gradient

---

### 🏃 Running Activity
**Visueller Effekt:**
- **Animierter Läufer-Emoji** (🏃) bewegt sich von links nach rechts
- Horizontale "Laufbahn" als Linie
- Lime-grüne Farbpalette

**Daten:**
```json
{
  "type": "running",
  "details": "Morning run - 5km",
  "link": "https://strava.com/activities/..."
}
```

**Animation:**
- Läufer bewegt sich linear von -10% bis 110% (3s)
- Kontinuierliche Wiederholung
- Unendlich Loop

---

### 🎮 Gaming Activity
**Visueller Effekt:**
- **Particle System** (10 schwebende Partikel)
- Peach/Orange Farbschema
- Gamepad-Icon

**Daten:**
```json
{
  "game": "Elden Ring",
  "platform": "steam",
  "status": "playing"
}
```

**Animation:**
- 10 Partikel an zufälligen Positionen
- Scale animation (0 → 1 → 0)
- Opacity fade
- Unterschiedliche Delays (0-2s)
- 2s Gesamtdauer, unendlich

---

### 📺 Watching Activity
**Visueller Effekt:**
- **TV Scan Lines** (retro CRT-Effekt)
- Lavender/Pink Gradient
- TV-Icon

**Daten:**
```json
{
  "title": "Breaking Bad S05E14",
  "platform": "netflix",
  "type": "series"
}
```

**Animation:**
- Horizontaler Gradient-Balken (8px hoch)
- Bewegt sich von -100% bis 200% vertikal
- 3s linear
- Weiß/transparent gradient
- Simuliert alte TV-Bildschirme

---

### 😊 Status & Mood
**Visueller Effekt:**
- **Wackelndes Emoji** (rotate: 0° → 10° → -10° → 0°)
- Lavender/Pink Gradient
- Custom Message

**Daten:**
```json
{
  "mood": "💻",
  "customMessage": "Deep work mode - Building features"
}
```

**Animation:**
- Emoji schwingt hin und her
- 2s Dauer, easeInOut
- Unendliche Wiederholung
- Subtile Bewegung (-10° bis +10°)

---

## 🎯 Interaktive Elemente

### 1. **Spotify "Listen with me"**
```tsx
<a href={spotifyUrl} target="_blank">
  <Waves size={10} />
  Listen with me
</a>
```
- Öffnet Spotify Web Player
- Direkt zum aktuellen Song
- Kleine Wellen-Icon

### 2. **GitHub "View Repo"**
```tsx
<a href={repoUrl} target="_blank">
  View <ExternalLink size={10} />
</a>
```
- Link zum Repository
- External Link Icon
- Hover Underline

### 3. **Live Progress Bar**
- Dynamisch basiert auf Spotify API
- Smooth animation (0.5s transition)
- Rose → Coral Gradient

---

## 🎨 Farbschema pro Activity

| Activity | Background Gradient | Border | Pulse Dot |
|----------|-------------------|--------|-----------|
| Coding | `from-liquid-mint/20 to-liquid-sky/20` | `border-liquid-mint/40` | Green |
| Music | `from-liquid-rose/20 to-liquid-coral/20` | `border-liquid-rose/40` | Red |
| Gaming | `from-liquid-peach/20 to-liquid-yellow/20` | `border-liquid-peach/40` | Orange |
| Watching | `from-liquid-lavender/20 to-liquid-pink/20` | `border-liquid-lavender/40` | Purple |
| Running | `from-liquid-lime/20 to-liquid-mint/20` | `border-liquid-lime/40` | Lime |
| Reading | `from-liquid-teal/20 to-liquid-lime/20` | `border-liquid-teal/40` | Teal |

---

## 💬 AI Chatbot Features

### Design
- **Gradient Header**: Mint → Sky
- **Message Bubbles**: 
  - User: Stone-900 gradient, rounded-tr-none
  - AI: White → Stone-50 gradient, rounded-tl-none
- **Sparkles Icon**: Animated AI indicator
- **Thinking State**: Rotating Loader2 mit liquid-mint Farbe

### Features
- ✅ Real-time responses via n8n
- ✅ Fallback responses bei Offline
- ✅ Context über Dennis
- ✅ Smooth animations
- ✅ Loading states
- ✅ Error handling

### Example Responses
```
"Great question! Dennis specializes in..."
"Dennis loves self-hosting! He manages..."
"Check out his projects to see what he's building!"
```

---

## 🎭 Zusätzliche Animation-Ideen

### Noch nicht implementiert (Ideen):

#### 1. **Coffee Counter ☕**
```tsx
{coffeeCount > 0 && (
  <motion.div
    animate={{ 
      y: [0, -5, 0],
      rotate: [0, -5, 5, 0] 
    }}
  >
    ☕ × {coffeeCount}
  </motion.div>
)}
```

#### 2. **Code Streak 🔥**
```tsx
<motion.div>
  🔥 {consecutiveDays} day streak!
</motion.div>
```

#### 3. **Live Visitor Count 👥**
```tsx
<motion.div
  animate={{ scale: [1, 1.05, 1] }}
>
  👥 {liveVisitors} online
</motion.div>
```

#### 4. **Deployment Status 🚀**
```tsx
{isDeploying && (
  <motion.div>
    <Rocket className="animate-bounce" />
    Deploying...
  </motion.div>
)}
```

#### 5. **Weather Integration 🌤️**
```tsx
<motion.div>
  {weatherEmoji} {temperature}°C in Osnabrück
</motion.div>
```

#### 6. **Pomodoro Timer 🍅**
```tsx
{pomodoroActive && (
  <CircularProgress value={timeLeft} />
)}
```

---

## 🔄 Auto-Clear Logic

### Musik
- ✅ Verschwindet automatisch wenn `is_playing = false`
- ✅ n8n checkt alle 30s via Spotify API
- ✅ Database Update wenn gestoppt

### Aktivitäten
- ✅ Verfallen nach 2 Stunden
- ✅ Check in API Route: `hoursSinceUpdate < 2`
- ✅ Optionaler n8n Cleanup-Workflow

### Gaming
- ✅ Basiert auf Discord Presence
- ✅ Auto-clear wenn Spiel beendet

---

## 📱 Responsive Design

### Mobile (< 768px)
- Bubbles: `max-w-[calc(100vw-6rem)]`
- Stacked vertikal
- Chat: Full-width minus padding

### Desktop (> 768px)
- Fixed `bottom-6 right-6`
- Bubbles: `max-w-xs` (320px)
- Chat: 384px breit

---

## 🚀 Performance

### Optimierungen
- ✅ `will-change: transform` für Animationen
- ✅ `AnimatePresence` für smooth exit
- ✅ `overflow: hidden` auf animated containers
- ✅ `pointer-events-none` auf Hintergrund-Effekte
- ✅ CSS `backdrop-filter` statt JS blur
- ✅ Relative Z-Index (10, 20, 9999)

### Polling
- Frontend: Alle 30s (konfigurierbar)
- Spotify: Alle 30s (n8n)
- GitHub: Echtzeit via Webhooks
- Discord: Alle 60s

---

## 🎨 Neue Activity hinzufügen

### 1. **Backend (Database)**
```sql
ALTER TABLE activity_status 
ADD COLUMN new_activity_field VARCHAR(255);
```

### 2. **n8n Workflow**
```javascript
// Update database
UPDATE activity_status SET
  new_activity_field = 'value'
WHERE id = 1;
```

### 3. **Frontend (ActivityFeed.tsx)**
```tsx
// Add to interface
interface ActivityData {
  newActivity: {
    field: string;
  } | null;
}

// Add color scheme
const activityColors = {
  newActivity: {
    bg: "from-liquid-purple/20 to-liquid-pink/20",
    border: "border-liquid-purple/40",
    text: "text-liquid-purple",
    pulse: "bg-purple-500",
  }
};

// Add animation component
const NewActivityAnimation = () => {
  return (
    <div className="absolute inset-0">
      {/* Your custom animation */}
    </div>
  );
};

// Render function
const renderNewActivity = () => {
  if (!data?.newActivity) return null;
  
  return (
    <motion.div className="...">
      <NewActivityAnimation />
      {/* Content */}
    </motion.div>
  );
};
```

---

## 📊 Analytics Integration

### Track Activity Views
```typescript
// In ActivityFeed
useEffect(() => {
  if (data?.activity) {
    fetch('/api/analytics/activity-view', {
      method: 'POST',
      body: JSON.stringify({ 
        type: data.activity.type 
      })
    });
  }
}, [data?.activity]);
```

### Popular Activities Dashboard
```sql
SELECT 
  activity_type,
  COUNT(*) as views,
  AVG(duration) as avg_duration
FROM activity_history
WHERE created_at > NOW() - INTERVAL '7 days'
GROUP BY activity_type
ORDER BY views DESC;
```

---

## 🎯 Nächste Steps

1. ✅ Datenbank Setup (`setup_activity_status.sql`)
2. ✅ n8n Workflows importieren
3. ⏳ Spotify OAuth konfigurieren
4. ⏳ GitHub Webhooks setup
5. ⏳ Activity Dashboard testen
6. ⏳ AI Chatbot mit OpenAI verbinden
7. ⏳ Auto-Clear Workflows aktivieren

---

## 🎨 Design Philosophy

- **Smooth**: Alle Animationen 0.5-1s, nie schneller
- **Subtle**: Opacity 20-40%, nie zu grell
- **Consistent**: Gleiche Easing-Function überall
- **Performant**: GPU-beschleunigt (transform, opacity)
- **Delightful**: Kleine Details machen den Unterschied

---

**Happy Coding! 🚀**