Allow settings for unauthenticated sessions

src/components/nav-menu.jsx

@@ -234,6 +234,13 @@ function NavMenu(props) {
               <MenuLink to="/login">
                 <Icon icon="user" size="l" /> <span>Log in</span>
               </MenuLink>
+              <MenuItem
+                onClick={() => {
+                  states.showSettings = true;
+                }}
+              >
+                <Icon icon="gear" size="l" /> <span>Settings&hellip;</span>
+              </MenuItem>
             </>
           )}
         </section>

src/pages/settings.jsx

@@ -34,6 +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();
   // 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(() => {
@@ -169,12 +170,16 @@ function Settings({ onClose }) {
             </li>
           </ul>
         </section>
+        {authenticated && (
+          <>
             <h3>Posting</h3>
             <section>
               <ul>
                 <li>
                   <div>
-                <label for="posting-privacy-field">Default visibility</label>
+                    <label for="posting-privacy-field">
+                      Default visibility
+                    </label>
                   </div>
                   <div>
                     <select
@@ -182,7 +187,6 @@ function Settings({ onClose }) {
                       value={prefs['posting:default:visibility'] || 'public'}
                       onChange={(e) => {
                         const { value } = e.target;
-                    const { masto } = api();
                         (async () => {
                           try {
                             await masto.v1.accounts.updateCredentials({
@@ -213,6 +217,8 @@ function Settings({ onClose }) {
                 </li>
               </ul>
             </section>
+          </>
+        )}
         <h3>Experiments</h3>
         <section>
           <ul>
@@ -384,6 +390,7 @@ function Settings({ onClose }) {
                 </small>
               </div>
             </li>
+            {authenticated && (
               <li>
                 <button
                   type="button"
@@ -396,9 +403,10 @@ function Settings({ onClose }) {
                   Unsent drafts
                 </button>
               </li>
+            )}
           </ul>
         </section>
-        <PushNotificationsSection onClose={onClose} />
+        {authenticated && <PushNotificationsSection onClose={onClose} />}
         <h3>About</h3>
         <section>
           <div