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

@@ -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({

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;
+}

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>