apps/ui: Add widget toolbar overlay and note delete action (#3409)

Author: youknowriad

apps/ui/src/ui-desks/controls/color.tsx

@@ -0,0 +1,60 @@
+import { color as colorIcon } from '@wordpress/icons';
+import { IconButton } from '@wordpress/ui';
+import * as Menu from '@/components/menu';
+import styles from './style.module.css';
+import type { ControlConfig, ControlRendererProps } from './types';
+import type { CSSProperties } from 'react';
+
+type ColorControlConfig = Extract< ControlConfig, { type: 'color' } >;
+
+type ColorControlProps = ControlRendererProps< ColorControlConfig >;
+
+export function ColorControl( {
+	control,
+	isOpen,
+	setIsOpen,
+	updateProps,
+	props,
+}: ColorControlProps ) {
+	const currentValue = props[ control.property ];
+
+	return (
+		<Menu.Root modal={ false } open={ isOpen } orientation="horizontal" onOpenChange={ setIsOpen }>
+			<Menu.Trigger
+				render={
+					<IconButton
+						icon={ colorIcon }
+						label={ control.label }
+						size="compact"
+						tone="neutral"
+						variant="minimal"
+						aria-pressed={ isOpen }
+						className={ styles.button }
+					/>
+				}
+			/>
+			<Menu.Popup side="top" align="center" sideOffset={ 18 } className={ styles.swatchMenu }>
+				{ control.options.map( ( option ) => (
+					<Menu.Item
+						key={ option.value }
+						className={ styles.swatch }
+						style={ getSwatchStyle( option.color ) }
+						data-active={ currentValue === option.value ? 'true' : 'false' }
+						title={ option.label }
+						aria-label={ option.label }
+						label={ option.label }
+						onClick={ () => {
+							updateProps( { [ control.property ]: option.value } );
+						} }
+					/>
+				) ) }
+			</Menu.Popup>
+		</Menu.Root>
+	);
+}
+
+function getSwatchStyle( color: string ): CSSProperties {
+	return {
+		'--control-swatch-color': color,
+	} as CSSProperties;
+}

apps/ui/src/ui-desks/controls/registry.tsx

@@ -0,0 +1,9 @@
+import { ColorControl } from './color';
+import type { ControlRendererProps } from './types';
+
+export function ControlRenderer( props: ControlRendererProps ) {
+	switch ( props.control.type ) {
+		case 'color':
+			return <ColorControl { ...props } control={ props.control } />;
+	}
+}

apps/ui/src/ui-desks/controls/style.module.css

@@ -0,0 +1,55 @@
+.button {
+	--wp-ui-button-height: 36px;
+	--wp-ui-button-background-color: transparent;
+	--wp-ui-button-background-color-active: rgba( 15, 23, 42, 0.07 );
+	--wp-ui-button-border-color: transparent;
+	--wp-ui-button-border-color-active: transparent;
+	--wp-ui-button-foreground-color: #14171a;
+	--wp-ui-button-foreground-color-active: #14171a;
+
+	width: 36px;
+	min-width: 36px;
+	border-radius: 12px;
+}
+
+.button[aria-pressed='true'] {
+	--wp-ui-button-background-color: rgba( 15, 23, 42, 0.07 );
+	--wp-ui-button-background-color-active: rgba( 15, 23, 42, 0.07 );
+	--wp-ui-button-foreground-color: #14171a;
+	--wp-ui-button-foreground-color-active: #14171a;
+}
+
+.swatchMenu {
+	min-width: auto;
+	flex-direction: row;
+	gap: 6px;
+	padding: 6px;
+	border-radius: 18px;
+}
+
+.swatch,
+.swatch[data-highlighted],
+.swatch:hover {
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	border: 1px solid rgba( 15, 23, 42, 0.12 );
+	border-radius: 10px;
+	background: var( --control-swatch-color );
+	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.1 );
+	color: transparent;
+	transition:
+		box-shadow 160ms ease,
+		transform 160ms ease;
+}
+
+.swatch[data-highlighted],
+.swatch:hover {
+	box-shadow: 0 8px 22px rgba( 15, 23, 42, 0.14 );
+	transform: translateY( -1px );
+}
+
+.swatch[data-active='true'] {
+	outline: 2px solid #3858e9;
+	outline-offset: 2px;
+}

apps/ui/src/ui-desks/controls/types.ts

@@ -0,0 +1,32 @@
+export interface ColorControlOption< TValue extends string = string > {
+	value: TValue;
+	label: string;
+	color: string;
+}
+
+type StringControlPropKey< TProps extends Record< string, unknown > > = {
+	[ TKey in Extract< keyof TProps, string > ]: TProps[ TKey ] extends string ? TKey : never;
+}[ Extract< keyof TProps, string > ];
+
+export type ColorControlConfig<
+	TProps extends Record< string, unknown > = Record< string, string >,
+> = {
+	[ TProperty in StringControlPropKey< TProps > ]: {
+		type: 'color';
+		id: string;
+		property: TProperty;
+		label: string;
+		options: Array< ColorControlOption< Extract< TProps[ TProperty ], string > > >;
+	};
+}[ StringControlPropKey< TProps > ];
+
+export type ControlConfig< TProps extends Record< string, unknown > = Record< string, string > > =
+	ColorControlConfig< TProps >;
+
+export interface ControlRendererProps< TControl extends ControlConfig = ControlConfig > {
+	control: TControl;
+	isOpen: boolean;
+	setIsOpen: ( isOpen: boolean ) => void;
+	updateProps: ( props: Record< string, unknown > ) => void;
+	props: Record< string, unknown >;
+}

apps/ui/src/ui-desks/desk/index.tsx

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { DeskChats } from '../chats';
 import { DeskChrome } from '../chrome';
+import { DeskWidgetToolbar } from '../widgets/toolbar';
 import { DeskCanvas } from './canvas';
 import { DeskProvider } from './provider';
 import styles from './style.module.css';
@@ -27,6 +28,7 @@ function DeskShell( { siteId, children }: DeskProps & { children: ReactNode } )
 			<main className={ styles.root } aria-label={ getDeskLabel( siteId ) } data-site-id={ siteId }>
 				<DeskChrome siteId={ siteId } />
 				{ children }
+				<DeskWidgetToolbar />
 			</main>
 		</>
 	);