From 075fcedc8155bdb5c5450c6a500b9a58257f8666 Mon Sep 17 00:00:00 2001
From: Jan Tojnar <jtojnar@gmail.com>
Date: Sun, 30 Jul 2023 11:24:49 +0200
Subject: [PATCH 1/2] wip: client: Relegate source filter to advanced settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Most people will not use filter for most sources so let’s only show it
when filled in or when advanced settings are enabled.

With advanced settings we will be able to implement less common features
like archival, reduced update frequency or icon overriding.

WIP because I do not like the the toggle button placement.
---
 client/js/templates/Source.jsx | 56 ++++++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx
index c91275d12e..62940c5918 100644
--- a/client/js/templates/Source.jsx
+++ b/client/js/templates/Source.jsx
@@ -370,6 +370,18 @@ function SourceEditForm({
 
     const _ = useContext(LocalizationContext);
 
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const [filterUsed, setFilterUsed] = useState(source.filter !== '');
+
+    const toggleShowAdvanced = useCallback(
+        () => {
+            setShowAdvanced((advanced) => !advanced);
+            console.log(source.filter);
+            setFilterUsed(source.filter !== '');
+        },
+        [source.filter]
+    );
+
     const sourceParamsContent = (
         sourceParamsLoading ? (
             <Spinner size="3x" label={_('source_params_loading')} />
@@ -451,22 +463,24 @@ function SourceEditForm({
                 </li>
 
                 {/* filter */}
-                <li>
-                    <label htmlFor={`filter-${sourceId}`}>
-                        {_('source_filter')}
-                    </label>
-                    <input
-                        id={`filter-${sourceId}`}
-                        type="text"
-                        name="filter"
-                        accessKey="f"
-                        value={source.filter ?? ''}
-                        onChange={filterOnChange}
-                    />
-                    {sourceErrors['filter'] ? (
-                        <span className="error">{sourceErrors['filter']}</span>
-                    ) : null}
-                </li>
+                {showAdvanced || filterUsed ? (
+                    <li>
+                        <label htmlFor={`filter-${sourceId}`}>
+                            {_('source_filter')}
+                        </label>
+                        <input
+                            id={`filter-${sourceId}`}
+                            type="text"
+                            name="filter"
+                            accessKey="f"
+                            value={source.filter ?? ''}
+                            onChange={filterOnChange}
+                        />
+                        {sourceErrors['filter'] ? (
+                            <span className="error">{sourceErrors['filter']}</span>
+                        ) : null}
+                    </li>
+                ) : null}
 
                 {/* type */}
                 <li>
@@ -513,6 +527,16 @@ function SourceEditForm({
 
                 {/* save/delete */}
                 <li className="source-action">
+                    <button
+                        type="button"
+                        className="source-toggle-advanced source-save"
+                        accessKey="a"
+                        onClick={toggleShowAdvanced}
+                    >
+                        {(showAdvanced ? 'Hide advanced' : 'Show advanced')}
+                        {/*{_(showAdvanced ? 'source_hide_advanced' : 'source_show_advanced')}*/}
+                    </button>
+                    {' • '}
                     <button
                         type="submit"
                         className="source-save"

From 86a2650b2ba56a3e534773ddd63b4f7c902dd96d Mon Sep 17 00:00:00 2001
From: Jan Tojnar <jtojnar@gmail.com>
Date: Sun, 30 Jul 2023 11:28:52 +0200
Subject: [PATCH 2/2] wip: Add icon overrides

Currently only client side is implemented.

At minimum we will want to allow URL entry but upload would be even better.
---
 client/js/templates/Source.jsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx
index 62940c5918..359187462a 100644
--- a/client/js/templates/Source.jsx
+++ b/client/js/templates/Source.jsx
@@ -317,6 +317,11 @@ function SourceEditForm({
         [updateEditedSource]
     );
 
+    const iconOnChange = useCallback(
+        (event) => updateEditedSource({ icon: event.target.value }),
+        [updateEditedSource]
+    );
+
     const spoutOnChange = useCallback(
         (event) =>
             handleSpoutChange({
@@ -372,14 +377,18 @@ function SourceEditForm({
 
     const [showAdvanced, setShowAdvanced] = useState(false);
     const [filterUsed, setFilterUsed] = useState(source.filter !== '');
+    // TODO: Remove undefined check once we implement it server side.
+    const [iconUsed, setIconUsed] = useState(source.icon !== '' && source.icon !== undefined);
 
     const toggleShowAdvanced = useCallback(
         () => {
             setShowAdvanced((advanced) => !advanced);
             console.log(source.filter);
             setFilterUsed(source.filter !== '');
+            // TODO: Remove undefined check once we implement it server side.
+            setIconUsed(source.icon !== '' && source.icon !== undefined);
         },
-        [source.filter]
+        [source.filter, source.icon]
     );
 
     const sourceParamsContent = (
@@ -511,6 +520,26 @@ function SourceEditForm({
                     ) : null}
                 </li>
 
+                {showAdvanced || iconUsed ? (
+                    <li>
+                        <label htmlFor={`icon-${sourceId}`}>
+                            {/*_('source_icon')*/}
+                            {'Icon:'}
+                        </label>
+                        <input
+                            id={`icon-${sourceId}`}
+                            type="text"
+                            name="icon"
+                            accessKey="f"
+                            value={source.icon ?? ''}
+                            onChange={iconOnChange}
+                        />
+                        {sourceErrors['icon'] ? (
+                            <span className="error">{sourceErrors['icon']}</span>
+                        ) : null}
+                    </li>
+                ) : null}
+
                 {/* settings */}
                 {sourceParamsContent ? (
                     <li className="source-params">