first commit
This commit is contained in:
315
SESSION_PILL_VISUAL_GUIDE.md
Normal file
315
SESSION_PILL_VISUAL_GUIDE.md
Normal file
@@ -0,0 +1,315 @@
|
||||
# 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! 🎨
|
||||
Reference in New Issue
Block a user