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,22 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IContexMenuProps extends HTMLAttributes<HTMLElement> {
+		options: Array<{ name: string; handler: () => void }>;
+	}
+
+	let { options = [], ...restProps }: IContexMenuProps = $props();
+
+	const cBase = 'w-[max-content] py-2 px-5 rounded-2xl bg-white';
+</script>
+
+<ul {...restProps} 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="py-3" onclick={option.handler}>
+			<p class="text-black-800">{option.name}</p>
+		</li>
+	{/each}
+</ul>

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';