MVP implementation of listing muted/blocked users

src/components/account-info.jsx

@@ -906,6 +906,8 @@ function RelatedActions({ info, instance, authenticated, standalone }) {
                           setRelationship(newRelationship);
                           setRelationshipUIState('default');
                           showToast(`Unmuted @${username}`);
+                          states.reloadGenericAccounts.id = 'mute';
+                          states.reloadGenericAccounts.counter++;
                         } catch (e) {
                           console.error(e);
                           setRelationshipUIState('error');
@@ -957,6 +959,8 @@ function RelatedActions({ info, instance, authenticated, standalone }) {
                                 showToast(
                                   `Muted @${username} for ${MUTE_DURATIONS_LABELS[duration]}`,
                                 );
+                                states.reloadGenericAccounts.id = 'mute';
+                                states.reloadGenericAccounts.counter++;
                               } catch (e) {
                                 console.error(e);
                                 setRelationshipUIState('error');
@@ -1007,6 +1011,8 @@ function RelatedActions({ info, instance, authenticated, standalone }) {
                           setRelationshipUIState('default');
                           showToast(`Blocked @${username}`);
                         }
+                        states.reloadGenericAccounts.id = 'block';
+                        states.reloadGenericAccounts.counter++;
                       } catch (e) {
                         console.error(e);
                         setRelationshipUIState('error');

src/components/generic-accounts.jsx

@@ -21,6 +21,7 @@ export default function GenericAccounts({ onClose = () => {} }) {
   }
 
   const {
+    id,
     heading,
     fetchAccounts,
     accounts: staticAccounts,
@@ -60,6 +61,14 @@ export default function GenericAccounts({ onClose = () => {} }) {
     }
   }, [staticAccounts, fetchAccounts]);
 
+  useEffect(() => {
+    // reloadGenericAccounts contains value like {id: 'mute', counter: 1}
+    // We only need to reload if the id matches
+    if (snapStates.reloadGenericAccounts?.id === id) {
+      loadAccounts(true);
+    }
+  }, [snapStates.reloadGenericAccounts.counter]);
+
   return (
     <div id="generic-accounts-container" class="sheet" tabindex="-1">
       <button type="button" class="sheet-close" onClick={onClose}>

src/components/icon.jsx

@@ -99,6 +99,8 @@ export const ICONS = {
   'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
   'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
   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'),
 };
 
 function Icon({

src/components/nav-menu.jsx

@@ -1,6 +1,11 @@
 import './nav-menu.css';
 
-import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
+import {
+  ControlledMenu,
+  Menu,
+  MenuDivider,
+  MenuItem,
+} from '@szhsin/react-menu';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
@@ -16,7 +21,7 @@ import MenuLink from './menu-link';
 
 function NavMenu(props) {
   const snapStates = useSnapshot(states);
-  const { instance, authenticated } = api();
+  const { masto, instance, authenticated } = api();
 
   const [currentAccount, setCurrentAccount] = useState();
   const [moreThanOneAccount, setMoreThanOneAccount] = useState(false);
@@ -60,6 +65,28 @@ function NavMenu(props) {
     0,
   ]);
 
+  const mutesIterator = useRef();
+  async function fetchMutes(firstLoad) {
+    if (firstLoad || !mutesIterator.current) {
+      mutesIterator.current = masto.v1.mutes.list({
+        limit: 80,
+      });
+    }
+    const results = await mutesIterator.current.next();
+    return results;
+  }
+
+  const blocksIterator = useRef();
+  async function fetchBlocks(firstLoad) {
+    if (firstLoad || !blocksIterator.current) {
+      blocksIterator.current = masto.v1.blocks.list({
+        limit: 80,
+      });
+    }
+    const results = await blocksIterator.current.next();
+    return results;
+  }
+
   return (
     <>
       <button
@@ -204,6 +231,29 @@ function NavMenu(props) {
               >
                 <Icon icon="group" size="l" /> <span>Accounts&hellip;</span>
               </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  states.showGenericAccounts = {
+                    id: 'mute',
+                    heading: 'Muted users',
+                    fetchAccounts: fetchMutes,
+                  };
+                }}
+              >
+                <Icon icon="mute-user" size="l" /> Muted users&hellip;
+              </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  states.showGenericAccounts = {
+                    id: 'block',
+                    heading: 'Blocked users',
+                    fetchAccounts: fetchBlocks,
+                  };
+                }}
+              >
+                <Icon icon="block-user" size="l" />
+                Blocked users&hellip;
+              </MenuItem>
               <MenuItem
                 onClick={() => {
                   states.showKeyboardShortcutsHelp = true;

src/utils/states.js

@@ -24,6 +24,10 @@ const states = proxy({
   notificationsLastFetchTime: null,
   accounts: {},
   reloadStatusPage: 0,
+  reloadGenericAccounts: {
+    id: null,
+    counter: 0,
+  },
   spoilers: {},
   scrollPositions: {},
   unfurledLinks: {},