fix: overflow menu items (#538)

apps/ui.immich.app/src/routes/(docs)/components/action-bar/BasicExample.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { ExampleActions, exampleActions } from '$lib/constants.js';
-  import { ActionBar, ControlBarHeader, ControlBarTitle, Stack } from '@immich/ui';
+  import { ActionBar, ControlBarHeader, ControlBarTitle, MenuItemType, Stack } from '@immich/ui';
 
   const onClose = () => {};
 </script>
@@ -15,7 +15,7 @@
   <ActionBar
     {onClose}
     actions={[ExampleActions.Share, ExampleActions.Copy, ExampleActions.Download]}
-    overflowActions={[ExampleActions.Edit, ExampleActions.Delete]}
+    overflowActions={[ExampleActions.Edit, MenuItemType.Divider, ExampleActions.Delete]}
   >
     <ControlBarHeader>
       <ControlBarTitle>2 Selected</ControlBarTitle>

apps/ui.immich.app/src/routes/(docs)/components/app-shell/ControlBarExample.svelte

@@ -11,6 +11,7 @@
     ControlBarTitle,
     Heading,
     ImageCarousel,
+    MenuItemType,
     NavbarItem,
     Stack,
   } from '@immich/ui';
@@ -58,7 +59,12 @@
   <div class="border">
     <AppShell class="h-[400px]">
       <AppShellBar>
-        <ActionBar static closeIcon={mdiArrowLeft} onClose={() => {}} overflowActions={[ExampleActions.Delete]}>
+        <ActionBar
+          static
+          closeIcon={mdiArrowLeft}
+          onClose={() => {}}
+          overflowActions={[ExampleActions.Download, MenuItemType.Divider, ExampleActions.Delete]}
+        >
           <ControlBarHeader>
             <ControlBarTitle>Mich's photos</ControlBarTitle>
           </ControlBarHeader>

packages/ui/src/lib/components/ActionBar/ActionBar.svelte

@@ -4,11 +4,13 @@
   import ControlBar from '$lib/components/ControlBar/ControlBar.svelte';
   import ControlBarOverflow from '$lib/components/ControlBar/ControlBarOverflow.svelte';
   import type { ActionBarProps } from '$lib/types.js';
-  import { isEnabled } from '$lib/utilities/common.js';
+  import { isEnabled, isMenuItemType } from '$lib/utilities/common.js';
 
   const { actions = [], overflowActions = [], children, ...restProps }: ActionBarProps = $props();
 
-  const items = $derived(overflowActions.filter((action) => isEnabled(action)));
+  const items = $derived(
+    overflowActions.filter((action) => action !== undefined && (isMenuItemType(action) || isEnabled(action))),
+  );
 </script>
 
 <ControlBar {...restProps}>

packages/ui/src/lib/types.ts

@@ -428,7 +428,7 @@ export type ControlBarProps = {
 
 export type ActionBarProps = ControlBarProps & {
   actions?: ActionItem[];
-  overflowActions?: ActionItem[];
+  overflowActions?: MenuItems;
 };
 
 export type ChildContext = {