fix: improve default contribution action icon

We've had several people get confused with actions contributed by
extensions that show up as an ellipsis icon in popup menus and Detail
pages. The correct/full fix will require us to allow commands to provide
their own icons, and to do this for all of the current extensions. This
is not that fix. :)

The other two things we should do is switch the default icon so that it
doesn't use the same icon as our popup menus, and to pass the detailed
property through the ContributionActions component so that these icons
show up on buttons on the Details pages like the other actions. This is
that part of the fix!

I went through FA trying to find a more suitable icon and this is the
best I could come up with. I preferred it to icons like the puzzle
piece and I think it still gives some indication that the action comes
from an extension.

First step toward fixing #4763.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/renderer/src/lib/actions/ContributionActions.spec.ts

@@ -43,6 +43,41 @@ test('Expect one ListItemButtonIcon', async () => {
   expect(item).toBeInTheDocument();
 });
 
+test('Expect one ListItemButtonIcon without detail', async () => {
+  render(ContributionActions, {
+    args: [],
+    contributions: [
+      {
+        command: 'dummy.command',
+        title: 'dummy-title',
+      },
+    ],
+    onError: () => {},
+    dropdownMenu: false,
+  });
+  const item = screen.getByLabelText('dummy-title');
+  expect(item).toBeInTheDocument();
+  expect(item).toHaveClass('m-0.5');
+});
+
+test('Expect one ListItemButtonIcon with detail', async () => {
+  render(ContributionActions, {
+    args: [],
+    contributions: [
+      {
+        command: 'dummy.command',
+        title: 'dummy-title',
+      },
+    ],
+    onError: () => {},
+    dropdownMenu: false,
+    detailed: true,
+  });
+  const item = screen.getByLabelText('dummy-title');
+  expect(item).toBeInTheDocument();
+  expect(item).not.toHaveClass('m-0.5');
+});
+
 test('Expect executeCommand to be called', async () => {
   render(ContributionActions, {
     args: [],

packages/renderer/src/lib/actions/ContributionActions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
-import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+import { faPlug } from '@fortawesome/free-solid-svg-icons';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import { removeNonSerializableProperties } from '/@/lib/actions/ActionUtils';
 import type { ContextUI } from '/@/lib/context/context';
@@ -16,6 +16,7 @@ export let contextPrefix: string | undefined = undefined;
 
 export let dropdownMenu = false;
 export let contributions: Menu[] = [];
+export let detailed = false;
 
 let filteredContributions: Menu[] = [];
 $: {
@@ -75,6 +76,7 @@ async function executeContribution(menu: Menu): Promise<void> {
     title="{menu.title}"
     onClick="{() => executeContribution(menu)}"
     menu="{dropdownMenu}"
-    icon="{faEllipsisVertical}"
+    icon="{faPlug}"
+    detailed="{detailed}"
     disabledWhen="{menu.disabled}" />
 {/each}

packages/renderer/src/lib/compose/ComposeActions.svelte

@@ -138,5 +138,6 @@ if (dropdownMenu) {
     contextPrefix="composeItem"
     dropdownMenu="{dropdownMenu}"
     contributions="{contributions}"
+    detailed="{detailed}"
     onError="{errorCallback}" />
 </svelte:component>

packages/renderer/src/lib/container/ContainerActions.svelte

@@ -187,5 +187,6 @@ if (dropdownMenu) {
     contextPrefix="containerItem"
     dropdownMenu="{dropdownMenu}"
     contributions="{contributions}"
+    detailed="{detailed}"
     onError="{errorCallback}" />
 </svelte:component>

packages/renderer/src/lib/image/ImageActions.svelte

@@ -132,6 +132,7 @@ function onError(error: string): void {
     dropdownMenu="{dropdownMenu}"
     contributions="{contributions}"
     contextPrefix="imageItem"
+    detailed="{detailed}"
     onError="{onError}" />
 
   {#if errorMessage}

packages/renderer/src/lib/pod/PodActions.svelte

@@ -202,5 +202,6 @@ if (dropdownMenu) {
     contextPrefix="podItem"
     dropdownMenu="{dropdownMenu}"
     contributions="{contributions}"
+    detailed="{detailed}"
     onError="{errorCallback}" />
 </svelte:component>