Support Mastodon permissions system(?)

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/groups/index.tsx

@@ -9,7 +9,8 @@ import { openModal } from 'soapbox/actions/modals';
 import GroupCard from 'soapbox/components/group-card';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Button, Column, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
 
 import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
 
@@ -31,6 +32,7 @@ const getOrderedGroups = createSelector([
 
 const Groups: React.FC = () => {
   const dispatch = useDispatch();
+  const account = useOwnAccount();
 
   const { groups, isLoading } = useAppSelector((state) => getOrderedGroups(state));
 
@@ -72,15 +74,17 @@ const Groups: React.FC = () => {
 
   return (
     <Stack className='gap-4'>
-      <Button
-        className='sm:w-fit sm:self-end xl:hidden'
-        icon={require('@tabler/icons/circles.svg')}
-        onClick={createGroup}
-        theme='secondary'
-        block
-      >
-        <FormattedMessage id='new_group_panel.action' defaultMessage='Create group' />
-      </Button>
+      {hasPermission(account, PERMISSION_CREATE_GROUPS) && (
+        <Button
+          className='sm:w-fit sm:self-end xl:hidden'
+          icon={require('@tabler/icons/circles.svg')}
+          onClick={createGroup}
+          theme='secondary'
+          block
+        >
+          <FormattedMessage id='new_group_panel.action' defaultMessage='Create group' />
+        </Button>
+      )}
       <ScrollableList
         scrollKey='groups'
         emptyMessage={emptyMessage}

app/soapbox/features/ui/components/panels/new-group-panel.tsx

@@ -3,15 +3,19 @@ import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
 
 const NewGroupPanel = () => {
   const dispatch = useAppDispatch();
+  const account = useOwnAccount();
 
   const createGroup = () => {
     dispatch(openModal('MANAGE_GROUP'));
   };
 
+  if (!hasPermission(account, PERMISSION_CREATE_GROUPS)) return null;
+
   return (
     <Stack space={2}>
       <Stack>

app/soapbox/normalizers/account.ts

@@ -47,6 +47,7 @@ export const AccountRecord = ImmutableRecord({
   mute_expires_at: null as string | null,
   note: '',
   pleroma: ImmutableMap<string, any>(),
+  role: ImmutableMap<string, any>(),
   source: ImmutableMap<string, any>(),
   statuses_count: 0,
   uri: '',

app/soapbox/utils/permissions.ts

@@ -0,0 +1,17 @@
+import type { Account } from 'soapbox/types/entities';
+
+export const PERMISSION_CREATE_GROUPS  = 0x0000000000100000;
+export const PERMISSION_INVITE_USERS   = 0x0000000000010000;
+export const PERMISSION_MANAGE_USERS   = 0x0000000000000400;
+export const PERMISSION_MANAGE_REPORTS = 0x0000000000000010;
+
+type Permission = typeof PERMISSION_CREATE_GROUPS | typeof PERMISSION_INVITE_USERS | typeof PERMISSION_MANAGE_USERS | typeof PERMISSION_MANAGE_REPORTS
+
+export const hasPermission = (account: Account | null, permission: Permission) => {
+  if (!account) return false;
+
+  const permissions = account.getIn(['role', 'permissions']) as number;
+
+  if (!permission) return true;
+  return (permissions & permission) === permission;
+};