Implements tag suggestions for collections topic field (#38307)

app/javascript/mastodon/features/account_edit/components/tag_search.tsx

@@ -1,95 +1,80 @@
 import type { ChangeEventHandler, FC } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useId, useState } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import type { ApiHashtagJSON } from '@/mastodon/api_types/tags';
 import { Combobox } from '@/mastodon/components/form_fields';
-import {
-  addFeaturedTag,
-  clearSearch,
-  updateSearchQuery,
-} from '@/mastodon/reducers/slices/profile_edit';
-import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+import { useSearchTags } from '@/mastodon/hooks/useSearchTags';
+import type { TagSearchResult } from '@/mastodon/hooks/useSearchTags';
+import { addFeaturedTag } from '@/mastodon/reducers/slices/profile_edit';
+import { useAppDispatch } from '@/mastodon/store';
 import SearchIcon from '@/material-icons/400-24px/search.svg?react';
 
 import classes from '../styles.module.scss';
 
-type SearchResult = Omit<ApiHashtagJSON, 'url' | 'history'> & {
-  label?: string;
-};
-
 const messages = defineMessages({
   placeholder: {
     id: 'account_edit_tags.search_placeholder',
     defaultMessage: 'Enter a hashtag…',
   },
-  addTag: {
-    id: 'account_edit_tags.add_tag',
-    defaultMessage: 'Add #{tagName}',
-  },
 });
 
 export const AccountEditTagSearch: FC = () => {
   const intl = useIntl();
 
+  const [query, setQuery] = useState('');
   const {
-    query,
+    tags: suggestedTags,
+    searchTags,
+    resetSearch,
     isLoading,
-    results: rawResults,
-  } = useAppSelector((state) => state.profileEdit.search);
-  const results = useMemo(() => {
-    if (!rawResults) {
-      return [];
-    }
+  } = useSearchTags({
+    query,
+    // Remove existing featured tags from suggestions
+    filterResults: (tag) => !tag.featuring,
+  });
 
-    const results: SearchResult[] = [...rawResults]; // Make array mutable
-    const trimmedQuery = query.trim();
-    if (
-      trimmedQuery.length > 0 &&
-      results.every(
-        (result) => result.name.toLowerCase() !== trimmedQuery.toLowerCase(),
-      )
-    ) {
-      results.push({
-        id: 'new',
-        name: trimmedQuery,
-        label: intl.formatMessage(messages.addTag, { tagName: trimmedQuery }),
-      });
-    }
-    return results;
-  }, [intl, query, rawResults]);
-
-  const dispatch = useAppDispatch();
   const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     (e) => {
-      void dispatch(updateSearchQuery(e.target.value));
+      setQuery(e.target.value);
+      searchTags(e.target.value);
     },
-    [dispatch],
+    [searchTags],
   );
 
+  const dispatch = useAppDispatch();
   const handleSelect = useCallback(
-    (item: SearchResult) => {
-      void dispatch(clearSearch());
+    (item: TagSearchResult) => {
+      resetSearch();
+      setQuery('');
       void dispatch(addFeaturedTag({ name: item.name }));
     },
-    [dispatch],
+    [dispatch, resetSearch],
   );
 
+  const inputId = useId();
+  const inputLabel = intl.formatMessage(messages.placeholder);
+
   return (
-    <Combobox
-      value={query}
-      onChange={handleSearchChange}
-      placeholder={intl.formatMessage(messages.placeholder)}
-      items={results}
-      isLoading={isLoading}
-      renderItem={renderItem}
-      onSelectItem={handleSelect}
-      className={classes.autoComplete}
-      icon={SearchIcon}
-      type='search'
-    />
+    <>
+      <label htmlFor={inputId} className='sr-only'>
+        {inputLabel}
+      </label>
+      <Combobox
+        id={inputId}
+        value={query}
+        onChange={handleSearchChange}
+        placeholder={inputLabel}
+        items={suggestedTags as TagSearchResult[]}
+        isLoading={isLoading}
+        renderItem={renderItem}
+        onSelectItem={handleSelect}
+        className={classes.autoComplete}
+        icon={SearchIcon}
+        type='search'
+      />
+    </>
   );
 };
 
-const renderItem = (item: SearchResult) => item.label ?? `#${item.name}`;
+const renderItem = (item: TagSearchResult) => item.label ?? `#${item.name}`;

app/javascript/mastodon/features/collections/editor/accounts.tsx

@@ -25,8 +25,8 @@ import {
   ItemList,
   Scrollable,
 } from 'mastodon/components/scrollable_list/components';
