Write release version to version file.

.gitea/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   release:
@@ -15,8 +15,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ssh-key: '${{ secrets.SSH_PRIVATE_KEY }}'
+          ssh-key: "${{ secrets.SSH_PRIVATE_KEY }}"
-          ssh-known-hosts: '${{ secrets.SSH_KNOWN_HOST }}'
+          ssh-known-hosts: "${{ secrets.SSH_KNOWN_HOST }}"
 
       # Install Cypress dependencies
       - name: Install Cypress dependencies
@@ -46,7 +46,7 @@ jobs:
       - name: Install go
         uses: https://github.com/actions/setup-go@v3
         with:
-          go-version: '>=1.20.1'
+          go-version: ">=1.20.1"
 
       # Install app dependencies
       - name: Install app dependencies
@@ -80,7 +80,9 @@ jobs:
 
       # Create archive
       - name: Create archive
-        run: tar -czvf ${{ env.REPO_NAME }}-${{ env.TAG_NAME }}.tar.gz dist VERSION
+        run: |
+          echo "$TAG_NAME" >> VERSION
+          tar -czvf ${{ env.REPO_NAME }}-${{ env.TAG_NAME }}.tar.gz dist VERSION
 
       # Create release
       - name: Create Release
@@ -88,5 +90,5 @@ jobs:
         with:
           files: |-
             ${{ env.REPO_NAME }}-${{ env.TAG_NAME }}.tar.gz
-          api_key: '${{ secrets.RELEASE_TOKEN }}'
+          api_key: "${{ secrets.RELEASE_TOKEN }}"
-          title: 'Release ${{ env.TAG_NAME }}'
+          title: "Release ${{ env.TAG_NAME }}"

src/components/PaletteEditor/PaletteEditor.module.css

@@ -25,7 +25,11 @@
   transition-timing-function: ease-out;
 }
 
