added Welcome page

changed settings API and page to React + rest
changed structure of scripts - different folders for editor and admin scripts

src/editor/popup/components/input/index.js

@@ -0,0 +1,117 @@
+import './style.scss';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useRef, useEffect } from '@wordpress/element';
+import { TextControl } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { ReactComponent as MindLogoIcon } from '../../../../icons/mind-logo.svg';
+
+export default function Input(props) {
+	const { onInsert } = props;
+
+	const ref = useRef();
+
+	const { reset, setInput, setScreen, requestAI } = useDispatch('mind/popup');
+
+	const { isOpen, input, context, screen, loading, response } = useSelect(
+		(select) => {
+			const {
+				isOpen: checkIsOpen,
+				getInput,
+				getContext,
+				getScreen,
+				getLoading,
+				getResponse,
+			} = select('mind/popup');
+
+			return {
+				isOpen: checkIsOpen(),
+				input: getInput(),
+				context: getContext(),
+				screen: getScreen(),
+				loading: getLoading(),
+				response: getResponse(),
+			};
+		}
+	);
+
+	let contextLabel = context;
+
+	switch (context) {
+		case 'selected-blocks':
+			contextLabel = __('Selected Blocks');
+			break;
+		case 'post-title':
+			contextLabel = __('Post Title');
+			break;
+		// no default
+	}
+
+	function onKeyDown(e) {
+		// Go back to starter screen.
+		if (screen !== '' && e.key === 'Backspace' && !e.target.value) {
+			reset();
+			return;
+		}
+
+		// Insert request to post.
+		if (response && e.key === 'Enter') {
+			onInsert();
+			return;
+		}
+
+		// Send request to AI.
+		if (screen === 'request' && e.key === 'Enter') {
+			requestAI();
+		}
+	}
+
+	function focusInput() {
+		if (ref?.current) {
+			const inputEl = ref.current.querySelector('input');
+
+			if (inputEl) {
+				inputEl.focus();
+			}
+		}
+	}
+
+	// Set focus on Input.
+	useEffect(() => {
+		if (isOpen && !loading && ref?.current) {
+			focusInput();
+		}
+	}, [isOpen, loading, ref]);
+
+	// Open request page if something is in input.
+	useEffect(() => {
+		if (screen === '' && input) {
+			setScreen('request');
+		}
+	}, [screen, input, setScreen]);
+
+	return (
+		<div className="mind-popup-input" ref={ref}>
+			<MindLogoIcon />
+			<TextControl
+				placeholder={__('Ask AI to write anything…', 'mind')}
+				value={input}
+				onChange={(val) => {
+					setInput(val);
+				}}
+				onKeyDown={onKeyDown}
+				disabled={loading}
+			/>
+			{contextLabel ? (
+				<span className="mind-popup-input-context">{contextLabel}</span>
+			) : null}
+		</div>
+	);
+}

src/editor/popup/components/input/style.scss

@@ -0,0 +1,44 @@
+$padding: 10px;
+
+.mind-popup-input {
+	display: flex;
+	align-items: center;
+	margin-bottom: 0;
+	border-bottom: 1px solid #e8e7e7;
+
+	> svg {
+		position: absolute;
+		left: $padding * 2;
+		pointer-events: none;
+		color: var(--mind-brand-color);
+	}
+
+	> .components-base-control {
+		flex: 1;
+	}
+
+	.components-base-control__field {
+		margin-bottom: 0;
+	}
+	.components-base-control__field input {
+		border: none !important;
+		box-shadow: none !important;
+		padding: $padding * 2;
+		padding-left: $padding * 5;
+		font-size: 1.15em;
+		color: #151515;
+
+		&::placeholder {
+			color: #a3a3a3;
+		}
+	}
+
+	.mind-popup-input-context {
+		font-weight: 400;
+		border-radius: 3px;
+		padding: 3px 10px;
+		margin-right: 10px;
+		color: rgb(0, 0, 0, 60%);
+		background-color: rgba(0, 0, 0, 8%);
+	}
+}