expose edit button next to menu

This commit is contained in:
Justin Edmund 2025-12-21 12:29:58 -08:00
parent 12074203f1
commit d8419aa8fd

View file

@ -938,24 +938,25 @@
</div> </div>
<div class="party-actions"> <div class="party-actions">
{#if canEdit()}
<Button variant="secondary" size="small" onclick={openSettingsPanel} disabled={loading}>
Edit
</Button>
{/if}
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger class="party-actions-trigger" aria-label="Open actions menu"> <DropdownMenu.Trigger class="party-actions-trigger" aria-label="Open actions menu">
<Icon name="ellipsis" size={16} /> <Icon name="ellipsis" size={14} />
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Portal> <DropdownMenu.Portal>
<DropdownMenu.Content class="dropdown-content" sideOffset={6} align="end"> <DropdownMenu.Content class="dropdown-content" sideOffset={6} align="end">
{#if canEdit()} {#if canEdit() && hasCollectionLinks}
<DropdownItem> <DropdownItem>
<button onclick={openSettingsPanel} disabled={loading}>Edit</button> <button onclick={syncFromCollection} disabled={loading || isSyncingAll}>
{isSyncingAll ? 'Syncing...' : 'Sync from collection'}
</button>
</DropdownItem> </DropdownItem>
{#if hasCollectionLinks}
<DropdownItem>
<button onclick={syncFromCollection} disabled={loading || isSyncingAll}>
{isSyncingAll ? 'Syncing...' : 'Sync from collection'}
</button>
</DropdownItem>
{/if}
<DropdownMenu.Separator class="dropdown-separator" /> <DropdownMenu.Separator class="dropdown-separator" />
{/if} {/if}
@ -1230,15 +1231,15 @@
gap: $unit-half; gap: $unit-half;
} }
// Style the dropdown trigger button // Style the dropdown trigger button to match Button ghost small
:global(.party-actions-trigger) { :global(.party-actions-trigger) {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px; width: 30px;
height: 32px; height: 30px;
padding: 0; padding: $unit;
border-radius: 50%; border-radius: $input-corner;
background-color: transparent; background-color: transparent;
color: var(--text-secondary); color: var(--text-secondary);
border: none; border: none;
@ -1247,7 +1248,7 @@
outline: none; outline: none;
&:hover { &:hover {
background-color: var(--button-subtle-bg-hover); background-color: var(--button-bg);
color: var(--text-primary); color: var(--text-primary);
} }