fix(profile): make completion bar links open edit dialogs (#414)

Three completion bar items (avatar, headline, website/verification) used
hash links targeting elements inside a closed dialog, so clicking them
did nothing. Replace with an editRequest signal through ProfileEditProvider
context that opens the correct edit dialog when triggered.

src/components/completion-bar.tsx

···
 'use client';
 
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { CheckCircle, Circle, ArrowRight } from '@phosphor-icons/react';
 import { Progress } from '@/components/ui/progress';
+import { useProfileEdit } from '@/components/profile-edit-provider';
 import type { Profile } from '@/lib/types';
 
 interface CompletionItem {
   key: string;
   label: string;
   completed: boolean;
-  action: string;
+  /** Hash anchor for scroll-to-section items. */
+  scrollTo?: string;
+  /** Edit request key for items that open a dialog. */
+  editKey?: string;
 }
 
 function getCompletionItems(profile: Profile): CompletionItem[] {
···
       key: 'avatar',
       label: 'Add a profile photo',
       completed: Boolean(profile.avatar),
-      action: '#edit-avatar',
+      editKey: 'identity',
     },
     {
       key: 'headline',
       label: 'Write a headline',
       completed: Boolean(profile.headline),
-      action: '#edit-about',
+      editKey: 'identity',
     },
     {
       key: 'about',
       label: 'Add a professional summary',
       completed: Boolean(profile.about),
-      action: '#about',
+      scrollTo: '#about',
     },
     {
       key: 'current-position',
       label: 'Add your current position',
       completed: profile.positions.some((p) => p.current),
-      action: '#career',
+      scrollTo: '#career',
     },
     {
       key: 'past-position',
       label: 'Add a past position',
       completed: profile.positions.filter((p) => !p.current).length > 0,
-      action: '#career',
+      scrollTo: '#career',
     },
     {
       key: 'skills',
       label: 'Add 3+ skills',
       completed: profile.skills.length >= 3,
-      action: '#skills',
+      scrollTo: '#skills',
     },
     {
       key: 'education',
       label: 'Add education',
       completed: profile.education.length > 0,
-      action: '#education',
+      scrollTo: '#education',
     },
     {
       key: 'website',
       label: 'Add a website or verification',
       completed: Boolean(profile.website) || (profile.externalAccounts ?? []).length > 0,
-      action: '#edit-about',
+      editKey: 'externalAccounts',
     },
   ];
 }
···
 }
 
 export function CompletionBar({ profile }: CompletionBarProps) {
+  const { requestEdit } = useProfileEdit();
   const items = useMemo(() => getCompletionItems(profile), [profile]);
   const completedCount = items.filter((i) => i.completed).length;
   const percentage = Math.round((completedCount / items.length) * 100);
 
+  const handleAction = useCallback(
+    (item: CompletionItem) => {
+      if (item.editKey) {
+        requestEdit(item.editKey);
+      }
+    },
+    [requestEdit],
+  );
+
   if (!profile.isOwnProfile || percentage === 100) return null;
 
   const nextItem = items.find((i) => !i.completed);
···
       </div>
       <Progress value={percentage} className="h-2" aria-label={`Profile ${percentage}% complete`} />
 
-      {nextItem && (
-        <a
-          href={nextItem.action}
-          className="mt-3 flex items-center gap-2 text-sm text-primary underline-offset-4 hover:underline"
-        >
-          <ArrowRight className="h-4 w-4" weight="bold" aria-hidden="true" />
-          {nextItem.label}
-        </a>
-      )}
+      {nextItem && <CompletionAction item={nextItem} onAction={handleAction} />}
 
       <details className="mt-3">
         <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
···
     </div>
   );
 }
+
+function CompletionAction({
+  item,
+  onAction,
+}: {
+  item: CompletionItem;
+  onAction: (item: CompletionItem) => void;
+}) {
+  const className =
+    'mt-3 flex items-center gap-2 text-sm text-primary underline-offset-4 hover:underline';
+
+  if (item.scrollTo) {
+    return (
+      <a href={item.scrollTo} className={className}>
+        <ArrowRight className="h-4 w-4" weight="bold" aria-hidden="true" />
+        {item.label}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" onClick={() => onAction(item)} className={`${className} cursor-pointer`}>
+      <ArrowRight className="h-4 w-4" weight="bold" aria-hidden="true" />
+      {item.label}
+    </button>
+  );
+}

src/components/identity-card.tsx

···
   const { session } = useAuth();
   const tProfile = useTranslations('profile');
   const isEmbed = variant === 'embed';
-  const { isActualOwner, previewMode, togglePreview } = useProfileEdit();
+  const { isActualOwner, previewMode, togglePreview, editRequest, clearEditRequest } =
+    useProfileEdit();
   const isOwn = isOwnProfile || Boolean(session?.did && session.did === did);
+  const shouldOpenEdit = editRequest === 'identity' && isOwn;
   const [editing, setEditing] = useState(false);
+
+  if (shouldOpenEdit && !editing) {
+    setEditing(true);
+    clearEditRequest();
+  }
   const [copied, setCopied] = useState(false);
   const label = getDisplayLabel(displayName, handle);
 

src/components/profile-edit-provider.tsx

···
   addItem: (key: string, item: Record<string, unknown> & { rkey: string }) => void;
   updateItem: (key: string, rkey: string, fields: Record<string, unknown>) => void;
   removeItem: (key: string, rkey: string) => void;
+  /** Which edit dialog to open, e.g. 'identity' or 'externalAccounts'. */
+  editRequest: string | null;
+  /** Request a specific edit dialog to open. */
+  requestEdit: (section: string) => void;
+  /** Clear the edit request after consuming it. */
+  clearEditRequest: () => void;
 }
 
 const ProfileEditContext = createContext<ProfileEditContextValue | null>(null);
