# Signal Bars UI Component

## Visual Display

The engagement signal bars appear in the top-right of each post card, next to the timestamp.

### Signal Bar Examples

**Level 0 (0-10%)** - No bars displayed
```
🕐 2 hours ago
```

**Level 1 (10-30%)** - 1 bar
```
█░░░ 25  🕐 2 hours ago
```

**Level 2 (30-60%)** - 2 bars
```
██░░ 45  🕐 2 hours ago
```

**Level 3 (60-80%)** - 3 bars
```
███░ 72  🕐 2 hours ago
```

**Level 4 (80-100%)** - 4 bars
```
████ 100  🕐 2 hours ago
```

## Component Details

### Location
- **File**: `resources/views/nurse/connect/partials/post-card.blade.php`
- **Position**: Top-right corner of post header, next to timestamp

### Design
- **Bar Style**: Vertical rounded bars (1px wide, 12px tall)
- **Active Color**: Gradient from `#1D5BBF` (blue) to `#27B1A2` (teal)
- **Inactive Color**: `#E2E8F0` (slate-200)
- **Score Display**: Bold number in brand blue (`#1D5BBF`)
- **Tooltip**: Shows exact percentage on hover

### Code Structure

```blade
@if($post->signal_level > 0)
    <div class="flex items-center gap-1" title="Engagement: {{ number_format($post->signal_score, 1) }}%">
        @for($i = 1; $i <= 4; $i++)
            <div class="w-1 h-3 rounded-full {{ $i <= $post->signal_level ? 'bg-gradient-to-t from-[#1D5BBF] to-[#27B1A2]' : 'bg-slate-200' }}"></div>
        @endfor
        <span class="text-[10px] font-semibold text-[#1D5BBF] ml-0.5">{{ number_format($post->signal_score, 0) }}</span>
    </div>
@endif
```

### Data Requirements

The component expects these model attributes:
- `$post->signal_level` (integer 0-4)
- `$post->signal_score` (decimal 0-100)

## User Experience

### What Users See
1. **No Bars**: Post has minimal engagement (< 10% score)
2. **1-4 Bars**: Visual indicator of engagement strength
3. **Score Number**: Exact percentage value
4. **Hover Tooltip**: "Engagement: 45.3%" format

### Interpretation
- **More Bars** = Higher engagement relative to other recent posts
- **Score Updates** = Automatically recalculated after every interaction
- **Time Decay** = Older posts naturally lose signal strength (hourly updates)

## Testing

### View Current Scores
```bash
cd cura-app
php artisan tinker --execute="echo App\Models\NursePost::select('id', 'signal_score', 'signal_level')->orderBy('signal_score', 'desc')->limit(10)->get()->toJson(JSON_PRETTY_PRINT);"
```

### Simulate Engagement
Run the test scripts:
```bash
php test_engagement_levels.php
```

### Check Live Page
1. Clear view cache: `php artisan view:clear`
2. Visit: `/nurse/connect`
3. Look for the signal bars in post headers

## Customization Options

### Change Colors
Edit the Tailwind classes in the component:
```blade
'bg-gradient-to-t from-[#1D5BBF] to-[#27B1A2]'  // Active bars
'bg-slate-200'                                    // Inactive bars
'text-[#1D5BBF]'                                 // Score number
```

### Change Bar Size
Adjust width and height:
```blade
'w-1 h-3'  // Current: 4px wide, 12px tall
```

### Hide Score Number
Remove this line:
```blade
<span class="text-[10px] font-semibold text-[#1D5BBF] ml-0.5">{{ number_format($post->signal_score, 0) }}</span>
```

### Show on All Posts
Remove the `@if($post->signal_level > 0)` condition to display even for zero-engagement posts.

## Integration Checklist

✅ Database columns added (`signal_score`, `signal_level`)
✅ Service layer computing scores (`PostEngagementService`)
✅ Model updated with fillable fields (`NursePost`)
✅ Controller triggering recomputation (after each interaction)
✅ Scheduler running hourly updates (`routes/console.php`)
✅ UI component displaying bars (`post-card.blade.php`)

## Next Steps

- Monitor engagement patterns in production
- Adjust thresholds if needed (currently 10/30/60/80)
- Consider adding engagement filter to feed (show high-engagement posts first)
- Track which content types get highest engagement
- Display "Trending" badge for Level 4 posts