client: make spectrum respect changed the current color

NEWS.md

@@ -34,6 +34,7 @@
 - Fixed loading full text on pages containing ampersands in URLs ([#1188](https://github.com/fossar/selfoss/pull/1188))
 - Fixed missing styling in article contents ([#1221](https://github.com/fossar/selfoss/pull/1221))
 - Golem, Lightreading and Heise spouts now use Graby for extracting article contents instead of our own defunct extraction rules. ([#1245](https://github.com/fossar/selfoss/pull/1245))
+- The tag colour picker now pre-selects the current colour instead of a placeholder colour. ([#1269](https://github.com/fossar/selfoss/pull/1269))
 
 ### API changes
 - `tags` attribute is now consistently array of strings, numbers are numbers and booleans are booleans. **This might break third-party clients that have not updated yet.** ([#948](https://github.com/fossar/selfoss/pull/948))

assets/js/templates/ColorChooser.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function ColorChooser({tag, onChange}) {
+    const colorChooser = React.useRef(null);
+
+    React.useLayoutEffect(() => {
+        // init colorpicker
+        const picker = colorChooser.current;
+        $(picker).spectrum({
+            showPaletteOnly: true,
+            color: tag.color,
+            palette: [
+                ['#ffccc9', '#ffce93', '#fffc9e', '#ffffc7', '#9aff99', '#96fffb', '#cdffff', '#cbcefb', '#fffe65', '#cfcfcf', '#fd6864', '#fe996b', '#fcff2f', '#67fd9a', '#38fff8', '#68fdff', '#9698ed', '#c0c0c0', '#fe0000', '#f8a102', '#ffcc67', '#f8ff00', '#34ff34', '#68cbd0', '#34cdf9', '#6665cd', '#9b9b9b', '#cb0000', '#f56b00', '#ffcb2f', '#ffc702', '#32cb00', '#00d2cb', '#3166ff', '#6434fc', '#656565', '#9a0000', '#ce6301', '#cd9934', '#999903', '#009901', '#329a9d', '#3531ff', '#6200c9', '#343434', '#680100', '#963400', '#986536', '#646809', '#036400', '#34696d', '#00009b', '#303498', '#000000', '#330001', '#643403', '#663234', '#343300', '#013300', '#003532', '#010066', '#340096']
+            ],
+            change: onChange,
+        });
+
+        return () => {
+            $(picker).spectrum('destroy');
+        };
+    }, [onChange, tag.color]);
+
+    const style = React.useMemo(
+        () => ({ backgroundColor: tag.color }),
+        [tag.color]
+    );
+
+    return (
+        <span className="color" style={style} ref={colorChooser} />
+    );
+}
+
+ColorChooser.propTypes = {
+    tag: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+};

assets/js/templates/NavTags.jsx

@@ -5,59 +5,31 @@ import { Link, useLocation, useRouteMatch } from 'react-router-dom';
 import classNames from 'classnames';
 import { unescape } from 'html-escaper';
 import { makeEntriesLink, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
+import ColorChooser from './ColorChooser';
 import { updateTag } from '../requests/tags';
 import Collapse from '@kunukn/react-collapse';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as icons from '../icons';
 import { LocalizationContext } from '../helpers/i18n';
 
-function ColorChooser({tag}) {
-    const colorChooser = React.useRef(null);
-
-    React.useLayoutEffect(() => {
-        // init colorpicker
-        const picker = colorChooser.current;
-        $(picker).spectrum({
-            showPaletteOnly: true,
-            color: 'blanchedalmond',
-            palette: [
-                ['#ffccc9', '#ffce93', '#fffc9e', '#ffffc7', '#9aff99', '#96fffb', '#cdffff', '#cbcefb', '#fffe65', '#cfcfcf', '#fd6864', '#fe996b', '#fcff2f', '#67fd9a', '#38fff8', '#68fdff', '#9698ed', '#c0c0c0', '#fe0000', '#f8a102', '#ffcc67', '#f8ff00', '#34ff34', '#68cbd0', '#34cdf9', '#6665cd', '#9b9b9b', '#cb0000', '#f56b00', '#ffcb2f', '#ffc702', '#32cb00', '#00d2cb', '#3166ff', '#6434fc', '#656565', '#9a0000', '#ce6301', '#cd9934', '#999903', '#009901', '#329a9d', '#3531ff', '#6200c9', '#343434', '#680100', '#963400', '#986536', '#646809', '#036400', '#34696d', '#00009b', '#303498', '#000000', '#330001', '#643403', '#663234', '#343300', '#013300', '#003532', '#010066', '#340096']
-            ],
-            change: function(color) {
-                updateTag(
-                    tag.tag,
-                    color.toHexString()
-                ).then(() => {
-                    selfoss.entriesPage?.reloadList();
-                }).catch((error) => {
-                    selfoss.app.showError(selfoss.app._('error_saving_color') + ' ' + error.message);
-                });
-
-            }
-        });
-
-        return () => {
-            $(picker).spectrum('destroy');
-        };
-    }, [tag.tag]);
-
-    const style = React.useMemo(
-        () => ({ backgroundColor: tag.color }),
-        [tag.color]
-    );
-
-    return (
-        <span className="color" style={style} ref={colorChooser} />
-    );
-}
-
-ColorChooser.propTypes = {
-    tag: PropTypes.object.isRequired,
-};
-
 function Tag({ tag, active, collapseNav }) {
     const location = useLocation();
     const _ = React.useContext(LocalizationContext);
+    const tagName = tag !== null ? tag.tag : null;
+
+    const colorChanged = React.useCallback(
+        (color) => {
+            updateTag(
+                tagName,
+                color.toHexString()
+            ).then(() => {
+                selfoss.entriesPage?.reloadList();
+            }).catch((error) => {
+                selfoss.app.showError(selfoss.app._('error_saving_color') + ' ' + error.message);
+            });
+        },
+        [tagName]
+    );
 
     return (
         <li
@@ -79,7 +51,7 @@ function Tag({ tag, active, collapseNav }) {
                         <span className="unread">
                             {tag.unread > 0 ? tag.unread : ''}
                         </span>
-                        <ColorChooser tag={tag} />
+                        <ColorChooser tag={tag} onChange={colorChanged} />
                     </React.Fragment>
                 )}
             </Link>