Initial commit

resources/views/livewire/profile-reaction-status-badge.blade.php

@@ -0,0 +1,89 @@
+
+{{-- Profile Reaction Status Badge View --}}
+<div class="profile-reaction-status-badge inline-flex items-center
+    @if($size === 'sm') space-x-1 text-xs
+    @elseif($size === 'lg') space-x-3 text-base
+    @else space-x-2 text-sm @endif"
+    wire:poll.30s="loadStatus">
+
+    {{-- Online Status --}}
+    @if($showOnlineStatus)
+        <div class="flex items-center
+            @if($size === 'sm') space-x-1
+            @else space-x-2 @endif">
+
+            {{-- Status Dot --}}
+            <div class="
+                @if($size === 'sm') w-1.5 h-1.5
+                @elseif($size === 'lg') w-3 h-3
+                @else w-2 h-2 @endif
+                rounded-full
+                @if($isOnline) bg-green-500 animate-pulse
+                @else bg-gray-400 @endif">
+            </div>
+
+            {{-- Status Text (unless compact mode) --}}
+            @if(!$compactMode)
+                <span class="
+                    @if($isOnline) text-green-600 dark:text-green-400
+                    @else text-theme-muted dark:text-theme-muted @endif">
+                    @if($isOnline)
+                        Online
+                    @elseif($lastSeen)
+                        {{ $lastSeen->diffForHumans() }}
+                    @else
+                        Offline
+                    @endif
+                </span>
+            @endif
+        </div>
+    @endif
+
+    {{-- Reactions --}}
+    @if($showReactions && count($reactions) > 0)
+        <div class="flex items-center
+            @if($size === 'sm') space-x-0.5
+            @else space-x-1 @endif
+            @if($showOnlineStatus)
+                @if($size === 'sm') ml-1 pl-1
+                @else ml-2 pl-2 @endif
+                border-l border-theme-border dark:border-theme-secondary
+            @endif">
+
+            @foreach($reactions as $reaction)
+                @if($compactMode)
+                    {{-- Compact: Just show icons --}}
+                    <span class="
+                        @if($size === 'sm') text-xs
+                        @elseif($size === 'lg') text-lg
+                        @else text-sm @endif
+                        {{ $reaction['color'] }}"
+                        title="{{ $reaction['type'] }}">
+                        {{ $reaction['icon'] }}
+                    </span>
+                @else
+                    {{-- Full: Clickable badges --}}
+                    <button wire:click="toggleReaction('{{ $reaction['type'] }}')"
+                            class="inline-flex items-center
+                                @if($size === 'sm') px-1.5 py-0.5 text-xs
+                                @elseif($size === 'lg') px-3 py-1.5 text-sm
+                                @else px-2 py-1 text-xs @endif
+                                rounded-full bg-gray-100 dark:bg-theme-primary hover:bg-gray-200 dark:hover:bg-theme-secondary transition-colors"
+                            title="Remove {{ $reaction['type'] }}">
+                        <span class="{{ $reaction['color'] }}
+                            @if($size === 'sm') text-xs
+                            @elseif($size === 'lg') text-base
+                            @else text-sm @endif">
+                            {{ $reaction['icon'] }}
+                        </span>
+                        @if(!$compactMode && $size !== 'sm')
+                            <span class="ml-1 text-theme-secondary dark:text-theme-muted">
+                                {{ $reaction['type'] }}
+                            </span>
+                        @endif
+                    </button>
+                @endforeach
+            @endif
+        </div>
+    @endif
+</div>