-import { useSearchAccounts } from 'mastodon/features/lists/use_search_accounts';
 import { useAccount } from 'mastodon/hooks/useAccount';
+import { useSearchAccounts } from 'mastodon/hooks/useSearchAccounts';
 import { me } from 'mastodon/initial_state';
 import {
   addCollectionItem,
@@ -374,6 +374,7 @@ export const CollectionAccounts: React.FC<{
           onSelectItem={
             isEditMode ? instantToggleAccountItem : toggleAccountItem
           }
+          closeOnSelect={false}
         />
         {hasMaxAccounts && (
           <FormattedMessage

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -9,6 +9,7 @@ import { isFulfilled } from '@reduxjs/toolkit';
 import {
   hasSpecialCharacters,
   inputToHashtag,
+  trimHashFromStart,
 } from '@/mastodon/utils/hashtags';
 import type {
   ApiCreateCollectionPayload,
@@ -17,12 +18,15 @@ import type {
 import { Button } from 'mastodon/components/button';
 import {
   CheckboxField,
+  ComboboxField,
   Fieldset,
   FormStack,
   RadioButtonField,
   TextAreaField,
 } from 'mastodon/components/form_fields';
 import { TextInputField } from 'mastodon/components/form_fields/text_input_field';
+import { useSearchTags } from 'mastodon/hooks/useSearchTags';
+import type { TagSearchResult } from 'mastodon/hooks/useSearchTags';
 import {
   createCollection,
   updateCollection,
@@ -34,7 +38,6 @@ import classes from './styles.module.scss';
 import { WizardStepHeader } from './wizard_step_header';
 
 export const CollectionDetails: React.FC = () => {
-  const intl = useIntl();
   const dispatch = useAppDispatch();
   const history = useHistory();
   const { id, name, description, topic, discoverable, sensitive, accountIds } =
@@ -64,18 +67,6 @@ export const CollectionDetails: React.FC = () => {
     [dispatch],
   );
 
-  const handleTopicChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      dispatch(
-        updateCollectionEditorField({
-          field: 'topic',
-          value: inputToHashtag(event.target.value),
-        }),
-      );
-    },
-    [dispatch],
-  );
-
   const handleDiscoverableChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       dispatch(
@@ -156,11 +147,6 @@ export const CollectionDetails: React.FC = () => {
     ],
   );
 
-  const topicHasSpecialCharacters = useMemo(
-    () => hasSpecialCharacters(topic),
-    [topic],
-  );
-
   return (
     <form onSubmit={handleSubmit} className={classes.form}>
       <FormStack className={classes.formFieldStack}>
@@ -213,39 +199,7 @@ export const CollectionDetails: React.FC = () => {
           maxLength={100}
         />
 
-        <TextInputField
-          required={false}
-          label={
-            <FormattedMessage
-              id='collections.collection_topic'
-              defaultMessage='Topic'
-            />
-          }
-          hint={
-            <FormattedMessage
-              id='collections.topic_hint'
-              defaultMessage='Add a hashtag that helps others understand the main topic of this collection.'
-            />
-          }
-          value={topic}
-          onChange={handleTopicChange}
-          autoCapitalize='off'
-          autoCorrect='off'
-          spellCheck='false'
-          maxLength={40}
-          status={
-            topicHasSpecialCharacters
-              ? {
-                  variant: 'warning',
-                  message: intl.formatMessage({
-                    id: 'collections.topic_special_chars_hint',
-                    defaultMessage:
-                      'Special characters will be removed when saving',
-                  }),
-                }
-              : undefined
-          }
-        />
+        <TopicField />
 
         <Fieldset
           legend={
@@ -335,3 +289,95 @@ export const CollectionDetails: React.FC = () => {
     </form>
   );
 };
+
+const TopicField: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const { id, topic } = useAppSelector((state) => state.collections.editor);
+
+  const collection = useAppSelector((state) =>
+    id ? state.collections.collections[id] : undefined,
+  );
+  const [isInitialValue, setIsInitialValue] = useState(
+    () => trimHashFromStart(topic) === (collection?.tag?.name ?? ''),
+  );
+
+  const { tags, isLoading, searchTags } = useSearchTags({
+    query: topic,
+  });
+
+  const handleTopicChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setIsInitialValue(false);
+      dispatch(
+        updateCollectionEditorField({
+          field: 'topic',
+          value: inputToHashtag(event.target.value),
+        }),
+      );
+      searchTags(event.target.value);
+    },
+    [dispatch, searchTags],
+  );
+
+  const handleSelectTopicSuggestion = useCallback(
+    (item: TagSearchResult) => {
+      dispatch(
+        updateCollectionEditorField({
+          field: 'topic',
+          value: inputToHashtag(item.name),
+        }),
+      );
+    },
+    [dispatch],
+  );
+
+  const topicHasSpecialCharacters = useMemo(
+    () => hasSpecialCharacters(topic),
+    [topic],
+  );
+
+  return (
+    <ComboboxField
+      required={false}
+      icon={null}
+      label={
+        <FormattedMessage
+          id='collections.collection_topic'
+          defaultMessage='Topic'
+        />
+      }
+      hint={
+        <FormattedMessage
+          id='collections.topic_hint'
+          defaultMessage='Add a hashtag that helps others understand the main topic of this collection.'
+        />
+      }
+      value={topic}
+      items={tags}
+      isLoading={isLoading}
+      renderItem={renderItem}
+      onSelectItem={handleSelectTopicSuggestion}
+      onChange={handleTopicChange}
+      autoCapitalize='off'
+      autoCorrect='off'
+      spellCheck='false'
+      maxLength={40}
+      status={
+        topicHasSpecialCharacters
+          ? {
+              variant: 'warning',
+              message: intl.formatMessage({
+                id: 'collections.topic_special_chars_hint',
+                defaultMessage:
+                  'Special characters will be removed when saving',
+              }),
+            }
+          : undefined
+      }
+      suppressMenu={isInitialValue}
+    />
+  );
+};
+
+const renderItem = (item: TagSearchResult) => item.label ?? `#${item.name}`;

app/javascript/mastodon/features/lists/members.tsx

@@ -28,11 +28,10 @@ import { DisplayName } from 'mastodon/components/display_name';
 import ScrollableList from 'mastodon/components/scrollable_list';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { useSearchAccounts } from 'mastodon/hooks/useSearchAccounts';
 import { me } from 'mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
-import { useSearchAccounts } from './use_search_accounts';
-
 export const messages = defineMessages({
   manageMembers: {
     id: 'column.list_members',

app/javascript/mastodon/features/lists/use_search_accounts.ts

@@ -1,82 +0,0 @@
-import { useRef, useState } from 'react';
-
-import { useDebouncedCallback } from 'use-debounce';
-
-import { fetchRelationships } from 'mastodon/actions/accounts';
-import { importFetchedAccounts } from 'mastodon/actions/importer';
-import { apiRequest } from 'mastodon/api';
-import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
-import { useAppDispatch } from 'mastodon/store';
-
-export function useSearchAccounts({
-  onSettled,
-  filterResults,
-  resetOnInputClear = true,
-  withRelationships = false,
-}: {
-  onSettled?: (value: string) => void;
-  filterResults?: (account: ApiAccountJSON) => boolean;
-  resetOnInputClear?: boolean;
-  withRelationships?: boolean;
-} = {}) {
-  const dispatch = useAppDispatch();
-
-  const [accountIds, setAccountIds] = useState<string[]>([]);
-  const [loadingState, setLoadingState] = useState<
-    'idle' | 'loading' | 'error'
-  >('idle');
-
-  const searchRequestRef = useRef<AbortController | null>(null);
-
-  const searchAccounts = useDebouncedCallback(
-    (value: string) => {
-      if (searchRequestRef.current) {
-        searchRequestRef.current.abort();
-      }
-
-      if (value.trim().length === 0) {
-        onSettled?.('');
-        if (resetOnInputClear) {
-          setAccountIds([]);
-        }
-        return;
-      }
-
-      setLoadingState('loading');
-
-      searchRequestRef.current = new AbortController();
-
-      void apiRequest<ApiAccountJSON[]>('GET', 'v1/accounts/search', {
-        signal: searchRequestRef.current.signal,
-        params: {
-          q: value,
-          resolve: true,
-        },
-      })
-        .then((data) => {
-          const accounts = filterResults ? data.filter(filterResults) : data;
-          const accountIds = accounts.map((a) => a.id);
-          dispatch(importFetchedAccounts(accounts));
-          if (withRelationships) {
-            dispatch(fetchRelationships(accountIds));
-          }
-          setAccountIds(accountIds);
-          setLoadingState('idle');
-          onSettled?.(value);
-        })
-        .catch(() => {
-          setLoadingState('error');
-          onSettled?.(value);
-        });
-    },
-    500,
-    { leading: true, trailing: true },
-  );
-
-  return {
-    searchAccounts,
-    accountIds,
-    isLoading: loadingState === 'loading',
-    isError: loadingState === 'error',
-  };
-}