Merge branch 'dev' into rework-user-settings

.github/workflows/build-pull-request.yml

@@ -25,7 +25,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v4.3.6
+        uses: actions/upload-artifact@v4.5.0
         with:
           name: preview
           path: dist
@@ -33,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@v4.3.6
+        uses: actions/upload-artifact@v4.5.0
         with:
           name: pr
           path: ./pr.txt

.github/workflows/docker-pr.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4.2.0
       - name: Build Docker image
-        uses: docker/build-push-action@v6.9.0
+        uses: docker/build-push-action@v6.10.0
         with:
           context: .
           push: false

.github/workflows/prod-deploy.yml

@@ -84,13 +84,13 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v5.5.1
+        uses: docker/metadata-action@v5.6.1
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.9.0
+        uses: docker/build-push-action@v6.10.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

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

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

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

@@ -471,34 +471,36 @@ export function SearchEmojiGroup({
   return (
     <EmojiGroup key={id} id={id} label={label}>
       {tab === EmojiBoardTab.Emoji
-        ? searchResult.map((emoji) =>
+        ? searchResult
-            'unicode' in emoji ? (
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
-              <EmojiItem
+            .map((emoji) =>
-                key={emoji.unicode}
+              'unicode' in emoji ? (
-                label={emoji.label}
+                <EmojiItem
-                type={EmojiType.Emoji}
+                  key={emoji.unicode}
-                data={emoji.unicode}
+                  label={emoji.label}
-                shortcode={emoji.shortcode}
+                  type={EmojiType.Emoji}
-              >
+                  data={emoji.unicode}
-                {emoji.unicode}
+                  shortcode={emoji.shortcode}
-              </EmojiItem>
+                >
-            ) : (
+                  {emoji.unicode}
-              <EmojiItem
+                </EmojiItem>
-                key={emoji.shortcode}
+              ) : (
-                label={emoji.body || emoji.shortcode}
+                <EmojiItem
-                type={EmojiType.CustomEmoji}
+                  key={emoji.shortcode}
-                data={emoji.url}
+                  label={emoji.body || emoji.shortcode}
-                shortcode={emoji.shortcode}
+                  type={EmojiType.CustomEmoji}
-              >
+                  data={emoji.url}
-                <img
+                  shortcode={emoji.shortcode}
-                  loading="lazy"
+                >
-                  className={css.CustomEmojiImg}
+                  <img
-                  alt={emoji.body || emoji.shortcode}
+                    loading="lazy"
-                  src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                    className={css.CustomEmojiImg}
-                />
+                    alt={emoji.body || emoji.shortcode}
-              </EmojiItem>
+                    src={mxcUrlToHttp(mx, emoji.url, useAuthentication) ?? emoji.url}
+                  />
+                </EmojiItem>
+              )
             )
-          )
         : searchResult.map((emoji) =>
             'unicode' in emoji ? null : (
               <StickerItem
@@ -534,22 +536,25 @@ export const CustomEmojiGroups = memo(
     <>
       {groups.map((pack) => (
         <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
-          {pack.getImages(ImageUsage.Emoticon).map((image) => (
+          {pack
-            <EmojiItem
+            .getImages(ImageUsage.Emoticon)
-              key={image.shortcode}
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
-              label={image.body || image.shortcode}
+            .map((image) => (
-              type={EmojiType.CustomEmoji}
+              <EmojiItem
-              data={image.url}
+                key={image.shortcode}
-              shortcode={image.shortcode}
+                label={image.body || image.shortcode}
-            >
+                type={EmojiType.CustomEmoji}
-              <img
+                data={image.url}
-                loading="lazy"
+                shortcode={image.shortcode}
-                className={css.CustomEmojiImg}
+              >
-                alt={image.body || image.shortcode}
+                <img
-                src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                  loading="lazy"
-              />
+                  className={css.CustomEmojiImg}
-            </EmojiItem>
+                  alt={image.body || image.shortcode}
-          ))}
+                  src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                />
+              </EmojiItem>
+            ))}
         </EmojiGroup>
       ))}
     </>
@@ -586,22 +591,25 @@ export const StickerGroups = memo(
       )}
       {groups.map((pack) => (
         <EmojiGroup key={pack.id} id={pack.id} label={pack.meta.name || 'Unknown'}>
-          {pack.getImages(ImageUsage.Sticker).map((image) => (
+          {pack
-            <StickerItem
+            .getImages(ImageUsage.Sticker)
-              key={image.shortcode}
+            .sort((a, b) => a.shortcode.localeCompare(b.shortcode))
-              label={image.body || image.shortcode}
+            .map((image) => (
-              type={EmojiType.Sticker}
+              <StickerItem
-              data={image.url}
+                key={image.shortcode}
-              shortcode={image.shortcode}
+                label={image.body || image.shortcode}
-            >
+                type={EmojiType.Sticker}
-              <img
+                data={image.url}
-                loading="lazy"
+                shortcode={image.shortcode}
-                className={css.StickerImg}
+              >
-                alt={image.body || image.shortcode}
+                <img
-                src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                  loading="lazy"
-              />
+                  className={css.StickerImg}
-            </StickerItem>
+                  alt={image.body || image.shortcode}
-          ))}
+                  src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+                />
+              </StickerItem>
+            ))}
         </EmojiGroup>
       ))}
     </>