diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx index 158b25152..449603794 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx @@ -14,6 +14,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { moveArrayItem } from '~/utils/array/moveArrayItem'; import { toSpliced } from '~/utils/array/toSpliced'; import { isDefined } from '~/utils/isDefined'; @@ -86,6 +87,19 @@ export const LinksFieldInput = ({ ); }; + const handleSetPrimaryLink = (index: number) => { + const nextLinks = moveArrayItem(links, { fromIndex: index, toIndex: 0 }); + const [nextPrimaryLink, ...nextSecondaryLinks] = nextLinks; + + onSubmit?.(() => + persistLinksField({ + primaryLinkUrl: nextPrimaryLink.url ?? '', + primaryLinkLabel: nextPrimaryLink.label ?? '', + secondaryLinks: nextSecondaryLinks, + }), + ); + }; + const handleDeleteLink = (index: number) => { onSubmit?.(() => persistLinksField({ @@ -110,6 +124,7 @@ export const LinksFieldInput = ({ dropdownId={`${hotkeyScope}-links-${index}`} isPrimary={index === 0} label={label} + onSetAsPrimary={() => handleSetPrimaryLink(index)} onDelete={() => handleDeleteLink(index)} url={url} /> diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx index b4f1f2fac..19f3041a6 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx @@ -1,6 +1,8 @@ +import { useEffect } from 'react'; import styled from '@emotion/styled'; import { IconBookmark, + IconBookmarkPlus, IconComponent, IconDotsVertical, IconTrash, @@ -16,6 +18,7 @@ type LinksFieldMenuItemProps = { dropdownId: string; isPrimary?: boolean; label: string; + onSetAsPrimary: () => void; onDelete: () => void; url: string; }; @@ -30,10 +33,18 @@ export const LinksFieldMenuItem = ({ dropdownId, isPrimary, label, + onSetAsPrimary, onDelete, url, }: LinksFieldMenuItemProps) => { - const { isDropdownOpen } = useDropdown(dropdownId); + const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId); + + // Make sure dropdown closes on unmount. + useEffect(() => { + if (isDropdownOpen) { + return () => closeDropdown(); + } + }, [closeDropdown, isDropdownOpen]); return ( +