Show disconnect alongside reconnect on lost social connections (#332)

When a social account's token expired or the connection was lost, the
Connections card only offered "Reconnect". Users who wanted to drop
that account and connect a different one had no way to do it from the UI.

The lost-connection card now renders both Reconnect and Disconnect,
reusing the existing disconnect confirmation flow. The connected-state
Disconnect button gets a data-testid too so browser tests can target
either state by account id.

resources/js/components/accounts/NetworkConnectGrid.vue

@@ -234,19 +234,34 @@ const cards = computed<ConnectCard[]>(() => {
                     </p>
                 </div>
 
-                <Button
+                <div
                     v-if="card.state === 'reconnect' && card.account"
-                    size="sm"
-                    class="mt-auto w-full"
-                    @click="startConnect(card.account.platform, card.account.id)"
+                    class="mt-auto flex w-full flex-col gap-2"
                 >
-                    {{ $t('accounts.reconnect') }}
-                </Button>
+                    <Button
+                        size="sm"
+                        class="w-full"
+                        :data-testid="`reconnect-${card.account.id}`"
+                        @click="startConnect(card.account.platform, card.account.id)"
+                    >
+                        {{ $t('accounts.reconnect') }}
+                    </Button>
+                    <Button
+                        variant="destructive"
+                        size="sm"
+                        class="w-full"
+                        :data-testid="`disconnect-${card.account.id}`"
+                        @click="disconnectAccount(card.account)"
+                    >
+                        {{ $t('accounts.disconnect') }}
+                    </Button>
+                </div>
                 <Button
                     v-else-if="card.state === 'connected' && card.account"
                     variant="destructive"
                     size="sm"
                     class="mt-auto w-full"
+                    :data-testid="`disconnect-${card.account.id}`"
                     @click="disconnectAccount(card.account)"
                 >
                     {{ $t('accounts.disconnect') }}

tests/Browser/NetworkConnectGridTest.php

@@ -71,3 +71,22 @@ function gridOwnerWithLinkedIn(): User
         ->assertVisible('@connect-x')
         ->assertNoJavaScriptErrors();
 });
+
+test('a lost connection offers both reconnect and disconnect', function () {
+    $user = gridOwnerWithLinkedIn();
+
+    $account = SocialAccount::factory()->x()->tokenExpired()->create([
+        'workspace_id' => $user->current_workspace_id,
+        'platform_user_id' => 'x-expired',
+    ]);
+
+    $this->actingAs($user);
+
+    $page = visit(route('app.accounts'));
+
+    waitForGridTestId($page, "disconnect-{$account->id}");
+
+    $page->assertVisible("@reconnect-{$account->id}")
+        ->assertVisible("@disconnect-{$account->id}")
+        ->assertNoJavaScriptErrors();
+});