feat: optimize UI/UX and perf

Author: valeriobelli

.changeset/old-bottles-sin.md

@@ -0,0 +1,5 @@
+---
+"rozenite-growthbook-plugin": minor
+---
+
+Optimize UI/UX and performance

packages/plugin/src/ui/components/attribute-inputs/enum-input.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import CreatableSelect from 'react-select/creatable'
 
 import type { SelectOption } from './select-styles'
@@ -10,13 +11,15 @@ interface EnumInputProps {
 }
 
 export const EnumInput = ({ onChange, options, value }: EnumInputProps) => {
-	const selectOptions: SelectOption[] = options.map((o) => ({ label: o, value: o }))
+	const selectOptions = useMemo<SelectOption[]>(() => options.map((o) => ({ label: o, value: o })), [options])
+
+	const selectValue = useMemo(() => ({ label: value, value }), [value])
 
 	return (
 		<CreatableSelect<SelectOption>
 			styles={selectStyles}
 			options={selectOptions}
-			value={{ label: value, value }}
+			value={selectValue}
 			onChange={(opt) => {
 				onChange(opt ? opt.value : '')
 			}}

packages/plugin/src/ui/components/attribute-inputs/number-array-input.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import CreatableSelect from 'react-select/creatable'
 
 import type { SelectOption } from './select-styles'
@@ -9,7 +10,7 @@ interface NumberArrayInputProps {
 }
 
 export const NumberArrayInput = ({ onChange, value }: NumberArrayInputProps) => {
-	const selectValue = value.map((v) => ({ label: v.toString(), value: v.toString() }))
+	const selectValue = useMemo(() => value.map((v) => ({ label: v.toString(), value: v.toString() })), [value])
 
 	return (
 		<CreatableSelect<SelectOption, true>

packages/plugin/src/ui/components/attribute-inputs/string-array-input.tsx

@@ -1,10 +1,11 @@
+import { useMemo } from 'react'
 import CreatableSelect from 'react-select/creatable'
 
 import { selectStyles } from './select-styles'
 import type { SelectOption } from './select-styles'
 
 export const StringArrayInput = ({ onChange, value }: { onChange: (value: string[]) => void; value: string[] }) => {
-	const selectValue = value.map((v) => ({ label: v, value: v }))
+	const selectValue = useMemo(() => value.map((v) => ({ label: v, value: v })), [value])
 
 	return (
 		<CreatableSelect<SelectOption, true>

packages/plugin/src/ui/components/attributes-tab.tsx

@@ -1,6 +1,6 @@
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
 import { type } from 'arktype'
-import { Suspense, useRef, useState } from 'react'
+import { Suspense, useMemo, useRef, useState } from 'react'
 import type { FallbackProps } from 'react-error-boundary'
 import { ErrorBoundary } from 'react-error-boundary'
 
@@ -136,12 +136,20 @@ const AttributesTabInner = ({ attributes, onSave }: AttributesTabProps) => {
 
 	const { archetypes, attributeSchema } = useData()
 
-	const schemaByProperty = new Map(attributeSchema.map((attr) => [attr.property, attr]))
+	const schemaByProperty = useMemo(
+		() => new Map(attributeSchema.map((attr) => [attr.property, attr])),
+		[attributeSchema]
+	)
+
+	const overriddenKeys = useMemo(() => {
+		const original = originalAttributesRef.current
 
-	const isOverridden = (key: string) =>
-		JSON.stringify(attributes[key]) !== JSON.stringify(originalAttributesRef.current[key])
+		return new Set(
+			Object.keys(attributes).filter((key) => JSON.stringify(attributes[key]) !== JSON.stringify(original[key]))
+		)
+	}, [attributes])
 
-	const hasOverrides = Object.keys(attributes).some(isOverridden)
+	const hasOverrides = overriddenKeys.size > 0
 
 	const handleFieldChange = (key: string, value: unknown) => {
 		onSave({ ...attributes, [key]: value })
@@ -322,9 +330,11 @@ const AttributesTabInner = ({ attributes, onSave }: AttributesTabProps) => {
 						spellCheck={false}
 					/>
 
-					{jsonError !== null && (
-						<div className="mt-1 rounded bg-red-500/10 px-3 py-2 text-xs text-red-400">{jsonError}</div>
-					)}
+					<div aria-live="polite" aria-atomic="true" className="mt-1 min-h-0">
+						{jsonError !== null && (
+							<div className="rounded bg-panel-error-bg px-3 py-2 text-xs text-panel-error">{jsonError}</div>
+						)}
+					</div>
 
 					<div className="mt-2 flex justify-end gap-2">
 						<button
@@ -365,11 +375,11 @@ const AttributesTabInner = ({ attributes, onSave }: AttributesTabProps) => {
 							</div>
 
 							<div className="w-5 shrink-0">
-								{isOverridden(key) && (
+								{overriddenKeys.has(key) && (
 									<button
 										type="button"
 										className="text-override hover:text-override/80"
-										title="Reset to original"
+										aria-label="Reset to original"
 										onClick={() => {
 											handleReset(key)
 										}}>
@@ -404,8 +414,8 @@ const AttributesTabInner = ({ attributes, onSave }: AttributesTabProps) => {
 									<div className="w-5 shrink-0">
 										<button
 											type="button"
-											className="text-red-400 hover:text-red-300"
-											title="Remove attribute"
+											className="text-panel-error hover:text-panel-error/80"
+											aria-label="Remove attribute"
 											onClick={() => {
 												handleDeleteCustom(key)
 											}}>
@@ -471,6 +481,7 @@ const AttributesTabInner = ({ attributes, onSave }: AttributesTabProps) => {
 
 							<button
 								type="button"
+								aria-label="Cancel"
 								className="text-sm text-panel-text-secondary hover:text-panel-text"
 								onClick={() => {
 									setShowAddForm(false)

packages/plugin/src/ui/components/error.tsx

@@ -49,7 +49,7 @@ export const ErrorFallback = ({ error, onReset }: ErrorFallbackProps) => {
 	const technicalError = getTechnicalErrorDetails(error)
 
 	return (
-		<div className="flex h-screen flex-col items-center justify-center gap-4 px-4 text-center text-red-400">
+		<div className="flex h-screen flex-col items-center justify-center gap-4 px-4 text-center text-panel-error">
 			<h1 className="text-2xl font-bold">An error occurred while receiving data from GrowthBook</h1>
 
 			<p className="max-w-2xl text-sm text-panel-text-secondary">{technicalError.message}</p>
@@ -65,7 +65,7 @@ export const ErrorFallback = ({ error, onReset }: ErrorFallbackProps) => {
 			</details>
 
 			<button
-				className="rounded bg-red-500 px-4 py-2 text-white"
+				className="rounded bg-panel-error px-4 py-2 text-panel-bg"
 				onClick={() => {
 					onReset?.()
 					resetBoundary()

packages/plugin/src/ui/components/experiment-row.tsx

@@ -27,6 +27,7 @@ export const ExperimentRow = ({
 			</td>
 			<td className="px-3 py-2">
 				<select
+					aria-label={`Variation for ${experiment.key}`}
 					className="rounded border border-panel-border bg-panel-surface px-2 py-1 text-sm text-panel-text"
 					value={activeVariation}
 					onChange={(e) => {
@@ -50,7 +51,9 @@ export const ExperimentRow = ({
 			<td className="px-3 py-2 text-center">
 				<span
 					className={`inline-block rounded px-2 py-0.5 text-xs ${
-						experiment.inExperiment ? 'bg-green-500/10 text-green-400' : 'bg-panel-surface text-panel-text-secondary'
+						experiment.inExperiment
+							? 'bg-panel-success-bg text-panel-success'
+							: 'bg-panel-surface text-panel-text-secondary'
 					}`}>
 					{experiment.inExperiment ? 'In experiment' : 'Not in experiment'}
 				</span>

packages/plugin/src/ui/components/experiments-tab.tsx

@@ -40,6 +40,7 @@ export const ExperimentsTab = ({
 			<div className="mb-3 flex items-center gap-3">
 				<input
 					type="text"
+					aria-label="Filter experiments"
 					placeholder="Filter experiments..."
 					className="flex-1 rounded border border-panel-border bg-panel-surface px-3 py-1.5 text-sm text-panel-text placeholder:text-panel-text-secondary"
 					value={search}

packages/plugin/src/ui/components/feature-row.tsx

@@ -60,6 +60,7 @@ export const FeatureRow = ({
 					<div className="flex items-center gap-2">
 						<input
 							type="text"
+							aria-label={`Edit value for ${feature.key}`}
 							className="flex-1 rounded border border-panel-border bg-panel-bg px-2 py-1 text-sm text-panel-text"
 							value={editValue}
 							onChange={(e) => {
@@ -90,22 +91,28 @@ export const FeatureRow = ({
 						</button>
 					</div>
 				) : (
-					<span className="cursor-pointer" onClick={isBoolean ? handleToggle : handleEditStart}>
+					<button
+						type="button"
+						className="inline-flex cursor-pointer items-center leading-none"
+						role={isBoolean ? 'switch' : undefined}
+						aria-checked={isBoolean ? displayValue : undefined}
+						aria-label={isBoolean ? `Toggle ${feature.key}` : `Edit value for ${feature.key}`}
+						onClick={isBoolean ? handleToggle : handleEditStart}>
 						{isBoolean ? (
 							<span
-								className={`relative inline-block h-4 w-8 rounded-full transition-colors ${
-									displayValue ? 'bg-green-500' : 'bg-panel-border'
+								className={`relative inline-block h-4 w-8 overflow-hidden rounded-full transition-colors ${
+									displayValue ? 'bg-panel-success' : 'bg-panel-border'
 								}`}>
 								<span
-									className={`absolute top-0.5 h-3 w-3 rounded-full bg-white transition-transform ${
+									className={`absolute left-0 top-0.5 h-3 w-3 rounded-full bg-white transition-transform ${
 										displayValue ? 'translate-x-4' : 'translate-x-0.5'
 									}`}
 								/>
 							</span>
 						) : (
 							<InlineValue value={displayValue} />
 						)}
-					</span>
+					</button>
 				)}
 			</td>
 			<td className="px-3 py-2">

packages/plugin/src/ui/components/features-tab.tsx

@@ -38,6 +38,7 @@ export const FeaturesTab = ({
 			<div className="mb-3 flex items-center gap-3">
 				<input
 					type="text"
+					aria-label="Filter features"
 					placeholder="Filter features..."
 					className="flex-1 rounded border border-panel-border bg-panel-surface px-3 py-1.5 text-sm text-panel-text placeholder:text-panel-text-secondary"
 					value={search}