[Glitch] Allow grouping items in Combobox component

Port 570f2ef482 to glitch-soc

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

app/javascript/flavours/glitch/features/collections/editor/accounts.tsx

@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { useHistory } from 'react-router-dom';
 
+import type { ApiMutedAccountJSON } from 'flavours/glitch/api_types/accounts';
 import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
 import { AccountListItem } from 'flavours/glitch/components/account_list_item';
 import { Avatar } from 'flavours/glitch/components/avatar';
@@ -57,13 +58,10 @@ const AddedAccountItem: React.FC<{
   return <AccountListItem accountId={accountId} renderButton={renderButton} />;
 };
 
-interface SuggestionItem {
-  id: string;
-  isDisabled?: boolean;
-}
-
-const SuggestedAccountItem: React.FC<SuggestionItem> = ({ id }) => {
-  const account = useAccount(id);
+const SuggestedAccountItem: React.FC<{ account: ApiMutedAccountJSON }> = (
+  props,
+) => {
+  const account = useAccount(props.account.id);
 
   if (!account) return null;
 
@@ -75,12 +73,15 @@ const SuggestedAccountItem: React.FC<SuggestionItem> = ({ id }) => {
   );
 };
 
-const renderAccountItem = (item: SuggestionItem) => (
-  <SuggestedAccountItem id={item.id} />
+const renderAccountItem = (account: ApiMutedAccountJSON) => (
+  <SuggestedAccountItem account={account} />
 );
 
-const getItemId = (item: SuggestionItem) => item.id;
-const getIsItemDisabled = (item: SuggestionItem) => item.isDisabled ?? false;
+const getItemId = (account: ApiMutedAccountJSON) => account.id;
+
+// Disable accounts who can't be added to a collection
+const getIsItemDisabled = (account: ApiMutedAccountJSON) =>
+  !['automatic', 'manual'].includes(account.feature_approval.current_user);
 
 export const CollectionAccounts: React.FC<{
   collection?: ApiCollectionJSON | null;
@@ -120,14 +121,6 @@ export const CollectionAccounts: React.FC<{
     filterResults: (account) => !accountIds.includes(account.id),
   });
 
-  const suggestedItems = suggestedAccounts.map(({ id, feature_approval }) => ({
-    id,
-    // Disable accounts who can't be added to a collection
-    isDisabled: !['automatic', 'manual'].includes(
-      feature_approval.current_user,
-    ),
-  }));
-
   const handleSearchValueChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setSearchValue(e.target.value);
@@ -158,7 +151,7 @@ export const CollectionAccounts: React.FC<{
   );
 
   const addAccountItem = useCallback(
-    (item: SuggestionItem) => {
+    (item: ApiMutedAccountJSON) => {
       dispatch(
         updateCollectionEditorField({
           field: 'accountIds',
@@ -192,7 +185,7 @@ export const CollectionAccounts: React.FC<{
   );
 
   const instantAddAccountItem = useCallback(
-    (item: SuggestionItem) => {
+    (item: ApiMutedAccountJSON) => {
       if (id) {
         void dispatch(
           addCollectionItem({ collectionId: id, accountId: item.id }),
@@ -214,7 +207,7 @@ export const CollectionAccounts: React.FC<{
   );
 
   const handleSelectItem = useCallback(
-    (item: SuggestionItem) => {
+    (item: ApiMutedAccountJSON) => {
       if (isEditMode) {
         instantAddAccountItem(item);
       } else {
@@ -269,7 +262,7 @@ export const CollectionAccounts: React.FC<{
             onKeyDown={handleSearchKeyDown}
             disabled={hasMaxAccounts}
             isLoading={isLoadingSuggestions}
-            items={suggestedItems}
+            items={suggestedAccounts}
             getItemId={getItemId}
             getIsItemDisabled={getIsItemDisabled}
             renderItem={renderAccountItem}