Fix environment color editing

src-web/components/EnvironmentActionsDropdown.tsx

@@ -9,7 +9,7 @@ import type { ButtonProps } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
-import { EnvironmentColorCircle } from './EnvironmentColorCircle';
+import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
 import { EnvironmentEditDialog } from './EnvironmentEditDialog';
 
 type Props = {
@@ -39,7 +39,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         (e) => ({
           key: e.id,
           label: e.name,
-          rightSlot: <EnvironmentColorCircle environment={e} />,
+          rightSlot: <EnvironmentColorIndicator environment={e} />,
           leftSlot: e.id === activeEnvironment?.id ? <Icon icon="check" /> : <Icon icon="empty" />,
           onSelect: async () => {
             if (e.id !== activeEnvironment?.id) {
@@ -82,7 +82,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         onClick={subEnvironments.length === 0 ? showEnvironmentDialog : undefined}
         {...buttonProps}
       >
-        <EnvironmentColorCircle environment={activeEnvironment ?? null} />
+        <EnvironmentColorIndicator environment={activeEnvironment ?? null} />
         {activeEnvironment?.name ?? (hasBaseVars ? 'Environment' : 'No Environment')}
       </Button>
     </Dropdown>

src-web/components/EnvironmentColorIndicator.tsx

@@ -2,7 +2,7 @@ import type { Environment } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import { showColorPicker } from '../lib/showColorPicker';
 
-export function EnvironmentColorCircle({
+export function EnvironmentColorIndicator({
   environment,
   clickToEdit,
 }: {

src-web/components/EnvironmentColorPicker.tsx

@@ -11,16 +11,22 @@ export function EnvironmentColorPicker({
 }) {
   const [color, setColor] = useState<string | null>(defaultColor);
   return (
-    <div className="flex flex-col items-stretch gap-3 pb-2 w-full">
+    <form
+      className="flex flex-col items-stretch gap-3 pb-2 w-full"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onChange(color);
+      }}
+    >
       <ColorPicker color={color} onChange={setColor} />
       <div className="grid grid-cols-[1fr_1fr] gap-1.5">
         <Button variant="border" color="secondary" onClick={() => onChange(null)}>
           Clear
         </Button>
-        <Button color="primary" onClick={() => onChange(color)}>
+        <Button type="submit" color="primary">
           Save
         </Button>
       </div>
-    </div>
+    </form>
   );
 }

src-web/components/EnvironmentEditDialog.tsx

@@ -36,7 +36,7 @@ import { PairOrBulkEditor } from './core/PairOrBulkEditor';
 import { Separator } from './core/Separator';
 import { SplitLayout } from './core/SplitLayout';
 import { VStack } from './core/Stacks';
-import { EnvironmentColorCircle } from './EnvironmentColorCircle';
+import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
 
 interface Props {
   initialEnvironment: Environment | null;
@@ -239,7 +239,7 @@ const EnvironmentEditor = function ({
   return (
     <VStack space={4} className={classNames(className, 'pl-4')}>
       <Heading className="w-full flex items-center gap-0.5">
-        <EnvironmentColorCircle clickToEdit environment={selectedEnvironment ?? null} />
+        <EnvironmentColorIndicator clickToEdit environment={selectedEnvironment ?? null} />
         <div className="mr-2">{selectedEnvironment?.name}</div>
         {isEncryptionEnabled ? (
           promptToEncrypt ? (
@@ -347,7 +347,7 @@ function SidebarButton({
           onContextMenu={handleContextMenu}
           rightSlot={rightSlot}
         >
-          <EnvironmentColorCircle environment={environment} />
+          <EnvironmentColorIndicator environment={environment} />
           {children}
         </Button>
         {outerRightSlot}
@@ -390,7 +390,7 @@ function SidebarButton({
               ]
             : []) as DropdownItem[]),
           {
-            label: 'Set Color',
+            label: environment.color ? 'Change Color' : 'Assign Color',
             leftSlot: <Icon icon="palette" />,
             hidden: environment.base,
             onSelect: async () => showColorPicker(environment),

src-web/components/core/ColorPicker.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useRandomKey } from '../../hooks/useRandomKey';
 import { PlainInput } from './PlainInput';
@@ -8,23 +7,16 @@ interface Props {
   color: string | null;
 }
 
-export function ColorPicker({ onChange, color: defaultColor }: Props) {
+export function ColorPicker({ onChange, color }: Props) {
   const [updateKey, regenerateKey] = useRandomKey();
-  const [color, setColor] = useState<string | null>(defaultColor);
   return (
-    <form
+    <div>
-      className="flex flex-col gap-3 items-stretch w-full"
-      onSubmit={(e) => {
-        e.preventDefault();
-        onChange(color);
-      }}
-    >
       <HexColorPicker
         color={color ?? undefined}
         className="!w-full"
         onChange={(color) => {
-          setColor(color.toUpperCase());
+          onChange(color);
-          regenerateKey();
+          regenerateKey(); // To force input to change
         }}
       />
       <PlainInput
@@ -32,9 +24,9 @@ export function ColorPicker({ onChange, color: defaultColor }: Props) {
         label="Plain Color"
         forceUpdateKey={updateKey}
         defaultValue={color ?? ''}
-        onChange={(c) => setColor(c.toUpperCase())}
+        onChange={onChange}
         validate={(color) => color.match(/#[0-9a-fA-F]{6}$/) !== null}
       />
-    </form>
+    </div>
   );
 }