TurboTrades/SESSION_PILL_VISUAL_GUIDE.md

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

<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

<!-- 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

<!-- 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

<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! 🎨