[Glitch] Allow revealing blocked/muted accounts in a collection

Port 02deb0b2381e116b512a826064f6d4008c260cd5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/list_item/index.tsx

@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import classes from './styles.module.scss';
+
+interface WrapperProps extends Omit<
+  React.ComponentPropsWithoutRef<'div'>,
+  'title'
+> {
+  icon?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+}
+
+/**
+ * A basic list item component that can be used as a base for more bespoke list items.
+ *
+ * Depending on functionality, use `ListItemButton` or `ListItemLink` as a child of the
+ * wrapper component.
+ */
+export const ListItemWrapper: React.FC<WrapperProps> = ({
+  icon,
+  iconEnd,
+  children,
+  className,
+  ...otherProps
+}) => {
+  return (
+    <div {...otherProps} className={classNames(classes.wrapper, className)}>
+      {icon}
+      <div>{children}</div>
+      {iconEnd && <span className={classes.iconEnd}>{iconEnd}</span>}
+    </div>
+  );
+};
+
+interface LinkProps extends React.ComponentPropsWithoutRef<typeof Link> {
+  subtitle?: React.ReactNode;
+}
+
+export const ListItemLink: React.FC<LinkProps> = ({
+  subtitle,
+  children,
+  className,
+  ...otherProps
+}) => {
+  return (
+    <>
+      <h3 className={classes.title}>
+        <Link className={classNames(className, 'focusable')} {...otherProps}>
+          {children}
+        </Link>
+      </h3>
+      {subtitle && <div className={classes.subtitle}>{subtitle}</div>}
+    </>
+  );
+};
+
+interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  subtitle?: React.ReactNode;
+}
+
+export const ListItemButton: React.FC<ButtonProps> = ({
+  subtitle,
+  children,
+  className,
+  ...otherProps
+}) => {
+  return (
+    <>
+      <h3 className={classes.title}>
+        <button
+          type='button'
+          className={classNames(className, 'focusable')}
+          {...otherProps}
+        >
+          {children}
+        </button>
+      </h3>
+      {subtitle && <div className={classes.subtitle}>{subtitle}</div>}
+    </>
+  );
+};

app/javascript/flavours/glitch/components/list_item/list_item.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import KeyboardArrowDownIcon from '@/material-icons/400-24px/keyboard_arrow_down.svg?react';
+import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+
+import { Icon } from '../icon';
+
+import { ListItemWrapper, ListItemButton, ListItemLink } from './index';
+
+const meta = {
+  title: 'Components/ListItem',
+  component: ListItemWrapper,
+  subcomponents: { ListItemButton, ListItemLink },
+} satisfies Meta<typeof ListItemWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithButton: Story = {
+  render: () => (
+    <ListItemWrapper
+      icon={<Icon icon={VisibilityOffIcon} id='visibility' />}
+      iconEnd={<Icon icon={KeyboardArrowDownIcon} id='down' />}
+    >
+      <ListItemButton subtitle='You’ve blocked or muted these users'>
+        3 hidden accounts
+      </ListItemButton>
+    </ListItemWrapper>
+  ),
+};
+
+export const WithLink: Story = {
+  render: () => (
+    <ListItemWrapper
+      icon={<Icon icon={VisibilityIcon} id='visibility' />}
+      iconEnd={<Icon icon={ChevronRightIcon} id='right' />}
+    >
+      <ListItemLink to='/'>View more</ListItemLink>
+    </ListItemWrapper>
+  ),
+};

app/javascript/flavours/glitch/components/list_item/styles.module.scss

