# Session Pills - Visual Guide

## What Are Session Pills?

Session pills are small, colored badges that display the last 6 characters of a session ID. They provide a visual way to identify which session performed a specific action (like a transaction).

## Visual Examples

### In Transactions Page

```
┌─────────────────────────────────────────────────────────────────┐
│ Transaction History                                              │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  💰 Deposit                                    +$121.95          │
│  PayPal deposit                                                  │
│  📅 2 days ago  💻 Session: [DBDBDD]  🖥️ Chrome                 │
│                             ^^^^^^^^                             │
│                           (colored pill)                         │
│                                                                  │
│  🛒 Purchase                                   -$244.67          │
│  Karambit | Fade                                                 │
│  📅 5 days ago  💻 Session: [DBDBE1]  🖥️ Edge                   │
│                             ^^^^^^^^                             │
│                           (colored pill)                         │
│                                                                  │
│  💸 Withdrawal                                 -$82.90           │
│  Bank transfer                                                   │
│  📅 1 week ago  💻 Session: [DBDBDD]  🖥️ Chrome                 │
│                             ^^^^^^^^                             │
│                           (colored pill)                         │
└─────────────────────────────────────────────────────────────────┘
```

### In Profile Page - Active Sessions

```
┌─────────────────────────────────────────────────────────────────┐
│ Active Sessions                                                  │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  🖥️ Chrome on Windows 10                                         │
│  Location: United States                                         │
│  Last Active: 5 minutes ago                                      │
│  Session ID: [DBDBDD]  ⚙️ Manage                                 │
│              ^^^^^^^^                                            │
│            (colored pill)                                        │
│                                                                  │
│  📱 Safari on iOS                                                │
│  Location: United States                                         │
│  Last Active: 2 hours ago                                        │
│  Session ID: [DBDBE1]  ⚙️ Manage                                 │
│              ^^^^^^^^                                            │
│            (colored pill)                                        │
└─────────────────────────────────────────────────────────────────┘
```

## Color Examples

Each session gets a unique color based on its ID:

```
Session DBDBDD → 🟦 Blue pill
Session DBDBE1 → 🟨 Orange pill
Session DBDBE3 → 🟩 Green pill
Session DBDBDA → 🟪 Purple pill
```

## Real Implementation

### HTML/Vue Structure

```vue
<span
  :style="{
    backgroundColor: getSessionColor(transaction.sessionIdShort),
  }"
  class="px-2 py-0.5 rounded text-white font-mono text-[10px]"
  :title="`Session ID: ${transaction.sessionIdShort}`"
>
  {{ transaction.sessionIdShort }}
</span>
```

### Rendered in Browser

```
┌──────────┐
│ DBDBDD   │  ← White text on colored background
└──────────┘     Monospace font, small size, rounded corners
```

### With Context (Full Line)

```
📅 2 days ago  💻 Session: ┌──────────┐  🖥️ Chrome on Windows
                           │ DBDBDD   │
                           └──────────┘
```

## Why Pills?

### ✅ Benefits

1. **Visual Identification**: Easy to spot which session did what
2. **Consistency**: Same session = same color across all pages
3. **Compact**: Shows info without taking much space
4. **Secure**: Only shows last 6 chars, not full token
5. **User-Friendly**: Color + text for quick recognition

### 🎨 Color Algorithm

```
Session ID → Hash → HSL Color
"DBDBDD"   →  123  → hsl(123, 65%, 50%) → Green
"DBDBE1"   →  456  → hsl(96, 70%, 55%)  → Yellow-Green
"DBDBE3"   →  789  → hsl(249, 75%, 48%) → Blue-Purple
```

## Interaction Examples

### Hover Effect

```
┌──────────┐
│ DBDBDD   │  ← Hover shows tooltip:
└──────────┘     "Session ID: DBDBDD"
```

### In Transaction List

```
Your transaction from yesterday:
├─ Type: Deposit
├─ Amount: +$100.00
├─ Time: 1 day ago
└─ Session: [DBDBDD] ← This session made the deposit
```

### Matching Sessions

If you see the same colored pill in multiple places, it means the same session performed those actions:

