Use Headless UI v2 data attributes and anchor positioning for UserMenu and ProfileTabs

web/frontend/app/features/users/components/profile/ProfileTabs.tsx

@@ -1,3 +1,5 @@
+import { Tab, TabGroup, TabList } from '@headlessui/react';
+
 export type ProfileTab = 'activity' | 'following' | 'liked';
 
 const TABS: { id: ProfileTab; label: string }[] = [
@@ -11,28 +13,23 @@ interface ProfileTabsProps {
     onChange: (tab: ProfileTab) => void;
 }
 
-const ProfileTabs = ({ activeTab, onChange }: ProfileTabsProps) => (
-    <div className="flex gap-6 border-b border-base-300" role="tablist">
-        {TABS.map((tab) => {
-            const active = tab.id === activeTab;
-            return (
-                <button
-                    key={tab.id}
-                    type="button"
-                    role="tab"
-                    aria-selected={active}
-                    onClick={() => onChange(tab.id)}
-                    className={`py-3 text-sm font-semibold border-b-2 -mb-px transition-colors ${
-                        active
-                            ? 'text-primary border-primary'
-                            : 'text-base-content/60 border-transparent hover:text-base-content'
-                    }`}
-                >
-                    {tab.label}
-                </button>
-            );
-        })}
-    </div>
-);
+const ProfileTabs = ({ activeTab, onChange }: ProfileTabsProps) => {
+    const selectedIndex = TABS.findIndex((tab) => tab.id === activeTab);
+
+    return (
+        <TabGroup selectedIndex={selectedIndex} onChange={(index) => onChange(TABS[index].id)}>
+            <TabList className="flex gap-6 border-b border-base-300">
+                {TABS.map((tab) => (
+                    <Tab
+                        key={tab.id}
+                        className="-mb-px border-b-2 border-transparent py-3 text-sm font-semibold text-base-content/60 transition-colors hover:text-base-content focus:outline-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-primary data-[selected]:border-primary data-[selected]:text-primary"
+                    >
+                        {tab.label}
+                    </Tab>
+                ))}
+            </TabList>
+        </TabGroup>
+    );
+};
 
 export default ProfileTabs;