@@ -0,0 +1,44 @@
+.wrapper {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+  padding: 16px;
+  font-size: 15px;
+  color: var(--color-text-primary);
+}
+
+.title {
+  font-weight: 500;
+
+  :any-link,
+  button {
+    padding: 0;
+    border: none;
+    color: inherit;
+    background: none;
+    font: inherit;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.iconEnd {
+  margin-inline-start: auto;
+}

app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx

@@ -1,7 +1,15 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import {
+  ListItemButton,
+  ListItemWrapper,
+} from '@/flavours/glitch/components/list_item';
+import { createAppSelector, useAppSelector } from '@/flavours/glitch/store';
+import KeyboardArrowDownIcon from '@/material-icons/400-24px/keyboard_arrow_down.svg?react';
+import KeyboardArrowUpIcon from '@/material-icons/400-24px/keyboard_arrow_up.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
 import type { RenderButtonOptions } from 'flavours/glitch/components/account_list_item';
 import {
@@ -10,11 +18,13 @@ import {
 } from 'flavours/glitch/components/account_list_item';
 import { Button } from 'flavours/glitch/components/button';
 import { Callout } from 'flavours/glitch/components/callout';
+import { Icon } from 'flavours/glitch/components/icon';
 import {
   Article,
   ItemList,
 } from 'flavours/glitch/components/scrollable_list/components';
 import { me } from 'flavours/glitch/initial_state';
+import type { Account } from 'flavours/glitch/models/account';
 
 import { useConfirmRevoke } from './revoke_collection_inclusion_modal';
 import classes from './styles.module.scss';
@@ -70,6 +80,18 @@ const SensitiveScreen: React.FC<{
   );
 };
 
+const getCollectionAccounts = createAppSelector(
+  [
+    (state) => state.accounts,
+    (state, collectionId?: string) =>
+      state.collections.collections[collectionId ?? '']?.items,
+  ],
+  (accounts, collectionAccountItems) =>
+    (collectionAccountItems ?? []).map(({ account_id }) =>
+      account_id ? accounts.get(account_id) : null,
+    ),
+);
+
 export const CollectionAccountsList: React.FC<{
   collection?: ApiCollectionJSON;
   isLoading: boolean;
@@ -77,9 +99,44 @@ export const CollectionAccountsList: React.FC<{
   const intl = useIntl();
   const confirmRevoke = useConfirmRevoke(collection);
   const listHeadingRef = useRef<HTMLHeadingElement>(null);
+  const [canShowHiddenAccounts, setCanShowHiddenAccounts] = useState(false);
+  const toggleHiddenAccounts = useCallback(() => {
+    setCanShowHiddenAccounts((prev) => !prev);
+  }, []);
 
   const isOwnCollection = collection?.account_id === me;
-  const { items = [], account_id: collectionOwnerId } = collection ?? {};
+  const { items = [], account_id: collectionOwnerId, id } = collection ?? {};
+
+  const relationships = useAppSelector((state) => state.relationships);
+  const collectionAccounts = useAppSelector((state) =>
+    getCollectionAccounts(state, id),
+  );
+
+  const { visibleAccounts, hiddenAccounts } = useMemo(() => {
+    const visibleAccounts: Account[] = [];
+    const hiddenAccounts: Account[] = [];
+
+    collectionAccounts.forEach((item) => {
+      if (!item) {
+        // We currently simply hide unavailable accounts, this includes
+        // accounts that are pending inclusion; at least for the collection
+        // owner we should display an indication of pending users
+        return;
+      }
+
+      const relationship = relationships.get(item.id);
+      if (relationship?.blocking || relationship?.muting) {
+        hiddenAccounts.push(item);
+      } else {
+        visibleAccounts.push(item);
+      }
+    });
+
+    return { visibleAccounts, hiddenAccounts };
+  }, [collectionAccounts, relationships]);
+
+  const hasHiddenAccounts = hiddenAccounts.length > 0;
+  const initialListSize = visibleAccounts.length + (hasHiddenAccounts ? 1 : 0);
 
   const renderAccountItemButton = useCallback(
     ({ relationship, accountId }: RenderButtonOptions) => {
@@ -137,19 +194,71 @@ export const CollectionAccountsList: React.FC<{
             isLoading={isLoading}
             emptyMessage={intl.formatMessage(messages.empty)}
           >
-            {items.map(({ account_id }, index) => (
+            {visibleAccounts.map(({ id }, index) => (
               <Article
-                key={account_id}
+                key={id}
                 aria-posinset={index + 1}
-                aria-setsize={items.length}
+                aria-setsize={initialListSize}
               >
                 <AccountListItem
-                  accountId={account_id}
+                  accountId={id}
-                  withBorder={index !== items.length - 1}
+                  withBorder={index !== items.length - 1 || hasHiddenAccounts}
                   renderButton={renderAccountItemButton}
                 />
               </Article>
             ))}
+            {hasHiddenAccounts && (
+              <Article
+                aria-posinset={initialListSize}
+                aria-setsize={initialListSize}
+              >
+                <ListItemWrapper
+                  icon={<Icon id='visibility-off' icon={VisibilityOffIcon} />}
+                  iconEnd={
+                    <Icon
+                      id='open-status'
+                      icon={
+                        canShowHiddenAccounts
+                          ? KeyboardArrowUpIcon
+                          : KeyboardArrowDownIcon
+                      }
+                    />
+                  }
+                >
+                  <ListItemButton
+                    aria-expanded={canShowHiddenAccounts}
+                    onClick={toggleHiddenAccounts}
+                    subtitle={
+                      <FormattedMessage
+                        id='collections.hidden_accounts_description'
+                        defaultMessage='You’ve blocked or muted {count, plural, one {this user} other {these users}}'
+                        values={{ count: hiddenAccounts.length }}
+                      />
+                    }
+                  >
+                    <FormattedMessage
+                      id='collections.hidden_accounts_link'
+                      defaultMessage='{count, plural, one {# hidden account} other {# hidden accounts}}'
+                      values={{ count: hiddenAccounts.length }}
+                    />
+                  </ListItemButton>
+                </ListItemWrapper>
+              </Article>
+            )}
+            {canShowHiddenAccounts &&
+              hiddenAccounts.map(({ id }, index) => (
+                <Article
+                  key={id}
+                  aria-posinset={initialListSize + index + 1}
+                  aria-setsize={initialListSize + hiddenAccounts.length}
+                >
+                  <AccountListItem
+                    accountId={id}
+                    withBorder={index !== hiddenAccounts.length - 1}
+                    renderButton={renderAccountItemButton}
+                  />
+                </Article>
+              ))}
           </ItemList>
         </SensitiveScreen>
       )}