Fix environment color editing

src-web/components/EnvironmentColorIndicator.tsx

@@ -0,0 +1,29 @@
+import type { Environment } from '@yaakapp-internal/models';
+import classNames from 'classnames';
+import { showColorPicker } from '../lib/showColorPicker';
+
+export function EnvironmentColorIndicator({
+  environment,
+  clickToEdit,
+}: {
+  environment: Environment | null;
+  clickToEdit?: boolean;
+}) {
+  if (environment?.color == null) return null;
+
+  const style = { backgroundColor: environment.color };
+  const className =
+    'inline-block w-[0.75em] h-[0.75em] rounded-full mr-1.5 border border-transparent';
+
+  if (clickToEdit) {
+    return (
+      <button
+        onClick={() => showColorPicker(environment)}
+        style={style}
+        className={classNames(className, 'hover:border-text')}
+      />
+    );
+  } else {
+    return <span style={style} className={className} />;
+  }
+}