feat: Contacts sidebar UI improvements

[baderdean]

Summary

Improve the ContactInformationSidebar.vue component with tags editing, button repositioning, and footer layout reorganization.

Tasks

• Complete ContactInformationSidebar.vue tags editing functionality, in order to edit tags but also to be able to add custom tag
• Move remove contact button from header to footer (bottom left) in ContactInformationSidebar.vue
• Reorganize ContactInformationSidebar footer layout: Remove(left) | Enrich (center) | Edit(right)
• Move Export button to top right
• contact.unverified is not translated to french in consent dropdown input, it should be "Non défini" and I don't get why in english it's unverified instead of undefined btw

Context

Identified during UI improvements session (2026-04-19). Tags editing was partially implemented but not completed. The footer layout needs reorganization for better UX hierarchy.

Acceptance Criteria

• Tags can be added, edited, and removed from the contact sidebar even custom tags
• Remove button is in the footer (bottom left), not the header
• Footer follows the layout: Remove(left) | Enrich (center) | Edit(right)
• Export button is fully visible and in top right position
• In Mobile, the complete layout is fully visible
• No visual regressions in the contact sidebar
• all labels in consent dropdown input are translated to french

[baderdean]

Implementation Plan

Overview

This plan addresses 5 tasks for improving the ContactInformationSidebar.vue component: tags editing completion, button repositioning, footer reorganization, export button relocation, and translation fix.

---

Task 1: Complete Tags Editing Functionality

Current State:

• ContactInformationSidebar.vue:96 uses basic <Chips v-model="contactEditTags" />
• No autocomplete for predefined tags
• frontend/src/utils/contacts.ts:149-158 defines 6 predefined tags: professional, newsletter, personal, group, chat, role

Implementation:

1. Replace Chips with AutoComplete component

   • File: frontend/src/components/mining/ContactInformationSidebar.vue
   • Replace <Chips> with PrimeVue <AutoComplete> component
   • Enable multiple mode for tag array
   • Add suggestions prop bound to filtered predefined tags
   • Add @complete event handler to filter suggestions based on input

2. Add tag suggestions logic

   // Add to script setup
   const tagSuggestions = ref<string[]>([]);
   
   function searchTags(event: { query: string }) {
     const predefinedTags = tags().map(t => t.label);
     const query = event.query.toLowerCase();
     tagSuggestions.value = predefinedTags.filter(tag => 
       tag.toLowerCase().includes(query)
     );
   }

3. Handle custom tags

   • AutoComplete allows free-form input by default when multiple is enabled
   • Users can type custom tags and press Enter to add them
   • Map display labels back to tag values when saving (for predefined tags)

4. Update Tag type (optional)

   • File: frontend/src/types/contact.ts:1
   • Consider changing Tag type to string to support custom tags, or keep as union type for predefined tags and allow string for custom ones

---

Task 2: Move Remove Button from Header to Footer (Bottom Left)

Current State:

• Remove button at ContactInformationSidebar.vue:59-68 in header section
• Red trash icon with pi-trash icon

Implementation:

1. Remove button from header

   • Delete lines 59-68 (the remove button in header)

2. Add remove button to footer

   • Add at the beginning of footer's view mode section (left position)
   • Keep the same styling and functionality
   • Position: first element in footer flex container

---

Task 3: Reorganize Footer Layout

Current State:

• Footer at ContactInformationSidebar.vue:278-306
• View mode: EnrichButton + ExportContacts (centered with justify-center)
• Edit mode: Cancel + Save buttons
• Edit button is standalone at lines 269-276 (between content and footer)

Implementation:

1. Move Edit button into footer

   • Remove standalone Edit button (lines 269-276)
   • Add Edit button to footer's view mode section (right position)

2. Update footer layout structure

   <template #footer>
     <div class="flex justify-between items-center w-full">
       <!-- Left: Remove button -->
       <Button
         v-if="!editingContact"
         icon="pi pi-trash"
         severity="danger"
         text
         @click="showRemoveConfirmationDialog = true"
       />
       
       <!-- Center: Enrich button -->
       <EnrichButton v-if="!editingContact" ... />
       
       <!-- Right: Edit button -->
       <Button
         v-if="!editingContact"
         :label="$t('common.edit')"
         outlined
         @click="editContactInformations()"
       />
       
       <!-- Edit mode: Cancel + Save -->
       <template v-else>
         <Button :label="$t('common.cancel')" @click="cancelContactInformations()" />
         <Button :label="$t('common.save')" @click="saveContactInformations()" />
       </template>
     </div>
   </template>

3. Mobile responsiveness

   • Use flex-wrap or responsive classes for smaller screens
   • Consider hiding labels on mobile, showing only icons

---

Task 4: Move Export Button to Top Right

Current State:

• ExportContacts component at ContactInformationSidebar.vue:289-292 in footer
• Uses async-loaded ExportContacts component

Implementation:

1. Remove ExportContacts from footer

   • Delete lines 289-292

2. Add ExportContacts to header (top right)

   • Position near the close button area or in a new top-right container
   • Consider adding to Drawer's header slot with absolute positioning
   • Alternative: Add a new toolbar section above the header content

3. Styling considerations

   • Ensure it doesn't overlap with Drawer's close button
   • May need to adjust pt:header:class or add padding

---

Task 5: Fix Translation for contact.unverified

Current State:

