315 lines
10 KiB
Markdown
315 lines
10 KiB
Markdown
# 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! 🎨 |