-.actionBar .actionButton:hover {
+.actionBar .actionButton.disabled {
+  cursor: auto;
+}
+
+.actionBar .actionButton.enabled:hover {
   background-color: #f0f0f0;
   box-shadow:
     rgba(60, 64, 67, 0.25) 0px 3px 6px 0px,
@@ -33,7 +37,7 @@
   transform: translateY(-1px);
 }
 
-.actionBar .actionButton:active {
+.actionBar .actionButton.enabled:active {
   background-color: #d1d1d1;
   box-shadow:
     rgba(60, 64, 67, 0.3) 0px 1px 1px 0px,

src/components/PaletteEditor/PaletteEditor.test.cy.tsx

@@ -170,7 +170,7 @@ it("can perform actions in normal mode", () => {
   cy.get("@row2").contains("#000000");
 });
 
-it("can manually sync picker and palette", () => {
+it.only("can manually sync picker and palette", () => {
   cy.mount(<TestWrapper initialCardState={defaultPaletteCardState} />);
 
   cy.dataCy("hex-value-input").as("hex");
@@ -189,10 +189,10 @@ it("can manually sync picker and palette", () => {
 
   // Select a color and sync it to the picker
   cy.get("@row1").click();
-  cy.get("@palette")
+  cy.get("@palette").should("have.css", "background-color", "rgb(0, 255, 0)");
-    .should("have.css", "background-color", "rgb(0, 255, 0)")
+  cy.get("@picker")
-    .click();
+    .click()
-  cy.get("@picker").should("have.css", "background-color", "rgb(0, 255, 0)");
+    .should("have.css", "background-color", "rgb(0, 255, 0)");
   cy.get("@hex").should("have.value", "#00FF00");
 
   // Select a new color, picker remains the same
@@ -203,7 +203,7 @@ it("can manually sync picker and palette", () => {
   // Change picker color, sync back to palette.
   cy.get("@hex").focus().type("FFFF00{esc}").wait(0);
   cy.get("@picker").should("have.css", "background-color", "rgb(255, 255, 0)");
-  cy.get("@picker").click();
+  cy.get("@palette").click();
   cy.get("@row0").contains("#FFFF00");
 });
 

src/components/PaletteEditor/PaletteEditor.tsx

@@ -190,7 +190,10 @@ function ActionBar({
   return (
     <div className={styles.actionBar} data-cy="action-bar">
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: canUndo,
+          [styles.disabled]: !canUndo,
+        })}
         data-cy="undo"
         disabled={!canUndo}
         onClick={handleUndo}
@@ -199,7 +202,10 @@ function ActionBar({
         <Undo2 size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: canRedo,
+          [styles.disabled]: !canRedo,
+        })}
         data-cy="redo"
         disabled={!canRedo}
         onClick={handleRedo}
@@ -208,7 +214,7 @@ function ActionBar({
         <Redo2 size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, styles.enabled)}
         data-cy="add"
         onClick={actions.addColor}
         title="Add Color"
@@ -216,7 +222,10 @@ function ActionBar({
         <Plus size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: hasSelection,
+          [styles.disabled]: !hasSelection,
+        })}
         data-cy="delete"
         disabled={!hasSelection}
         onClick={actions.deleteSelectedColors}
@@ -225,7 +234,10 @@ function ActionBar({
         <Trash2 size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: hasSelection,
+          [styles.disabled]: !hasSelection,
+        })}
         data-cy="duplicate"
         disabled={!hasSelection}
         onClick={actions.duplicateSelectedColors}
@@ -234,9 +246,14 @@ function ActionBar({
         <Copy size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.wordButton, {
+        className={clsx(
-          [styles.activeButton]: mode === "reorder",
+          styles.actionButton,
-        })}
+          styles.wordButton,
+          styles.enabled,
+          {
+            [styles.activeButton]: mode === "reorder",
+          },
+        )}
         data-cy="reorder"
         aria-pressed={mode === "reorder"}
         onClick={() =>
@@ -247,9 +264,14 @@ function ActionBar({
         Reorder
       </button>
       <button
-        className={clsx(styles.actionButton, styles.wordButton, {
+        className={clsx(
-          [styles.activeButton]: mode === "select",
+          styles.actionButton,
-        })}
+          styles.wordButton,
+          styles.enabled,
+          {
+            [styles.activeButton]: mode === "select",
+          },
+        )}
         data-cy="select"
         aria-pressed={mode === "select"}
         onClick={() =>
@@ -262,7 +284,11 @@ function ActionBar({
       {mode === "select" && (
         <>
           <button
-            className={clsx(styles.actionButton, styles.iconButton)}
+            className={clsx(
+              styles.actionButton,
+              styles.enabled,
+              styles.iconButton,
+            )}
             data-cy="select-all"
             onClick={actions.selectAll}
             title="Select All"
@@ -270,7 +296,11 @@ function ActionBar({
             <CheckCheck size={16} />
           </button>
           <button
-            className={clsx(styles.actionButton, styles.iconButton)}
+            className={clsx(
+              styles.actionButton,
+              styles.enabled,
+              styles.iconButton,
+            )}
             data-cy="clear"
             onClick={actions.clearSelection}
             title="Clear Selections"
@@ -384,13 +414,15 @@ function PaletteCard({
       <CardHeader name={cardState.name} onNameChange={actions.setCardName} />
       <PickerColor
         pickerColor={pickerColor}
-        paletteColorId={selectedColor?.id || null}
+        setPickerColor={setPickerColor}
-        setPaletteColor={actions.setColorValue}
+        selectedColor={selectedColor?.hex || null}
         isSynced={isSynced}
       />
       <PaletteColor
         selectedColor={selectedColor?.hex || null}
-        setPickerColor={setPickerColor}
+        pickerColor={pickerColor}
+        paletteColorId={selectedColor?.id || null}
+        setPaletteColor={actions.setColorValue}
         isSynced={isSynced}
       />
       <Palette cardState={cardState} actions={actions} mode={mode} />
@@ -446,20 +478,20 @@ function CardHeader({
 
 function PickerColor({
   pickerColor,
-  paletteColorId,
+  setPickerColor,
-  setPaletteColor,
+  selectedColor,
   isSynced,
 }: {
   pickerColor: HexColor;
-  paletteColorId: string | null;
+  setPickerColor: (hex: HexColor) => void;
-  setPaletteColor: (id: string, hex: HexColor) => void;
+  selectedColor: HexColor | null;
   isSynced: boolean;
 }) {
   const arrowToken = useContrastToken(() => luminanceFromHex(pickerColor));
 
   const handleClick = () => {
-    if (!isSynced && paletteColorId) {
+    if (!isSynced && selectedColor) {
-      setPaletteColor(paletteColorId, pickerColor);
+      setPickerColor(selectedColor);
     }
   };
 
@@ -472,7 +504,7 @@ function PickerColor({
         backgroundColor: formatHexString(pickerColor),
       }}
       onClick={handleClick}
-      title={!isSynced ? "Send to Picker" : ""}
+      title={!isSynced ? "Set to Palette Color" : ""}
     >
       {!isSynced && (
         <div
@@ -482,7 +514,7 @@ function PickerColor({
             [styles.arrowIndicatorLight]: arrowToken === "light",
           })}
         >
-          <ChevronsRight size={32} />
+          <ChevronsLeft size={32} />
         </div>
       )}
     </div>
@@ -491,19 +523,23 @@ function PickerColor({
 
 function PaletteColor({
   selectedColor,
-  setPickerColor,
+  pickerColor,
+  paletteColorId,
+  setPaletteColor,
   isSynced,
 }: {
   selectedColor: HexColor | null;
-  setPickerColor: (hex: HexColor) => void;
+  pickerColor: HexColor;
+  paletteColorId: string | null;
+  setPaletteColor: (id: string, hex: HexColor) => void;
   isSynced: boolean;
 }) {
   const bgColor = selectedColor || DEFAULT_BG;
   const arrowToken = useContrastToken(() => luminanceFromHex(bgColor));
 
   const handleClick = () => {
-    if (!isSynced && selectedColor) {
+    if (!isSynced && paletteColorId) {
-      setPickerColor(selectedColor);
+      setPaletteColor(paletteColorId, pickerColor);
     }
   };
 
@@ -516,7 +552,7 @@ function PaletteColor({
         backgroundColor: formatHexString(bgColor),
       }}
       onClick={handleClick}
-      title={!isSynced ? "Send to Palette" : ""}
+      title={!isSynced ? "Set to Picker Color" : ""}
     >
       {!isSynced && (
         <div
@@ -526,7 +562,7 @@ function PaletteColor({
             [styles.arrowIndicatorLight]: arrowToken === "light",
           })}
         >
-          <ChevronsLeft size={32} />
+          <ChevronsRight size={32} />
         </div>
       )}
     </div>