• ContactInformationSidebar.vue:231,235 uses t('contact.unverified')
• This key doesn't exist in messages.json
• Actual key is contact.status.unverified (line 164 EN, 346 FR)
• French translation is "NON VÉRIFIÉ" but should be "Non défini"

Implementation:

1. Add new translation key

   • File: frontend/src/i18n/messages.json
   • Add under contact section:

   "undefined_consent": "Undefined"  // EN
   "undefined_consent": "Non défini"  // FR

2. Update component references

   • File: ContactInformationSidebar.vue
   • Change t('contact.unverified') to t('contact.undefined_consent') (or use global $t)
   • Update lines 231 and 235

3. Alternative: Use existing key with different label

   • If "unverified" concept is correct, update French translation of contact.status.unverified to "Non défini"
   • But this may affect other usages of the status badge

---

Files to Modify

File	Changes
frontend/src/components/mining/ContactInformationSidebar.vue	Major: tags autocomplete, button repositioning, footer layout, export relocation
frontend/src/i18n/messages.json	Add/fix translation key for undefined consent
frontend/src/types/contact.ts	Optional: Update Tag type to support custom tags

---

Testing Checklist

• Tags autocomplete shows predefined tags when typing
• Custom tags can be added by typing and pressing Enter
• Predefined tags can be selected from suggestions
• Remove button appears in footer (bottom left)
• Remove button no longer in header
• Footer layout: Remove (left) | Enrich (center) | Edit (right)
• Edit button no longer standalone between content and footer
• Export button appears in top right area
• Export button no longer in footer
• Consent dropdown shows "Non défini" in French
• Consent dropdown shows "Undefined" (or similar) in English
• Mobile responsive: all buttons visible and usable
• No visual regressions in sidebar appearance

---

Dependencies

• PrimeVue AutoComplete component (already available via Nuxt UI)
• No new backend changes required
• Tags are stored in refinedpersons table (existing schema supports string arrays)

---

Notes

• The tags() function in contacts.ts returns translated labels, so autocomplete should work with display labels
• When saving, need to map display labels back to tag values for predefined tags
• Custom tags will be saved as-is (user-entered strings)
• Consider adding validation for custom tag length/format

[baderdean]

Revised Implementation Plan

Task 1: Complete Tags Editing (Backend + Frontend)

Problem: refine_persons() overwrites refinedpersons.tags on every mining run (tags = EXCLUDED.tags), so user edits are lost.

Solution: Add user_tags column to refinedpersons — mining never touches this column.

1a. Database Migration (new file)

ALTER TABLE private.refinedpersons 
  ADD COLUMN IF NOT EXISTS user_tags text[] DEFAULT '{}';

Update both get_contacts_table and get_contacts_table_by_emails RPCs to return user_tags text[] (add to RETURNS TABLE and SELECT rp.user_tags).

1b. Frontend Types

• frontend/src/types/contact.ts: Add user_tags?: string[] to Contact interface
• frontend/src/types/database.types.ts: Add user_tags to refinedpersons Row/Insert/Update

1c. Frontend Utils (frontend/src/utils/contacts.ts)

• updateContactTags(): Write to user_tags instead of tags on refinedpersons
• getTagLabel(): Return the tag string as-is for unrecognized tags (instead of 'unknown')
• getTagColor(): Return 'secondary' for unrecognized tags (instead of undefined)

1d. Component (ContactInformationSidebar.vue)

• Display (view mode): Merge contact.tags (auto) + contact.user_tags (user) into a single computed list
• Edit mode: Replace <Chips> with <AutoComplete multiple> with predefined tag suggestions from tags()
• Save: Write only to user_tags; auto-tags remain read-only display
• Custom tags: AutoComplete allows free-form input — users can type and press Enter

---

Task 2: Move Remove Button to Footer (Styled)

• Remove the trash icon button from header (lines 59-68)
• Add to footer (left position) styled like RemoveContactButton.vue: severity="danger", outlined, with icon="pi pi-trash" and label shown on md+ screens
• Keep existing confirmation dialog

---

Task 3: Reorganize Footer Layout

• Remove standalone Edit button (lines 269-276)
• Footer layout (view mode): justify-between with:
  • Left: Remove button (danger, outlined)
  • Center: EnrichButton
  • Right: Edit button (outlined)
• Edit mode footer: Cancel + Save (unchanged)
• Mobile: labels hidden, icons only via responsive classes

---

Task 4: Move Export Button to Top Right

• Remove ExportContacts from footer (lines 289-292)
• Add to header area (top right), near the copy button or in a new top-right container
• Ensure no overlap with Drawer close button

---

Task 5: Fix contact.unverified Translation

• Add new key to frontend/src/i18n/messages.json:
  • EN: "contact.undefined_consent": "Undefined"
  • FR: "contact.undefined_consent": "Non défini"
• Update ContactInformationSidebar.vue lines 231, 235: t('contact.unverified') → $t('contact.undefined_consent')
• Update contacts.ts line 197: same change in getStatusLabel() fallback

---

Files to Modify

File	Changes
supabase/migrations/YYYYMMDDHHMMSS_add_user_tags_to_refinedpersons.sql	NEW — column + RPC updates
frontend/src/types/contact.ts	Add user_tags field
frontend/src/types/database.types.ts	Add user_tags to refinedpersons
frontend/src/utils/contacts.ts	Write to user_tags, fix tag label/color fallback
frontend/src/components/mining/ContactInformationSidebar.vue	Tags autocomplete, button moves, footer layout, export move, translation fix
frontend/src/i18n/messages.json	Add contact.undefined_consent EN/FR