feat: enable PSD2 bank integration via settings

- Uncomment Enable Banking extension in loader (now registered at runtime)
- Add subscriptionNotice field to ExtensionDefinition type
- Show confirmation dialog when enabling extensions with subscription requirements
- Fix Settings banking tab: toggle-aware visibility, URL-addressable tabs,
  BankSelector widget, correct API paths (/api/extensions/ext/enable-banking/*)
- Replace inline bank connection cards with BankConnectionStatus component
- Add actionable link to Settings from EnableBankingWorkspace
- Update CLAUDE.md with latest architecture docs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/dashboard/DashboardNav.tsx

@@ -76,11 +76,14 @@ export default function DashboardNav({ companyName, entityType, enabledExtension
   const isOvrigtExpanded = isOnOvrigtPage || manualOvrigtExpanded
   // Auto-expand Tillägg when on an extension page, or when manually toggled (persisted)
   const isOnExtensionPage = pathname.startsWith('/e/')
-  const [manualTillaggExpanded, setManualTillaggExpanded] = useState(() => {
-    if (typeof window === 'undefined') return false
-    return localStorage.getItem('tillagg-expanded') === 'true'
-  })
+  const [manualTillaggExpanded, setManualTillaggExpanded] = useState(false)
   const isTillaggExpanded = isOnExtensionPage || manualTillaggExpanded
+
+  // Restore persisted state after hydration to avoid SSR mismatch
+  useEffect(() => {
+    const stored = localStorage.getItem('tillagg-expanded') === 'true'
+    if (stored) setManualTillaggExpanded(true)
+  }, [])
   const [liveExtensions, setLiveExtensions] = useState(enabledExtensions ?? [])
 
   const fetchExtensions = useCallback(async () => {

components/extensions/ExtensionToggleButton.tsx

@@ -1,23 +1,71 @@
 'use client'
 
+import { useState } from 'react'
 import { Switch } from '@/components/ui/switch'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { useExtensionToggle } from '@/lib/extensions/hooks'
 
 export default function ExtensionToggleButton({
   sectorSlug,
   extensionSlug,
+  subscriptionNotice,
 }: {
   sectorSlug: string
   extensionSlug: string
+  subscriptionNotice?: string
 }) {
   const { enabled, isLoading, toggle } = useExtensionToggle(sectorSlug, extensionSlug)
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  function handleToggle() {
+    // Show confirmation dialog when enabling an extension with a subscription notice
+    if (!enabled && subscriptionNotice) {
+      setShowConfirm(true)
+      return
+    }
+    toggle()
+  }
+
+  function handleConfirm() {
+    setShowConfirm(false)
+    toggle()
+  }
 
   return (
-    <Switch
-      checked={enabled}
-      onCheckedChange={toggle}
-      disabled={isLoading}
-      aria-label={enabled ? 'Inaktivera tillägg' : 'Aktivera tillägg'}
-    />
+    <>
+      <Switch
+        checked={enabled}
+        onCheckedChange={handleToggle}
+        disabled={isLoading}
+        aria-label={enabled ? 'Inaktivera tillägg' : 'Aktivera tillägg'}
+      />
+
+      {subscriptionNotice && (
+        <Dialog open={showConfirm} onOpenChange={setShowConfirm}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Extern prenumeration krävs</DialogTitle>
+              <DialogDescription>{subscriptionNotice}</DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setShowConfirm(false)}>
+                Avbryt
+              </Button>
+              <Button onClick={handleConfirm}>
+                Jag förstår, aktivera
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
   )
 }

components/extensions/general/EnableBankingWorkspace.tsx

@@ -1,15 +1,24 @@
 'use client'
 
 import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
-import EmptyExtensionState from '@/components/extensions/shared/EmptyExtensionState'
-import { Landmark } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Landmark, Settings } from 'lucide-react'
+import Link from 'next/link'
 
 export default function EnableBankingWorkspace({ userId }: WorkspaceComponentProps) {
   return (
-    <EmptyExtensionState
-      title="Bankintegration (PSD2)"
-      description="Koppla ditt bankkonto under Inst\u00e4llningar f\u00f6r att synka transaktioner automatiskt."
-      icon={<Landmark className="h-12 w-12 text-muted-foreground/40 mb-4" />}
-    />
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <Landmark className="h-12 w-12 text-muted-foreground/40 mb-4" />
+      <h3 className="text-lg font-medium text-foreground">Bankintegration (PSD2)</h3>
+      <p className="text-sm text-muted-foreground mt-1 max-w-md">
+        Koppla ditt bankkonto under Inställningar för att synka transaktioner automatiskt.
+      </p>
+      <Button asChild variant="outline" className="mt-4">
+        <Link href="/settings?tab=banking">
+          <Settings className="mr-2 h-4 w-4" />
+          Gå till bankinställningar
+        </Link>
+      </Button>
+    </div>
   )
 }