Redesign: Add admin/moderation links, fix relationships link (#40244)

app/javascript/mastodon/components/menu/items.tsx

@@ -164,6 +164,13 @@ export const MenuItemLink: React.FC<MenuItemLinkProps> = ({
 
   const Wrapper = type === 'actions' ? Fragment : 'li';
   const asElement = (as ?? 'link') === 'link' ? NavLink : 'a';
+  const externalLinkProps =
+    as === 'a'
+      ? {
+          target: '_blank',
+          rel: 'noopener',
+        }
+      : undefined;
 
   return (
     <Wrapper>
@@ -171,6 +178,7 @@ export const MenuItemLink: React.FC<MenuItemLinkProps> = ({
         as={asElement}
         role={type === 'actions' ? 'menuitem' : undefined}
         onKeyDown={handleSpacebarPress}
+        {...externalLinkProps}
         {...props}
       >
         {children}

app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss

@@ -9,6 +9,7 @@
 
   & > :global(.account) {
     flex-grow: 1;
+    overflow: hidden;
 
     --account-outer-spacing: 0;
     --avatar-border-radius: var(--radius-round);

app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx

@@ -10,6 +10,8 @@ import {
   HeartIcon,
   UsersThreeIcon,
   ProhibitIcon,
+  GavelIcon,
+  ShieldStarIcon,
   SignOutIcon,
 } from '@phosphor-icons/react';
 
@@ -26,13 +28,17 @@ import {
 } from '@/mastodon/components/menu';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useIdentity } from '@/mastodon/identity_context';
+import {
+  canManageReports,
+  canViewAdminDashboard,
+} from '@/mastodon/permissions';
 import { useAppDispatch } from '@/mastodon/store';
 
 import classes from './account_card_and_menu.module.scss';
 
 export const NavigationAccountCardAndMenu: React.FC = () => {
   const dispatch = useAppDispatch();
-  const { accountId } = useIdentity();
+  const { accountId, permissions } = useIdentity();
   const account = useAccount(accountId);
 
   const confirmLogout = useCallback(() => {
@@ -43,6 +49,9 @@ export const NavigationAccountCardAndMenu: React.FC = () => {
     return null;
   }
 
+  const isManager = canManageReports(permissions);
+  const isAdmin = canViewAdminDashboard(permissions);
+
   const accountBasePath = `/@${account?.acct}`;
 
   return (
@@ -97,10 +106,7 @@ export const NavigationAccountCardAndMenu: React.FC = () => {
 
           <MenuItemDivider />
 
-          <MenuItemLink
-            to={`${accountBasePath}/followers`}
-            icon={UsersThreeIcon}
-          >
+          <MenuItemLink as='a' href='/relationships' icon={UsersThreeIcon}>
             <FormattedMessage
               id='navigation_bar.followers_and_following'
               defaultMessage='Followers & Following'
@@ -114,6 +120,34 @@ export const NavigationAccountCardAndMenu: React.FC = () => {
             />
           </MenuItemLink>
 
+          {(isManager || isAdmin) && (
+            <>
+              <MenuItemDivider />
+
+              {isAdmin && (
+                <MenuItemLink as='a' href='/admin/dashboard' icon={GavelIcon}>
+                  <FormattedMessage
+                    id='navigation_bar.administration'
+                    defaultMessage='Administration'
+                  />
+                </MenuItemLink>
+              )}
+
+              {isManager && (
+                <MenuItemLink
+                  as='a'
+                  href='/admin/reports'
+                  icon={ShieldStarIcon}
+                >
+                  <FormattedMessage
+                    id='navigation_bar.moderation'
+                    defaultMessage='Moderation'
+                  />
+                </MenuItemLink>
+              )}
+            </>
+          )}
+
           <MenuItemDivider />
 
           <MenuItem onClick={confirmLogout} icon={SignOutIcon}>