Support searching autocomplete via nicknames

.changeset/search-nicknames-autocomplete.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Add support for searching users via nicknames in the autocomplete menu.

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -1,5 +1,5 @@
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import type { Editor } from 'slate';
 import { Avatar, MenuItem, Text } from 'folds';
 import { userFallbackIcon } from '$components/icons/phosphor';
@@ -86,8 +86,6 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
 };
 
 const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
-const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
-  getMemberSearchStr(m, query, mxIdToName);
 
 export function UserMentionAutocomplete({
   room,
@@ -102,6 +100,11 @@ export function UserMentionAutocomplete({
   const roomAliasOrId = room.getCanonicalAlias() || roomId;
   const members = useRoomMembers(mx, roomId);
 
+  const getRoomMemberStr = useCallback<SearchItemStrGetter<RoomMember>>(
+    (m, searchQuery) => getMemberSearchStr(m, searchQuery, mxIdToName, nicknames),
+    [nicknames]
+  );
+
   const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
   const autoCompleteMembers = (result ? result.items.slice(0, 20) : members.slice(0, 20)).filter(
     withAllowedMembership

src/app/features/common-settings/members/Members.tsx

@@ -42,6 +42,8 @@ import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '$hooks/useMembe
 import { useRoomCreators } from '$hooks/useRoomCreators';
 import { getMouseEventCords } from '$utils/dom';
 import { getMxIdServer } from '$utils/mxIdHelper';
+import { useAtomValue } from 'jotai';
+import { nicknamesAtom } from '$state/nicknames';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -54,14 +56,13 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
 };
 
 const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
-const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
-  getMemberSearchStr(m, query, mxIdToName);
 
 type MembersProps = {
   requestClose: () => void;
 };
 export function Members({ requestClose }: MembersProps) {
   const mx = useMatrixClient();
+  const nicknames = useAtomValue(nicknamesAtom);
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
   const members = useRoomMembers(mx, room.roomId);
@@ -94,6 +95,11 @@ export function Members({ requestClose }: MembersProps) {
     [members, membershipFilter, memberSort, memberPowerSort]
   );
 
+  const getRoomMemberStr = useCallback<SearchItemStrGetter<RoomMember>>(
+    (m, query) => getMemberSearchStr(m, query, mxIdToName, nicknames),
+    [nicknames]
+  );
+
   const [result, search, resetSearch] = useAsyncSearch(
     sortedMembers,
     getRoomMemberStr,

src/app/features/room/MembersDrawer.tsx

@@ -233,15 +233,14 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
 };
 
 const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
-const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
-  getMemberSearchStr(m, query, mxIdToName);
 
 type MembersDrawerProps = {
   room: Room;
   members: RoomMember[];
 };
 export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const mx = useMatrixClient();
+  const nicknames = useAtomValue(nicknamesAtom);
   const useAuthentication = useMediaAuthentication();
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -273,6 +272,11 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     [members, membershipFilter, memberSort, memberPowerSort]
   );
 
+  const getRoomMemberStr = useCallback<SearchItemStrGetter<RoomMember>>(
+    (m, query) => getMemberSearchStr(m, query, mxIdToName, nicknames),
+    [nicknames]
+  );
+
   const [result, search, resetSearch] = useAsyncSearch(
     filteredMembers,
     getRoomMemberStr,

src/app/utils/room.ts

@@ -595,11 +595,20 @@ export const getMemberDisplayName = (
 export const getMemberSearchStr = (
   member: RoomMember,
   query: string,
-  mxIdToName: (mxId: string) => string
-): string[] => [
-  member.rawDisplayName === member.userId ? mxIdToName(member.userId) : member.rawDisplayName,
-  query.startsWith('@') || query.indexOf(':') > -1 ? member.userId : mxIdToName(member.userId),
-];
+  mxIdToName: (mxId: string) => string,
+  nicknames?: Record<string, string>
+): string[] => {
+  const nickname = nicknames?.[member.userId];
+  const displayName =
+    member.rawDisplayName === member.userId ? mxIdToName(member.userId) : member.rawDisplayName;
+  const idStr =
+    query.startsWith('@') || query.indexOf(':') > -1 ? member.userId : mxIdToName(member.userId);
+
+  const strings: string[] = [];
+  if (nickname) strings.push(nickname);
+  strings.push(displayName, idStr);
+  return strings;
+};
 
 export const getMemberAvatarMxc = (room: Room, userId: string): string | undefined => {
   const member = room.getMember(userId);