improved structure

added store to control the popup
changed popup colors

src/popup/index.js

@@ -0,0 +1,175 @@
+/**
+ * Styles
+ */
+import './style.scss';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createRoot } from '@wordpress/element';
+import { Modal } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies
+ */
+import TOOLBAR_ICON from '../utils/icon';
+
+const POPUP_CONTAINER_CLASS = 'mind-popup-container';
+
+const prompts = [
+	// Base.
+	{
+		type: 'prompt',
+		label: __('Improve', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Paraphrase', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Simplify', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Expand', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Shorten', 'mind'),
+	},
+
+	// Formality.
+	{
+		type: 'category',
+		label: __('Formality', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Casual', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Neutral', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Formal', 'mind'),
+	},
+
+	// Tone.
+	{
+		type: 'category',
+		label: __('Tone', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Friendly', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Professional', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Witty', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Heartfelt', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Educational', 'mind'),
+	},
+];
+
+export default function Popup(props) {
+	const { onClose } = props;
+
+	const { close } = useDispatch('mind/popup');
+
+	const { isOpen } = useSelect((select) => {
+		const { isOpen: checkIsOpen } = select('mind/popup');
+
+		return { isOpen: checkIsOpen() };
+	});
+
+	if (!isOpen) {
+		return null;
+	}
+
+	return (
+		<Modal
+			title={false}
+			className="mind-popup"
+			overlayClassName="mind-popup-overlay"
+			onRequestClose={() => {
+				close();
+
+				if (onClose) {
+					onClose();
+				}
+			}}
+			__experimentalHideHeader
+		>
+			<div className="mind-popup-content">
+				<div className="mind-popup-prompts">
+					{prompts.map((data) => {
+						if (data.type === 'category') {
+							return (
+								<span
+									key={data.type + data.label}
+									className="mind-popup-prompts-category"
+								>
+									{data.label}
+								</span>
+							);
+						}
+
+						return (
+							<button
+								key={data.type + data.label}
+								className="mind-popup-prompts-button"
+							>
+								{data.label}
+							</button>
+						);
+					})}
+				</div>
+			</div>
+			<div className="mind-popup-footer">
+				<div className="mind-popup-footer-logo">
+					{TOOLBAR_ICON}
+					{__('Mind', '@@text_domain')}
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+// .block-editor
+// Insert popup renderer in editor.
+domReady(() => {
+	// Check if popup exists already.
+	if (document.querySelector(`.${POPUP_CONTAINER_CLASS}`)) {
+		return;
+	}
+
+	const blockEditor = document.querySelector('.block-editor');
+
+	if (!blockEditor) {
+		return;
+	}
+
+	const toggleContainer = document.createElement('div');
+	toggleContainer.classList.add(POPUP_CONTAINER_CLASS);
+
+	blockEditor.appendChild(toggleContainer);
+
+	const root = createRoot(toggleContainer);
+	root.render(<Popup />);
+});

src/popup/style.scss

@@ -0,0 +1,66 @@
+// Popup.
+.mind-popup {
+	position: relative;
+	top: 15%;
+	margin-top: 0;
+	width: 750px;
+	max-height: 380px;
+	color: #000;
+
+	.components-modal__content {
+		padding: 0;
+
+		> div {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+		}
+	}
+}
+.mind-popup-overlay {
+	// Upper then dropdown.
+	z-index: 1000001;
+}
+
+.mind-popup-content {
+	overflow: auto;
+	flex: 1;
+	padding: 10px;
+}
+.mind-popup-footer {
+	padding: 10px;
+	background-color: #f6f6f6;
+	border-top: 1px solid #e8e7e7;
+}
+.mind-popup-footer-logo {
+	display: flex;
+	gap: 6px;
+	font-weight: 500;
+	color: var(--mind-brand-color);
+}
+
+.mind-popup-prompts {
+	display: flex;
+	flex-direction: column;
+
+	.mind-popup-prompts-category {
+		font-weight: 500;
+		padding: 10px;
+		padding-top: 20px;
+		color: #b5b1b1;
+	}
+
+	.mind-popup-prompts-button {
+		background-color: transparent;
+		color: #000;
+		border: none;
+		text-align: left;
+		padding: 10px;
+		border-radius: 5px;
+
+		&:hover,
+		&:focus {
+			background-color: rgba(#000, 5%);
+		}
+	}
+}