From f8507d38ae4dcc521dcd6a7b562e9f1154ad0dda Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <jakob.wennberg@arcim.io>
Date: Thu, 13 Aug 2026 14:36:58 +0200
Subject: [PATCH] fix(settings): land Medlemmar clicks on the members section
 (#1566)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The user-menu link pointed at /settings/team, but in-app navigation is
intercepted by the settings modal, whose section map has no team entry:
unknown sections fall back to Företag, leaving the user to scroll and
find Medlemmar themselves. Link to /settings/company#members instead,
and scroll the members section into view when it mounts (ref callback,
since the content mounts after the settings fetch). The hash is cleared
after scrolling so tab-switching back to Företag stays put.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 components/dashboard/UserMenu.tsx                |  2 +-
 .../settings/sections/CompanySettingsContent.tsx | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/UserMenu.tsx b/components/dashboard/UserMenu.tsx
index 64616f20..1c27c58b 100644
--- a/components/dashboard/UserMenu.tsx
+++ b/components/dashboard/UserMenu.tsx
@@ -334,7 +334,7 @@ export default function UserMenu({
                 <Settings className="h-4 w-4 flex-shrink-0" />
                 {tNav('settings')}
               </Link>
-              <Link href="/settings/team" onClick={close} className={menuRow}>
+              <Link href="/settings/company#members" onClick={close} className={menuRow}>
                 <Users className="h-4 w-4 flex-shrink-0" />
                 {tNav('members_roles')}
               </Link>
diff --git a/components/settings/sections/CompanySettingsContent.tsx b/components/settings/sections/CompanySettingsContent.tsx
index 3924ea7b..40f9afd8 100644
--- a/components/settings/sections/CompanySettingsContent.tsx
+++ b/components/settings/sections/CompanySettingsContent.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { CompanyDangerZone } from '@/components/settings/CompanyDangerZone'
@@ -22,6 +23,17 @@ export function CompanySettingsContent() {
   const tIntro = useTranslations('settings_intro')
   const { settings, isLoading, updateSettings, refetch } = useSettings()
 
+  // Deep-link target for "Medlemmar och roller" (/settings/company#members):
+  // a ref callback rather than an effect because this content mounts late
+  // (settings fetch + dynamic import); the callback fires exactly when the
+  // section exists. The hash is cleared after scrolling so switching tabs
+  // and returning to Företag doesn't scroll again.
+  const scrollToMembers = useCallback((node: HTMLDivElement | null) => {
+    if (!node || window.location.hash !== '#members') return
+    node.scrollIntoView({ block: 'start' })
+    history.replaceState(null, '', window.location.pathname + window.location.search)
+  }, [])
+
   if (isLoading) return <SettingsLoadingSkeleton />
   if (!settings) return <SettingsLoadError onRetry={refetch} />
 
@@ -77,7 +89,9 @@ export function CompanySettingsContent() {
         onUpdate={(url) => updateSettings({ logo_url: url })}
       />
 
-      <CompanyMembersSection />
+      <div id="members" ref={scrollToMembers} className="scroll-mt-6">
+        <CompanyMembersSection />
+      </div>
 
       <FiscalPeriodEditor />