fix(enable-banking): one primary action per connection state on /settings/banking (#1727)

Restructure the banking settings page so every connection state has a
clear hierarchy:

- One "Dina bankkopplingar" group sorted by state precedence
  (pending_selection, pending, error, expired, expiring soon, active),
  replacing the three-way group split. State derivation, sorting and
  worst-state selection live in a pure, unit-tested helper
  (lib/connection-state.ts).
- Exactly one page-level .attn sentence for the worst state, or none;
  the BankSyncStatusChip is removed from this page (it linked to
  itself; it stays on /transactions and /import).
- Each row shows one primary action per state (Valj konton, Forsok
  igen, Fornya samtycke, Synka nu); everything else moves into a "..."
  menu, and details (accounts, IBAN, balances, initial historik) sit
  behind a collapsed disclosure. Expired rows never show balances.
- Expiring-soon active rows get a "Fornya samtycke" primary that
  reconnects without a psu-type override (the server reuses the stored
  psu_type); the explicit account-type choice stays in the menu.
- "Anslut ny bank" collapses behind one outline "Anslut en bank till"
  button whenever a non-revoked connection exists; the reuse-session
  group only shows while the connect-new surface is visible.
- Fresh connects to an already-connected bank are intercepted with a
  renew-instead dialog; "Anslut som ny" proceeds with force_new: true
  for the upcoming server-side 409 guard.
- In-flight 'pending' rows render as a spinner row ("Vantar pa banken")
  instead of being invisible.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

components/settings/sections/BankingSettingsContent.tsx

@@ -10,7 +10,6 @@ import { useToast } from '@/components/ui/use-toast'
 import { AlertTriangle, CreditCard, ExternalLink } from 'lucide-react'
 import { getSettingsPanel } from '@/lib/extensions/settings-panel-registry'
 import { ENABLED_EXTENSION_IDS } from '@/lib/extensions/_generated/enabled-extensions'
-import BankSyncStatusChip from '@/components/transactions/BankSyncStatusChip'
 import { SettingsSectionHeader } from '@/components/settings/SettingsRows'
 
 const BankingPanel = getSettingsPanel('enable-banking')
@@ -124,14 +123,10 @@ export function BankingSettingsContent() {
       )}
 
       {hasBankingExtension && BankingPanel ? (
-        <>
-          {/* The chip renders null when there are no connections; empty:hidden
-              keeps its margin from leaving a stray gap in that case. */}
-          <div className="mt-6 empty:hidden">
-            <BankSyncStatusChip />
-          </div>
-          <BankingPanel />
-        </>
+        // No BankSyncStatusChip here: on this page the chip links to itself,
+        // and the panel now carries its own single attention sentence. The
+        // chip stays on /transactions.
+        <BankingPanel />
       ) : (
         <div className="pt-8">
           <EmptyState