chore(web): context menu improvements (#10475)

- ability to add custom hover colors
- migrate activity menu to ButtonContextMenu component
- onClick callbacks rather than events for menu options
- remove slots
- configurable menu option colors
- improve menu option layout

web/src/lib/components/shared-components/context-menu/menu-option.svelte

@@ -1,24 +1,22 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import { generateId } from '$lib/utils/generate-id';
-  import { createEventDispatcher } from 'svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
 
-  export let text = '';
+  export let text: string;
   export let subtitle = '';
   export let icon = '';
+  export let activeColor = 'bg-slate-300';
+  export let textColor = 'text-immich-fg dark:text-immich-dark-bg';
+  export let onClick: () => void;
 
   let id: string = generateId();
 
   $: isActive = $selectedIdStore === id;
 
-  const dispatch = createEventDispatcher<{
-    click: void;
-  }>();
-
   const handleClick = () => {
     $optionClickCallbackStore?.();
-    dispatch('click');
+    onClick();
   };
 </script>
 
@@ -29,27 +27,20 @@
   on:click={handleClick}
   on:mouseover={() => ($selectedIdStore = id)}
   on:mouseleave={() => ($selectedIdStore = undefined)}
-  class="w-full p-4 text-left text-sm font-medium text-immich-fg focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
-  class:bg-slate-300={isActive}
-  class:bg-slate-100={!isActive}
+  class="w-full p-4 text-left text-sm font-medium {textColor} focus:outline-none focus:ring-2 focus:ring-inset cursor-pointer border-gray-200 flex gap-2 items-center {isActive
+    ? activeColor
+    : 'bg-slate-100'}"
   role="menuitem"
 >
-  {#if text}
-    {#if icon}
-      <p class="flex gap-2">
-        <Icon path={icon} ariaHidden={true} size="18" />
-        {text}
-      </p>
-    {:else}
-      {text}
-    {/if}
-  {:else}
-    <slot />
+  {#if icon}
+    <Icon path={icon} ariaHidden={true} size="18" />
   {/if}
-
-  <slot name="subtitle">
-    <p class="text-xs text-gray-500">
-      {subtitle}
-    </p>
-  </slot>
+  <div>
+    {text}
+    {#if subtitle}
+      <p class="text-xs text-gray-500">
+        {subtitle}
+      </p>
+    {/if}
+  </div>
 </li>