From e6da22a1e090f50f2c5782e3cc9ff877117a9962 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 23 Mar 2023 09:51:52 +0800
Subject: [PATCH] Nav Menu show avatar if multiple accounts

Accounts sheet default to 'switch' when click on account
---
 src/app.css             | 25 +++++++++++++++++++++
 src/components/menu.jsx | 48 +++++++++++++++++++++++++++++++++++------
 src/pages/accounts.jsx  | 42 +++++++++++++++++++-----------------
 3 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/src/app.css b/src/app.css
index 954fa9e3..36341f8a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1433,6 +1433,31 @@ ul.link-list li a .icon {
   }
 }
 
+/* NAV MENU BUTTON */
+
+.nav-menu-button.with-avatar {
+  position: relative;
+}
+.nav-menu-button:is(:hover, :focus):not(:active) {
+  filter: none !important;
+}
+.nav-menu-button .avatar {
+  transition: box-shadow 0.3s ease-out;
+}
+.nav-menu-button:is(:hover, :focus, .active) .avatar {
+  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-light-color);
+}
+.nav-menu-button.with-avatar .icon {
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  background-color: var(--bg-color);
+  border-radius: 2px;
+}
+.nav-menu-button.with-avatar:hover:not(:active, .active) .icon {
+  transform: translateY(-1px);
+}
+
 /* COLUMNS */
 
 #columns {
diff --git a/src/components/menu.jsx b/src/components/menu.jsx
index bca5dcb5..c3420417 100644
--- a/src/components/menu.jsx
+++ b/src/components/menu.jsx
@@ -1,17 +1,23 @@
 import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
+import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
 
 import { api } from '../utils/api';
 import states from '../utils/states';
-import { getCurrentAccount } from '../utils/store-utils';
+import store from '../utils/store';
 
+import Avatar from './avatar';
 import Icon from './icon';
 import MenuLink from './MenuLink';
 
 function NavMenu(props) {
   const snapStates = useSnapshot(states);
   const { instance, authenticated } = api();
-  const currentAccount = getCurrentAccount();
+  const accounts = store.local.getJSON('accounts');
+  const currentAccount = accounts.find(
+    (account) => account.info.id === store.session.get('currentAccount'),
+  );
+  const moreThanOneAccount = accounts.length > 1;
 
   // Home = Following
   // But when in multi-column mode, Home becomes columns of anything
@@ -21,6 +27,16 @@ function NavMenu(props) {
     snapStates.settings.shortcutsColumnsMode &&
     !snapStates.shortcuts.find((pin) => pin.type === 'following');
 
+  const bindLongPress = useLongPress(
+    () => {
+      states.showAccounts = true;
+    },
+    {
+      detect: 'touch',
+      cancelOnMovement: true,
+    },
+  );
+
   return (
     <Menu
       portal={{
@@ -30,11 +46,31 @@ function NavMenu(props) {
       overflow="auto"
       viewScroll="close"
       boundingBoxPadding="8 8 8 8"
-      menuButton={
-        <button type="button" class="button plain">
-          <Icon icon="menu" size="l" />
+      menuButton={({ open }) => (
+        <button
+          type="button"
+          class={`button plain nav-menu-button ${
+            moreThanOneAccount ? 'with-avatar' : ''
+          } ${open ? 'active' : ''}`}
+          style={{ position: 'relative' }}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            states.showAccounts = true;
+          }}
+          {...bindLongPress()}
+        >
+          {moreThanOneAccount && (
+            <Avatar
+              url={
+                currentAccount?.info?.avatar ||
+                currentAccount?.info?.avatarStatic
+              }
+              size="l"
+            />
+          )}
+          <Icon icon="menu" size={moreThanOneAccount ? 's' : 'l'} />
         </button>
-      }
+      )}
     >
       {!!snapStates.appVersion?.commitHash &&
         __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx
index 0e617d9a..b7afc4fc 100644
--- a/src/pages/accounts.jsx
+++ b/src/pages/accounts.jsx
@@ -1,6 +1,6 @@
 import './settings.css';
 
-import { Menu, MenuItem } from '@szhsin/react-menu';
+import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useReducer, useState } from 'preact/hooks';
 
 import Avatar from '../components/avatar';
@@ -25,11 +25,6 @@ function Accounts({ onClose }) {
     <div id="settings-container" class="sheet" tabIndex="-1">
       <header class="header-grid">
         <h2>Accounts</h2>
-        <div class="header-side">
-          <Link to="/login" class="button plain" onClick={onClose}>
-            <Icon icon="plus" /> <span>Account</span>
-          </Link>
-        </div>
       </header>
       <main>
         <section>
@@ -66,7 +61,12 @@ function Accounts({ onClose }) {
                       account={account.info}
                       showAcct
                       onClick={() => {
-                        states.showAccount = `${account.info.username}@${account.instanceURL}`;
+                        if (isCurrent) {
+                          states.showAccount = `${account.info.username}@${account.instanceURL}`;
+                        } else {
+                          store.session.set('currentAccount', account.info.id);
+                          location.reload();
+                        }
                       }}
                     />
                   </div>
@@ -76,18 +76,6 @@ function Accounts({ onClose }) {
                         <span class="tag">Default</span>{' '}
                       </>
                     )}
-                    {!isCurrent && (
-                      <button
-                        type="button"
-                        class="light"
-                        onClick={() => {
-                          store.session.set('currentAccount', account.info.id);
-                          location.reload();
-                        }}
-                      >
-                        <Icon icon="transfer" /> Switch
-                      </button>
-                    )}
                     <Menu
                       align="end"
                       menuButton={
@@ -100,6 +88,15 @@ function Accounts({ onClose }) {
                         </button>
                       }
                     >
+                      <MenuItem
+                        onClick={() => {
+                          states.showAccount = `${account.info.username}@${account.instanceURL}`;
+                        }}
+                      >
+                        <Icon icon="user" />
+                        <span>View profile…</span>
+                      </MenuItem>
+                      <MenuDivider />
                       {moreThanOneAccount && (
                         <MenuItem
                           disabled={isDefault}
@@ -127,7 +124,7 @@ function Accounts({ onClose }) {
                         }}
                       >
                         <Icon icon="exit" />
-                        <span>Log out</span>
+                        <span>Log out…</span>
                       </MenuItem>
                     </Menu>
                   </div>
@@ -135,6 +132,11 @@ function Accounts({ onClose }) {
               );
             })}
           </ul>
+          <p>
+            <Link to="/login" class="button plain2" onClick={onClose}>
+              <Icon icon="plus" /> <span>Add an existing account</span>
+            </Link>
+          </p>
           {moreThanOneAccount && (
             <p>
               <small>