···
   const { session } = useAuth();
   const isActualOwner = Boolean(session?.did && session.did === initialProfile.did);
   const [previewMode, setPreviewMode] = useState(false);
+  const [editRequest, setEditRequest] = useState<string | null>(null);
+
+  const requestEdit = useCallback((section: string) => {
+    setEditRequest(section);
+  }, []);
+
+  const clearEditRequest = useCallback(() => {
+    setEditRequest(null);
+  }, []);
 
   const isOwnProfile = isActualOwner && !previewMode;
 
···
         addItem,
         updateItem,
         removeItem,
+        editRequest,
+        requestEdit,
+        clearEditRequest,
       }}
     >
       {children}
···
   addItem: NO_OP,
   updateItem: NO_OP,
   removeItem: NO_OP,
+  editRequest: null,
+  requestEdit: NO_OP,
+  clearEditRequest: NO_OP,
 };
 
 export function useProfileEdit(): ProfileEditContextValue {

src/components/profile-editor/editable-section.tsx

···
     value: string | boolean,
     currentValues: Record<string, string | boolean>,
   ) => Record<string, string | boolean> | undefined;
+  /** When this matches editRequest from ProfileEditProvider, auto-open the add dialog. */
+  editRequestKey?: string;
 }
 
 type DialogState<T> = { mode: 'add' } | { mode: 'edit'; item: T };
···
   disableOverflow,
   onPostSave,
   onFieldChange,
+  editRequestKey,
 }: EditableSectionProps<T>) {
-  const { profile, addItem, updateItem, removeItem } = useProfileEdit();
+  const { profile, addItem, updateItem, removeItem, editRequest, clearEditRequest } =
+    useProfileEdit();
+  const shouldOpenAdd = Boolean(editRequestKey && editRequest === editRequestKey && isOwnProfile);
   const [dialog, setDialog] = useState<DialogState<T> | null>(null);
+
+  if (shouldOpenAdd && !dialog) {
+    setDialog({ mode: 'add' });
+    clearEditRequest();
+  }
 
   const rawItems = (profile[profileKey as keyof typeof profile] as T[] | undefined) ?? [];
   const items = sortItems ? sortItems(rawItems) : rawItems;

src/components/profile-sections/external-accounts-section.tsx

···
         profileKey="externalAccounts"
         isOwnProfile={isOwnProfile}
         fields={externalAccountFields}
+        editRequestKey="externalAccounts"
         toValues={externalAccountToValues}
         fromValues={
           valuesToExternalAccount as (

tests/components/career-section.test.tsx

···
     updateItem: mockUpdateItem,
     removeItem: mockRemoveItem,
     updateProfile: vi.fn(),
+    editRequest: null,
+    requestEdit: vi.fn(),
+    clearEditRequest: vi.fn(),
   }),
 }));
 

tests/components/data-transparency-card.test.tsx

···
     addItem: vi.fn(),
     updateItem: vi.fn(),
     removeItem: vi.fn(),
+    editRequest: null,
+    requestEdit: vi.fn(),
+    clearEditRequest: vi.fn(),
   }),
 }));
 

tests/components/editable-section.test.tsx

···
     updateItem: mockUpdateItem,
     removeItem: mockRemoveItem,
     updateProfile: vi.fn(),
+    editRequest: null,
+    requestEdit: vi.fn(),
+    clearEditRequest: vi.fn(),
   }),
 }));
 

tests/components/identity-card.a11y.test.tsx

···
     addItem: vi.fn(),
     updateItem: vi.fn(),
     removeItem: vi.fn(),
+    editRequest: null,
+    requestEdit: vi.fn(),
+    clearEditRequest: vi.fn(),
   }),
 }));
 

tests/components/identity-card.test.tsx

···
     addItem: vi.fn(),
     updateItem: vi.fn(),
     removeItem: vi.fn(),
+    editRequest: null,
+    requestEdit: vi.fn(),
+    clearEditRequest: vi.fn(),
   }),
 }));
 

tests/components/position-edit-dialog.test.tsx

···
     addItem: vi.fn(),
     updateItem: vi.fn(),
     removeItem: vi.fn(),
+    editRequest: null,
+    requestEdit: vi.fn(),
+    clearEditRequest: vi.fn(),
   }),
 }));