From 46415b87a64efd7d2b33788c33fc0d9b7bfc8731 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 5 Feb 2024 10:17:49 +0800
Subject: [PATCH] Show lists containing the account in the menu

---
 src/components/account-info.jsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 475b61b..15d303d 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -917,6 +917,7 @@ function RelatedActions({
   const [showTranslatedBio, setShowTranslatedBio] = useState(false);
   const [showAddRemoveLists, setShowAddRemoveLists] = useState(false);
   const [showPrivateNoteModal, setShowPrivateNoteModal] = useState(false);
+  const [lists, setLists] = useState([]);
 
   return (
     <>
@@ -976,6 +977,22 @@ function RelatedActions({
                 <Icon icon="more" size="l" alt="More" />
               </button>
             }
+            onMenuChange={(e) => {
+              if (following && e.open) {
+                // Fetch lists that have this account
+                (async () => {
+                  try {
+                    const lists = await currentMasto.v1.accounts
+                      .$select(accountID.current)
+                      .lists.list();
+                    console.log('fetched account lists', lists);
+                    setLists(lists);
+                  } catch (e) {
+                    console.error(e);
+                  }
+                })();
+              }
+            }}
           >
             {currentAuthenticated && !isSelf && (
               <>
@@ -1017,7 +1034,20 @@ function RelatedActions({
                     }}
                   >
                     <Icon icon="list" />
-                    <span>Add/remove from Lists</span>
+                    {lists.length ? (
+                      <>
+                        <small class="menu-grow">
+                          Add/Remove from Lists
+                          <br />
+                          <span class="more-insignificant">
+                            {lists.map((list) => list.title).join(', ')}
+                          </span>
+                        </small>
+                        <small class="more-insignificant">{lists.length}</small>
+                      </>
+                    ) : (
+                      <span>Add/Remove from Lists</span>
+                    )}
                   </MenuItem>
                 )}
                 <MenuDivider />