feat: add context menu for copy and delete item

CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.27.0](https://github.com/skuong/mexboard/compare/v1.26.1...v1.27.0) (2026-06-30)
+
+
+### Bug Fixes
+
+* handle image preview for Windows ([95ce989](https://github.com/skuong/mexboard/commit/95ce989f79f4b1019688fb17e825e2703dea834f))
+
+
+### Features
+
+* add infinite scroll ([31ce43e](https://github.com/skuong/mexboard/commit/31ce43e6f97477a9461f0b49f4969028e74a412b))
+
 ## [1.26.1](https://github.com/skuong/mexboard/compare/v1.26.0...v1.26.1) (2026-06-30)
 
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mexboard",
 	"private": false,
-	"version": "1.26.1",
+	"version": "1.27.0",
 	"type": "module",
 	"packageManager": "pnpm@11.5.1+sha512.93f7b57422ea7068257235b4c16eb60762eb68e1dc23723199cc739043ea9be2c4143274a399d8c6defa2b1176226d9ca1c4b63482d6200c1a8fbaa78c1d1485",
 	"scripts": {
@@ -53,6 +53,7 @@
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-hook-form": "^7.75.0",
+		"react-intersection-observer": "^10.0.3",
 		"shadcn": "^4.1.1",
 		"tailwind-merge": "^3.5.0",
 		"tailwindcss": "^4.1.18",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mexboard"
-version = "1.26.1"
+version = "1.27.0"
 description = "Clipboard manager with symbols/emojis selection and customizable features"
 authors = ["Sokhuong"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Mexboard",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "identifier": "com.mexboard",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/components/ui/context-menu.tsx

@@ -0,0 +1,251 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { ChevronRightIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+	return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+	return (
+		<ContextMenuPrimitive.Trigger
+			data-slot="context-menu-trigger"
+			className={cn('select-none', className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuContent({
+	className,
+	align = 'start',
+	alignOffset = 4,
+	side = 'right',
+	sideOffset = 0,
+	...props
+}: ContextMenuPrimitive.Popup.Props &
+	Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+	return (
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Positioner
+				className="isolate z-50 outline-none"
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+			>
+				<ContextMenuPrimitive.Popup
+					data-slot="context-menu-content"
+					className={cn(
+						'z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+						className,
+					)}
+					{...props}
+				/>
+			</ContextMenuPrimitive.Positioner>
+		</ContextMenuPrimitive.Portal>
+	);
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+	return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+function ContextMenuLabel({
+	className,
+	inset,
+	...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.GroupLabel
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn('px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5', className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: ContextMenuPrimitive.Item.Props & {
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
+}) {
+	return (
+		<ContextMenuPrimitive.Item
+			data-slot="context-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+	return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.SubmenuTrigger
+			data-slot="context-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto"></ChevronRightIcon>
+		</ContextMenuPrimitive.SubmenuTrigger>
+	);
+}
+
+function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>) {
+	return (
+		<ContextMenuContent
+			data-slot="context-menu-sub-content"
+			className="shadow-lg"
+			side="right"
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	inset,
+	...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.CheckboxItem
+			data-slot="context-menu-checkbox-item"
+			data-inset={inset}
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute right-2">
+				<ContextMenuPrimitive.CheckboxItemIndicator>
+					<IconPlaceholder
+						lucide="CheckIcon"
+						tabler="IconCheck"
+						hugeicons="Tick02Icon"
+						phosphor="CheckIcon"
+						remixicon="RiCheckLine"
+					/>
+				</ContextMenuPrimitive.CheckboxItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.CheckboxItem>
+	);
+}
+
+function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {
+	return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuRadioItem({
+	className,
+	children,
+	inset,
+	...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.RadioItem
+			data-slot="context-menu-radio-item"
+			data-inset={inset}
+			className={cn(
+				"relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute right-2">
+				<ContextMenuPrimitive.RadioItemIndicator>
+					<IconPlaceholder
+						lucide="CheckIcon"
+						tabler="IconCheck"
+						hugeicons="Tick02Icon"
+						phosphor="CheckIcon"
+						remixicon="RiCheckLine"
+					/>
+				</ContextMenuPrimitive.RadioItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.RadioItem>
+	);
+}
+
+function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {
+	return (
+		<ContextMenuPrimitive.Separator
+			data-slot="context-menu-separator"
+			className={cn('-mx-1 my-1 h-px bg-border/50', className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="context-menu-shortcut"
+			className={cn(
+				'ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	ContextMenu,
+	ContextMenuCheckboxItem,
+	ContextMenuContent,
+	ContextMenuGroup,
+	ContextMenuItem,
+	ContextMenuLabel,
+	ContextMenuPortal,
+	ContextMenuRadioGroup,
+	ContextMenuRadioItem,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuTrigger,
+};