From 7bff74a039af9e83b1d9eab4e92a98debd3f6718 Mon Sep 17 00:00:00 2001
From: = <kushal.sentientgeeks@outlook.com>
Date: Thu, 14 May 2026 14:03:31 +0000
Subject: [PATCH] refactor: extract connection status UI into reusable
 component and update ConnectedApps template

---
 .../dashboard/connected-apps/⚡all.blade.php  | 20 +++----------------
 .../shared/connection-status.blade.php        | 20 +++++++++++++++++++
 2 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 resources/views/components/shared/connection-status.blade.php

diff --git a/resources/views/components/dashboard/connected-apps/⚡all.blade.php b/resources/views/components/dashboard/connected-apps/⚡all.blade.php
index 9aaf122..8a0a7d3 100644
--- a/resources/views/components/dashboard/connected-apps/⚡all.blade.php
+++ b/resources/views/components/dashboard/connected-apps/⚡all.blade.php
@@ -9,14 +9,11 @@
 use Livewire\Component;
 use Spatie\LaravelData\Attributes\DataCollectionOf;
 use Spatie\LaravelData\DataCollection;
+use Spatie\LaravelData\PaginatedDataCollection;
 
 new class extends Component {
-    #[DataCollectionOf(ConnectedAppData::class)]
-    public DataCollection $connectedApps;
-
     public function mount(): void
     {
-        $this->connectedApps = $this->getConnectedApps();
     }
 
     #[Computed]
@@ -29,7 +26,7 @@ private function getConnectedApps()
 ?>
 
 <div class="flex overflow-x-auto gap-x-4">
-    @foreach ($connectedApps as $app)
+    @foreach ($this->getConnectedApps as $app)
         <x-shared.card class="min-w-60 p-4" wire:key="{{$app->id}}">
             <div class="flex space-x-4">
                 <div class="bg-blue-200 p-4 rounded-lg flex items-center justify-center max-h-10">
@@ -45,18 +42,7 @@ private function getConnectedApps()
                 </div>
             </div>
             <div class="mt-4 flex space-x-2.5 justify-between items-center">
-                <div class="flex items-center space-x-1">
-                    <div
-                        @class([
-                        "w-2 h-2 rounded-full",
-                        'bg-green-400' => $app->status === ConnectionStatusEnum::Connected,
-                        'bg-gray-400' => $app->status === ConnectionStatusEnum::Disconnected,
-                        'bg-yellow-400' => $app->status === ConnectionStatusEnum::Pending,
-                        'bg-red-400' => $app->status === ConnectionStatusEnum::Error,
-                        ])
-                    ></div>
-                    <p class="text-sm">{{ucfirst($app->status->name)}}</p>
-                </div>
+                <x-shared.connection-status :status="$app->status"/>
                 <x-shared.button>Revoke</x-shared.button>
             </div>
         </x-shared.card>
diff --git a/resources/views/components/shared/connection-status.blade.php b/resources/views/components/shared/connection-status.blade.php
new file mode 100644
index 0000000..8f2b1f0
--- /dev/null
+++ b/resources/views/components/shared/connection-status.blade.php
@@ -0,0 +1,20 @@
+@php use App\Enums\ConnectionStatusEnum; @endphp
+@props(['status'])
+@php
+    if (!$status instanceof ConnectionStatusEnum){
+        $status = ConnectionStatusEnum::tryFrom($status);
+    }
+@endphp
+
+<div class="flex gap-x-2 items-center text-sm">
+    <div
+        @class([
+        "w-2 h-2 rounded-full",
+        'bg-green-400' => $status === ConnectionStatusEnum::Connected,
+        'bg-gray-400' => $status === ConnectionStatusEnum::Disconnected,
+        'bg-yellow-400' => $status === ConnectionStatusEnum::Pending,
+        'bg-red-400' => $status === ConnectionStatusEnum::Error,
+        ])
+    ></div>
+    {{ $status->name }}
+</div>