feat: Ability to set list color indicator (#1033)

Closes #840
2025-07-18 20:59:44 +02:00 · 2025-02-25 15:58:59 +01:00 · 2025-02-25 15:58:59 +01:00 · 4821d407a7
commit 4821d407a7
parent ac09d9b6bd
19 changed files with 365 additions and 166 deletions
--- a/client/src/components/ColorPicker/ColorPicker.jsx
+++ b/client/src/components/ColorPicker/ColorPicker.jsx
@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import camelCase from 'lodash/camelCase';
+import upperFirst from 'lodash/upperFirst';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
+
+import globalStyles from '../../styles.module.scss';
+import styles from './ColorPicker.module.scss';
+
+const ColorPicker = React.memo(({ current, onChange, colors, allowDeletion }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className={styles.colorButtons}>
+        {colors.map((color) => (
+          <Button
+            key={color}
+            type="button"
+            name="color"
+            value={color}
+            className={classNames(
+              styles.colorButton,
+              color === current && styles.colorButtonActive,
+              globalStyles[`background${upperFirst(camelCase(color))}`],
+            )}
+            onClick={onChange}
+          />
+        ))}
+      </div>
+      {current && allowDeletion && (
+        <Button fluid value={undefined} onClick={onChange} content={t('action.removeColor')} />
+      )}
+    </>
+  );
+});
+
+ColorPicker.propTypes = {
+  current: PropTypes.string,
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func,
+  allowDeletion: PropTypes.bool,
+};
+
+ColorPicker.defaultProps = {
+  current: undefined,
+  onChange: undefined,
+  allowDeletion: false,
+};
+
+export default ColorPicker;
--- a/client/src/components/ColorPicker/ColorPicker.module.scss
+++ b/client/src/components/ColorPicker/ColorPicker.module.scss
@ -0,0 +1,40 @@
+:global(#app) {
+  .colorButton {
+    float: left;
+    height: 40px;
+    margin: 4px;
+    padding: 0;
+    position: relative;
+    width: 49.6px;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .colorButtonActive:before {
+    bottom: 3px;
+    color: #ffffff;
+    content: 'Г';
+    font-size: 18px;
+    line-height: 36px;
+    position: absolute;
+    right: 6px;
+    text-align: center;
+    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+    top: 0;
+    transform: rotate(-135deg);
+    width: 36px;
+  }
+
+  .colorButtons {
+    margin: -4px;
+    padding-bottom: 16px;
+
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+}
--- a/client/src/components/ColorPicker/index.js
+++ b/client/src/components/ColorPicker/index.js
@ -0,0 +1,3 @@
+import ColorPicker from './ColorPicker';
+
+export default ColorPicker;
--- a/client/src/components/LabelsStep/Editor.jsx
+++ b/client/src/components/LabelsStep/Editor.jsx
@ -1,16 +1,12 @@
-import upperFirst from 'lodash/upperFirst';
-import camelCase from 'lodash/camelCase';
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button } from 'semantic-ui-react';
 import { Input } from '../../lib/custom-ui';

 import LabelColors from '../../constants/LabelColors';
+import ColorPicker from '../ColorPicker';

 import styles from './Editor.module.scss';
-import globalStyles from '../../styles.module.scss';

 const Editor = React.memo(({ data, onFieldChange }) => {
  const [t] = useTranslation();
@ -33,22 +29,7 @@ const Editor = React.memo(({ data, onFieldChange }) => {
        onChange={onFieldChange}
      />
      <div className={styles.text}>{t('common.color')}</div>
-      <div className={styles.colorButtons}>
-        {LabelColors.map((color) => (
-          <Button
-            key={color}
-            type="button"
-            name="color"
-            value={color}
-            className={classNames(
-              styles.colorButton,
-              color === data.color && styles.colorButtonActive,
-              globalStyles[`background${upperFirst(camelCase(color))}`],
-            )}
-            onClick={onFieldChange}
-          />
-        ))}
-      </div>
+      <ColorPicker colors={LabelColors} current={data.color} onChange={onFieldChange} />
    </>
  );
 });
--- a/client/src/components/LabelsStep/Editor.module.scss
+++ b/client/src/components/LabelsStep/Editor.module.scss
@ -1,43 +1,4 @@
 :global(#app) {
-  .colorButton {
-    float: left;
-    height: 40px;
-    margin: 4px;
-    padding: 0;
-    position: relative;
-    width: 49.6px;
-
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-
-  .colorButtonActive:before {
-    bottom: 3px;
-    color: #ffffff;
-    content: "Г";
-    font-size: 18px;
-    line-height: 36px;
-    position: absolute;
-    right: 6px;
-    text-align: center;
-    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
-    top: 0;
-    transform: rotate(-135deg);
-    width: 36px;
-  }
-
-  .colorButtons {
-    margin: -4px;
-    padding-bottom: 16px;
-
-    &:after {
-      content: "";
-      display: table;
-      clear: both;
-    }
-  }
-
  .field {
    margin-bottom: 8px;
  }
--- a/client/src/components/List/ActionsStep.jsx
+++ b/client/src/components/List/ActionsStep.jsx
@ -4,7 +4,9 @@ import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
 import { Popup } from '../../lib/custom-ui';

+import ListColors from '../../constants/ListColors';
 import { useSteps } from '../../hooks';
+import ColorPicker from '../ColorPicker';
 import ListSortStep from '../ListSortStep';
 import DeleteStep from '../DeleteStep';

@ -13,93 +15,123 @@ import styles from './ActionsStep.module.scss';
 const StepTypes = {
  DELETE: 'DELETE',
  SORT: 'SORT',
+  EDIT_COLOR: 'CHANGE_COLOR',
 };

-const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onSort, onDelete, onClose }) => {
-  const [t] = useTranslation();
-  const [step, openStep, handleBack] = useSteps();
-
-  const handleEditNameClick = useCallback(() => {
-    onNameEdit();
-    onClose();
-  }, [onNameEdit, onClose]);
-
-  const handleAddCardClick = useCallback(() => {
-    onCardAdd();
-    onClose();
-  }, [onCardAdd, onClose]);
-
-  const handleSortClick = useCallback(() => {
-    openStep(StepTypes.SORT);
-  }, [openStep]);
-
-  const handleDeleteClick = useCallback(() => {
-    openStep(StepTypes.DELETE);
-  }, [openStep]);
-
-  const handleSortTypeSelect = useCallback(
-    (type) => {
-      onSort({
-        type,
-      });
+const ActionsStep = React.memo(
+  ({ onNameEdit, onCardAdd, onSort, onDelete, onClose, onColorEdit, color }) => {
+    const [t] = useTranslation();
+    const [step, openStep, handleBack] = useSteps();

+    const handleEditNameClick = useCallback(() => {
+      onNameEdit();
      onClose();
-    },
-    [onSort, onClose],
-  );
+    }, [onNameEdit, onClose]);

-  if (step && step.type) {
-    switch (step.type) {
-      case StepTypes.SORT:
-        return <ListSortStep onTypeSelect={handleSortTypeSelect} onBack={handleBack} />;
-      case StepTypes.DELETE:
-        return (
-          <DeleteStep
-            title="common.deleteList"
-            content="common.areYouSureYouWantToDeleteThisList"
-            buttonContent="action.deleteList"
-            onConfirm={onDelete}
-            onBack={handleBack}
-          />
-        );
-      default:
+    const handleAddCardClick = useCallback(() => {
+      onCardAdd();
+      onClose();
+    }, [onCardAdd, onClose]);
+
+    const handleSortClick = useCallback(() => {
+      openStep(StepTypes.SORT);
+    }, [openStep]);
+
+    const handleDeleteClick = useCallback(() => {
+      openStep(StepTypes.DELETE);
+    }, [openStep]);
+
+    const hanndleEditColorClick = useCallback(() => {
+      openStep(StepTypes.EDIT_COLOR);
+    }, [openStep]);
+
+    const handleSortTypeSelect = useCallback(
+      (type) => {
+        onSort({
+          type,
+        });
+
+        onClose();
+      },
+      [onSort, onClose],
+    );
+
+    if (step && step.type) {
+      switch (step.type) {
+        case StepTypes.SORT:
+          return <ListSortStep onTypeSelect={handleSortTypeSelect} onBack={handleBack} />;
+        case StepTypes.DELETE:
+          return (
+            <DeleteStep
+              title="common.deleteList"
+              content="common.areYouSureYouWantToDeleteThisList"
+              buttonContent="action.deleteList"
+              onConfirm={onDelete}
+              onBack={handleBack}
+            />
+          );
+        case StepTypes.EDIT_COLOR:
+          return (
+            <>
+              <Popup.Header onBack={handleBack}>
+                {t('action.editColor', {
+                  context: 'title',
+                })}
+              </Popup.Header>
+              <Popup.Content>
+                <ColorPicker
+                  colors={ListColors}
+                  current={color}
+                  allowDeletion
+                  onChange={(e) => onColorEdit(e.currentTarget.value)}
+                />
+              </Popup.Content>
+            </>
+          );
+        default:
+      }
    }
-  }

-  return (
-    <>
-      <Popup.Header>
-        {t('common.listActions', {
-          context: 'title',
-        })}
-      </Popup.Header>
-      <Popup.Content>
-        <Menu secondary vertical className={styles.menu}>
-          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
-            {t('action.editTitle', {
-              context: 'title',
-            })}
-          </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
-            {t('action.addCard', {
-              context: 'title',
-            })}
-          </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={handleSortClick}>
-            {t('action.sortList', {
-              context: 'title',
-            })}
-          </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
-            {t('action.deleteList', {
-              context: 'title',
-            })}
-          </Menu.Item>
-        </Menu>
-      </Popup.Content>
-    </>
-  );
-});
+    return (
+      <>
+        <Popup.Header>
+          {t('common.listActions', {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Menu secondary vertical className={styles.menu}>
+            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              {t('action.editTitle', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={hanndleEditColorClick}>
+              {t('action.editColor', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
+              {t('action.addCard', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleSortClick}>
+              {t('action.sortList', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              {t('action.deleteList', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          </Menu>
+        </Popup.Content>
+      </>
+    );
+  },
+);

 ActionsStep.propTypes = {
  onNameEdit: PropTypes.func.isRequired,
@ -107,6 +139,12 @@ ActionsStep.propTypes = {
  onDelete: PropTypes.func.isRequired,
  onSort: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
+  onColorEdit: PropTypes.func.isRequired,
+  color: PropTypes.string,
+};
+
+ActionsStep.defaultProps = {
+  color: undefined,
 };

 export default ActionsStep;
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@ -1,25 +1,29 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'react-i18next';
+import upperFirst from 'lodash/upperFirst';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import { Button, Icon } from 'semantic-ui-react';
 import { usePopup } from '../../lib/popup';

 import DroppableTypes from '../../constants/DroppableTypes';
 import CardContainer from '../../containers/CardContainer';
-import NameEdit from './NameEdit';
 import CardAdd from './CardAdd';
+import NameEdit from './NameEdit';
 import ActionsStep from './ActionsStep';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';

 import styles from './List.module.scss';
+import globalStyles from '../../styles.module.scss';

 const List = React.memo(
  ({
    id,
    index,
    name,
+    color,
    isPersisted,
    cardIds,
    canEdit,
@ -49,6 +53,15 @@ const List = React.memo(
      [onUpdate],
    );

+    const handleColorEdit = useCallback(
+      (newColor) => {
+        onUpdate({
+          color: newColor,
+        });
+      },
+      [onUpdate],
+    );
+
    const handleAddCardClick = useCallback(() => {
      setIsAddCardOpened(true);
    }, []);
@ -118,7 +131,18 @@ const List = React.memo(
                onClick={handleHeaderClick}
              >
                <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-                  <div className={styles.headerName}>{name}</div>
+                  <div className={styles.headerName}>
+                    {color && (
+                      <Icon
+                        name="circle"
+                        className={classNames(
+                          styles.headerNameColor,
+                          globalStyles[`color${upperFirst(camelCase(color))}`],
+                        )}
+                      />
+                    )}
+                    {name}
+                  </div>
                </NameEdit>
                {isPersisted && canEdit && (
                  <ActionsPopup
@ -126,6 +150,8 @@ const List = React.memo(
                    onCardAdd={handleCardAdd}
                    onDelete={onDelete}
                    onSort={onSort}
+                    color={color}
+                    onColorEdit={handleColorEdit}
                  >
                    <Button className={classNames(styles.headerButton, styles.target)}>
                      <Icon fitted name="pencil" size="small" />
@ -140,7 +166,7 @@ const List = React.memo(
                <button
                  type="button"
                  disabled={!isPersisted}
-                  className={classNames(styles.addCardButton)}
+                  className={styles.addCardButton}
                  onClick={handleAddCardClick}
                >
                  <PlusMathIcon className={styles.addCardButtonIcon} />
@ -161,6 +187,7 @@ List.propTypes = {
  id: PropTypes.string.isRequired,
  index: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
+  color: PropTypes.string,
  isPersisted: PropTypes.bool.isRequired,
  cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
  canEdit: PropTypes.bool.isRequired,
@ -170,4 +197,8 @@ List.propTypes = {
  onCardCreate: PropTypes.func.isRequired,
 };

+List.defaultProps = {
+  color: undefined,
+};
+
 export default List;
--- a/client/src/components/List/List.module.scss
+++ b/client/src/components/List/List.module.scss
@ -127,6 +127,11 @@
    word-break: break-word;
  }

+  .headerNameColor {
+    line-height: 1;
+    margin-right: 6px;
+  }
+
  .innerWrapper {
    margin-right: 8px;
    width: 272px;
--- a/client/src/components/ProjectSettingsModal/BackgroundPane.jsx
+++ b/client/src/components/ProjectSettingsModal/BackgroundPane.jsx
@ -1,18 +1,15 @@
 import { dequal } from 'dequal';
-import upperFirst from 'lodash/upperFirst';
-import camelCase from 'lodash/camelCase';
 import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Image } from 'semantic-ui-react';
 import { FilePicker } from '../../lib/custom-ui';

 import ProjectBackgroundGradients from '../../constants/ProjectBackgroundGradients';
 import { ProjectBackgroundTypes } from '../../constants/Enums';
+import ColorPicker from '../ColorPicker';

 import styles from './BackgroundPane.module.scss';
-import globalStyles from '../../styles.module.scss';

 const BackgroundPane = React.memo(
  ({ item, imageCoverUrl, isImageUpdating, onUpdate, onImageUpdate, onImageDelete }) => {
@ -68,23 +65,11 @@ const BackgroundPane = React.memo(
    return (
      <>
        <div className={styles.gradientButtons}>
-          {ProjectBackgroundGradients.map((gradient) => (
-            <Button
-              key={gradient}
-              type="button"
-              name="gradient"
-              value={gradient}
-              className={classNames(
-                styles.gradientButton,
-                item &&
-                  item.type === ProjectBackgroundTypes.GRADIENT &&
-                  gradient === item.name &&
-                  styles.gradientButtonActive,
-                globalStyles[`background${upperFirst(camelCase(gradient))}`],
-              )}
-              onClick={handleGradientClick}
-            />
-          ))}
+          <ColorPicker
+            colors={ProjectBackgroundGradients}
+            current={item?.name}
+            onChange={handleGradientClick}
+          />
        </div>
        {imageCoverUrl && (
          // TODO: wrap in button
--- a/client/src/constants/ListColors.js
+++ b/client/src/constants/ListColors.js
@ -0,0 +1,12 @@
+export default [
+  'berry-red',
+  'pumpkin-orange',
+  'lagoon-blue',
+  'pink-tulip',
+  'light-mud',
+  'orange-peel',
+  'bright-moss',
+  'antique-blue',
+  'dark-granite',
+  'lagune-blue',
+];
--- a/client/src/containers/ListContainer.js
+++ b/client/src/containers/ListContainer.js
@ -11,7 +11,7 @@ const makeMapStateToProps = () => {
  const selectCardIdsByListId = selectors.makeSelectCardIdsByListId();

  return (state, { id, index }) => {
-    const { name, isPersisted } = selectListById(state, id);
+    const { name, color, isPersisted } = selectListById(state, id);
    const cardIds = selectCardIdsByListId(state, id);
    const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);

@ -22,6 +22,7 @@ const makeMapStateToProps = () => {
      id,
      index,
      name,
+      color,
      isPersisted,
      cardIds,
      canEdit: isCurrentUserEditor,
--- a/client/src/locales/de-DE/core.js
+++ b/client/src/locales/de-DE/core.js
@ -196,6 +196,7 @@ export default {
      duplicate: 'Kopieren',
      duplicateCard_title: 'Karte kopieren',
      edit: 'Bearbeiten',
+      editColor_title: 'Farbe ändern',
      editDueDate_title: 'Fälligkeitsdatum bearbeiten',
      editDescription_title: 'Beschreibung ändern',
      editEmail_title: 'E-Mail-Adresse bearbeiten',
@ -212,6 +213,7 @@ export default {
      moveCard_title: 'Karte bewegen',
      remove: 'Löschen',
      removeBackground: 'Hintergrund löschen',
+      removeColor: 'Farbe löschen',
      removeCover_title: 'Vorschau löschen',
      removeFromBoard: 'Vom Board entfernen',
      removeFromProject: 'Vom Projekt entfernen',
--- a/client/src/locales/en-GB/core.js
+++ b/client/src/locales/en-GB/core.js
@ -214,6 +214,7 @@ export default {
      duplicate: 'Duplicate',
      duplicateCard_title: 'Duplicate Card',
      edit: 'Edit',
+      editColor_title: 'Edit Color',
      editDueDate_title: 'Edit Due Date',
      editDescription_title: 'Edit Description',
      editEmail_title: 'Edit E-mail',
@ -233,6 +234,7 @@ export default {
      moveCard_title: 'Move Card',
      remove: 'Remove',
      removeBackground: 'Remove background',
+      removeColor: 'Remove color',
      removeCover_title: 'Remove Cover',
      removeFromBoard: 'Remove from board',
      removeFromProject: 'Remove from project',
--- a/client/src/locales/en-US/core.js
+++ b/client/src/locales/en-US/core.js
@ -210,6 +210,7 @@ export default {
      duplicate: 'Duplicate',
      duplicateCard_title: 'Duplicate Card',
      edit: 'Edit',
+      editColor_title: 'Edit Color',
      editDueDate_title: 'Edit Due Date',
      editDescription_title: 'Edit Description',
      editEmail_title: 'Edit E-mail',
@ -229,6 +230,7 @@ export default {
      moveCard_title: 'Move Card',
      remove: 'Remove',
      removeBackground: 'Remove background',
+      removeColor: 'Remove color',
      removeCover_title: 'Remove Cover',
      removeFromBoard: 'Remove from board',
      removeFromProject: 'Remove from project',
--- a/client/src/models/List.js
+++ b/client/src/models/List.js
@ -11,6 +11,7 @@ export default class extends BaseModel {
    id: attr(),
    position: attr(),
    name: attr(),
+    color: attr(),
    boardId: fk({
      to: 'Board',
      as: 'board',
--- a/client/src/styles.module.scss
+++ b/client/src/styles.module.scss
@ -384,4 +384,46 @@
  .backgroundRedCurtain {
    background: radial-gradient(circle 371px at 2.9% 14.3%, rgba(255, 0, 102, 1) 0%, rgba(80, 5, 35, 1) 100.7%) !important;
  }
+
+  /* Colors */
+
+  .colorBerryRed {
+    color: #e04556 !important;
+  }
+
+  .colorPumpkinOrange {
+    color: #f0982d !important;
+  }
+
+  .colorLagoonBlue {
+    color: #109dc0 !important;
+  }
+
+  .colorPinkTulip {
+    color: #f97394 !important;
+  }
+
+  .colorLightMud {
+    color: #c7a57b !important;
+  }
+
+  .colorOrangePeel {
+    color: #fab623 !important;
+  }
+
+  .colorBrightMoss {
+    color: #a5c261 !important;
+  }
+
+  .colorAntiqueBlue {
+    color: #6c99bb !important;
+  }
+
+  .colorDarkGranite {
+    color: #8b8680 !important;
+  }
+
+  .colorLaguneBlue {
+    color: #00b4b1 !important;
+  }
 }
--- a/server/api/controllers/lists/update.js
+++ b/server/api/controllers/lists/update.js
@ -21,6 +21,11 @@ module.exports = {
      type: 'string',
      isNotEmptyString: true,
    },
+    color: {
+      type: 'string',
+      isIn: List.COLORS,
+      allowNull: true,
+    },
  },

  exits: {
@ -55,7 +60,7 @@ module.exports = {
      throw Errors.NOT_ENOUGH_RIGHTS;
    }

-    const values = _.pick(inputs, ['position', 'name']);
+    const values = _.pick(inputs, ['position', 'name', 'color']);

    list = await sails.helpers.lists.updateOne.with({
      values,
--- a/server/api/models/List.js
+++ b/server/api/models/List.js
@ -12,8 +12,22 @@ const SortTypes = {
  CREATED_AT_DESC: 'createdAt_desc',
 };

+const COLORS = [
+  'berry-red',
+  'pumpkin-orange',
+  'lagoon-blue',
+  'pink-tulip',
+  'light-mud',
+  'orange-peel',
+  'bright-moss',
+  'antique-blue',
+  'dark-granite',
+  'lagune-blue',
+];
+
 module.exports = {
  SortTypes,
+  COLORS,

  attributes: {
    //  ╔═╗╦═╗╦╔╦╗╦╔╦╗╦╦  ╦╔═╗╔═╗
@ -28,6 +42,11 @@ module.exports = {
      type: 'string',
      required: true,
    },
+    color: {
+      type: 'string',
+      isIn: COLORS,
+      allowNull: true,
+    },

    //  ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗
    //  ║╣ ║║║╠╩╗║╣  ║║╚═╗
--- a/server/db/migrations/20250131202710_add_list_color.js
+++ b/server/db/migrations/20250131202710_add_list_color.js
@ -0,0 +1,17 @@
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = (knex) =>
+  knex.schema.alterTable('list', (table) => {
+    table.text('color');
+  });
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = (knex) =>
+  knex.schema.alterTable('list', (table) => {
+    table.dropColumn('color');
+  });