feat: Context-Menu

platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.stories.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'svelte';
+import { ActionMenu } from '..';
+
+export default {
+	title: 'UI/ActionMenu',
+	component: ActionMenu,
+	tags: ['autodocs'],
+	render: (args: { Component: ActionMenu; props: ComponentProps<typeof ActionMenu> }) => ({
+		Component: ActionMenu,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {
+		options: [
+			{ name: 'Report', handler: () => alert('report') },
+			{ name: 'Clear chat', handler: () => alert('clear') }
+		]
+	}
+};

platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { clickOutside, cn } from '$lib/utils';
+	import { MoreVerticalIcon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { tick } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IContextMenuProps extends HTMLAttributes<HTMLElement> {
+		options: Array<{ name: string; handler: () => void }>;
+	}
+
+	let { options = [], ...restProps }: IContextMenuProps = $props();
+	let showActionMenu = $state(false);
+	let menuEl: HTMLUListElement | null = $state(null);
+	let buttonEl: HTMLElement | null = null;
+
+	function openMenu() {
+		showActionMenu = true;
+
+		tick().then(() => {
+			if (menuEl && buttonEl) {
+				const { innerWidth, innerHeight } = window;
+				const menuRect = menuEl.getBoundingClientRect();
+				const buttonRect = buttonEl.getBoundingClientRect();
+
+				// Position vertically aligned to button top (viewport)
+				let top = buttonRect.top;
+				let left = buttonRect.right;
+
+				// If it overflows right, position to the left of the button
+				if (innerWidth - buttonRect.right < menuRect.width) {
+					left = buttonRect.left - menuRect.width;
+				}
+
+				// If it overflows bottom, adjust upward
+				if (innerHeight - buttonRect.top < menuRect.height) {
+					top = innerHeight - menuRect.height - 10;
+				}
+
+				menuEl.style.left = `${left}px`;
+				menuEl.style.top = `${top}px`;
+			}
+		});
+	}
+
+	function closeMenu() {
+		showActionMenu = false;
+	}
+
+	const cBase = 'fixed z-50 w-[max-content] py-2 px-5 rounded-2xl bg-white shadow-lg';
+</script>
+
+<div class="relative inline-block">
+	<button
+		bind:this={buttonEl}
+		onclick={(e) => {
+			e.preventDefault(), openMenu();
+		}}
+	>
+		<HugeiconsIcon icon={MoreVerticalIcon} size={24} color="black" />
+	</button>
+</div>
+
+{#if showActionMenu}
+	<ul
+		{...restProps}
+		use:clickOutside={() => closeMenu()}
+		bind:this={menuEl}
+		class={cn([cBase, restProps.class].join(' '))}
+	>
+		{#each options as option}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+			<li
+				class="cursor-pointer py-3"
+				onclick={() => {
+					option.handler();
+					closeMenu();
+				}}
+			>
+				<p class="text-black-800">{option.name}</p>
+			</li>
+		{/each}
+	</ul>
+{/if}

platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte

@@ -48,8 +48,8 @@
 			cssClass: '',
 			initialBreak: 'middle',
 			events: {
-					onBackdropTap: () => dismiss()
-				}
+				onBackdropTap: () => dismiss()
+			}
 		});
 		if (isPaneOpen) {
 			drawer.present({ animate: true });

platforms/metagram/src/lib/fragments/index.ts

@@ -5,4 +5,5 @@ export { default as MessageInput } from './MessageInput/MessageInput.svelte';
 export { default as InputFile } from './InputFile/InputFile.svelte';
 export { default as Drawer } from './Drawer/Drawer.svelte';
 export { default as Message } from './Message/Message.svelte';
+export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
 export { default as Modal } from './Modal/Modal.svelte';