From 715357c8c9884bc8a2125f04ee7b3b7d11bfe0b5 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 2 Oct 2023 21:13:56 +0800
Subject: [PATCH] Show synced icon & link to instance for more settings

Context: some users were confused why some settings are not on Phanpy when it can be set on their own instance's web UI
---
 src/components/icon.jsx |  1 +
 src/pages/settings.css  |  5 +++++
 src/pages/settings.jsx  | 18 ++++++++++++++++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index fd52d511..057161e7 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -101,6 +101,7 @@ export const ICONS = {
   keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
   'mute-user': () => import('@iconify-icons/mingcute/user-hide-line'),
   'block-user': () => import('@iconify-icons/mingcute/user-security-line'),
+  cloud: () => import('@iconify-icons/mingcute/cloud-line'),
 };
 
 function Icon({
diff --git a/src/pages/settings.css b/src/pages/settings.css
index 0b150d31..b9dd0e9c 100644
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@@ -135,3 +135,8 @@
   padding-inline: 16px;
   color: var(--text-insignificant-color);
 }
+
+#settings-container .synced-icon {
+  color: var(--link-color);
+  vertical-align: middle;
+}
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 56fe2ffe..0c6635ce 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -34,7 +34,7 @@ function Settings({ onClose }) {
   const currentTextSize = store.local.get('textSize') || DEFAULT_TEXT_SIZE;
 
   const [prefs, setPrefs] = useState(store.account.get('preferences') || {});
-  const { masto, authenticated } = api();
+  const { masto, authenticated, instance } = api();
   // Get preferences every time Settings is opened
   // NOTE: Disabled for now because I don't expect this to change often. Also for some reason, the /api/v1/preferences endpoint is cached for a while and return old prefs if refresh immediately after changing them.
   // useEffect(() => {
@@ -178,7 +178,8 @@ function Settings({ onClose }) {
                 <li>
                   <div>
                     <label for="posting-privacy-field">
-                      Default visibility
+                      Default visibility{' '}
+                      <Icon icon="cloud" alt="Synced" class="synced-icon" />
                     </label>
                   </div>
                   <div>
@@ -217,6 +218,19 @@ function Settings({ onClose }) {
                 </li>
               </ul>
             </section>
+            <p class="section-postnote">
+              <Icon icon="cloud" alt="Synced" class="synced-icon" />{' '}
+              <small>
+                Synced to your instance server's settings.{' '}
+                <a
+                  href={`https://${instance}/`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Go to your instance ({instance}) for more settings.
+                </a>
+              </small>
+            </p>
           </>
         )}
         <h3>Experiments</h3>