Merge branch 'dev' into dev

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

@@ -64,9 +64,7 @@ export function EmoticonAutocomplete({
   }, [imagePacks]);
 
   const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
-  const autoCompleteEmoticon = (result ? result.items : recentEmoji).sort((a, b) =>
-    a.shortcode.localeCompare(b.shortcode)
-  );
+  const autoCompleteEmoticon = result ? result.items : recentEmoji;
 
   useEffect(() => {
     if (query.text) search(query.text);

src/app/components/emoji-board/EmojiBoard.tsx

@@ -471,36 +471,34 @@ export function SearchEmojiGroup({
   return (
     <EmojiGroup key={id} id={id} label={label}>
       {tab === EmojiBoardTab.Emoji
-        ? searchResult
-            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
-            .map((emoji) =>
-              'unicode' in emoji ? (
-                <EmojiItem
-                  key={emoji.unicode}
-                  label={emoji.label}
-                  type={EmojiType.Emoji}
-                  data={emoji.unicode}
-                  shortcode={emoji.shortcode}
-                >
-                  {emoji.unicode}
-                </EmojiItem>
-              ) : (
-                <EmojiItem
-                  key={emoji.shortcode}
-                  label={emoji.body || emoji.shortcode}
-                  type={EmojiType.CustomEmoji}
-                  data={emoji.url}
-                  shortcode={emoji.shortcode}
-                >
-                  <img
-                    loading="lazy"
-                    className={css.CustomEmojiImg}
-                    alt={emoji.body || emoji.shortcode}
-                    src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
-                  />
-                </EmojiItem>
-              )
+        ? searchResult.map((emoji) =>
+            'unicode' in emoji ? (
+              <EmojiItem
+                key={emoji.unicode}
+                label={emoji.label}
+                type={EmojiType.Emoji}
+                data={emoji.unicode}
+                shortcode={emoji.shortcode}
+              >
+                {emoji.unicode}
+              </EmojiItem>
+            ) : (
+              <EmojiItem
+                key={emoji.shortcode}
+                label={emoji.body || emoji.shortcode}
+                type={EmojiType.CustomEmoji}
+                data={emoji.url}
+                shortcode={emoji.shortcode}
+              >
+                <img
+                  loading="lazy"
+                  className={css.CustomEmojiImg}
+                  alt={emoji.body || emoji.shortcode}
+                  src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                />
+              </EmojiItem>
             )
+          )
         : searchResult.map((emoji) =>
             'unicode' in emoji ? null : (
               <StickerItem

src/app/features/room-nav/RoomNavItem.tsx

@@ -182,7 +182,9 @@ export function RoomNavItem({
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const typingMember = useRoomTypingMember(room.roomId);
+  const typingMember = useRoomTypingMember(room.roomId).filter(
+    (receipt) => receipt.userId !== mx.getUserId()
+  );
 
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
@@ -219,7 +221,9 @@ export function RoomNavItem({
                 <RoomAvatar
                   roomId={room.roomId}
                   src={
-                    direct ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication) : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    direct
+                      ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                      : getRoomAvatarUrl(mx, room, 96, useAuthentication)
                   }
                   alt={room.name}
                   renderFallback={() => (

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -79,6 +79,28 @@ function GlobalPackSelector({
     });
   };
 
+  const addSelected = (adds: PackAddress[]) => {
+    setSelected((addresses) => {
+      const newAddresses = Array.from(addresses);
+      adds.forEach((address) => {
+        if (newAddresses.find((addr) => packAddressEqual(addr, address))) {
+          return;
+        }
+        newAddresses.push(address);
+      });
+      return newAddresses;
+    });
+  };
+
+  const removeSelected = (adds: PackAddress[]) => {
+    setSelected((addresses) => {
+      const newAddresses = addresses.filter(
+        (addr) => !adds.find((address) => packAddressEqual(addr, address))
+      );
+      return newAddresses;
+    });
+  };
+
   const hasSelected = selected.length > 0;
   return (
     <Box grow="Yes" direction="Column">
@@ -115,9 +137,35 @@ function GlobalPackSelector({
             {Array.from(roomToPacks.entries()).map(([roomId, roomPacks]) => {
               const room = mx.getRoom(roomId);
               if (!room) return null;
+              const roomPackAddresses = roomPacks
+                .map((pack) => pack.address)
+                .filter((addr) => addr !== undefined);
+              const allSelected = roomPackAddresses.every((addr) =>
+                selected.find((address) => packAddressEqual(addr, address))
+              );
+
               return (
                 <Box key={roomId} direction="Column" gap="100">
-                  <Text size="L400">{room.name}</Text>
+                  <Box alignItems="Center">
+                    <Box grow="Yes">
+                      <Text size="L400">{room.name}</Text>
+                    </Box>
+                    <Box shrink="No">
+                      <Chip
+                        variant={allSelected ? 'Critical' : 'Surface'}
+                        radii="Pill"
+                        onClick={() => {
+                          if (allSelected) {
+                            removeSelected(roomPackAddresses);
+                            return;
+                          }
+                          addSelected(roomPackAddresses);
+                        }}
+                      >
+                        <Text size="B300">{allSelected ? 'Unselect All' : 'Select All'}</Text>
+                      </Chip>
+                    </Box>
+                  </Box>
                   {roomPacks.map((pack) => {
                     const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
                     const avatarUrl = avatarMxc
@@ -126,7 +174,7 @@ function GlobalPackSelector({
                     const { address } = pack;
                     if (!address) return null;
 
-                    const added = selected.find((addr) => packAddressEqual(addr, address));
+                    const added = !!selected.find((addr) => packAddressEqual(addr, address));
                     return (
                       <SequenceCard
                         key={pack.id}
@@ -152,7 +200,11 @@ function GlobalPackSelector({
                             </Box>
                           }
                           after={
-                            <Checkbox variant="Success" onClick={() => toggleSelect(address)} />
+                            <Checkbox
+                              checked={added}
+                              variant="Success"
+                              onClick={() => toggleSelect(address)}
+                            />
                           }
                         />
                       </SequenceCard>

src/app/hooks/useAsyncSearch.ts

@@ -28,6 +28,81 @@ export type UseAsyncSearchResult<TSearchItem extends object | string | number> =
 
 export type SearchResetHandler = () => void;
 
+const performMatch = (
+  target: string | string[],
+  query: string,
+  options?: UseAsyncSearchOptions
+): string | undefined => {
+  if (Array.isArray(target)) {
+    const matchTarget = target.find((i) =>
+      matchQuery(normalize(i, options?.normalizeOptions), query, options?.matchOptions)
+    );
+    return matchTarget ? normalize(matchTarget, options?.normalizeOptions) : undefined;
+  }
+
+  const normalizedTargetStr = normalize(target, options?.normalizeOptions);
+  const matches = matchQuery(normalizedTargetStr, query, options?.matchOptions);
+  return matches ? normalizedTargetStr : undefined;
+};
+
+export const orderSearchItems = <TSearchItem extends object | string | number>(
+  query: string,
+  items: TSearchItem[],
+  getItemStr: SearchItemStrGetter<TSearchItem>,
+  options?: UseAsyncSearchOptions
+): TSearchItem[] => {
+  const orderedItems: TSearchItem[] = Array.from(items);
+
+  // we will consider "_" as word boundary char.
+  // because in more use-cases it is used. (like: emojishortcode)
+  const boundaryRegex = new RegExp(`(\\b|_)${query}`);
+  const perfectBoundaryRegex = new RegExp(`(\\b|_)${query}(\\b|_)`);
+
+  orderedItems.sort((i1, i2) => {
+    const str1 = performMatch(getItemStr(i1, query), query, options);
+    const str2 = performMatch(getItemStr(i2, query), query, options);
+
+    if (str1 === undefined && str2 === undefined) return 0;
+    if (str1 === undefined) return 1;
+    if (str2 === undefined) return -1;
+
+    let points1 = 0;
+    let points2 = 0;
+
+    // short string should score more
+    const pointsToSmallStr = (points: number) => {
+      if (str1.length < str2.length) points1 += points;
+      else if (str2.length < str1.length) points2 += points;
+    };
+    pointsToSmallStr(1);
+
+    // closes query match should score more
+    const indexIn1 = str1.indexOf(query);
+    const indexIn2 = str2.indexOf(query);
+    if (indexIn1 < indexIn2) points1 += 2;
+    else if (indexIn2 < indexIn1) points2 += 2;
+    else pointsToSmallStr(2);
+
+    // query match word start on boundary should score more
+    const boundaryIn1 = str1.match(boundaryRegex);
+    const boundaryIn2 = str2.match(boundaryRegex);
+    if (boundaryIn1 && boundaryIn2) pointsToSmallStr(4);
+    else if (boundaryIn1) points1 += 4;
+    else if (boundaryIn2) points2 += 4;
+
+    // query match word start and end on boundary should score more
+    const perfectBoundaryIn1 = str1.match(perfectBoundaryRegex);
+    const perfectBoundaryIn2 = str2.match(perfectBoundaryRegex);
+    if (perfectBoundaryIn1 && perfectBoundaryIn2) pointsToSmallStr(8);
+    else if (perfectBoundaryIn1) points1 += 8;
+    else if (perfectBoundaryIn2) points2 += 8;
+
+    return points2 - points1;
+  });
+
+  return orderedItems;
+};
+
 export const useAsyncSearch = <TSearchItem extends object | string | number>(
   list: TSearchItem[],
   getItemStr: SearchItemStrGetter<TSearchItem>,
@@ -40,21 +115,15 @@ export const useAsyncSearch = <TSearchItem extends object | string | number>(
 
     const handleMatch: MatchHandler<TSearchItem> = (item, query) => {
       const itemStr = getItemStr(item, query);
-      if (Array.isArray(itemStr))
-        return !!itemStr.find((i) =>
-          matchQuery(normalize(i, options?.normalizeOptions), query, options?.matchOptions)
-        );
-      return matchQuery(
-        normalize(itemStr, options?.normalizeOptions),
-        query,
-        options?.matchOptions
-      );
+
+      const strWithMatch = performMatch(itemStr, query, options);
+      return typeof strWithMatch === 'string';
     };
 
     const handleResult: ResultHandler<TSearchItem> = (results, query) =>
       setResult({
         query,
-        items: [...results],
+        items: orderSearchItems(query, results, getItemStr, options),
       });
 
     return AsyncSearch(list, handleMatch, handleResult, options);

src/index.scss

@@ -427,6 +427,12 @@ a {
     text-decoration: underline;
   }
 }
+
+[data-mx-spoiler][aria-pressed='true'] a {
+  color: transparent;
+  pointer-events: none;
+}
+
 b {
   font-weight: var(--fw-medium);
 }