feat: Improve translations, fade inactive collection members

app/scenes/Collection/MembershipPreview.tsx

@@ -1,8 +1,12 @@
+import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import { PAGINATION_SYMBOL } from "~/stores/BaseStore";
 import Collection from "~/models/Collection";
+import User from "~/models/User";
+import Avatar from "~/components/Avatar";
 import Facepile from "~/components/Facepile";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
@@ -17,7 +21,8 @@ type Props = {
 
 const MembershipPreview = ({ collection, limit = 8 }: Props) => {
   const [isLoading, setIsLoading] = React.useState(false);
-  const [totalMemberships, setTotalMemberships] = React.useState(0);
+  const [usersCount, setUsersCount] = React.useState(0);
+  const [groupsCount, setGroupsCount] = React.useState(0);
   const { t } = useTranslation();
   const { memberships, collectionGroupMemberships, users } = useStores();
   const collectionUsers = users.inCollection(collection.id);
@@ -39,9 +44,8 @@ const MembershipPreview = ({ collection, limit = 8 }: Props) => {
           memberships.fetchPage(options),
           collectionGroupMemberships.fetchPage(options),
         ]);
-        setTotalMemberships(
-          users[PAGINATION_SYMBOL].total + groups[PAGINATION_SYMBOL].total
-        );
+        setUsersCount(users[PAGINATION_SYMBOL].total);
+        setGroupsCount(groups[PAGINATION_SYMBOL].total);
       } finally {
         setIsLoading(false);
       }
@@ -60,24 +64,55 @@ const MembershipPreview = ({ collection, limit = 8 }: Props) => {
     return null;
   }
 
-  const overflow = totalMemberships - collectionUsers.length;
+  const overflow = usersCount - groupsCount - collectionUsers.length;
 
   return (
     <NudeButton
       context={context}
       action={editCollectionPermissions}
       tooltip={{
-        tooltip: t("Users and groups with access"),
+        tooltip:
+          usersCount > 0
+            ? groupsCount > 0
+              ? groupsCount > 1
+                ? t(
+                    `{{ usersCount }} users and {{ groupsCount }} groups with access`,
+                    { usersCount, count: usersCount }
+                  )
+                : t(`{{ usersCount }} users and a group have access`, {
+                    usersCount,
+                    count: usersCount,
+                  })
+              : t(`{{ usersCount }} users with access`, {
+                  usersCount,
+                  count: usersCount,
+                })
+            : t(`{{ groupsCount }} groups with access`, {
+                groupsCount,
+                count: groupsCount,
+              }),
         delay: 250,
       }}
       width="auto"
       height="auto"
     >
       <Fade>
-        <Facepile users={collectionUsers} overflow={overflow} limit={limit} />
+        <Facepile
+          users={sortBy(collectionUsers, "lastActiveAt")}
+          overflow={overflow}
+          limit={limit}
+          renderAvatar={(user) => (
+            <StyledAvatar user={user} src={user.avatarUrl} size={32} />
+          )}
+        />
       </Fade>
     </NudeButton>
   );
 };
 
+const StyledAvatar = styled(Avatar)<{ user: User }>`
+  transition: opacity 250ms ease-in-out;
+  opacity: ${(props) => (props.user.isRecentlyActive ? 1 : 0.5)};
+`;
+
 export default observer(MembershipPreview);