```
Profile Page:
  Session [DBDBDD] - Chrome on Windows 10

Transactions Page:
  ✅ Deposit $100   Session: [DBDBDD] ← Same session!
  ✅ Purchase $50   Session: [DBDBDD] ← Same session!
  ✅ Withdrawal $25 Session: [DBDBE1] ← Different session!
```

## Data Flow

```
┌──────────────┐
│   Session    │
│   Created    │
│   (Login)    │
└──────┬───────┘
       │
       │ Session ID: 507f1f77bcf86cd799439011
       │
       ↓
┌──────────────────────┐
│   User Action        │
│   (e.g., Purchase)   │
└──────┬───────────────┘
       │
       │ Links to session
       │
       ↓
┌──────────────────────┐
│   Transaction        │
│   Record Created     │
│                      │
│   sessionId: 507f... │
│   sessionIdShort:    │
│   "439011"           │ ← Last 6 chars extracted
└──────┬───────────────┘
       │
       │ Displayed as:
       ↓
┌──────────────┐
│   439011     │ ← Colored pill
└──────────────┘
```

## Session Pills vs Traditional Display

### ❌ Old Way (No Pills)

```
Transaction #12345
Made by: Session 507f1f77bcf86cd799439011
Device: Chrome on Windows
```
- Hard to read
- Takes up space
- No visual distinction

### ✅ New Way (With Pills)

```
Transaction #12345
Session: [DBDBDD]  Chrome
```
- Clean and compact
- Visual color coding
- Easy to scan

## Quick Reference

| Element | Description | Example |
|---------|-------------|---------|
| **Full Session ID** | MongoDB ObjectId | `507f1f77bcf86cd799439011` |
| **Short ID** | Last 6 chars, uppercase | `DBDBDD` |
| **Pill Color** | HSL based on hash | `hsl(123, 65%, 50%)` |
| **Display Size** | Small monospace text | `10px font-mono` |
| **Background** | Dynamic color | Generated from ID |
| **Text Color** | White for contrast | `text-white` |

## Testing Your Pills

### Check if Pills Work:

1. **Login** to your account
2. **Navigate** to `/transactions`
3. **Look for** colored pills next to "Session:"
4. **Compare** colors - same session = same color
5. **Check** profile page - pills should match

### Example Test:

```
Step 1: Login via Steam
Step 2: Make a purchase (creates transaction)
Step 3: View transactions page
Step 4: Note the session pill color (e.g., blue DBDBDD)
Step 5: View profile page → Active Sessions
Step 6: Find the session with matching pill (blue DBDBDD)
Step 7: ✅ They match! Pills are working!
```

## Troubleshooting

### Pills Not Showing?

1. Check if transactions have `sessionIdShort` field
2. Verify `getSessionColor()` function exists
3. Check CSS classes are loaded
4. Verify transaction includes session data

### Pills All Same Color?

1. Check if different sessions exist
2. Verify hash function is working
3. Check if sessionIdShort is unique per session

### Pills Too Small/Large?

1. Adjust `text-[10px]` class
2. Modify `px-2 py-0.5` padding
3. Change `rounded` to `rounded-md` or `rounded-lg`

## Customization

### Change Pill Size

```vue
<!-- Small (default) -->
<span class="px-2 py-0.5 text-[10px]">DBDBDD</span>

<!-- Medium -->
<span class="px-3 py-1 text-xs">DBDBDD</span>

<!-- Large -->
<span class="px-4 py-2 text-sm">DBDBDD</span>
```

### Change Pill Shape

```vue
<!-- Rounded (default) -->
<span class="rounded">DBDBDD</span>

<!-- More rounded -->
<span class="rounded-md">DBDBDD</span>

<!-- Fully rounded (pill shape) -->
<span class="rounded-full">DBDBDD</span>

<!-- Square -->
<span class="rounded-none">DBDBDD</span>
```

### Add Border

```vue
<span class="border-2 border-white/20">DBDBDD</span>
```

## Summary

Session pills are a clean, visual way to track which session performed which action. They:

- Show the last 6 characters of the session ID
- Use deterministic colors for consistency
- Appear in both transactions and profile pages
- Help users understand their account activity
- Maintain security by not exposing full tokens

**Live Example**: Visit `/transactions` after running the seed script to see 28 transactions with colorful session pills! 🎨