Merge branch 'develop'

* New translations ja-JP.yml (Ukrainian)

* New translations ja-JP.yml (Ukrainian)

* New translations ja-JP.yml (Ukrainian)

* New translations ja-JP.yml (Ukrainian)

* New translations ja-JP.yml (Ukrainian)

.github/workflows/docker-develop.yml

@@ -31,3 +31,5 @@ jobs:
           push: true
           tags: misskey/misskey:develop
           labels: develop
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/test.yml

@@ -109,8 +109,12 @@ jobs:
     # https://github.com/cypress-io/cypress/issues/4351#issuecomment-559489091
     - name: ALSA Env
       run: echo -e 'pcm.!default {\n type hw\n card 0\n}\n\nctl.!default {\n type hw\n card 0\n}' > ~/.asoundrc
+    # XXX: This tries reinstalling Cypress if the binary is not cached
+    # Remove this when the cache issue is fixed
+    - name: Cypress install
+      run: pnpm exec cypress install
     - name: Cypress run
-      uses: cypress-io/github-action@v4
+      uses: cypress-io/github-action@v5
       with:
         install: false
         start: pnpm start:test

.node-version

@@ -1 +1 @@
-v18.12.1
+v18.13.0

CHANGELOG.md

@@ -9,6 +9,56 @@
 You should also include the user name that made the change.
 -->
 
+## 13.2.4 (2023/01/27)
+### Improvements
+- リモートカスタム絵文字表示時のパフォーマンスを改善
+- Default to `animation: false` when prefers-reduced-motion is set
+- リアクション履歴が公開なら、ログインしていなくても表示できるように
+- tweak blur setting
+- tweak custom emoji cache
+
+### Bugfixes
+- fix aggregation of retention
+- ダッシュボードでオンラインユーザー数が表示されない問題を修正
+- フォロー申請・フォローのボタンが、通知から消えている問題を修正
+
+## 13.2.3 (2023/01/26)
+### Improvements
+- カスタム絵文字の更新をリアルタイムで反映するように
+
+### Bugfixes
+- turnstile-failed: missing-input-secret
+
+## 13.2.2 (2023/01/25)
+### Improvements
+- サーバーのパフォーマンスを改善
+
+### Bugfixes
+- サインイン時に誤ったレートリミットがかかることがある問題を修正
+- MFMのposition、rotate、scaleで小数が使えない問題を修正
+
+## 13.2.1 (2023/01/24)
+### Improvements
+- デザインの調整
+- サーバーのパフォーマンスを改善
+
+## 13.2.0 (2023/01/23)
+
+### Improvements
+- onlyServer / onlyQueue オプションを復活
+- 他人の実績閲覧時は獲得条件を表示しないように
+- アニメーション減らすオプション有効時はリアクションのアニメーションを無効に
+- カスタム絵文字一覧のパフォーマンスを改善
+
+### Bugfixes
+- Aiscript: button is not defined
+
+## 13.1.7 (2023/01/22)
+
+### Improvements
+- 新たな実績を追加
+- MFMにscaleタグを追加
+
 ## 13.1.4 (2023/01/22)
 
 ### Improvements

Dockerfile

@@ -2,8 +2,12 @@ ARG NODE_VERSION=18.13.0-bullseye
 
 FROM node:${NODE_VERSION} AS builder
 
-RUN apt-get update \
-	&& apt-get install -y --no-install-recommends \
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
+	--mount=type=cache,target=/var/lib/apt,sharing=locked \
+	rm -f /etc/apt/apt.conf.d/docker-clean \
+	; echo 'Binary::apt::APT::Keep-Downloaded-Packages "true";' > /etc/apt/apt.conf.d/keep-cache \
+	&& apt-get update \
+	&& apt-get install -yqq --no-install-recommends \
 	build-essential
 
 RUN corepack enable
@@ -16,7 +20,8 @@ COPY ["packages/backend/package.json", "./packages/backend/"]
 COPY ["packages/frontend/package.json", "./packages/frontend/"]
 COPY ["packages/sw/package.json", "./packages/sw/"]
 
-RUN pnpm i --frozen-lockfile
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store,sharing=locked \
+	pnpm i --frozen-lockfile --aggregate-output
 
 COPY . ./
 
@@ -30,11 +35,13 @@ FROM node:${NODE_VERSION}-slim AS runner
 ARG UID="991"
 ARG GID="991"
 
-RUN apt-get update \
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
+	--mount=type=cache,target=/var/lib/apt,sharing=locked \
+	rm -f /etc/apt/apt.conf.d/docker-clean \
+	; echo 'Binary::apt::APT::Keep-Downloaded-Packages "true";' > /etc/apt/apt.conf.d/keep-cache \
+	&& apt-get update \
 	&& apt-get install -y --no-install-recommends \
 	ffmpeg tini \
-	&& apt-get -y clean \
-	&& rm -rf /var/lib/apt/lists/* \
 	&& corepack enable \
 	&& groupadd -g "${GID}" misskey \
 	&& useradd -l -u "${UID}" -g "${GID}" -m -d /misskey misskey

gulpfile.js

@@ -20,7 +20,7 @@ gulp.task('copy:frontend:fonts', () =>
 );
 
 gulp.task('copy:frontend:tabler-icons', () =>
-	gulp.src('./packages/frontend/node_modules/@tabler/icons/iconfont/**/*').pipe(gulp.dest('./built/_frontend_dist_/tabler-icons/'))
+	gulp.src('./packages/frontend/node_modules/@tabler/icons-webfont/**/*').pipe(gulp.dest('./built/_frontend_dist_/tabler-icons/'))
 );
 
 gulp.task('copy:frontend:locales', cb => {

locales/de-DE.yml

@@ -1104,9 +1104,12 @@ _achievements:
       title: "I Love Misskey"
       description: "Sende \"I ❤ #Misskey\""
       flavor: "Danke, dass du Misskey verwendest! - vom Entwicklerteam"
+    _foundTreasure:
+      title: "Schatzsuche"
+      description: "Du hast einen verborgenen Schatz gefunden"
     _client30min:
-      title: "Kleine Pause"
-      description: "Seit dem Öffnen deines Clients sind 30 Minuten vergangen"
+      title: "Kurze Pause"
+      description: "Habe Misskey für 30 Minuten geöffnet"
     _noteDeletedWithin1min:
       title: "Ups"
       description: "Lösche eine Notiz innerhalb von 1 Minute nachdem sie gesendet wurde"
@@ -1124,6 +1127,9 @@ _achievements:
     _htl20npm:
       title: "Fließende Chronik"
       description: "Deine Startseitenchronik erreicht eine Geschwindigkeit von 20 npm (Notizen pro Minute)"
+    _viewInstanceChart:
+      title: "Analyst"
+      description: "Schau dir die Messwerte der Instanz an"
     _outputHelloWorldOnScratchpad:
       title: "Hallo Welt!"
       description: "Gib \"hello world\" in der Testumgebung aus"

locales/en-US.yml

@@ -945,7 +945,7 @@ _achievements:
     _notes1:
       title: "just setting up my msky"
       description: "Post your first note"
-      flavor: "Have a good Misskey life!"
+      flavor: "Have a good time with Misskey!"
     _notes10:
       title: "Some notes"
       description: "Post 10 notes"
@@ -1104,6 +1104,9 @@ _achievements:
       title: "I Love Misskey"
       description: "Post \"I ❤ #Misskey\""
       flavor: "Misskey's development team greatly appreciates your support!"
+    _foundTreasure:
+      title: "Treasure Hunt"
+      description: "You've found the hidden treasure"
     _client30min:
       title: "Short break"
       description: "Spend 30 minutes on Misskey"
@@ -1124,6 +1127,9 @@ _achievements:
     _htl20npm:
       title: "Flowing Timeline"
       description: "Have the speed of your home timeline exceed 20 npm (notes per minute)"
+    _viewInstanceChart:
+      title: "Analyst"
+      description: "View your instance's charts"
     _outputHelloWorldOnScratchpad:
       title: "Hello, world!"
       description: "Output \"hello world\" in the Scratchpad"

locales/it-IT.yml

@@ -95,7 +95,7 @@ follow: "Segui"
 followRequest: "Richiesta di follow"
 followRequests: "Richieste di follow"
 unfollow: "Smetti di seguire"
-followRequestPending: "La richiesta di follow deve essere approvata"
+followRequestPending: "Richiesta in approvazione"
 enterEmoji: "Inserisci emoji"
 renote: "Rinota"
 unrenote: "Annulla rinota"
@@ -1048,6 +1048,9 @@ _achievements:
     _noteFavorited1:
       title: "Guarda le stelle"
       description: "Aggiungi una Nota ai preferiti per la prima volta"
+    _myNoteFavorited1:
+      title: "Fornitura stelline"
+      description: "Qualcuno ha preferito una delle tue Note"
     _profileFilled:
       title: "Perfettamente"
       description: "Imposta il tuo profilo"
@@ -1056,8 +1059,8 @@ _achievements:
       description: "Aggiungi le orecchie da gatto al tuo profilo"
       flavor: "Ti chiamerò..."
     _following1:
-      title: "Hai seguito il tuo primo profilo"
-      description: "Il tuo primo profilo Follower"
+      title: "Il mio primo Follow"
+      description: "Hai seguito il tuo primo profilo"
     _following10:
       title: "Segui, segui!"
       description: "Hai seguito 10 profili"
@@ -1071,17 +1074,17 @@ _achievements:
       title: "Sovraccarico di amici"
       description: "Hai seguito 300 profili"
     _followers1:
-      title: "Primo Follower"
-      description: "Hai ottenuto un Follower"
+      title: "Il primo profilo tuo Follower"
+      description: "Hai ottenuto il tuo primo Follower"
     _followers10:
       title: "Follow me!"
-      description: "Hai ottenuto 10 Follower"
+      description: "Hai ottenuto 10 profili Follower"
     _followers50:
       title: "Follower a frotte"
       description: "Hai ottenuto 50 Follower"
     _followers100:
       title: "Popolare"
-      description: "Hai ottenuto 100 Follower"
+      description: "Hai ottenuto 100 profili Follower"
     _followers300:
       title: "Mettetevi in fila"
       description: "Hai ottenuto 300 Follower"
@@ -1090,7 +1093,7 @@ _achievements:
       description: "Hai ottenuto 500 Follower"
     _followers1000:
       title: "Influenzer"
-      description: "Hai superato i 1.000 Follower"
+      description: "Hai superato i 1.000 profili Follower"
     _collectAchievements30:
       title: "Collezionista di successi"
       description: "Hai raggiunto 30 obiettivi"
@@ -1101,9 +1104,12 @@ _achievements:
       title: "I LOVE Misskey"
       description: "Pubblica «I ♥ #Misskey»"
       flavor: "Grazie per aver utilizzato Misskey! Dal team di sviluppo"
+    _foundTreasure:
+      title: "Caccia al tesoro"
+      description: "Hai trovato un tesoro nascosto"
     _client30min:
       title: "Piccola pausa"
-      description: "Hai passato più di 30 minuti di fila su Misskey"
+      description: "Hai passato più di 30 minuti su Misskey"
     _noteDeletedWithin1min:
       title: "Ooops!"
       description: "Hai eliminato una nota entro un minuto dalla sua pubblicazione"
@@ -1121,6 +1127,9 @@ _achievements:
     _htl20npm:
       title: "Timeline scorrevole"
       description: "La tua Timeline personale ha superato la velocità di 20 Note orarie (Note al minuto)"
+    _viewInstanceChart:
+      title: "Analista"
+      description: "Visualizza i grafici dell'istanza"
     _outputHelloWorldOnScratchpad:
       title: "Hello, world!"
       description: "Hai scritto «Hello world» nel blocco appunti"
@@ -1498,8 +1507,8 @@ _sfx:
   channel: "Notifiche di canale"
 _ago:
   future: "Futuro"
-  justNow: "Ora"
-  secondsAgo: "{n}s fa"
+  justNow: "Adesso"
+  secondsAgo: "{n} sec fa"
   minutesAgo: "{n} min fa"
   hoursAgo: "{n} ore fa"
   daysAgo: "{n} gg fa"

locales/ja-JP.yml

@@ -1105,6 +1105,9 @@ _achievements:
       title: "I Love Misskey"
       description: "\"I ❤ #Misskey\"を投稿した"
       flavor: "Misskeyを使ってくださりありがとうございます！ by 開発チーム"
+    _foundTreasure:
+      title: "宝探し"
+      description: "隠されたお宝を発見した"
     _client30min:
       title: "ひとやすみ"
       description: "クライアントを起動してから30分以上経過した"
@@ -1125,6 +1128,9 @@ _achievements:
     _htl20npm:
       title: "流れるTL"
       description: "ホームタイムラインの流速が20npmを越す"
+    _viewInstanceChart:
+      title: "アナリスト"
+      description: "インスタンスのチャートを表示した"
     _outputHelloWorldOnScratchpad:
       title: "Hello, world!"
       description: "スクラッチパッドで hello world を出力した"

locales/ko-KR.yml

@@ -938,13 +938,13 @@ cannotPerformTemporary: "일시적으로 사용할 수 없음"
 cannotPerformTemporaryDescription: "조작 횟수 제한을 초과하여 일시적으로 사용이 불가합니다. 잠시 후 다시 시도해 주세요."
 preset: "프리셋"
 selectFromPresets: "프리셋에서 선택"
-achievements: "도전과제"
+achievements: "도전 과제"
 _achievements:
   earnedAt: "달성 일시"
   _types:
     _notes1:
-      title: "미스키 설정하고 있었는데요"
-      description: "첫 노트를 포스트했습니다"
+      title: "미스키 시작했는데요"
+      description: "첫 노트를 작성했습니다"
       flavor: "Misskey에 오신 것을 환영합니다!"
     _notes10:
       title: "노트 조금"
@@ -962,7 +962,7 @@ _achievements:
       title: "노트가 어디서 솟아?"
       description: "5,000개의 노트를 작성했습니다"
     _notes10000:
-      title: "슈퍼-노트"
+      title: "슈퍼 노트"
       description: "10,000개의 노트를 작성했습니다"
     _notes20000:
       title: "노트 더 없어?"
@@ -989,7 +989,7 @@ _achievements:
       title: "노트 우주"
       description: "90,000개의 노트를 작성했습니다"
     _notes100000:
-      title: "네 모든 노트는 내 거야"
+      title: "ALL YOUR NOTE ARE BELONG TO US"
       description: "100,000개의 노트를 작성했습니다"
       flavor: "이만큼 쓸 일도 없겠지만... 다른 할 일이 있진 않으신가요?"
     _login3:
@@ -1012,7 +1012,7 @@ _achievements:
     _login100:
       title: "미스키스트 III"
       description: "총 100일간 로그인했습니다"
-      flavor: "그 유저, 미스키스트를 위하여"
+      flavor: "그 유저, 미스키스트이다"
     _login200:
       title: "단골 I"
       description: "총 200일간 로그인했습니다"
@@ -1025,7 +1025,7 @@ _achievements:
     _login500:
       title: "베테랑 I"
       description: "총 500일간 로그인했습니다"
-      flavor: "여러분, 저 이 노트들 좋아해요"
+      flavor: "제군, 나는 노트가 좋다"
     _login600:
       title: "베테랑 II"
       description: "총 600일간 로그인했습니다"
@@ -1041,13 +1041,16 @@ _achievements:
     _login1000:
       title: "노트 마스터 III"
       description: "총 1,000일간 로그인했습니다"
-      flavor: "미스키를 사용해 주셔서 감사합니다!"
+      flavor: "Misskey를 사용해 주셔서 감사합니다!"
     _noteClipped1:
       title: "클립할 수밖에 없었어"
       description: "처음으로 노트를 클립했습니다"
     _noteFavorited1:
       title: "별을 바라보는 자"
       description: "처음으로 노트를 즐겨찾기했습니다"
+    _myNoteFavorited1:
+      title: "별을 원하는 자"
+      description: "다른 사람이 당신의 노트를 즐겨찾기했습니다"
     _profileFilled:
       title: "준비 완료"
       description: "프로필 설정을 완료했습니다"
@@ -1074,7 +1077,7 @@ _achievements:
       title: "첫 팔로워"
       description: "사용자가 처음으로 팔로잉했습니다"
     _followers10:
-      title: "날 따라와!"
+      title: "팔로우 미!"
       description: "10명의 사용자가 팔로우했습니다"
     _followers50:
       title: "이곳저곳"
@@ -1092,15 +1095,18 @@ _achievements:
       title: "유명인사"
       description: "1,000명의 사용자가 팔로우했습니다"
     _collectAchievements30:
-      title: "도전과제 콜렉터"
+      title: "도전 과제 콜렉터"
       description: "30개의 도전과제를 획득했습니다"
     _viewAchievements3min:
       title: "저 도전과제 좋아해요"
-      description: "도전과제 목록을 3분 이상 보세요"
+      description: "도전 과제 목록을 3분 이상 쳐다봤습니다"
     _iLoveMisskey:
       title: "I Love Misskey"
       description: "\"I ❤ #Misskey\"를 포스트했습니다"
       flavor: "Misskey를 이용해주셔서 감사합니다! - 개발팀 일동"
+    _foundTreasure:
+      title: "보물찾기"
+      description: "숨겨진 보물을 발견했습니다"
     _client30min:
       title: "잠깐 쉬어"
       description: "클라이언트를 시작하고 30분이 경과하였습니다"
@@ -1113,7 +1119,7 @@ _achievements:
       flavor: "잠 좀 자세요. 걱정돼요."
     _postedAt0min0sec:
       title: "정각"
-      description: "1초도 어긋나지 않은 정각에 노트를 포스트했습니다"
+      description: "0분 0초 정각에 노트를 작성했습니다"
       flavor: "째깍 째깍 째깍 땡!"
     _selfQuote:
       title: "혼잣말"
@@ -1121,21 +1127,24 @@ _achievements:
     _htl20npm:
       title: "타임라인 폭주 중"
       description: "1분 사이에 홈 타임라인에 노트가 20개 넘게 생성되었습니다"
+    _viewInstanceChart:
+      title: "애널리스트"
+      description: "인스턴스의 차트를 열었습니다"
     _outputHelloWorldOnScratchpad:
       title: "Hello, world!"
-      description: "스크래치패드에서 hello world를 출력하세요"
+      description: "스크래치패드에서 hello world를 출력했습니다"
     _open3windows:
       title: "멀티 윈도우"
-      description: "3개 이상의 창을 여세요"
+      description: "3개 이상의 창을 열었습니다"
     _driveFolderCircularReference:
       title: "순환 참조"
       description: "드라이브 폴더를 자신을 가리키도록 만드려 시도했습니다"
     _reactWithoutRead:
       title: "읽고 답하긴 하시는 건가요?"
-      description: "100자가 넘는 포스트에 3초 안에 포스트했습니다"
+      description: "100자가 넘는 노트가 작성되고 3초 안에 반응했습니다"
     _clickedClickHere:
       title: "여길 눌러보세요"
-      description: "이 곳을 눌러봤습니다"
+      description: "여길을 눌러봤습니다"
     _justPlainLucky:
       title: "그냥 운이 좋았어"
       description: "매 10초마다 0.01%의 확률로 달성됩니다"
@@ -1143,25 +1152,25 @@ _achievements:
       title: "신 콤플렉스"
       description: "이름을 syuilo로 설정했습니다"
     _passedSinceAccountCreated1:
-      title: "1년"
+      title: "1주년"
       description: "계정을 생성하고 1년이 지났습니다"
     _passedSinceAccountCreated2:
-      title: "2년"
+      title: "2주년"
       description: "계정을 생성하고 2년이 지났습니다"
     _passedSinceAccountCreated3:
-      title: "3년"
+      title: "3주년"
       description: "계정을 생성하고 3년이 지났습니다"
     _loggedInOnBirthday:
       title: "생일 축하합니다!"
-      description: "설정한 생일에 로그인했습니다"
+      description: "생일에 로그인했습니다"
     _loggedInOnNewYearsDay:
       title: "새해 복 많이 받으세요"
       description: "새해 첫 날에 로그인했습니다"
       flavor: "올해에도 저희 인스턴스에 관심을 가져 주셔서 감사합니다"
     _cookieClicked:
-      title: "쿠키 클리커 게임"
+      title: "쿠키를 클릭하는 게임"
       description: "쿠키를 클릭했습니다"
-      flavor: "뭔가 문제가 있나요?"
+      flavor: "소프트웨어 착각하지 않으셨나요?"
     _brainDiver:
       title: "Brain Diver"
       description: "Brain Diver로의 링크를 첨부했습니다"

locales/ru-RU.yml

@@ -1004,7 +1004,7 @@ _achievements:
     _login100:
       title: "Мискиец Ⅲ"
       description: "100 дней на сайте"
-      flavor: "Жестокий Misskist "
+      flavor: "Жестокий мискиец"
     _login200:
       title: "Завсегдатай Ⅰ"
       description: "200 дней на сайте"

locales/th-TH.yml

@@ -942,14 +942,51 @@ achievements: "ความสำเร็จ"
 _achievements:
   earnedAt: "ได้รับเมื่อ"
   _types:
+    _notes1:
+      title: "เพียงแค่ตั้งค่า msky ของฉัน"
     _followers100:
       title: "บุคคลที่เป็นที่นิยม"
     _followers500:
       title: "เสาสัญญาณ"
+    _followers1000:
+      title: "ผู้ทรงอิทธิพล"
     _iLoveMisskey:
       title: "ฉันรัก Misskey"
+      description: "โพสต์ \"I ❤ #Misskey\""
+    _foundTreasure:
+      title: "ล่าสมบัติ"
+      description: "คุณพบสมบัติที่ซ่อนอยู่"
+    _client30min:
+      title: "พักผ่อนสักหน่อย"
+    _noteDeletedWithin1min:
+      title: "ไม่เป็นไร"
+    _postedAtLateNight:
+      title: "กลางคืน"
+    _viewInstanceChart:
+      title: "วิเคราะห์"
+      description: "ดูแผนภูมิอินสแตนซ์ของคุณ"
     _driveFolderCircularReference:
       title: "อ้างอิงวงจร"
+    _clickedClickHere:
+      title: "คลิ๊กที่นี่"
+      description: "คุณได้คลิกที่นี่"
+    _passedSinceAccountCreated1:
+      title: "ครบรอบหนึ่งปี"
+    _passedSinceAccountCreated2:
+      title: "ครบรอบสองปี"
+    _passedSinceAccountCreated3:
+      title: "ครบรอบสามปี"
+    _loggedInOnBirthday:
+      title: "สุขสันต์วันเกิด"
+      description: "เข้าสู่ระบบในวันเกิดของคุณ"
+    _loggedInOnNewYearsDay:
+      title: "สวัสดีปีใหม่!"
+      description: "เข้าสู่ระบบในวันแรกของปี"
+    _cookieClicked:
+      description: "คลิกคุกกี้"
+    _brainDiver:
+      title: "Brain Diver"
+      flavor: "Misskey-Misskey La-Tu-Ma"
 _role:
   new: "บทบาทใหม่"
   edit: "แก้ไขบทบาท"

locales/uk-UA.yml

@@ -688,7 +688,7 @@ pageLikesCount: "Кількість отриманих вподобань сто
 pageLikedCount: "Кількість вподобаних сторінок"
 contact: "Контакт"
 useSystemFont: "Використовувати стандартний шрифт системи"
-clips: "Добірка"
+clips: "Добірки"
 experimentalFeatures: "Експериментальні функції"
 developer: "Розробник"
 makeExplorable: "Зробіть обліковий запис видимим у розділі \"Огляд\""
@@ -899,6 +899,170 @@ unlike: "Не вподобати"
 numberOfLikes: "Вподобання"
 show: "Відображення"
 color: "Колір"
+achievements: "Досягнення"
+_achievements:
+  earnedAt: "Відкрито"
+  _types:
+    _notes1:
+      title: "налаштовую свій msky"
+      description: "Перша нотатка"
+      flavor: "Приємного часу з Misskey!"
+    _notes10:
+      title: "Декілька нотаток"
+      description: "10 нотаток відправлено"
+    _notes100:
+      title: "Купа нотаток"
+      description: "100 нотаток відправлено"
+    _notes500:
+      title: "Все в нотатках"
+      description: "500 нотаток відправлено"
+    _notes1000:
+      title: "Гора нотаток"
+      description: "1 000 нотаток відправлено"
+    _notes5000:
+      title: "Переповнюючі нотатки"
+      description: "5 000 нотаток відправлено"
+    _notes10000:
+      title: "Супернотатка"
+      description: "10 000 нотаток відправлено"
+    _notes20000:
+      title: "Треба Більше Нотаток"
+      description: "20 000 нотаток відправлено"
+    _notes30000:
+      title: "Нотатки нотатки нотатки"
+      description: "30 000 нотаток відправлено"
+    _notes40000:
+      title: "Фабрика нотаток"
+      description: "40 000 нотаток відправлено"
+    _notes50000:
+      title: "Планета нотаток"
+      description: "50 000 нотаток відправлено"
+    _notes60000:
+      title: "Нотатковий квазар"
+      description: "60 000 нотаток відправлено"
+    _notes70000:
+      title: "Чорна нотаткова діра"
+      description: "70 000 нотаток відправлено"
+    _notes80000:
+      title: "Галактика нотаток"
+      description: "80 000 нотаток відправлено"
+    _notes90000:
+      title: "Нотатковерс"
+      description: "90 000 нотаток відправлено"
+    _notes100000:
+      title: "ALL YOUR NOTE ARE BELONG TO US"
+      description: "100 000 нотаток відправлено"
+      flavor: "Так багато потрібно сказати?"
+    _login3:
+      title: "Новачок I"
+      description: "3 дні користування загально"
+      flavor: "Відсьогодні називайте мене \"Місскіст\""
+    _login7:
+      title: "Новачок II"
+      description: "7 днів користування загально"
+      flavor: "Ви звикли до цього?"
+    _login15:
+      title: "Новачок III"
+      description: "15 днів користування загально"
+    _login30:
+      title: "Міскієць I"
+      description: "30 днів користування загально"
+    _login60:
+      title: "Міскієць II"
+      description: "60 днів користування загально"
+    _login100:
+      title: "Міскієць III"
+      description: "100 днів користування загально"
+      flavor: "Цей юзер лютий місскіст"
+    _login200:
+      title: "Завсідник I"
+      description: "200 днів користування загально"
+    _login300:
+      title: "Завсідник II"
+      description: "300 днів користування загально"
+    _login400:
+      title: "Завсідник III"
+      description: "400 днів користування загально"
+    _login500:
+      title: "Ветеран I"
+      description: "500 днів користування загально"
+      flavor: "Meine Kameraden, ich liebe sie, die Notizen."
+    _login600:
+      title: "Ветеран II"
+      description: "600 днів користування загально"
+    _login700:
+      title: "Ветеран III"
+      description: "700 днів користування загально"
+    _login800:
+      title: "Майстер нотаток I"
+      description: "800 днів користування загально"
+    _login900:
+      title: "Майстер нотаток II"
+      description: "900 днів користування загально"
+    _login1000:
+      title: "Майстер нотаток III"
+      description: "1000 днів користування загально"
+      flavor: "Дякуємо, що користуєтеся Misskey!"
+    _noteClipped1:
+      title: "Не можна не зберегти"
+      description: "Перша нотатка у добірці"
+    _noteFavorited1:
+      title: "Дивитися на зірки"
+    _myNoteFavorited1:
+      title: "У пошуках зірок"
+    _profileFilled:
+      title: "Повна готовність"
+      description: "Профіль заповнено"
+    _markedAsCat:
+      title: "Я кіт"
+      description: "Позначено як акаунт кота"
+      flavor: "Я дам тобі ім'я пізніше"
+    _following1:
+      title: "Перша підписка"
+    _following10:
+      title: "Продовжуй, продовжуй"
+    _following50:
+      title: "Багато друзів"
+      description: "Кількість підписок сягнула 50"
+    _following100:
+      title: "100 друзів"
+      description: "Кількість підписок сягнула 100"
+    _following300:
+      title: "Надлишок друзів"
+      description: "Кількість підписок сягнула 300"
+    _followers1:
+      title: "Перший підписник"
+      description: "З'явився перший підписник"
+    _followers10:
+      title: "Follow me!"
+      description: "Кількість підписників досягла 10"
+    _followers50:
+      description: "Кількість підписників досягла 50"
+    _followers100:
+      title: "Популярна особа"
+      description: "Кількість підписників досягла 100"
+    _followers300:
+      description: "Кількість підписників досягла 300"
+    _followers500:
+      title: "Радіовежа"
+      description: "Кількість підписників досягла 500"
+    _followers1000:
+      title: "Інфлюенсер"
+      description: "Кількість підписників досягла 1000"
+    _passedSinceAccountCreated1:
+      title: "Перша річниця"
+    _passedSinceAccountCreated2:
+      title: "Друга річниця"
+    _passedSinceAccountCreated3:
+      title: "Третя річниця"
+      description: "Минуло 3 роки з моменту створення акаунта"
+    _loggedInOnBirthday:
+      title: "З Днем народження!"
+    _loggedInOnNewYearsDay:
+      description: "Увійшли в перший день року"
+    _brainDiver:
+      title: "Brain Diver"
+      flavor: "Misskey-Misskey La-Tu-Ma"
 _role:
   priority: "Пріоритет"
   _priority:
@@ -1435,6 +1599,7 @@ _notification:
   youReceivedFollowRequest: "Ви отримали запит на підписку"
   yourFollowRequestAccepted: "Запит на підписку прийнято"
   youWereInvitedToGroup: "Запрошення до групи"
+  achievementEarned: "Досягнення відкрито"
   _types:
     all: "Все"
     follow: "Підписки"

locales/zh-CN.yml

@@ -956,7 +956,7 @@ _achievements:
       title: "满是帖子"
       description: "发布了500篇帖子"
     _notes1000:
-      title: "帖子成山"
+      title: "积帖成山"
       description: "发布了1,000篇帖子"
     _notes5000:
       title: "帖如泉涌"
@@ -1007,6 +1007,9 @@ _achievements:
       flavor: "感谢您使用Misskey！"
     _noteFavorited1:
       title: "观星者"
+    _profileFilled:
+      title: "整装待发"
+      description: "设置了个人资料"
     _markedAsCat:
       title: "我是猫"
       description: "将账户设定为一只猫"

locales/zh-TW.yml

@@ -950,13 +950,13 @@ _achievements:
       title: "若干貼文"
       description: "發表了10則貼文"
     _notes100:
-      title: "許多的貼文"
+      title: "許多貼文"
       description: "發表了100則貼文"
     _notes500:
       title: "滿滿的貼文"
       description: "發表了500則貼文"
     _notes1000:
-      title: "一堆貼文"
+      title: "堆積如山的貼文"
       description: "發表了1000則貼文"
     _notes5000:
       title: "滔滔不絕的貼文"
@@ -1047,29 +1047,66 @@ _achievements:
       description: "第一次將貼文收進摘錄"
     _noteFavorited1:
       title: "觀星者"
-      description: "第一次將貼文收進我的最愛"
+      description: "第一次將貼文收藏至我的最愛"
+    _myNoteFavorited1:
+      title: "想要星星"
+      description: "自己的貼文被他人收藏至「我的最愛」了"
     _profileFilled:
       title: "有備而來"
       description: "設定了個人檔案"
     _markedAsCat:
       title: "我是貓"
       description: "已將帳戶設定為貓"
+      flavor: "還沒有名字。"
+    _following1:
+      title: "首次追隨"
+      description: "首次追隨了"
+    _following10:
+      title: "跟著跟著"
+      description: "跟隨超過10人了"
+    _following50:
+      title: "朋友很多"
+      description: "跟隨超過50人了"
+    _following100:
+      title: "100位朋友"
+      description: "跟隨超過100人了"
+    _following300:
+      title: "朋友過多"
+      description: "跟隨超過300人了"
+    _followers1:
+      title: "第一個追隨者"
+      description: "第一次被追隨"
+    _followers10:
+      title: "Follow me!"
+      description: "跟隨者超過10人了"
+    _followers50:
+      title: "成群結隊"
+      description: "跟隨者超過50人了"
+    _followers100:
+      title: "紅人"
+      description: "跟隨者超過100人了"
+    _followers300:
+      title: "請排成一排"
+      description: "跟隨者超過300人了"
     _followers500:
       title: "基站"
-      description: "超過500名追隨者"
+      description: "超過500名追隨者了"
     _followers1000:
       title: "影響者"
-      description: "超過1000名追隨者"
+      description: "超過1000名追隨者了"
     _collectAchievements30:
       title: "成就收藏家"
       description: "獲得30個以上的成就"
     _viewAchievements3min:
       title: "喜愛成就"
-      description: "看成就列表要花了3分鐘以上"
+      description: "看成就列表要花3分鐘以上"
     _iLoveMisskey:
       title: "I Love Misskey"
       description: "發布「I ❤ #Misskey」"
       flavor: "感謝您使用Misskey！ by 開發團隊"
+    _foundTreasure:
+      title: "尋寶"
+      description: "發現了隱藏的寶藏"
     _client30min:
       title: "休息一下"
       description: "用戶端啟動已超過30分鐘"
@@ -1083,18 +1120,22 @@ _achievements:
     _postedAt0min0sec:
       title: "報時"
       description: "在0分0秒發佈貼文"
+      flavor: "啵．啵．啵．嗶ー"
     _selfQuote:
       title: "自我引用"
       description: "引用了自己的貼文"
     _htl20npm:
       title: "流動的TL"
       description: "在首頁時間軸的流速超過20npm"
+    _viewInstanceChart:
+      title: "分析師"
+      description: "顯示了實例的圖表"
     _outputHelloWorldOnScratchpad:
       title: "Hello world!"
       description: "在暫存記憶體輸出了 hello world"
     _open3windows:
       title: "多重視窗"
-      description: "開啟3個以上的視窗"
+      description: "開啟了3個以上的視窗"
     _driveFolderCircularReference:
       title: "循環引用"
       description: "試圖遞迴套入雲端硬碟資料夾"
@@ -1110,6 +1151,30 @@ _achievements:
     _setNameToSyuilo:
       title: "神的情結"
       description: "將名稱設定為 syuilo"
+    _passedSinceAccountCreated1:
+      title: "一周年"
+      description: "自建立帳戶開始過了1年"
+    _passedSinceAccountCreated2:
+      title: "二周年"
+      description: "自建立帳戶開始過了2年"
+    _passedSinceAccountCreated3:
+      title: "三周年"
+      description: "自建立帳戶開始過了3年"
+    _loggedInOnBirthday:
+      title: "生日快樂"
+      description: "在生日當天登入了"
+    _loggedInOnNewYearsDay:
+      title: "新年快樂"
+      description: "在元旦當天登入了"
+      flavor: "今年也請對敝實例多多指教"
+    _cookieClicked:
+      title: "點擊餅乾的遊戲"
+      description: "點擊了餅乾"
+      flavor: "是不是軟體有問題？"
+    _brainDiver:
+      title: "Brain Driver"
+      description: "發佈了Brain Driver的連結"
+      flavor: "Misskey-Misskey La-Tu-Ma"
 _role:
   new: "建立角色"
   edit: "編輯角色"
@@ -1759,6 +1824,7 @@ _notification:
   pollEnded: "問卷調查已產生結果"
   unreadAntennaNote: "天線 {name}"
   emptyPushNotificationMessage: "推送通知已更新"
+  achievementEarned: "獲得成就"
   _types:
     all: "全部 "
     follow: "追隨中"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.1.5",
+	"version": "13.2.4",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
@@ -54,12 +54,12 @@
 	"devDependencies": {
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
-		"@typescript-eslint/eslint-plugin": "5.48.2",
-		"@typescript-eslint/parser": "5.48.2",
+		"@typescript-eslint/eslint-plugin": "5.49.0",
+		"@typescript-eslint/parser": "5.49.0",
 		"cross-env": "7.0.3",
-		"cypress": "12.3.0",
+		"cypress": "12.4.0",
 		"eslint": "^8.32.0",
-		"start-server-and-test": "1.15.2"
+		"start-server-and-test": "1.15.3"
 	},
 	"optionalDependencies": {
 		"@tensorflow/tfjs-core": "^4.2.0"

packages/backend/package.json

@@ -19,21 +19,21 @@
 		"test-and-coverage": "pnpm jest-and-coverage"
 	},
 	"optionalDependencies": {
-		"@tensorflow/tfjs": "^4.1.0",
-		"@tensorflow/tfjs-node": "4.1.0"
+		"@tensorflow/tfjs": "^4.2.0",
+		"@tensorflow/tfjs-node": "4.2.0"
 	},
 	"dependencies": {
-		"@bull-board/api": "^4.10.2",
-		"@bull-board/fastify": "^4.10.2",
-		"@bull-board/ui": "^4.10.2",
+		"@bull-board/api": "^4.11.0",
+		"@bull-board/fastify": "^4.11.0",
+		"@bull-board/ui": "^4.11.0",
 		"@discordapp/twemoji": "14.0.2",
 		"@fastify/accepts": "4.1.0",
 		"@fastify/cookie": "^8.3.0",
 		"@fastify/cors": "8.2.0",
 		"@fastify/http-proxy": "^8.4.0",
 		"@fastify/multipart": "7.4.0",
-		"@fastify/static": "6.6.1",
-		"@fastify/view": "7.4.0",
+		"@fastify/static": "6.7.0",
+		"@fastify/view": "7.4.1",
 		"@nestjs/common": "9.2.1",
 		"@nestjs/core": "9.2.1",
 		"@nestjs/testing": "9.2.1",
@@ -63,15 +63,14 @@
 		"file-type": "18.2.0",
 		"fluent-ffmpeg": "2.1.2",
 		"form-data": "^4.0.0",
-		"got": "12.5.3",
+		"got": "^12.5.3",
 		"hpagent": "1.2.0",
 		"ioredis": "4.28.5",
 		"ip-cidr": "3.0.11",
 		"is-svg": "4.3.2",
 		"js-yaml": "4.1.0",
-		"jsdom": "21.0.0",
+		"jsdom": "21.1.0",
 		"json5": "2.2.3",
-		"json5-loader": "4.0.1",
 		"jsonld": "8.1.0",
 		"jsrsasign": "10.6.1",
 		"mfm-js": "0.23.3",
@@ -111,7 +110,7 @@
 		"stringz": "2.1.0",
 		"summaly": "2.7.0",
 		"syslog-pro": "git+https://github.com/misskey-dev/SyslogPro#0.2.9-misskey.2",
-		"systeminformation": "5.17.3",
+		"systeminformation": "5.17.4",
 		"tinycolor2": "1.5.2",
 		"tmp": "0.2.1",
 		"tsc-alias": "1.8.2",
@@ -120,19 +119,19 @@
 		"typeorm": "0.3.11",
 		"typescript": "4.9.4",
 		"ulid": "2.3.0",
-		"undici": "^5.15.1",
 		"unzipper": "0.10.11",
 		"uuid": "9.0.0",
 		"vary": "1.1.2",
 		"web-push": "3.5.0",
 		"websocket": "1.0.34",
 		"ws": "8.12.0",
-		"xev": "3.0.2"
+		"xev": "3.0.2",
+		"node-fetch": "3.3.0"
 	},
 	"devDependencies": {
 		"@redocly/openapi-core": "1.0.0-beta.120",
 		"@swc/cli": "^0.1.59",
-		"@swc/core": "1.3.27",
+		"@swc/core": "1.3.29",
 		"@swc/jest": "0.2.24",
 		"@types/accepts": "1.3.5",
 		"@types/archiver": "5.3.1",
@@ -144,11 +143,11 @@
 		"@types/escape-regexp": "0.0.1",
 		"@types/fluent-ffmpeg": "2.1.20",
 		"@types/ioredis": "4.28.10",
-		"@types/jest": "29.2.6",
+		"@types/jest": "29.4.0",
 		"@types/js-yaml": "4.0.5",
 		"@types/jsdom": "20.0.1",
 		"@types/jsonld": "1.5.8",
-		"@types/jsrsasign": "10.5.4",
+		"@types/jsrsasign": "10.5.5",
 		"@types/mime-types": "2.1.1",
 		"@types/node": "18.11.18",
 		"@types/node-fetch": "3.0.3",
@@ -176,14 +175,13 @@
 		"@types/web-push": "3.3.2",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.48.2",
-		"@typescript-eslint/parser": "5.48.2",
+		"@typescript-eslint/eslint-plugin": "5.49.0",
+		"@typescript-eslint/parser": "5.49.0",
 		"cross-env": "7.0.3",
 		"eslint": "8.32.0",
 		"eslint-plugin-import": "2.27.5",
 		"execa": "6.1.0",
-		"jest": "29.3.1",
-		"jest-mock": "^29.3.1",
-		"node-fetch": "3.3.0"
+		"jest": "29.4.1",
+		"jest-mock": "^29.4.1"
 	}
 }

packages/backend/src/boot/common.ts

@@ -0,0 +1,35 @@
+import { NestFactory } from '@nestjs/core';
+import { ChartManagementService } from '@/core/chart/ChartManagementService.js';
+import { QueueProcessorService } from '@/queue/QueueProcessorService.js';
+import { NestLogger } from '@/NestLogger.js';
+import { QueueProcessorModule } from '@/queue/QueueProcessorModule.js';
+import { JanitorService } from '@/daemons/JanitorService.js';
+import { QueueStatsService } from '@/daemons/QueueStatsService.js';
+import { ServerStatsService } from '@/daemons/ServerStatsService.js';
+import { ServerService } from '@/server/ServerService.js';
+import { MainModule } from '@/MainModule.js';
+
+export async function server() {
+	const app = await NestFactory.createApplicationContext(MainModule, {
+		logger: new NestLogger(),
+	});
+	app.enableShutdownHooks();
+
+	const serverService = app.get(ServerService);
+	serverService.launch();
+
+	app.get(ChartManagementService).start();
+	app.get(JanitorService).start();
+	app.get(QueueStatsService).start();
+	app.get(ServerStatsService).start();
+}
+
+export async function jobQueue() {
+	const jobQueue = await NestFactory.createApplicationContext(QueueProcessorModule, {
+		logger: new NestLogger(),
+	});
+	jobQueue.enableShutdownHooks();
+
+	jobQueue.get(QueueProcessorService).start();
+	jobQueue.get(ChartManagementService).start();
+}

packages/backend/src/boot/master.ts

@@ -6,21 +6,12 @@ import cluster from 'node:cluster';
 import chalk from 'chalk';
 import chalkTemplate from 'chalk-template';
 import semver from 'semver';
-import { NestFactory } from '@nestjs/core';
 import Logger from '@/logger.js';
 import { loadConfig } from '@/config.js';
 import type { Config } from '@/config.js';
-import { lessThan } from '@/misc/prelude/array.js';
 import { showMachineInfo } from '@/misc/show-machine-info.js';
-import { DaemonModule } from '@/daemons/DaemonModule.js';
-import { JanitorService } from '@/daemons/JanitorService.js';
-import { QueueStatsService } from '@/daemons/QueueStatsService.js';
-import { ServerStatsService } from '@/daemons/ServerStatsService.js';
-import { NestLogger } from '@/NestLogger.js';
-import { ChartManagementService } from '@/core/chart/ChartManagementService.js';
-import { ServerService } from '@/server/ServerService.js';
-import { MainModule } from '@/MainModule.js';
-import { envOption } from '../env.js';
+import { envOption } from '@/env.js';
+import { jobQueue, server } from './common.js';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -73,14 +64,13 @@ export async function masterMain() {
 		process.exit(1);
 	}
 
-	const app = await NestFactory.createApplicationContext(MainModule, {
-		logger: new NestLogger(),
-	});
-	app.enableShutdownHooks();
-
-	// start server
-	const serverService = app.get(ServerService);
-	serverService.launch();
+	if (envOption.onlyServer) {
+		await server();
+	} else if (envOption.onlyQueue) {
+		await jobQueue();
+	} else {
+		await server();
+	}
 
 	bootLogger.succ('Misskey initialized');
 
@@ -89,11 +79,6 @@ export async function masterMain() {
 	}
 
 	bootLogger.succ(`Now listening on port ${config.port} on ${config.url}`, null, true);
-
-	app.get(ChartManagementService).start();
-	app.get(JanitorService).start();
-	app.get(QueueStatsService).start();
-	app.get(ServerStatsService).start();
 }
 
 function showEnvironment(): void {

packages/backend/src/boot/worker.ts

@@ -1,23 +1,18 @@
 import cluster from 'node:cluster';
-import { NestFactory } from '@nestjs/core';
-import { ChartManagementService } from '@/core/chart/ChartManagementService.js';
-import { QueueProcessorService } from '@/queue/QueueProcessorService.js';
-import { NestLogger } from '@/NestLogger.js';
-import { QueueProcessorModule } from '@/queue/QueueProcessorModule.js';
+import { envOption } from '@/env.js';
+import { jobQueue, server } from './common.js';
 
 /**
  * Init worker process
  */
 export async function workerMain() {
-	const jobQueue = await NestFactory.createApplicationContext(QueueProcessorModule, {
-		logger: new NestLogger(),
-	});
-	jobQueue.enableShutdownHooks();
-
-	// start job queue
-	jobQueue.get(QueueProcessorService).start();
-
-	jobQueue.get(ChartManagementService).start();
+	if (envOption.onlyServer) {
+		await server();
+	} else if (envOption.onlyQueue) {
+		await jobQueue();
+	} else {
+		await jobQueue();
+	}
 
 	if (cluster.isWorker) {
 		// Send a 'ready' message to parent process

packages/backend/src/core/AchievementService.ts

@@ -62,12 +62,14 @@ const ACHIEVEMENT_TYPES = [
 	'collectAchievements30',
 	'viewAchievements3min',
 	'iLoveMisskey',
+	'foundTreasure',
 	'client30min',
 	'noteDeletedWithin1min',
 	'postedAtLateNight',
 	'postedAt0min0sec',
 	'selfQuote',
 	'htl20npm',
+	'viewInstanceChart',
 	'outputHelloWorldOnScratchpad',
 	'open3windows',
 	'driveFolderCircularReference',

packages/backend/src/core/AntennaService.ts

@@ -77,10 +77,16 @@ export class AntennaService implements OnApplicationShutdown {
 			const { type, body } = obj.message as StreamMessages['internal']['payload'];
 			switch (type) {
 				case 'antennaCreated':
-					this.antennas.push(body);
+					this.antennas.push({
+						...body,
+						createdAt: new Date(body.createdAt),
+					});
 					break;
 				case 'antennaUpdated':
-					this.antennas[this.antennas.findIndex(a => a.id === body.id)] = body;
+					this.antennas[this.antennas.findIndex(a => a.id === body.id)] = {
+						...body,
+						createdAt: new Date(body.createdAt),
+					};
 					break;
 				case 'antennaDeleted':
 					this.antennas = this.antennas.filter(a => a.id !== body.id);

packages/backend/src/core/CaptchaService.ts

@@ -21,18 +21,13 @@ export class CaptchaService {
 			response,
 		});
 	
-		const res = await this.httpRequestService.fetch(
-			url,
-			{
-				method: 'POST',
-				body: params,
+		const res = await this.httpRequestService.send(url, {
+			method: 'POST',
+			body: params.toString(),
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded',
 			},
-			{
-				noOkError: true,
-			}
-		).catch(err => {
-			throw `${err.message ?? err}`;
-		});
+		}, { throwErrorWhenResponseNotOk: false });
 	
 		if (!res.ok) {
 			throw `${res.status}`;

packages/backend/src/core/CustomEmojiService.ts

@@ -2,22 +2,39 @@ import { Inject, Injectable } from '@nestjs/common';
 import { DataSource, In, IsNull } from 'typeorm';
 import { DI } from '@/di-symbols.js';
 import { IdService } from '@/core/IdService.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 import type { DriveFile } from '@/models/entities/DriveFile.js';
 import type { Emoji } from '@/models/entities/Emoji.js';
-import type { EmojisRepository } from '@/models/index.js';
+import type { EmojisRepository, Note } from '@/models/index.js';
 import { bindThis } from '@/decorators.js';
+import { Cache } from '@/misc/cache.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import type { Config } from '@/config.js';
+import { ReactionService } from '@/core/ReactionService.js';
+import { query } from '@/misc/prelude/url.js';
 
 @Injectable()
 export class CustomEmojiService {
+	private cache: Cache<Emoji | null>;
+
 	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
 		@Inject(DI.db)
 		private db: DataSource,
 
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
 
+		private utilityService: UtilityService,
 		private idService: IdService,
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
+		private reactionService: ReactionService,
 	) {
+		this.cache = new Cache<Emoji | null>(1000 * 60 * 60 * 12);
 	}
 
 	@bindThis
@@ -40,8 +57,135 @@ export class CustomEmojiService {
 			type: data.driveFile.webpublicType ?? data.driveFile.type,
 		}).then(x => this.emojisRepository.findOneByOrFail(x.identifiers[0]));
 
-		await this.db.queryResultCache!.remove(['meta_emojis']);
+		if (data.host == null) {
+			await this.db.queryResultCache!.remove(['meta_emojis']);
+
+			this.globalEventService.publishBroadcastStream('emojiAdded', {
+				emoji: await this.emojiEntityService.pack(emoji.id),
+			});
+		}
 
 		return emoji;
 	}
+
+	@bindThis
+	private normalizeHost(src: string | undefined, noteUserHost: string | null): string | null {
+	// クエリに使うホスト
+		let host = src === '.' ? null	// .はローカルホスト (ここがマッチするのはリアクションのみ)
+			: src === undefined ? noteUserHost	// ノートなどでホスト省略表記の場合はローカルホスト (ここがリアクションにマッチすることはない)
+			: this.utilityService.isSelfHost(src) ? null	// 自ホスト指定
+			: (src || noteUserHost);	// 指定されたホスト || ノートなどの所有者のホスト (こっちがリアクションにマッチすることはない)
+
+		host = this.utilityService.toPunyNullable(host);
+
+		return host;
+	}
+
+	@bindThis
+	private parseEmojiStr(emojiName: string, noteUserHost: string | null) {
+		const match = emojiName.match(/^(\w+)(?:@([\w.-]+))?$/);
+		if (!match) return { name: null, host: null };
+
+		const name = match[1];
+
+		// ホスト正規化
+		const host = this.utilityService.toPunyNullable(this.normalizeHost(match[2], noteUserHost));
+
+		return { name, host };
+	}
+
+	/**
+	 * 添付用(リモート)カスタム絵文字URLを解決する
+	 * @param emojiName ノートやユーザープロフィールに添付された、またはリアクションのカスタム絵文字名 (:は含めない, リアクションでローカルホストの場合は@.を付ける (これはdecodeReactionで可能))
+	 * @param noteUserHost ノートやユーザープロフィールの所有者のホスト
+	 * @returns URL, nullは未マッチを意味する
+	 */
+	@bindThis
+	public async populateEmoji(emojiName: string, noteUserHost: string | null): Promise<string | null> {
+		const { name, host } = this.parseEmojiStr(emojiName, noteUserHost);
+		if (name == null) return null;
+		if (host == null) return null;
+
+		const queryOrNull = async () => (await this.emojisRepository.findOneBy({
+			name,
+			host: host ?? IsNull(),
+		})) ?? null;
+
+		const emoji = await this.cache.fetch(`${name} ${host}`, queryOrNull);
+
+		if (emoji == null) return null;
+
+		const isLocal = emoji.host == null;
+		const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため（publicUrlはstringなので??はだめ）
+		const url = isLocal
+			? emojiUrl
+			: this.config.proxyRemoteFiles
+				? `${this.config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`
+				: emojiUrl;
+
+		return url;
+	}
+
+	/**
+	 * 複数の添付用(リモート)カスタム絵文字URLを解決する (キャシュ付き, 存在しないものは結果から除外される)
+	 */
+	@bindThis
+	public async populateEmojis(emojiNames: string[], noteUserHost: string | null): Promise<Record<string, string>> {
+		const emojis = await Promise.all(emojiNames.map(x => this.populateEmoji(x, noteUserHost)));
+		const res = {} as any;
+		for (let i = 0; i < emojiNames.length; i++) {
+			if (emojis[i] != null) {
+				res[emojiNames[i]] = emojis[i];
+			}
+		}
+		return res;
+	}
+
+	@bindThis
+	public aggregateNoteEmojis(notes: Note[]) {
+		let emojis: { name: string | null; host: string | null; }[] = [];
+		for (const note of notes) {
+			emojis = emojis.concat(note.emojis
+				.map(e => this.parseEmojiStr(e, note.userHost)));
+			if (note.renote) {
+				emojis = emojis.concat(note.renote.emojis
+					.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
+				if (note.renote.user) {
+					emojis = emojis.concat(note.renote.user.emojis
+						.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
+				}
+			}
+			const customReactions = Object.keys(note.reactions).map(x => this.reactionService.decodeReaction(x)).filter(x => x.name != null) as typeof emojis;
+			emojis = emojis.concat(customReactions);
+			if (note.user) {
+				emojis = emojis.concat(note.user.emojis
+					.map(e => this.parseEmojiStr(e, note.userHost)));
+			}
+		}
+		return emojis.filter(x => x.name != null && x.host != null) as { name: string; host: string; }[];
+	}
+
+	/**
+	 * 与えられた絵文字のリストをデータベースから取得し、キャッシュに追加します
+	 */
+	@bindThis
+	public async prefetchEmojis(emojis: { name: string; host: string | null; }[]): Promise<void> {
+		const notCachedEmojis = emojis.filter(emoji => this.cache.get(`${emoji.name} ${emoji.host}`) == null);
+		const emojisQuery: any[] = [];
+		const hosts = new Set(notCachedEmojis.map(e => e.host));
+		for (const host of hosts) {
+			if (host == null) continue;
+			emojisQuery.push({
+				name: In(notCachedEmojis.filter(e => e.host === host).map(e => e.name)),
+				host: host,
+			});
+		}
+		const _emojis = emojisQuery.length > 0 ? await this.emojisRepository.find({
+			where: emojisQuery,
+			select: ['name', 'host', 'originalUrl', 'publicUrl'],
+		}) : [];
+		for (const emoji of _emojis) {
+			this.cache.set(`${emoji.name} ${emoji.host}`, emoji);
+		}
+	}
 }

packages/backend/src/core/DownloadService.ts

@@ -4,16 +4,15 @@ import * as util from 'node:util';
 import { Inject, Injectable } from '@nestjs/common';
 import IPCIDR from 'ip-cidr';
 import PrivateIp from 'private-ip';
-import got, * as Got from 'got';
 import chalk from 'chalk';
+import got, * as Got from 'got';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
-import { HttpRequestService, UndiciFetcher } from '@/core/HttpRequestService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
 import { createTemp } from '@/misc/create-temp.js';
 import { StatusError } from '@/misc/status-error.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import type Logger from '@/logger.js';
-import { buildConnector } from 'undici';
 
 const pipeline = util.promisify(stream.pipeline);
 import { bindThis } from '@/decorators.js';
@@ -21,7 +20,6 @@ import { bindThis } from '@/decorators.js';
 @Injectable()
 export class DownloadService {
 	private logger: Logger;
-	private undiciFetcher: UndiciFetcher;
 
 	constructor(
 		@Inject(DI.config)
@@ -31,24 +29,6 @@ export class DownloadService {
 		private loggerService: LoggerService,
 	) {
 		this.logger = this.loggerService.getLogger('download');
-
-		this.undiciFetcher = new UndiciFetcher(this.httpRequestService.getStandardUndiciFetcherOption(
-			{
-				connect: process.env.NODE_ENV === 'development' ?
-					this.httpRequestService.clientDefaults.connect
-					:
-					this.httpRequestService.getConnectorWithIpCheck(
-						buildConnector({
-							...this.httpRequestService.clientDefaults.connect,
-						}),
-						(ip) => !this.isPrivateIp(ip)
-					),
-				bodyTimeout: 30 * 1000,
-			},
-			{
-				connect: this.httpRequestService.clientDefaults.connect,
-			}
-		), this.logger);
 	}
 
 	@bindThis
@@ -59,14 +39,60 @@ export class DownloadService {
 		const operationTimeout = 60 * 1000;
 		const maxSize = this.config.maxFileSize ?? 262144000;
 
-		const response = await this.undiciFetcher.fetch(url);
+		const req = got.stream(url, {
+			headers: {
+				'User-Agent': this.config.userAgent,
+			},
+			timeout: {
+				lookup: timeout,
+				connect: timeout,
+				secureConnect: timeout,
+				socket: timeout,	// read timeout
+				response: timeout,
+				send: timeout,
+				request: operationTimeout,	// whole operation timeout
+			},
+			agent: {
+				http: this.httpRequestService.httpAgent,
+				https: this.httpRequestService.httpsAgent,
+			},
+			http2: false,	// default
+			retry: {
+				limit: 0,
+			},
+		}).on('response', (res: Got.Response) => {
+			if ((process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test') && !this.config.proxy && res.ip) {
+				if (this.isPrivateIp(res.ip)) {
+					this.logger.warn(`Blocked address: ${res.ip}`);
+					req.destroy();
+				}
+			}
 
-		if (response.body === null) {
-			throw new StatusError('No body', 400, 'No body');
+			const contentLength = res.headers['content-length'];
+			if (contentLength != null) {
+				const size = Number(contentLength);
+				if (size > maxSize) {
+					this.logger.warn(`maxSize exceeded (${size} > ${maxSize}) on response`);
+					req.destroy();
+				}
+			}
+		}).on('downloadProgress', (progress: Got.Progress) => {
+			if (progress.transferred > maxSize) {
+				this.logger.warn(`maxSize exceeded (${progress.transferred} > ${maxSize}) on downloadProgress`);
+				req.destroy();
+			}
+		});
+
+		try {
+			await pipeline(req, fs.createWriteStream(path));
+		} catch (e) {
+			if (e instanceof Got.HTTPError) {
+				throw new StatusError(`${e.response.statusCode} ${e.response.statusMessage}`, e.response.statusCode, e.response.statusMessage);
+			} else {
+				throw e;
+			}
 		}
 
-		await pipeline(stream.Readable.fromWeb(response.body), fs.createWriteStream(path));
-
 		this.logger.succ(`Download finished: ${chalk.cyan(url)}`);
 	}
 

packages/backend/src/core/FetchInstanceMetadataService.ts

@@ -2,6 +2,7 @@ import { URL } from 'node:url';
 import { Inject, Injectable } from '@nestjs/common';
 import { JSDOM } from 'jsdom';
 import tinycolor from 'tinycolor2';
+import fetch from 'node-fetch';
 import type { Instance } from '@/models/entities/Instance.js';
 import type { InstancesRepository } from '@/models/index.js';
 import { AppLockService } from '@/core/AppLockService.js';
@@ -190,7 +191,9 @@ export class FetchInstanceMetadataService {
 	
 		const faviconUrl = url + '/favicon.ico';
 	
-		const favicon = await this.httpRequestService.fetch(faviconUrl, {}, { noOkError: true });
+		const favicon = await this.httpRequestService.send(faviconUrl, {
+			method: 'HEAD',
+		}, { throwErrorWhenResponseNotOk: false });
 	
 		if (favicon.ok) {
 			return faviconUrl;

packages/backend/src/core/HttpRequestService.ts

@@ -1,257 +1,67 @@
 import * as http from 'node:http';
 import * as https from 'node:https';
 import CacheableLookup from 'cacheable-lookup';
+import fetch from 'node-fetch';
 import { HttpProxyAgent, HttpsProxyAgent } from 'hpagent';
 import { Inject, Injectable } from '@nestjs/common';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import { StatusError } from '@/misc/status-error.js';
 import { bindThis } from '@/decorators.js';
-import * as undici from 'undici';
-import { LookupFunction } from 'node:net';
-import { LoggerService } from '@/core/LoggerService.js';
-import type Logger from '@/logger.js';
-
-// true to allow, false to deny
-export type IpChecker = (ip: string) => boolean;
-
-/* 
- *  Child class to create and save Agent for fetch.
- *  You should construct this when you want
- *  to change timeout, size limit, socket connect function, etc.
- */
-export class UndiciFetcher {
-	/**
-	 * Get http non-proxy agent (undici)
-	 */
-	public nonProxiedAgent: undici.Agent;
-
-	/**
-	 * Get http proxy or non-proxy agent (undici)
-	 */
-	public agent: undici.ProxyAgent | undici.Agent;
-
-	private proxyBypassHosts: string[];
-	private userAgent: string | undefined;
-
-	private logger: Logger | undefined;
-
-	constructor(
-		args: {
-			agentOptions: undici.Agent.Options;
-			proxy?: {
-				uri: string;
-				options?: undici.Agent.Options; // Override of agentOptions
-			},
-			proxyBypassHosts?: string[];
-			userAgent?: string;
-		},
-		logger?: Logger,
-	) {
-		this.logger = logger;
-		this.logger?.debug('UndiciFetcher constructor', args);
-
-		this.proxyBypassHosts = args.proxyBypassHosts ?? [];
-		this.userAgent = args.userAgent;
-
-		this.nonProxiedAgent = new undici.Agent({
-			...args.agentOptions,
-			connect: (process.env.NODE_ENV !== 'production' && typeof args.agentOptions.connect !== 'function')
-				? (options, cb) => {
-					// Custom connector for debug
-					undici.buildConnector(args.agentOptions.connect as undici.buildConnector.BuildOptions)(options, (err, socket) => {
-						this.logger?.debug('Socket connector called', socket);
-						if (err) {
-							this.logger?.debug(`Socket error`, err);
-							cb(new Error(`Error while socket connecting\n${err}`), null);
-							return;
-						}
-						this.logger?.debug(`Socket connected: port ${socket.localPort} => remote ${socket.remoteAddress}`);
-						cb(null, socket);
-					});
-				} : args.agentOptions.connect,
-		});
-
-		this.agent = args.proxy
-			? new undici.ProxyAgent({
-				...args.agentOptions,
-				...args.proxy.options,
-
-				uri: args.proxy.uri,
-
-				connect: (process.env.NODE_ENV !== 'production' && typeof (args.proxy?.options?.connect ?? args.agentOptions.connect) !== 'function')
-					? (options, cb) => {
-						// Custom connector for debug
-						undici.buildConnector((args.proxy?.options?.connect ?? args.agentOptions.connect) as undici.buildConnector.BuildOptions)(options, (err, socket) => {
-							this.logger?.debug('Socket connector called (secure)', socket);
-							if (err) {
-								this.logger?.debug(`Socket error`, err);
-								cb(new Error(`Error while socket connecting\n${err}`), null);
-								return;
-							}
-							this.logger?.debug(`Socket connected (secure): port ${socket.localPort} => remote ${socket.remoteAddress}`);
-							cb(null, socket);
-						});
-					} : (args.proxy?.options?.connect ?? args.agentOptions.connect),
-			})
-			: this.nonProxiedAgent;
-	}
-
-	/**
-	 * Get agent by URL
-	 * @param url URL
-	 * @param bypassProxy Allways bypass proxy
-	 */
-	@bindThis
-	public getAgentByUrl(url: URL, bypassProxy = false): undici.Agent | undici.ProxyAgent {
-		if (bypassProxy || this.proxyBypassHosts.includes(url.hostname)) {
-			return this.nonProxiedAgent;
-		} else {
-			return this.agent;
-		}
-	}
-
-	@bindThis
-	public async fetch(
-		url: string | URL,
-		options: undici.RequestInit = {},
-		privateOptions: { noOkError?: boolean; bypassProxy?: boolean; } = { noOkError: false, bypassProxy: false }
-	): Promise<undici.Response> {
-		const res = await undici.fetch(url, {
-			dispatcher: this.getAgentByUrl(new URL(url), privateOptions.bypassProxy),
-			...options,
-			headers: {
-				'User-Agent': this.userAgent ?? '',
-				...(options.headers ?? {}),
-			},
-		}).catch((err) => {
-			this.logger?.error(`fetch error to ${typeof url === 'string' ? url : url.href}`, err);
-			throw new StatusError('Resource Unreachable', 500, 'Resource Unreachable');
-		});
-		if (!res.ok && !privateOptions.noOkError) {
-			throw new StatusError(`${res.status} ${res.statusText}`, res.status, res.statusText);
-		}
-		return res;
-	}
-
-	@bindThis
-	public async getJson<T extends unknown>(url: string, accept = 'application/json, */*', headers?: Record<string, string>): Promise<T> {
-		const res = await this.fetch(
-			url,
-			{
-				headers: Object.assign({
-					Accept: accept,
-				}, headers ?? {}),
-			}
-		);
-
-		return await res.json() as T;
-	}
-
-	@bindThis
-	public async getHtml(url: string, accept = 'text/html, */*', headers?: Record<string, string>): Promise<string> {
-		const res = await this.fetch(
-			url,
-			{
-				headers: Object.assign({
-					Accept: accept,
-				}, headers ?? {}),
-			}
-		);
-
-		return await res.text();
-	}
-}
+import type { Response } from 'node-fetch';
+import type { URL } from 'node:url';
 
 @Injectable()
 export class HttpRequestService {
-	public defaultFetcher: UndiciFetcher;
-	public fetch: UndiciFetcher['fetch'];
-	public getHtml: UndiciFetcher['getHtml'];
-	public defaultJsonFetcher: UndiciFetcher;
-	public getJson: UndiciFetcher['getJson'];
-
-	//#region for old http/https, only used in S3Service
-	// http non-proxy agent
+	/**
+	 * Get http non-proxy agent
+	 */
 	private http: http.Agent;
 
-	// https non-proxy agent
+	/**
+	 * Get https non-proxy agent
+	 */
 	private https: https.Agent;
 
-	// http proxy or non-proxy agent
+	/**
+	 * Get http proxy or non-proxy agent
+	 */
 	public httpAgent: http.Agent;
 
-	// https proxy or non-proxy agent
+	/**
+	 * Get https proxy or non-proxy agent
+	 */
 	public httpsAgent: https.Agent;
-	//#endregion
-
-	public readonly dnsCache: CacheableLookup;
-	public readonly clientDefaults: undici.Agent.Options;
-	private maxSockets: number;
-
-	private logger: Logger;
 
 	constructor(
 		@Inject(DI.config)
 		private config: Config,
-		private loggerService: LoggerService,
 	) {
-		this.logger = this.loggerService.getLogger('http-request');
-
-		this.dnsCache = new CacheableLookup({
+		const cache = new CacheableLookup({
 			maxTtl: 3600,	// 1hours
 			errorTtl: 30,	// 30secs
 			lookup: false,	// nativeのdns.lookupにfallbackしない
 		});
-
-		this.clientDefaults = {
-			keepAliveTimeout: 30 * 1000,
-			keepAliveMaxTimeout: 10 * 60 * 1000,
-			keepAliveTimeoutThreshold: 1 * 1000,
-			strictContentLength: true,
-			headersTimeout: 10 * 1000,
-			bodyTimeout: 10 * 1000,
-			maxHeaderSize: 16364, // default
-			maxResponseSize: 10 * 1024 * 1024,
-			maxRedirections: 3,
-			connect: {
-				timeout: 10 * 1000, // コネクションが確立するまでのタイムアウト
-				maxCachedSessions: 300, // TLSセッションのキャッシュ数 https://github.com/nodejs/undici/blob/v5.14.0/lib/core/connect.js#L80
-				lookup: this.dnsCache.lookup as LookupFunction, // https://github.com/nodejs/undici/blob/v5.14.0/lib/core/connect.js#L98
-			},
-		}
-
-		this.maxSockets = Math.max(64, this.config.deliverJobConcurrency ?? 128);
-
-		this.defaultFetcher = new UndiciFetcher(this.getStandardUndiciFetcherOption(), this.logger);
-
-		this.fetch = this.defaultFetcher.fetch;
-		this.getHtml = this.defaultFetcher.getHtml;
-
-		this.defaultJsonFetcher = new UndiciFetcher(this.getStandardUndiciFetcherOption({
-			maxResponseSize: 1024 * 256,
-		}), this.logger);
-
-		this.getJson = this.defaultJsonFetcher.getJson;
-
-		//#region for old http/https, only used in S3Service
+		
 		this.http = new http.Agent({
 			keepAlive: true,
 			keepAliveMsecs: 30 * 1000,
-			lookup: this.dnsCache.lookup,
+			lookup: cache.lookup,
 		} as http.AgentOptions);
 		
 		this.https = new https.Agent({
 			keepAlive: true,
 			keepAliveMsecs: 30 * 1000,
-			lookup: this.dnsCache.lookup,
+			lookup: cache.lookup,
 		} as https.AgentOptions);
-
+		
+		const maxSockets = Math.max(256, config.deliverJobConcurrency ?? 128);
+		
 		this.httpAgent = config.proxy
 			? new HttpProxyAgent({
 				keepAlive: true,
 				keepAliveMsecs: 30 * 1000,
-				maxSockets: this.maxSockets,
+				maxSockets,
 				maxFreeSockets: 256,
 				scheduling: 'lifo',
 				proxy: config.proxy,
@@ -262,42 +72,21 @@ export class HttpRequestService {
 			? new HttpsProxyAgent({
 				keepAlive: true,
 				keepAliveMsecs: 30 * 1000,
-				maxSockets: this.maxSockets,
+				maxSockets,
 				maxFreeSockets: 256,
 				scheduling: 'lifo',
 				proxy: config.proxy,
 			})
 			: this.https;
-		//#endregion
-	}
-
-	@bindThis
-	public getStandardUndiciFetcherOption(opts: undici.Agent.Options = {}, proxyOpts: undici.Agent.Options = {}) {
-		return {
-			agentOptions: {
-				...this.clientDefaults,
-				...opts,
-			},
-			...(this.config.proxy ? {
-			proxy: {
-				uri: this.config.proxy,
-				options: {
-					connections: this.maxSockets,
-					...proxyOpts,
-				}
-			}
-			} : {}),
-			userAgent: this.config.userAgent,
-		}
 	}
 
 	/**
-	 * Get http agent by URL
+	 * Get agent by URL
 	 * @param url URL
 	 * @param bypassProxy Allways bypass proxy
 	 */
 	@bindThis
-	public getHttpAgentByUrl(url: URL, bypassProxy = false): http.Agent | https.Agent {
+	public getAgentByUrl(url: URL, bypassProxy = false): http.Agent | https.Agent {
 		if (bypassProxy || (this.config.proxyBypassHosts || []).includes(url.hostname)) {
 			return url.protocol === 'http:' ? this.http : this.https;
 		} else {
@@ -305,37 +94,67 @@ export class HttpRequestService {
 		}
 	}
 
-	/**
-	 * check ip
-	 */
 	@bindThis
-	public getConnectorWithIpCheck(connector: undici.buildConnector.connector, checkIp: IpChecker): undici.buildConnector.connectorAsync {
-		return (options, cb) => {
-			connector(options, (err, socket) => {
-				this.logger.debug('Socket connector (with ip checker) called', socket);
-				if (err) {
-					this.logger.error(`Socket error`, err)
-					cb(new Error(`Error while socket connecting\n${err}`), null);
-					return;
-				}
+	public async getJson(url: string, accept = 'application/json, */*', headers?: Record<string, string>): Promise<unknown> {
+		const res = await this.send(url, {
+			method: 'GET',
+			headers: Object.assign({
+				'User-Agent': this.config.userAgent,
+				Accept: accept,
+			}, headers ?? {}),
+			timeout: 5000,
+			size: 1024 * 256,
+		});
 
-				if (socket.remoteAddress == undefined) {
-					this.logger.error(`Socket error: remoteAddress is undefined`);
-					cb(new Error('remoteAddress is undefined (maybe socket destroyed)'), null);
-					return;
-				}
+		return await res.json();
+	}
 
-				// allow
-				if (checkIp(socket.remoteAddress)) {
-					this.logger.debug(`Socket connected (ip ok): ${socket.localPort} => ${socket.remoteAddress}`);
-					cb(null, socket);
-					return;
-				}
+	@bindThis
+	public async getHtml(url: string, accept = 'text/html, */*', headers?: Record<string, string>): Promise<string> {
+		const res = await this.send(url, {
+			method: 'GET',
+			headers: Object.assign({
+				'User-Agent': this.config.userAgent,
+				Accept: accept,
+			}, headers ?? {}),
+			timeout: 5000,
+		});
 
-				this.logger.error('IP is not allowed', socket);
-				cb(new StatusError('IP is not allowed', 403, 'IP is not allowed'), null);
-				socket.destroy();
-			});
-		};
+		return await res.text();
+	}
+
+	@bindThis
+	public async send(url: string, args: {
+		method?: string,
+		body?: string,
+		headers?: Record<string, string>,
+		timeout?: number,
+		size?: number,
+	} = {}, extra: {
+		throwErrorWhenResponseNotOk: boolean;
+	} = {
+		throwErrorWhenResponseNotOk: true,
+	}): Promise<Response> {
+		const timeout = args.timeout ?? 5000;
+
+		const controller = new AbortController();
+		setTimeout(() => {
+			controller.abort();
+		}, timeout);
+
+		const res = await fetch(url, {
+			method: args.method ?? 'GET',
+			headers: args.headers,
+			body: args.body,
+			size: args.size ?? 10 * 1024 * 1024,
+			agent: (url) => this.getAgentByUrl(url),
+			signal: controller.signal,
+		});
+
+		if (!res.ok && extra.throwErrorWhenResponseNotOk) {
+			throw new StatusError(`${res.status} ${res.statusText}`, res.status, res.statusText);
+		}
+
+		return res;
 	}
 }

packages/backend/src/core/ImageProcessingService.ts

@@ -9,6 +9,14 @@ export type IImage = {
 	type: string;
 };
 
+export type IImageStream = {
+	data: Readable;
+	ext: string | null;
+	type: string;
+};
+
+export type IImageStreamable = IImage | IImageStream;
+
 export const webpDefault: sharp.WebpOptions = {
 	quality: 85,
 	alphaQuality: 95,
@@ -19,6 +27,7 @@ export const webpDefault: sharp.WebpOptions = {
 };
 
 import { bindThis } from '@/decorators.js';
+import { Readable } from 'node:stream';
 
 @Injectable()
 export class ImageProcessingService {
@@ -64,7 +73,7 @@ export class ImageProcessingService {
 	 */
 	@bindThis
 	public async convertToWebp(path: string, width: number, height: number, options: sharp.WebpOptions = webpDefault): Promise<IImage> {
-		return this.convertSharpToWebp(await sharp(path), width, height, options);
+		return this.convertSharpToWebp(sharp(path), width, height, options);
 	}
 
 	@bindThis
@@ -85,6 +94,27 @@ export class ImageProcessingService {
 		};
 	}
 
+	@bindThis
+	public convertToWebpStream(path: string, width: number, height: number, options: sharp.WebpOptions = webpDefault): IImageStream {
+		return this.convertSharpToWebpStream(sharp(path), width, height, options);
+	}
+
+	@bindThis
+	public convertSharpToWebpStream(sharp: sharp.Sharp, width: number, height: number, options: sharp.WebpOptions = webpDefault): IImageStream {
+		const data = sharp
+			.resize(width, height, {
+				fit: 'inside',
+				withoutEnlargement: true,
+			})
+			.rotate()
+			.webp(options)
+
+		return {
+			data,
+			ext: 'webp',
+			type: 'image/webp',
+		};
+	}
 	/**
 	 * Convert to PNG
 	 *   with resize, remove metadata, resolve orientation, stop animation

packages/backend/src/core/RoleService.ts

@@ -91,10 +91,12 @@ export class RoleService implements OnApplicationShutdown {
 				case 'roleCreated': {
 					const cached = this.rolesCache.get(null);
 					if (cached) {
-						body.createdAt = new Date(body.createdAt);
-						body.updatedAt = new Date(body.updatedAt);
-						body.lastUsedAt = new Date(body.lastUsedAt);
-						cached.push(body);
+						cached.push({
+							...body,
+							createdAt: new Date(body.createdAt),
+							updatedAt: new Date(body.updatedAt),
+							lastUsedAt: new Date(body.lastUsedAt),
+						});
 					}
 					break;
 				}
@@ -103,10 +105,12 @@ export class RoleService implements OnApplicationShutdown {
 					if (cached) {
 						const i = cached.findIndex(x => x.id === body.id);
 						if (i > -1) {
-							body.createdAt = new Date(body.createdAt);
-							body.updatedAt = new Date(body.updatedAt);
-							body.lastUsedAt = new Date(body.lastUsedAt);
-							cached[i] = body;
+							cached[i] = {
+								...body,
+								createdAt: new Date(body.createdAt),
+								updatedAt: new Date(body.updatedAt),
+								lastUsedAt: new Date(body.lastUsedAt),
+							};
 						}
 					}
 					break;
@@ -121,8 +125,10 @@ export class RoleService implements OnApplicationShutdown {
 				case 'userRoleAssigned': {
 					const cached = this.roleAssignmentByUserIdCache.get(body.userId);
 					if (cached) {
-						body.createdAt = new Date(body.createdAt);
-						cached.push(body);
+						cached.push({
+							...body,
+							createdAt: new Date(body.createdAt),
+						});
 					}
 					break;
 				}

packages/backend/src/core/S3Service.ts

@@ -33,7 +33,7 @@ export class S3Service {
 				? false
 				: meta.objectStorageS3ForcePathStyle,
 			httpOptions: {
-				agent: this.httpRequestService.getHttpAgentByUrl(new URL(u), !meta.objectStorageUseProxy),
+				agent: this.httpRequestService.getAgentByUrl(new URL(u), !meta.objectStorageUseProxy),
 			},
 		});
 	}

packages/backend/src/core/activitypub/ApRendererService.ts

@@ -21,11 +21,11 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
 import type { UserKeypair } from '@/models/entities/UserKeypair.js';
 import type { UsersRepository, UserProfilesRepository, NotesRepository, DriveFilesRepository, EmojisRepository, PollsRepository } from '@/models/index.js';
+import { bindThis } from '@/decorators.js';
 import { LdSignatureService } from './LdSignatureService.js';
 import { ApMfmService } from './ApMfmService.js';
 import type { IActivity, IObject } from './type.js';
 import type { IIdentifier } from './models/identifier.js';
-import { bindThis } from '@/decorators.js';
 
 @Injectable()
 export class ApRendererService {

packages/backend/src/core/activitypub/ApRequestService.ts

@@ -5,7 +5,7 @@ import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import type { User } from '@/models/entities/User.js';
 import { UserKeypairStoreService } from '@/core/UserKeypairStoreService.js';
-import { HttpRequestService, UndiciFetcher } from '@/core/HttpRequestService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import { bindThis } from '@/decorators.js';
 import type Logger from '@/logger.js';
@@ -30,7 +30,6 @@ type PrivateKey = {
 
 @Injectable()
 export class ApRequestService {
-	private undiciFetcher: UndiciFetcher;
 	private logger: Logger;
 
 	constructor(
@@ -41,10 +40,8 @@ export class ApRequestService {
 		private httpRequestService: HttpRequestService,
 		private loggerService: LoggerService,
 	) {
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 		this.logger = this.loggerService?.getLogger('ap-request'); // なぜか TypeError: Cannot read properties of undefined (reading 'getLogger') と言われる
-		this.undiciFetcher = new UndiciFetcher(this.httpRequestService.getStandardUndiciFetcherOption({
-			maxRedirections: 0,
-		}), this.logger );
 	}
 
 	@bindThis
@@ -163,14 +160,11 @@ export class ApRequestService {
 			},
 		});
 
-		await this.undiciFetcher.fetch(
-			url,
-			{
-				method: req.request.method,
-				headers: req.request.headers,
-				body,
-			}
-		);
+		await this.httpRequestService.send(url, {
+			method: req.request.method,
+			headers: req.request.headers,
+			body,
+		});
 	}
 
 	/**
@@ -192,13 +186,10 @@ export class ApRequestService {
 			},
 		});
 
-		const res = await this.httpRequestService.fetch(
-			url,
-			{
-				method: req.request.method,
-				headers: req.request.headers,
-			}
-		);
+		const res = await this.httpRequestService.send(url, {
+			method: req.request.method,
+			headers: req.request.headers,
+		});
 
 		return await res.json();
 	}

packages/backend/src/core/activitypub/ApResolverService.ts

@@ -4,22 +4,21 @@ import { InstanceActorService } from '@/core/InstanceActorService.js';
 import type { NotesRepository, PollsRepository, NoteReactionsRepository, UsersRepository } from '@/models/index.js';
 import type { Config } from '@/config.js';
 import { MetaService } from '@/core/MetaService.js';
-import { HttpRequestService, UndiciFetcher } from '@/core/HttpRequestService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
 import { DI } from '@/di-symbols.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
+import { LoggerService } from '@/core/LoggerService.js';
+import type Logger from '@/logger.js';
 import { isCollectionOrOrderedCollection } from './type.js';
 import { ApDbResolverService } from './ApDbResolverService.js';
 import { ApRendererService } from './ApRendererService.js';
 import { ApRequestService } from './ApRequestService.js';
-import { LoggerService } from '@/core/LoggerService.js';
 import type { IObject, ICollection, IOrderedCollection } from './type.js';
-import type Logger from '@/logger.js';
 
 export class Resolver {
 	private history: Set<string>;
 	private user?: ILocalUser;
-	private undiciFetcher: UndiciFetcher;
 	private logger: Logger;
 
 	constructor(
@@ -39,10 +38,8 @@ export class Resolver {
 		private recursionLimit = 100,
 	) {
 		this.history = new Set();
-		this.logger = this.loggerService?.getLogger('ap-resolve');  // なぜか TypeError: Cannot read properties of undefined (reading 'getLogger') と言われる
-		this.undiciFetcher = new UndiciFetcher(this.httpRequestService.getStandardUndiciFetcherOption({
-			maxRedirections: 0,
-		}), this.logger);
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		this.logger = this.loggerService?.getLogger('ap-resolve'); // なぜか TypeError: Cannot read properties of undefined (reading 'getLogger') と言われる
 	}
 
 	@bindThis
@@ -106,7 +103,7 @@ export class Resolver {
 
 		const object = (this.user
 			? await this.apRequestService.signedGet(value, this.user) as IObject
-			: await this.undiciFetcher.getJson<IObject>(value, 'application/activity+json, application/ld+json'));
+			: await this.httpRequestService.getJson(value, 'application/activity+json, application/ld+json')) as IObject;
 
 		if (object == null || (
 			Array.isArray(object['@context']) ?

packages/backend/src/core/activitypub/LdSignatureService.ts

@@ -9,7 +9,7 @@ import { CONTEXTS } from './misc/contexts.js';
 class LdSignature {
 	public debug = false;
 	public preLoad = true;
-	public loderTimeout = 10 * 1000;
+	public loderTimeout = 5000;
 
 	constructor(
 		private httpRequestService: HttpRequestService,
@@ -115,19 +115,12 @@ class LdSignature {
 
 	@bindThis
 	private async fetchDocument(url: string) {
-		const json = await this.httpRequestService.fetch(
-			url,
-			{
-				headers: {
-					Accept: 'application/ld+json, application/json',
-				},
-				// TODO
-				//timeout: this.loderTimeout,
+		const json = await this.httpRequestService.send(url, {
+			headers: {
+				Accept: 'application/ld+json, application/json',
 			},
-			{
-				noOkError: true,
-			}
-		).then(res => {
+			timeout: this.loderTimeout,
+		}, { throwErrorWhenResponseNotOk: false }).then(res => {
 			if (!res.ok) {
 				throw `${res.status} ${res.statusText}`;
 			} else {

packages/backend/src/core/activitypub/models/ApPersonService.ts

@@ -566,22 +566,22 @@ export class ApPersonService implements OnModuleInit {
 
 		this.logger.info(`Updating the featured: ${user.uri}`);
 
-		if (resolver == null) resolver = this.apResolverService.createResolver();
+		const _resolver = resolver ?? this.apResolverService.createResolver();
 
 		// Resolve to (Ordered)Collection Object
-		const collection = await resolver.resolveCollection(user.featured);
+		const collection = await _resolver.resolveCollection(user.featured);
 		if (!isCollectionOrOrderedCollection(collection)) throw new Error('Object is not Collection or OrderedCollection');
 
 		// Resolve to Object(may be Note) arrays
 		const unresolvedItems = isCollection(collection) ? collection.items : collection.orderedItems;
-		const items = await Promise.all(toArray(unresolvedItems).map(x => resolver.resolve(x)));
+		const items = await Promise.all(toArray(unresolvedItems).map(x => _resolver.resolve(x)));
 
 		// Resolve and regist Notes
 		const limit = promiseLimit<Note | null>(2);
 		const featuredNotes = await Promise.all(items
 			.filter(item => getApType(item) === 'Note')	// TODO: Noteでなくてもいいかも
 			.slice(0, 5)
-			.map(item => limit(() => this.apNoteService.resolveNote(item, resolver))));
+			.map(item => limit(() => this.apNoteService.resolveNote(item, _resolver))));
 
 		await this.db.transaction(async transactionalEntityManager => {
 			await transactionalEntityManager.delete(UserNotePining, { userId: user.id });

packages/backend/src/core/entities/EmojiEntityService.ts

@@ -22,8 +22,10 @@ export class EmojiEntityService {
 	@bindThis
 	public async pack(
 		src: Emoji['id'] | Emoji,
-		opts: { omitHost?: boolean; omitId?: boolean; withUrl?: boolean; } = {},
+		opts: { omitHost?: boolean; omitId?: boolean; withUrl?: boolean; } = { omitHost: true, omitId: true, withUrl: true },
 	): Promise<Packed<'Emoji'>> {
+		opts = { omitHost: true, omitId: true, withUrl: true, ...opts }
+
 		const emoji = typeof src === 'object' ? src : await this.emojisRepository.findOneByOrFail({ id: src });
 
 		return {
@@ -32,8 +34,8 @@ export class EmojiEntityService {
 			name: emoji.name,
 			category: emoji.category,
 			host: opts.omitHost ? undefined : emoji.host,
-			// ?? emoji.originalUrl してるのは後方互換性のため
-			url: opts.withUrl ? (emoji.publicUrl ?? emoji.originalUrl) : undefined,
+			// || emoji.originalUrl してるのは後方互換性のため（publicUrlはstringなので??はだめ）
+			url: opts.withUrl ? (emoji.publicUrl || emoji.originalUrl) : undefined,
 		};
 	}
 

packages/backend/src/core/entities/NoteEntityService.ts

@@ -282,7 +282,9 @@ export class NoteEntityService implements OnModuleInit {
 				: await this.channelsRepository.findOneBy({ id: note.channelId })
 			: null;
 
-		const reactionEmojiNames = Object.keys(note.reactions).filter(x => x.startsWith(':')).map(x => this.reactionService.decodeReaction(x).reaction).map(x => x.replace(/:/g, ''));
+		const reactionEmojiNames = Object.keys(note.reactions)
+			.filter(x => x.startsWith(':') && x.includes('@') && !x.includes('@.')) // リモートカスタム絵文字のみ
+			.map(x => this.reactionService.decodeReaction(x).reaction.replaceAll(':', ''));
 
 		const packed: Packed<'Note'> = await awaitAll({
 			id: note.id,
@@ -299,6 +301,8 @@ export class NoteEntityService implements OnModuleInit {
 			renoteCount: note.renoteCount,
 			repliesCount: note.repliesCount,
 			reactions: this.reactionService.convertLegacyReactions(note.reactions),
+			reactionEmojis: this.customEmojiService.populateEmojis(reactionEmojiNames, host),
+			emojis: host != null ? this.customEmojiService.populateEmojis(note.emojis, host) : undefined,
 			tags: note.tags.length > 0 ? note.tags : undefined,
 			fileIds: note.fileIds,
 			files: this.driveFileEntityService.packMany(note.fileIds),
@@ -384,6 +388,8 @@ export class NoteEntityService implements OnModuleInit {
 			}
 		}
 
+		await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
+
 		return await Promise.all(notes.map(n => this.pack(n, me, {
 			...options,
 			_hint_: {

packages/backend/src/core/entities/NotificationEntityService.ts

@@ -146,6 +146,8 @@ export class NotificationEntityService implements OnModuleInit {
 			myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) ?? null);
 		}
 
+		await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
+
 		return await Promise.all(notifications.map(x => this.pack(x, {
 			_hintForEachNotes_: {
 				myReactions: myReactionsMap,

packages/backend/src/core/entities/UserEntityService.ts

@@ -413,6 +413,7 @@ export class UserEntityService implements OnModuleInit {
 				faviconUrl: instance.faviconUrl,
 				themeColor: instance.themeColor,
 			} : undefined) : undefined,
+			emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
 			onlineStatus: this.getOnlineStatus(user),
 
 			...(opts.detail ? {
@@ -496,10 +497,10 @@ export class UserEntityService implements OnModuleInit {
 				showTimelineReplies: user.showTimelineReplies ?? falsy,
 				achievements: profile!.achievements,
 				loggedInDays: profile!.loggedInDates.length,
+				policies: this.roleService.getUserPolicies(user.id),
 			} : {}),
 
 			...(opts.includeSecrets ? {
-				policies: this.roleService.getUserPolicies(user.id),
 				email: profile!.email,
 				emailVerified: profile!.emailVerified,
 				securityKeysList: profile!.twoFactorEnabled

packages/backend/src/logger.ts

@@ -68,6 +68,7 @@ export default class Logger {
 		if (envOption.withLogTime) log = chalk.gray(time) + ' ' + log;
 
 		console.log(important ? chalk.bold(log) : log);
+		if (level === 'error' && data) console.log(data);
 
 		if (store) {
 			if (this.syslogClient) {

packages/backend/src/misc/dev-null.ts

@@ -0,0 +1,11 @@
+import { Writable, WritableOptions } from "node:stream";
+
+export class DevNull extends Writable implements NodeJS.WritableStream {
+    constructor(opts?: WritableOptions) {
+        super(opts);
+    }
+
+    _write (chunk: any, encoding: BufferEncoding, cb: (err?: Error | null) => void) {
+        setImmediate(cb);
+    }
+}

packages/backend/src/misc/get-ip-hash.ts

@@ -1,9 +1,14 @@
 import IPCIDR from 'ip-cidr';
 
 export function getIpHash(ip: string) {
-	// because a single person may control many IPv6 addresses,
-	// only a /64 subnet prefix of any IP will be taken into account.
-	// (this means for IPv4 the entire address is used)
-	const prefix = IPCIDR.createAddress(ip).mask(64);
-	return 'ip-' + BigInt('0b' + prefix).toString(36);
+	try {
+		// because a single person may control many IPv6 addresses,
+		// only a /64 subnet prefix of any IP will be taken into account.
+		// (this means for IPv4 the entire address is used)
+		const prefix = IPCIDR.createAddress(ip).mask(64);
+		return 'ip-' + BigInt('0b' + prefix).toString(36);
+	} catch (e) {
+		const prefix = IPCIDR.createAddress(ip.replace(/:[0-9]+$/, '')).mask(64);
+		return 'ip-' + BigInt('0b' + prefix).toString(36);
+	}
 }

packages/backend/src/queue/processors/AggregateRetentionProcessorService.ts

@@ -57,8 +57,15 @@ export class AggregateRetentionProcessorService {
 			usersCount: targetUserIds.length,
 		});
 
+		// 今日活動したユーザーを全て取得
+		const activeUsers = await this.usersRepository.findBy({
+			host: IsNull(),
+			lastActiveDate: MoreThan(new Date(Date.now() - (1000 * 60 * 60 * 24))),
+		});
+		const activeUsersIds = activeUsers.map(u => u.id);
+
 		for (const record of pastRecords) {
-			const retention = record.userIds.filter(id => targetUserIds.includes(id)).length;
+			const retention = record.userIds.filter(id => activeUsersIds.includes(id)).length;
 
 			const data = deepClone(record.data);
 			data[dateKey] = retention;

packages/backend/src/queue/processors/WebhookDeliverProcessorService.ts

@@ -6,10 +6,10 @@ import type { Config } from '@/config.js';
 import type Logger from '@/logger.js';
 import { HttpRequestService } from '@/core/HttpRequestService.js';
 import { StatusError } from '@/misc/status-error.js';
+import { bindThis } from '@/decorators.js';
 import { QueueLoggerService } from '../QueueLoggerService.js';
 import type Bull from 'bull';
 import type { WebhookDeliverJobData } from '../types.js';
-import { bindThis } from '@/decorators.js';
 
 @Injectable()
 export class WebhookDeliverProcessorService {
@@ -33,26 +33,23 @@ export class WebhookDeliverProcessorService {
 		try {
 			this.logger.debug(`delivering ${job.data.webhookId}`);
 	
-			const res = await this.httpRequestService.fetch(
-				job.data.to,
-				{
-					method: 'POST',
-					headers: {
-						'User-Agent': 'Misskey-Hooks',
-						'X-Misskey-Host': this.config.host,
-						'X-Misskey-Hook-Id': job.data.webhookId,
-						'X-Misskey-Hook-Secret': job.data.secret,
-					},
-					body: JSON.stringify({
-						hookId: job.data.webhookId,
-						userId: job.data.userId,
-						eventId: job.data.eventId,
-						createdAt: job.data.createdAt,
-						type: job.data.type,
-						body: job.data.content,
-					}),
-				}
-			);
+			const res = await this.httpRequestService.send(job.data.to, {
+				method: 'POST',
+				headers: {
+					'User-Agent': 'Misskey-Hooks',
+					'X-Misskey-Host': this.config.host,
+					'X-Misskey-Hook-Id': job.data.webhookId,
+					'X-Misskey-Hook-Secret': job.data.secret,
+				},
+				body: JSON.stringify({
+					hookId: job.data.webhookId,
+					userId: job.data.userId,
+					eventId: job.data.eventId,
+					createdAt: job.data.createdAt,
+					type: job.data.type,
+					body: job.data.content,
+				}),
+			});
 	
 			this.webhooksRepository.update({ id: job.data.webhookId }, {
 				latestSentAt: new Date(),

packages/backend/src/server/FileServerService.ts

@@ -5,14 +5,14 @@ import { Inject, Injectable } from '@nestjs/common';
 import fastifyStatic from '@fastify/static';
 import rename from 'rename';
 import type { Config } from '@/config.js';
-import type { DriveFilesRepository } from '@/models/index.js';
+import type { DriveFile, DriveFilesRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
 import { createTemp } from '@/misc/create-temp.js';
 import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
 import { StatusError } from '@/misc/status-error.js';
 import type Logger from '@/logger.js';
 import { DownloadService } from '@/core/DownloadService.js';
-import { ImageProcessingService } from '@/core/ImageProcessingService.js';
+import { IImageStreamable, ImageProcessingService, webpDefault } from '@/core/ImageProcessingService.js';
 import { VideoProcessingService } from '@/core/VideoProcessingService.js';
 import { InternalStorageService } from '@/core/InternalStorageService.js';
 import { contentDisposition } from '@/misc/content-disposition.js';
@@ -20,6 +20,8 @@ import { FileInfoService } from '@/core/FileInfoService.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import { bindThis } from '@/decorators.js';
 import type { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions } from 'fastify';
+import { isMimeImage } from '@/misc/is-mime-image.js';
+import sharp from 'sharp';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -57,7 +59,7 @@ export class FileServerService {
 			reply.header('Cache-Control', 'max-age=300');
 		};
 	}
-	
+
 	@bindThis
 	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
 		fastify.addHook('onRequest', (request, reply, done) => {
@@ -70,23 +72,309 @@ export class FileServerService {
 			serve: false,
 		});
 
-		fastify.get('/app-default.jpg', (request, reply) => {
+		fastify.get('/files/app-default.jpg', (request, reply) => {
 			const file = fs.createReadStream(`${_dirname}/assets/dummy.png`);
 			reply.header('Content-Type', 'image/jpeg');
 			reply.header('Cache-Control', 'max-age=31536000, immutable');
 			return reply.send(file);
 		});
 
-		fastify.get<{ Params: { key: string; } }>('/:key', async (request, reply) => await this.sendDriveFile(request, reply));
-		fastify.get<{ Params: { key: string; } }>('/:key/*', async (request, reply) => await this.sendDriveFile(request, reply));
+		fastify.get<{ Params: { key: string; } }>('/files/:key', async (request, reply) => {
+			return await this.sendDriveFile(request, reply)
+				.catch(err => this.errorHandler(request, reply, err));
+		});
+		fastify.get<{ Params: { key: string; } }>('/files/:key/*', async (request, reply) => {
+			return await this.sendDriveFile(request, reply)
+				.catch(err => this.errorHandler(request, reply, err));
+		});
+
+		fastify.get<{
+			Params: { url: string; };
+			Querystring: { url?: string; };
+		}>('/proxy/:url*', async (request, reply) => {
+			return await this.proxyHandler(request, reply)
+				.catch(err => this.errorHandler(request, reply, err));
+		});
 
 		done();
 	}
 
+	@bindThis
+	private async errorHandler(request: FastifyRequest<{ Params?: { [x: string]: any }; Querystring?: { [x: string]: any }; }>, reply: FastifyReply, err?: any) {
+		this.logger.error(`${err}`);
+
+		reply.header('Cache-Control', 'max-age=300');
+
+		if (request.query && 'fallback' in request.query) {
+			return reply.sendFile('/dummy.png', assets);
+		}
+
+		if (err instanceof StatusError && (err.statusCode === 302 || err.isClientError)) {
+			reply.code(err.statusCode);
+			return;
+		}
+
+		reply.code(500);
+		return;
+	}
+
 	@bindThis
 	private async sendDriveFile(request: FastifyRequest<{ Params: { key: string; } }>, reply: FastifyReply) {
 		const key = request.params.key;
+		const file = await this.getFileFromKey(key).then();
 
+		if (file === '404') {
+			reply.code(404);
+			reply.header('Cache-Control', 'max-age=86400');
+			return reply.sendFile('/dummy.png', assets);
+		}
+
+		if (file === '204') {
+			reply.code(204);
+			reply.header('Cache-Control', 'max-age=86400');
+			return;
+		}
+
+		try {
+			if (file.state === 'remote') {
+				const convertFile = async () => {
+					if (file.fileRole === 'thumbnail') {
+						if (['image/jpeg', 'image/webp', 'image/avif', 'image/png', 'image/svg+xml'].includes(file.mime)) {
+							return this.imageProcessingService.convertToWebpStream(
+								file.path,
+								498,
+								280
+							);
+						} else if (file.mime.startsWith('video/')) {
+							return await this.videoProcessingService.generateVideoThumbnail(file.path);
+						}
+					}
+
+					if (file.fileRole === 'webpublic') {
+						if (['image/svg+xml'].includes(file.mime)) {
+							return this.imageProcessingService.convertToWebpStream(
+								file.path,
+								2048,
+								2048,
+								{ ...webpDefault, lossless: true }
+							)
+						}
+					}
+
+					return {
+						data: fs.createReadStream(file.path),
+						ext: file.ext,
+						type: file.mime,
+					};
+				};
+
+				const image = await convertFile();
+
+				if ('pipe' in image.data && typeof image.data.pipe === 'function') {
+					// image.dataがstreamなら、stream終了後にcleanup
+					image.data.on('end', file.cleanup);
+					image.data.on('close', file.cleanup);
+				} else {
+					// image.dataがstreamでないなら直ちにcleanup
+					file.cleanup();
+				}
+
+				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
+				reply.header('Cache-Control', 'max-age=31536000, immutable');
+				return image.data;
+			}
+
+			if (file.fileRole !== 'original') {
+				const filename = rename(file.file.name, {
+					suffix: file.fileRole === 'thumbnail' ? '-thumb' : '-web',
+					extname: file.ext ? `.${file.ext}` : undefined,
+				}).toString();
+
+				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.mime) ? file.mime : 'application/octet-stream');
+				reply.header('Cache-Control', 'max-age=31536000, immutable');
+				reply.header('Content-Disposition', contentDisposition('inline', filename));
+				return fs.createReadStream(file.path);
+			} else {
+				const stream = fs.createReadStream(file.path);
+				stream.on('error', this.commonReadableHandlerGenerator(reply));
+				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.file.type) ? file.file.type : 'application/octet-stream');
+				reply.header('Cache-Control', 'max-age=31536000, immutable');
+				reply.header('Content-Disposition', contentDisposition('inline', file.file.name));
+				return stream;
+			}
+		} catch (e) {
+			if ('cleanup' in file) file.cleanup();
+			throw e;
+		}
+	}
+
+	@bindThis
+	private async proxyHandler(request: FastifyRequest<{ Params: { url: string; }; Querystring: { url?: string; }; }>, reply: FastifyReply) {
+		const url = 'url' in request.query ? request.query.url : 'https://' + request.params.url;
+
+		if (typeof url !== 'string') {
+			reply.code(400);
+			return;
+		}
+
+		// Create temp file
+		const file = await this.getStreamAndTypeFromUrl(url);
+		if (file === '404') {
+			reply.code(404);
+			reply.header('Cache-Control', 'max-age=86400');
+			return reply.sendFile('/dummy.png', assets);
+		}
+
+		if (file === '204') {
+			reply.code(204);
+			reply.header('Cache-Control', 'max-age=86400');
+			return;
+		}
+
+		try {
+			const isConvertibleImage = isMimeImage(file.mime, 'sharp-convertible-image');
+			const isAnimationConvertibleImage = isMimeImage(file.mime, 'sharp-animation-convertible-image');
+
+			let image: IImageStreamable | null = null;
+			if ('emoji' in request.query && isConvertibleImage) {
+				if (!isAnimationConvertibleImage && !('static' in request.query)) {
+					image = {
+						data: fs.createReadStream(file.path),
+						ext: file.ext,
+						type: file.mime,
+					};
+				} else {
+					const data = sharp(file.path, { animated: !('static' in request.query) })
+							.resize({
+								height: 128,
+								withoutEnlargement: true,
+							})
+							.webp(webpDefault);
+
+					image = {
+						data,
+						ext: 'webp',
+						type: 'image/webp',
+					};
+				}
+			} else if ('static' in request.query && isConvertibleImage) {
+				image = this.imageProcessingService.convertToWebpStream(file.path, 498, 280);
+			} else if ('preview' in request.query && isConvertibleImage) {
+				image = this.imageProcessingService.convertToWebpStream(file.path, 200, 200);
+			} else if ('badge' in request.query) {
+				if (!isConvertibleImage) {
+					// 画像でないなら404でお茶を濁す
+					throw new StatusError('Unexpected mime', 404);
+				}
+
+				const mask = sharp(file.path)
+					.resize(96, 96, {
+						fit: 'inside',
+						withoutEnlargement: false,
+					})
+					.greyscale()
+					.normalise()
+					.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
+					.flatten({ background: '#000' })
+					.toColorspace('b-w');
+	
+				const stats = await mask.clone().stats();
+	
+				if (stats.entropy < 0.1) {
+					// エントロピーがあまりない場合は404にする
+					throw new StatusError('Skip to provide badge', 404);
+				}
+	
+				const data = sharp({
+					create: { width: 96, height: 96, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+				})
+					.pipelineColorspace('b-w')
+					.boolean(await mask.png().toBuffer(), 'eor');
+	
+				image = {
+					data: await data.png().toBuffer(),
+					ext: 'png',
+					type: 'image/png',
+				};
+			} else if (file.mime === 'image/svg+xml') {
+				image = this.imageProcessingService.convertToWebpStream(file.path, 2048, 2048);
+			} else if (!file.mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(file.mime)) {
+				throw new StatusError('Rejected type', 403, 'Rejected type');
+			}
+
+			if (!image) {
+				image = {
+					data: fs.createReadStream(file.path),
+					ext: file.ext,
+					type: file.mime,
+				};
+			}
+
+			if ('cleanup' in file) {
+				if ('pipe' in image.data && typeof image.data.pipe === 'function') {
+					// image.dataがstreamなら、stream終了後にcleanup
+					image.data.on('end', file.cleanup);
+					image.data.on('close', file.cleanup);
+				} else {
+					// image.dataがstreamでないなら直ちにcleanup
+					file.cleanup();
+				}
+			}
+
+			reply.header('Content-Type', image.type);
+			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			return image.data;
+		} catch (e) {
+			if ('cleanup' in file) file.cleanup();
+			throw e;
+		}
+	}
+
+	@bindThis
+	private async getStreamAndTypeFromUrl(url: string): Promise<
+		{ state: 'remote'; fileRole?: 'thumbnail' | 'webpublic' | 'original'; file?: DriveFile; mime: string; ext: string | null; path: string; cleanup: () => void; }
+		| { state: 'stored_internal'; fileRole: 'thumbnail' | 'webpublic' | 'original'; file: DriveFile; mime: string; ext: string | null; path: string; }
+		| '404'
+		| '204'
+	> {
+		if (url.startsWith(`${this.config.url}/files/`)) {
+			const key = url.replace(`${this.config.url}/files/`, '').split('/').shift();
+			if (!key) throw new StatusError('Invalid File Key', 400, 'Invalid File Key');
+
+			return await this.getFileFromKey(key);
+		}
+
+		return await this.downloadAndDetectTypeFromUrl(url);
+	}
+
+	@bindThis
+	private async downloadAndDetectTypeFromUrl(url: string): Promise<
+		{ state: 'remote' ; mime: string; ext: string | null; path: string; cleanup: () => void; }
+	> {
+		const [path, cleanup] = await createTemp();
+		try {
+			await this.downloadService.downloadUrl(url, path);
+
+			const { mime, ext } = await this.fileInfoService.detectType(path);
+	
+			return {
+				state: 'remote',
+				mime, ext,
+				path, cleanup,
+			}
+		} catch (e) {
+			cleanup();
+			throw e;
+		}
+	}
+
+	@bindThis
+	private async getFileFromKey(key: string): Promise<
+		{ state: 'remote'; fileRole: 'thumbnail' | 'webpublic' | 'original'; file: DriveFile; mime: string; ext: string | null; path: string; cleanup: () => void; }
+		| { state: 'stored_internal'; fileRole: 'thumbnail' | 'webpublic' | 'original'; file: DriveFile; mime: string; ext: string | null; path: string; }
+		| '404'
+		| '204'
+	> {
 		// Fetch drive file
 		const file = await this.driveFilesRepository.createQueryBuilder('file')
 			.where('file.accessKey = :accessKey', { accessKey: key })
@@ -94,89 +382,41 @@ export class FileServerService {
 			.orWhere('file.webpublicAccessKey = :webpublicAccessKey', { webpublicAccessKey: key })
 			.getOne();
 
-		if (file == null) {
-			reply.code(404);
-			reply.header('Cache-Control', 'max-age=86400');
-			return reply.sendFile('/dummy.png', assets);
-		}
+		if (file == null) return '404';
 
 		const isThumbnail = file.thumbnailAccessKey === key;
 		const isWebpublic = file.webpublicAccessKey === key;
 
 		if (!file.storedInternal) {
-			if (file.isLink && file.uri) {	// 期限切れリモートファイル
-				const [path, cleanup] = await createTemp();
-
-				try {
-					await this.downloadService.downloadUrl(file.uri, path);
-
-					const { mime, ext } = await this.fileInfoService.detectType(path);
-
-					const convertFile = async () => {
-						if (isThumbnail) {
-							if (['image/jpeg', 'image/webp', 'image/avif', 'image/png', 'image/svg+xml'].includes(mime)) {
-								return await this.imageProcessingService.convertToWebp(path, 498, 280);
-							} else if (mime.startsWith('video/')) {
-								return await this.videoProcessingService.generateVideoThumbnail(path);
-							}
-						}
-
-						if (isWebpublic) {
-							if (['image/svg+xml'].includes(mime)) {
-								return await this.imageProcessingService.convertToPng(path, 2048, 2048);
-							}
-						}
-
-						return {
-							data: fs.readFileSync(path),
-							ext,
-							type: mime,
-						};
-					};
-
-					const image = await convertFile();
-					reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
-					reply.header('Cache-Control', 'max-age=31536000, immutable');
-					return image.data;
-				} catch (err) {
-					this.logger.error(`${err}`);
-
-					if (err instanceof StatusError && err.isClientError) {
-						reply.code(err.statusCode);
-						reply.header('Cache-Control', 'max-age=86400');
-					} else {
-						reply.code(500);
-						reply.header('Cache-Control', 'max-age=300');
-					}
-				} finally {
-					cleanup();
-				}
-				return;
+			if (!(file.isLink && file.uri)) return '204';
+			const result = await this.downloadAndDetectTypeFromUrl(file.uri);
+			return {
+				...result,
+				fileRole: isThumbnail ? 'thumbnail' : isWebpublic ? 'webpublic' : 'original',
+				file,
 			}
-
-			reply.code(204);
-			reply.header('Cache-Control', 'max-age=86400');
-			return;
 		}
 
-		if (isThumbnail || isWebpublic) {
-			const { mime, ext } = await this.fileInfoService.detectType(this.internalStorageService.resolvePath(key));
-			const filename = rename(file.name, {
-				suffix: isThumbnail ? '-thumb' : '-web',
-				extname: ext ? `.${ext}` : undefined,
-			}).toString();
+		const path = this.internalStorageService.resolvePath(key);
 
-			reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(mime) ? mime : 'application/octet-stream');
-			reply.header('Cache-Control', 'max-age=31536000, immutable');
-			reply.header('Content-Disposition', contentDisposition('inline', filename));
-			return this.internalStorageService.read(key);
-		} else {
-			const readable = this.internalStorageService.read(file.accessKey!);
-			readable.on('error', this.commonReadableHandlerGenerator(reply));
-			reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.type) ? file.type : 'application/octet-stream');
-			reply.header('Cache-Control', 'max-age=31536000, immutable');
-			reply.header('Content-Disposition', contentDisposition('inline', file.name));
-			return readable;
+		if (isThumbnail || isWebpublic) {
+			const { mime, ext } = await this.fileInfoService.detectType(path);
+			return {
+				state: 'stored_internal',
+				fileRole: isThumbnail ? 'thumbnail' : 'webpublic',
+				file,
+				mime, ext,
+				path,
+			};
+		}
+
+		return {
+			state: 'stored_internal',
+			fileRole: 'original',
+			file,
+			mime: file.type,
+			ext: null,
+			path,
 		}
 	}
 }

packages/backend/src/server/MediaProxyServerService.ts

@@ -1,177 +0,0 @@
-import * as fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import { Inject, Injectable } from '@nestjs/common';
-import sharp from 'sharp';
-import fastifyStatic from '@fastify/static';
-import { DI } from '@/di-symbols.js';
-import type { Config } from '@/config.js';
-import { isMimeImage } from '@/misc/is-mime-image.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { DownloadService } from '@/core/DownloadService.js';
-import { ImageProcessingService, webpDefault } from '@/core/ImageProcessingService.js';
-import type { IImage } from '@/core/ImageProcessingService.js';
-import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
-import { StatusError } from '@/misc/status-error.js';
-import type Logger from '@/logger.js';
-import { FileInfoService } from '@/core/FileInfoService.js';
-import { LoggerService } from '@/core/LoggerService.js';
-import { bindThis } from '@/decorators.js';
-import type { FastifyInstance, FastifyPluginOptions, FastifyReply, FastifyRequest } from 'fastify';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-const assets = `${_dirname}/../../src/server/assets/`;
-
-@Injectable()
-export class MediaProxyServerService {
-	private logger: Logger;
-
-	constructor(
-		@Inject(DI.config)
-		private config: Config,
-
-		private fileInfoService: FileInfoService,
-		private downloadService: DownloadService,
-		private imageProcessingService: ImageProcessingService,
-		private loggerService: LoggerService,
-	) {
-		this.logger = this.loggerService.getLogger('server', 'gray', false);
-
-		//this.createServer = this.createServer.bind(this);
-	}
-
-	@bindThis
-	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
-		fastify.addHook('onRequest', (request, reply, done) => {
-			reply.header('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
-			done();
-		});
-
-		fastify.register(fastifyStatic, {
-			root: _dirname,
-			serve: false,
-		});
-
-		fastify.get<{
-			Params: { url: string; };
-			Querystring: { url?: string; };
-		}>('/:url*', async (request, reply) => await this.handler(request, reply));
-
-		done();
-	}
-
-	@bindThis
-	private async handler(request: FastifyRequest<{ Params: { url: string; }; Querystring: { url?: string; }; }>, reply: FastifyReply) {
-		const url = 'url' in request.query ? request.query.url : 'https://' + request.params.url;
-	
-		if (typeof url !== 'string') {
-			reply.code(400);
-			return;
-		}
-	
-		// Create temp file
-		const [path, cleanup] = await createTemp();
-	
-		try {
-			await this.downloadService.downloadUrl(url, path);
-	
-			const { mime, ext } = await this.fileInfoService.detectType(path);
-			const isConvertibleImage = isMimeImage(mime, 'sharp-convertible-image');
-			const isAnimationConvertibleImage = isMimeImage(mime, 'sharp-animation-convertible-image');
-	
-			let image: IImage;
-			if ('emoji' in request.query && isConvertibleImage) {
-				if (!isAnimationConvertibleImage && !('static' in request.query)) {
-					image = {
-						data: fs.readFileSync(path),
-						ext,
-						type: mime,
-					};
-				} else {
-					const data = await sharp(path, { animated: !('static' in request.query) })
-					.resize({
-						height: 128,
-						withoutEnlargement: true,
-					})
-					.webp(webpDefault)
-					.toBuffer();
-
-					image = {
-						data,
-						ext: 'webp',
-						type: 'image/webp',
-					};
-				}
-			} else if ('static' in request.query && isConvertibleImage) {
-				image = await this.imageProcessingService.convertToWebp(path, 498, 280);
-			} else if ('preview' in request.query && isConvertibleImage) {
-				image = await this.imageProcessingService.convertToWebp(path, 200, 200);
-			} else if ('badge' in request.query) {
-				if (!isConvertibleImage) {
-					// 画像でないなら404でお茶を濁す
-					throw new StatusError('Unexpected mime', 404);
-				}
-
-				const mask = sharp(path)
-					.resize(96, 96, {
-						fit: 'inside',
-						withoutEnlargement: false,
-					})
-					.greyscale()
-					.normalise()
-					.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
-					.flatten({ background: '#000' })
-					.toColorspace('b-w');
-	
-				const stats = await mask.clone().stats();
-	
-				if (stats.entropy < 0.1) {
-					// エントロピーがあまりない場合は404にする
-					throw new StatusError('Skip to provide badge', 404);
-				}
-	
-				const data = sharp({
-					create: { width: 96, height: 96, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
-				})
-					.pipelineColorspace('b-w')
-					.boolean(await mask.png().toBuffer(), 'eor');
-	
-				image = {
-					data: await data.png().toBuffer(),
-					ext: 'png',
-					type: 'image/png',
-				};
-			} else if (mime === 'image/svg+xml') {
-				image = await this.imageProcessingService.convertToWebp(path, 2048, 2048, webpDefault);
-			} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
-				throw new StatusError('Rejected type', 403, 'Rejected type');
-			} else {
-				image = {
-					data: fs.readFileSync(path),
-					ext,
-					type: mime,
-				};
-			}
-	
-			reply.header('Content-Type', image.type);
-			reply.header('Cache-Control', 'max-age=31536000, immutable');
-			return image.data;
-		} catch (err) {
-			this.logger.error(`${err}`);
-
-			if ('fallback' in request.query) {
-				return reply.sendFile('/dummy.png', assets);
-			}
-	
-			if (err instanceof StatusError && (err.statusCode === 302 || err.isClientError)) {
-				reply.code(err.statusCode);
-			} else {
-				reply.code(500);
-			}
-		} finally {
-			cleanup();
-		}
-	}
-}

packages/backend/src/server/ServerModule.ts

@@ -3,7 +3,6 @@ import { EndpointsModule } from '@/server/api/EndpointsModule.js';
 import { CoreModule } from '@/core/CoreModule.js';
 import { ApiCallService } from './api/ApiCallService.js';
 import { FileServerService } from './FileServerService.js';
-import { MediaProxyServerService } from './MediaProxyServerService.js';
 import { NodeinfoServerService } from './NodeinfoServerService.js';
 import { ServerService } from './ServerService.js';
 import { WellKnownServerService } from './WellKnownServerService.js';
@@ -51,7 +50,6 @@ import { UserListChannelService } from './api/stream/channels/user-list.js';
 		UrlPreviewService,
 		ActivityPubServerService,
 		FileServerService,
-		MediaProxyServerService,
 		NodeinfoServerService,
 		ServerService,
 		WellKnownServerService,

packages/backend/src/server/ServerService.ts

@@ -20,7 +20,6 @@ import { NodeinfoServerService } from './NodeinfoServerService.js';
 import { ApiServerService } from './api/ApiServerService.js';
 import { StreamingApiServerService } from './api/StreamingApiServerService.js';
 import { WellKnownServerService } from './WellKnownServerService.js';
-import { MediaProxyServerService } from './MediaProxyServerService.js';
 import { FileServerService } from './FileServerService.js';
 import { ClientServerService } from './web/ClientServerService.js';
 
@@ -48,7 +47,6 @@ export class ServerService {
 		private wellKnownServerService: WellKnownServerService,
 		private nodeinfoServerService: NodeinfoServerService,
 		private fileServerService: FileServerService,
-		private mediaProxyServerService: MediaProxyServerService,
 		private clientServerService: ClientServerService,
 		private globalEventService: GlobalEventService,
 		private loggerService: LoggerService,
@@ -73,8 +71,7 @@ export class ServerService {
 		}
 
 		fastify.register(this.apiServerService.createServer, { prefix: '/api' });
-		fastify.register(this.fileServerService.createServer, { prefix: '/files' });
-		fastify.register(this.mediaProxyServerService.createServer, { prefix: '/proxy' });
+		fastify.register(this.fileServerService.createServer);
 		fastify.register(this.activityPubServerService.createServer);
 		fastify.register(this.nodeinfoServerService.createServer);
 		fastify.register(this.wellKnownServerService.createServer);

packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts

@@ -3,6 +3,8 @@ import { DataSource, In } from 'typeorm';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { EmojisRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -35,6 +37,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
+
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const emojis = await this.emojisRepository.findBy({
@@ -49,6 +54,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			}
 
 			await this.db.queryResultCache!.remove(['meta_emojis']);
+
+			this.globalEventService.publishBroadcastStream('emojiUpdated', {
+				emojis: await this.emojiEntityService.packMany(ps.ids),
+			});
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/emoji/add.ts

@@ -2,12 +2,10 @@ import { Inject, Injectable } from '@nestjs/common';
 import rndstr from 'rndstr';
 import { DataSource } from 'typeorm';
 import { Endpoint } from '@/server/api/endpoint-base.js';
-import type { DriveFilesRepository, EmojisRepository } from '@/models/index.js';
-import { IdService } from '@/core/IdService.js';
+import type { DriveFilesRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
-import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { CustomEmojiService } from '@/core/CustomEmojiService.js';
 import { ModerationLogService } from '@/core/ModerationLogService.js';
-import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -39,43 +37,26 @@ export const paramDef = {
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> {
 	constructor(
-		@Inject(DI.db)
-		private db: DataSource,
-
 		@Inject(DI.driveFilesRepository)
 		private driveFilesRepository: DriveFilesRepository,
 
-		@Inject(DI.emojisRepository)
-		private emojisRepository: EmojisRepository,
+		private customEmojiService: CustomEmojiService,
 
-		private emojiEntityService: EmojiEntityService,
-		private idService: IdService,
-		private globalEventService: GlobalEventService,
 		private moderationLogService: ModerationLogService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
+			const driveFile = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
 
-			if (file == null) throw new ApiError(meta.errors.noSuchFile);
+			if (driveFile == null) throw new ApiError(meta.errors.noSuchFile);
 
-			const name = file.name.split('.')[0].match(/^[a-z0-9_]+$/) ? file.name.split('.')[0] : `_${rndstr('a-z0-9', 8)}_`;
+			const name = driveFile.name.split('.')[0].match(/^[a-z0-9_]+$/) ? driveFile.name.split('.')[0] : `_${rndstr('a-z0-9', 8)}_`;
 
-			const emoji = await this.emojisRepository.insert({
-				id: this.idService.genId(),
-				updatedAt: new Date(),
-				name: name,
+			const emoji = await this.customEmojiService.add({
+				driveFile,
+				name,
 				category: null,
-				host: null,
 				aliases: [],
-				originalUrl: file.url,
-				publicUrl: file.webpublicUrl ?? file.url,
-				type: file.webpublicType ?? file.type,
-			}).then(x => this.emojisRepository.findOneByOrFail(x.identifiers[0]));
-
-			await this.db.queryResultCache!.remove(['meta_emojis']);
-
-			this.globalEventService.publishBroadcastStream('emojiAdded', {
-				emoji: await this.emojiEntityService.pack(emoji.id),
+				host: null,
 			});
 
 			this.moderationLogService.insertModerationLog(me, 'addEmoji', {

packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts

@@ -4,6 +4,8 @@ import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { EmojisRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
 import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -35,6 +37,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private emojisRepository: EmojisRepository,
 
 		private moderationLogService: ModerationLogService,
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const emojis = await this.emojisRepository.findBy({
@@ -43,13 +47,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 			for (const emoji of emojis) {
 				await this.emojisRepository.delete(emoji.id);
-	
 				await this.db.queryResultCache!.remove(['meta_emojis']);
-	
 				this.moderationLogService.insertModerationLog(me, 'deleteEmoji', {
 					emoji: emoji,
 				});
 			}
+
+			this.globalEventService.publishBroadcastStream('emojiDeleted', {
+				emojis: await this.emojiEntityService.packMany(emojis),
+			});
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/emoji/delete.ts

@@ -5,6 +5,8 @@ import type { EmojisRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
 import { ModerationLogService } from '@/core/ModerationLogService.js';
 import { ApiError } from '../../../error.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -42,6 +44,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private emojisRepository: EmojisRepository,
 
 		private moderationLogService: ModerationLogService,
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const emoji = await this.emojisRepository.findOneBy({ id: ps.id });
@@ -52,6 +56,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 			await this.db.queryResultCache!.remove(['meta_emojis']);
 
+			this.globalEventService.publishBroadcastStream('emojiDeleted', {
+				emojis: [ await this.emojiEntityService.pack(emoji) ],
+			});
+
 			this.moderationLogService.insertModerationLog(me, 'deleteEmoji', {
 				emoji: emoji,
 			});

packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts

@@ -101,7 +101,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				.take(ps.limit)
 				.getMany();
 
-			return this.emojiEntityService.packMany(emojis);
+			return this.emojiEntityService.packMany(emojis, { omitHost: false, omitId: false, withUrl: false });
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/emoji/list.ts

@@ -98,7 +98,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				emojis = await q.take(ps.limit).getMany();
 			}
 
-			return this.emojiEntityService.packMany(emojis);
+			return this.emojiEntityService.packMany(emojis, { omitHost: false, omitId: false, withUrl: false });
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts

@@ -3,6 +3,8 @@ import { DataSource, In } from 'typeorm';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { EmojisRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -35,6 +37,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
+
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const emojis = await this.emojisRepository.findBy({
@@ -49,6 +54,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			}
 
 			await this.db.queryResultCache!.remove(['meta_emojis']);
+		
+			this.globalEventService.publishBroadcastStream('emojiUpdated', {
+				emojis: await this.emojiEntityService.packMany(ps.ids),
+			});
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts

@@ -3,6 +3,8 @@ import { DataSource, In } from 'typeorm';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { EmojisRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -35,6 +37,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
+
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			await this.emojisRepository.update({
@@ -45,6 +50,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			});
 
 			await this.db.queryResultCache!.remove(['meta_emojis']);
+
+			this.globalEventService.publishBroadcastStream('emojiUpdated', {
+				emojis: await this.emojiEntityService.packMany(ps.ids),
+			});
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts

@@ -3,6 +3,8 @@ import { DataSource, In } from 'typeorm';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { EmojisRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -37,6 +39,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
+
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			await this.emojisRepository.update({
@@ -47,6 +52,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			});
 
 			await this.db.queryResultCache!.remove(['meta_emojis']);
+
+			this.globalEventService.publishBroadcastStream('emojiUpdated', {
+				emojis: await this.emojiEntityService.packMany(ps.ids),
+			});
 		});
 	}
 }

packages/backend/src/server/api/endpoints/admin/emoji/update.ts

@@ -4,6 +4,8 @@ import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { EmojisRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -48,6 +50,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
+
+		private emojiEntityService: EmojiEntityService,
+		private globalEventService: GlobalEventService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const emoji = await this.emojisRepository.findOneBy({ id: ps.id });
@@ -62,6 +67,22 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			});
 
 			await this.db.queryResultCache!.remove(['meta_emojis']);
+
+			const updated = await this.emojiEntityService.pack(emoji.id);
+
+			if (emoji.name === ps.name) {
+				this.globalEventService.publishBroadcastStream('emojiUpdated', {
+					emojis: [ updated ],
+				});
+			} else {
+				this.globalEventService.publishBroadcastStream('emojiDeleted', {
+					emojis: [ await this.emojiEntityService.pack(emoji) ],
+				});
+
+				this.globalEventService.publishBroadcastStream('emojiAdded', {
+					emoji: updated,
+				});	
+			}
 		});
 	}
 }

packages/backend/src/server/api/endpoints/emojis.ts

@@ -10,6 +10,8 @@ export const meta = {
 	tags: ['meta'],
 
 	requireCredential: false,
+	allowGet: true,
+	cacheSec: 3600,
 
 	res: {
 		type: 'object',

packages/backend/src/server/api/endpoints/fetch-rss.ts

@@ -33,16 +33,13 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private httpRequestService: HttpRequestService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const res = await this.httpRequestService.fetch(
-				ps.url,
-				{
-					method: 'GET',
-					headers: {
-						Accept: 'application/rss+xml, */*',
-					},
-					// timeout: 5000,
-				}
-			);
+			const res = await this.httpRequestService.send(ps.url, {
+				method: 'GET',
+				headers: {
+					Accept: 'application/rss+xml, */*',
+				},
+				timeout: 5000,
+			});
 
 			const text = await res.text();
 

packages/backend/src/server/api/endpoints/notes/translate.ts

@@ -7,8 +7,8 @@ import { DI } from '@/di-symbols.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { MetaService } from '@/core/MetaService.js';
 import { HttpRequestService } from '@/core/HttpRequestService.js';
-import { ApiError } from '../../error.js';
 import { GetterService } from '@/server/api/GetterService.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -83,20 +83,14 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 			const endpoint = instance.deeplIsPro ? 'https://api.deepl.com/v2/translate' : 'https://api-free.deepl.com/v2/translate';
 
-			const res = await this.httpRequestService.fetch(
-				endpoint,
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						Accept: 'application/json, */*',
-					},
-					body: params.toString(),
+			const res = await this.httpRequestService.send(endpoint, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					Accept: 'application/json, */*',
 				},
-				{
-					noOkError: false,
-				}
-			);
+				body: params.toString(),
+			});
 
 			const json = (await res.json()) as {
 				translations: {

packages/backend/src/server/api/endpoints/users/reactions.ts

@@ -61,7 +61,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		super(meta, paramDef, async (ps, me) => {
 			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: ps.userId });
 
-			if (me == null || (me.id !== ps.userId && !profile.publicReactions)) {
+			if ((me == null || me.id !== ps.userId) && !profile.publicReactions) {
 				throw new ApiError(meta.errors.reactionsNotPublic);
 			}
 

packages/backend/src/server/api/stream/types.ts

@@ -30,7 +30,7 @@ export interface InternalStreamTypes {
 	remoteUserUpdated: Serialized<{ id: User['id']; }>;
 	follow: Serialized<{ followerId: User['id']; followeeId: User['id']; }>;
 	unfollow: Serialized<{ followerId: User['id']; followeeId: User['id']; }>;
-	policiesUpdated: Serialized<Role['options']>;
+	policiesUpdated: Serialized<Role['policies']>;
 	roleCreated: Serialized<Role>;
 	roleDeleted: Serialized<Role>;
 	roleUpdated: Serialized<Role>;
@@ -49,6 +49,16 @@ export interface BroadcastTypes {
 	emojiAdded: {
 		emoji: Packed<'Emoji'>;
 	};
+	emojiUpdated: {
+		emojis: Packed<'Emoji'>[];
+	};
+	emojiDeleted: {
+		emojis: {
+			id?: string;
+			name: string;
+			[other: string]: any;
+		}[];
+	};
 }
 
 export interface UserStreamTypes {

packages/backend/src/server/web/boot.js

@@ -154,7 +154,7 @@
 				<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
 			</svg>
 			<h1>An error has occurred!</h1>
-			<button class="button-big" onclick="location.reload(true);">
+			<button class="button-big" onclick="location.reload();">
 				<span class="button-label-big">Refresh</span>
 			</button>
 			<p class="dont-worry">Don't worry, it's (probably) not your fault.</p>

packages/backend/src/server/web/views/base.pug

@@ -35,7 +35,7 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
-		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.css')
+		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.min.css')
 		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
 
 		if !config.clientManifestExists

packages/frontend/package.json

@@ -12,7 +12,7 @@
 		"@rollup/plugin-json": "6.0.0",
 		"@rollup/pluginutils": "5.0.2",
 		"@syuilo/aiscript": "0.12.2",
-		"@tabler/icons": "^1.118.0",
+		"@tabler/icons-webfont": "^2.1.2",
 		"@vitejs/plugin-vue": "4.0.0",
 		"@vue/compiler-sfc": "3.2.45",
 		"autobind-decorator": "2.4.0",
@@ -44,7 +44,7 @@
 		"punycode": "2.3.0",
 		"querystring": "0.2.1",
 		"rndstr": "1.0.0",
-		"rollup": "3.10.1",
+		"rollup": "3.11.0",
 		"s-age": "1.1.2",
 		"sanitize-html": "^2.8.1",
 		"sass": "1.57.1",
@@ -53,7 +53,7 @@
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
-		"three": "0.148.0",
+		"three": "0.149.0",
 		"throttle-debounce": "5.0.0",
 		"tinycolor2": "1.5.2",
 		"tsc-alias": "1.8.2",
@@ -82,15 +82,15 @@
 		"@types/uuid": "9.0.0",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.48.2",
-		"@typescript-eslint/parser": "5.48.2",
+		"@typescript-eslint/eslint-plugin": "5.49.0",
+		"@typescript-eslint/parser": "5.49.0",
 		"@vue/runtime-core": "3.2.45",
 		"cross-env": "7.0.3",
-		"cypress": "12.3.0",
+		"cypress": "12.4.0",
 		"eslint": "8.32.0",
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-vue": "9.9.0",
-		"start-server-and-test": "1.15.2",
+		"start-server-and-test": "1.15.3",
 		"vue-eslint-parser": "^9.1.0",
 		"vue-tsc": "^1.0.24"
 	}

packages/frontend/src/components/MkAchievements.vue

@@ -16,8 +16,8 @@
 						<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
 					</span>
 				</div>
-				<div :class="$style.description">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
-				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" :class="$style.flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
+				<div :class="$style.description">{{ withDescription ? i18n.ts._achievements._types['_' + achievement.name].description : '???' }}</div>
+				<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor && withDescription" :class="$style.flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
 			</div>
 		</div>
 		<template v-if="withLocked">
@@ -49,8 +49,10 @@ import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scrip
 const props = withDefaults(defineProps<{
 	user: misskey.entities.User;
 	withLocked: boolean;
+	withDescription: boolean;
 }>(), {
 	withLocked: true,
+	withDescription: true,
 });
 
 let achievements = $ref();

packages/frontend/src/components/MkAutocomplete.vue

@@ -17,7 +17,7 @@
 	</ol>
 	<ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
 		<li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<MkEmoji :emoji="emoji.emoji" :class="$style.emoji"/>
+			<MkCustomEmoji :name="emoji.emoji" :class="$style.emoji"/>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
 			<span v-else v-text="emoji.name"></span>
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { markRaw, ref, shallowRef, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { markRaw, ref, shallowRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import sanitizeHtml from 'sanitize-html';
 import contains from '@/scripts/contains';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
@@ -61,59 +61,62 @@ type EmojiDef = {
 
 const lib = emojilist.filter(x => x.category !== 'flags');
 
-const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+const emojiDb = computed(() => {
+	//#region Unicode Emoji
+	const char2path = defaultStore.reactiveState.emojiStyle.value === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
 
-const emjdb: EmojiDef[] = lib.map(x => ({
-	emoji: x.char,
-	name: x.name,
-	url: char2path(x.char),
-}));
-
-for (const x of lib) {
-	if (x.keywords) {
-		for (const k of x.keywords) {
-			emjdb.push({
-				emoji: x.char,
-				name: k,
-				aliasOf: x.name,
-				url: char2path(x.char),
-			});
-		}
-	}
-}
-
-emjdb.sort((a, b) => a.name.length - b.name.length);
-
-//#region Construct Emoji DB
-const emojiDefinitions: EmojiDef[] = [];
-
-for (const x of customEmojis) {
-	emojiDefinitions.push({
+	const unicodeEmojiDB: EmojiDef[] = lib.map(x => ({
+		emoji: x.char,
 		name: x.name,
-		emoji: `:${x.name}:`,
-		isCustomEmoji: true,
-	});
+		url: char2path(x.char),
+	}));
 
-	if (x.aliases) {
-		for (const alias of x.aliases) {
-			emojiDefinitions.push({
-				name: alias,
-				aliasOf: x.name,
-				emoji: `:${x.name}:`,
-				isCustomEmoji: true,
-			});
+	for (const x of lib) {
+		if (x.keywords) {
+			for (const k of x.keywords) {
+				unicodeEmojiDB.push({
+					emoji: x.char,
+					name: k,
+					aliasOf: x.name,
+					url: char2path(x.char),
+				});
+			}
 		}
 	}
-}
 
-emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+	unicodeEmojiDB.sort((a, b) => a.name.length - b.name.length);
+	//#endregion
 
-const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
-//#endregion
+	//#region Custom Emoji
+	const customEmojiDB: EmojiDef[] = [];
+
+	for (const x of customEmojis.value) {
+		customEmojiDB.push({
+			name: x.name,
+			emoji: `:${x.name}:`,
+			isCustomEmoji: true,
+		});
+
+		if (x.aliases) {
+			for (const alias of x.aliases) {
+				customEmojiDB.push({
+					name: alias,
+					aliasOf: x.name,
+					emoji: `:${x.name}:`,
+					isCustomEmoji: true,
+				});
+			}
+		}
+	}
+
+	customEmojiDB.sort((a, b) => a.name.length - b.name.length);
+	//#endregion
+
+	return markRaw([...customEmojiDB, ...unicodeEmojiDB]);
+});
 
 export default {
 	emojiDb,
-	emojiDefinitions,
 	emojilist,
 };
 </script>
@@ -230,27 +233,27 @@ function exec() {
 	} else if (props.type === 'emoji') {
 		if (!props.q || props.q === '') {
 			// 最近使った絵文字をサジェスト
-			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
+			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.value.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
 			return;
 		}
 
 		const matched: EmojiDef[] = [];
 		const max = 30;
 
-		emojiDb.some(x => {
+		emojiDb.value.some(x => {
 			if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
 			return matched.length === max;
 		});
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
+			emojiDb.value.some(x => {
 				if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
 				return matched.length === max;
 			});
 		}
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
+			emojiDb.value.some(x => {
 				if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
 				return matched.length === max;
 			});

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -11,17 +11,18 @@
 			class="_button item"
 			@click="emit('chosen', emoji, $event)"
 		>
-			<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+			<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+			<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
 		</button>
 	</div>
 </section>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, computed, Ref } from 'vue';
 
 const props = defineProps<{
-	emojis: string[];
+	emojis: string[] | Ref<string[]>;
 	initialShown?: boolean;
 }>();
 
@@ -29,5 +30,7 @@ const emit = defineEmits<{
 	(ev: 'chosen', v: string, event: MouseEvent): void;
 }>();
 
+const emojis = computed(() => Array.isArray(props.emojis) ? props.emojis : props.emojis.value);
+
 const shown = ref(!!props.initialShown);
 </script>

packages/frontend/src/components/MkEmojiPicker.vue

@@ -12,7 +12,7 @@
 					tabindex="0"
 					@click="chosen(emoji, $event)"
 				>
-					<MkEmoji class="emoji" :emoji="`:${emoji.name}:`"/>
+					<MkCustomEmoji class="emoji" :name="emoji.name"/>
 				</button>
 			</div>
 			<div v-if="searchResultUnicode.length > 0" class="body">
@@ -39,7 +39,8 @@
 						tabindex="0"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+						<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
 					</button>
 				</div>
 			</section>
@@ -53,14 +54,23 @@
 						class="_button item"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+						<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
 					</button>
 				</div>
 			</section>
 		</div>
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
-			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
+			<XSection
+				v-for="category in customEmojiCategories"
+				:key="`custom:${category}`"
+				:initial-shown="false"
+				:emojis="computed(() => customEmojis.filter(e => category === null ? (e.category === 'null' || !e.category) : e.category === category).map(e => `:${e.name}:`))"
+				@chosen="chosen"
+			>
+				{{ category || i18n.ts.other }}
+			</XSection>
 		</div>
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
@@ -88,7 +98,7 @@ import { deviceKind } from '@/scripts/device-kind';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
-import { getCustomEmojiCategories, customEmojis } from '@/custom-emojis';
+import { customEmojiCategories, customEmojis } from '@/custom-emojis';
 
 const props = withDefaults(defineProps<{
 	showPinned?: boolean;
@@ -104,7 +114,6 @@ const emit = defineEmits<{
 	(ev: 'chosen', v: string): void;
 }>();
 
-const customEmojiCategories = getCustomEmojiCategories();
 const searchEl = shallowRef<HTMLInputElement>();
 const emojisEl = shallowRef<HTMLDivElement>();
 
@@ -138,7 +147,7 @@ watch(q, () => {
 
 	const searchCustom = () => {
 		const max = 8;
-		const emojis = customEmojis;
+		const emojis = customEmojis.value;
 		const matches = new Set<Misskey.entities.CustomEmoji>();
 
 		const exactMatch = emojis.find(emoji => emoji.name === newQ);
@@ -323,7 +332,7 @@ function done(query?: string): boolean | void {
 	if (query == null || typeof query !== 'string') return;
 
 	const q2 = query.replace(/:/g, '');
-	const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
+	const exactMatchCustom = customEmojis.value.find(emoji => emoji.name === q2);
 	if (exactMatchCustom) {
 		chosen(exactMatchCustom);
 		return true;

packages/frontend/src/components/MkMenu.vue

@@ -335,8 +335,7 @@ onBeforeUnmount(() => {
 }
 
 .icon {
-	margin-right: 5px;
-	width: 20px;
+	margin-right: 8px;
 }
 
 .caret {

packages/frontend/src/components/MkNote.vue

@@ -48,12 +48,12 @@
 					<div :class="$style.text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" v-once :text="appearNote.text" :author="appearNote.user" :i="$i"/>
+						<Mfm v-if="appearNote.text" v-once :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 						<div v-if="translating || translation" :class="$style.translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else :class="$style.translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -65,13 +65,13 @@
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"/>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else class="translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>

packages/frontend/src/components/MkNoteSimple.vue

@@ -5,7 +5,7 @@
 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 		<div>
 			<p v-if="note.cw != null" :class="$style.cw">
-				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i"/>
+				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i" :emoji-urls="note.emojis"/>
 				<MkCwButton v-model="showContent" :note="note"/>
 			</p>
 			<div v-show="note.cw == null || showContent">

packages/frontend/src/components/MkNotification.vue

@@ -15,7 +15,7 @@
 			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
 			<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
 			<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
-			<i v-else-if="notification.type === 'achievementEarned'" class="ti ti-military-award"></i>
+			<i v-else-if="notification.type === 'achievementEarned'" class="ti ti-medal"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<MkReactionIcon
 				v-else-if="notification.type === 'reaction'"
@@ -38,26 +38,26 @@
 		<div v-once :class="$style.content">
 			<MkA v-if="notification.type === 'reaction'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'renote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :author="notification.note.renote.user"/>
+				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :author="notification.note.renote.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'reply'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'mention'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'quote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'pollEnded'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'achievementEarned'" :class="$style.text" to="/my/achievements">
@@ -68,7 +68,7 @@
 			<span v-else-if="notification.type === 'receiveFollowRequest'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
 			<span v-else-if="notification.type === 'groupInvited'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
 			<span v-else-if="notification.type === 'app'" :class="$style.text">
-				<Mfm :text="notification.body" :nowrap="!full"/>
+				<Mfm :text="notification.body" :nowrap="false"/>
 			</span>
 		</div>
 	</div>
@@ -249,7 +249,7 @@ useTooltip(reactionRef, (showing) => {
 
 .t_achievementEarned {
 	padding: 3px;
-	background: #88a6b7;
+	background: #cb9a11;
 	pointer-events: none;
 }
 

packages/frontend/src/components/MkNotifications.vue

@@ -10,7 +10,7 @@
 	<template #default="{ items: notifications }">
 		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="false" class="_panel notification"/>
+			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</MkDateSeparatedList>
 	</template>
 </MkPagination>

packages/frontend/src/components/MkReactionIcon.vue

@@ -1,5 +1,6 @@
 <template>
-<MkEmoji :emoji="reaction" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :no-style="noStyle" :url="emojiUrl"/>
+<MkEmoji v-else :emoji="reaction" :normal="true" :no-style="noStyle"/>
 </template>
 
 <script lang="ts" setup>
@@ -8,5 +9,6 @@ import { } from 'vue';
 const props = defineProps<{
 	reaction: string;
 	noStyle?: boolean;
+	emojiUrl?: string;
 }>();
 </script>

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -6,7 +6,7 @@
 	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
 	@click="toggleReaction()"
 >
-	<MkReactionIcon :class="$style.icon" :reaction="reaction"/>
+	<MkReactionIcon :class="$style.icon" :reaction="reaction" :emoji-url="note.reactionEmojis[reaction.substr(1, reaction.length - 2)]"/>
 	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>
@@ -21,6 +21,7 @@ import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';
 import MkReactionEffect from '@/components/MkReactionEffect.vue';
 import { claimAchievement } from '@/scripts/achievements';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	reaction: string;
@@ -61,6 +62,7 @@ const toggleReaction = () => {
 
 const anime = () => {
 	if (document.hidden) return;
+	if (!defaultStore.state.animation) return;
 
 	const rect = buttonEl.value.getBoundingClientRect();
 	const x = rect.left + 16;

packages/frontend/src/components/MkSubNoteContent.vue

@@ -4,7 +4,7 @@
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-		<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i"/>
+		<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i" :emoji-urls="note.emojis"/>
 		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
 	<details v-if="note.files.length > 0">

packages/frontend/src/components/MkSuperMenu.vue

@@ -6,15 +6,15 @@
 		<div class="items">
 			<template v-for="(item, i) in group.items">
 				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
 				</a>
 				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
 				</button>
 				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
 					<span class="text">{{ item.text }}</span>
 				</MkA>
 			</template>

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -0,0 +1,61 @@
+<template>
+<span v-if="errored">:{{ customEmojiName }}:</span>
+<img v-else :class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true" @load="errored = false"/>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStaticImageUrl } from '@/scripts/media-proxy';
+import { defaultStore } from '@/store';
+import { customEmojis } from '@/custom-emojis';
+
+const props = defineProps<{
+	name: string;
+	normal?: boolean;
+	noStyle?: boolean;
+	host?: string | null;
+	url?: string;
+}>();
+
+const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substr(1, props.name.length - 2) : props.name).replace('@.', ''));
+const url = computed(() => {
+	if (props.url) {
+		return props.url;
+	} else if (props.host == null && !customEmojiName.value.includes('@')) {
+		const found = customEmojis.value.find(x => x.name === customEmojiName.value);
+		return found ? defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(found.url) : found.url : null;
+	} else {
+		const rawUrl = props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
+		return defaultStore.state.disableShowingAnimatedImages
+			? getStaticImageUrl(rawUrl)
+			: rawUrl;
+	}
+});
+const alt = computed(() => `:${customEmojiName.value}:`);
+let errored = $ref(url.value == null);
+</script>
+
+<style lang="scss" module>
+.root {
+	height: 2.5em;
+	vertical-align: middle;
+	transition: transform 0.2s ease;
+
+	&:hover {
+		transform: scale(1.2);
+	}
+}
+
+.normal {
+	height: 1.25em;
+	vertical-align: -0.25em;
+
+	&:hover {
+		transform: none;
+	}
+}
+
+.noStyle {
+	height: auto !important;
+}
+</style>

packages/frontend/src/components/global/MkEmoji.vue

@@ -1,54 +1,29 @@
 <template>
-<span v-if="isCustom && errored">:{{ customEmojiName }}:</span>
-<img v-else-if="isCustom" :class="[$style.root, $style.custom, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true"/>
-<img v-else-if="char && !useOsNativeEmojis" :class="$style.root" :src="url" :alt="alt" decoding="async" @pointerenter="computeTitle"/>
-<span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
+<img v-if="!useOsNativeEmojis" :class="$style.root" :src="url" :alt="props.emoji" decoding="async" @pointerenter="computeTitle"/>
+<span v-else-if="useOsNativeEmojis" :alt="props.emoji" @pointerenter="computeTitle">{{ props.emoji }}</span>
 <span v-else>{{ emoji }}</span>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getStaticImageUrl } from '@/scripts/media-proxy';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { defaultStore } from '@/store';
 import { getEmojiName } from '@/scripts/emojilist';
-import { customEmojis } from '@/custom-emojis';
 
 const props = defineProps<{
 	emoji: string;
-	normal?: boolean;
-	noStyle?: boolean;
-	isReaction?: boolean;
-	host?: string | null;
 }>();
 
 const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
 
-const isCustom = computed(() => props.emoji.startsWith(':'));
-const customEmojiName = props.emoji.substr(1, props.emoji.length - 2).replace('@.', '');
-const char = computed(() => isCustom.value ? undefined : props.emoji);
-const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
+const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native');
 const url = computed(() => {
-	if (char.value) {
-		return char2path(char.value);
-	} else if (props.host == null && !customEmojiName.includes('@')) {
-		const found = customEmojis.find(x => x.name === customEmojiName);
-		return found ? found.url : null;
-	} else {
-		const rawUrl = props.host ? `/emoji/${customEmojiName}@${props.host}.webp` : `/emoji/${customEmojiName}.webp`;
-		return defaultStore.state.disableShowingAnimatedImages
-			? getStaticImageUrl(rawUrl)
-			: rawUrl;
-	}
+	return char2path(props.emoji);
 });
-const alt = computed(() => isCustom.value ? `:${customEmojiName}:` : char.value);
-let errored = $ref(isCustom.value && url.value == null);
 
 // Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
 function computeTitle(event: PointerEvent): void {
-	const title = isCustom.value
-		? `:${customEmojiName}:`
-		: (getEmojiName(char.value as string) ?? char.value as string);
+	const title = getEmojiName(props.emoji as string) ?? props.emoji as string;
 	(event.target as HTMLElement).title = title;
 }
 </script>
@@ -58,27 +33,4 @@ function computeTitle(event: PointerEvent): void {
 	height: 1.25em;
 	vertical-align: -0.25em;
 }
-
-.custom {
-	height: 2.5em;
-	vertical-align: middle;
-	transition: transform 0.2s ease;
-
-	&:hover {
-		transform: scale(1.2);
-	}
-}
-
-.normal {
-	height: 1.25em;
-	vertical-align: -0.25em;
-
-	&:hover {
-		transform: none;
-	}
-}
-
-.noStyle {
-	height: auto !important;
-}
 </style>

packages/frontend/src/components/global/MkUserName.vue

@@ -1,5 +1,5 @@
 <template>
-<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap"/>
+<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emoji-urls="user.emojis"/>
 </template>
 
 <script lang="ts" setup>

packages/frontend/src/components/index.ts

@@ -5,6 +5,7 @@ import MkA from './global/MkA.vue';
 import MkAcct from './global/MkAcct.vue';
 import MkAvatar from './global/MkAvatar.vue';
 import MkEmoji from './global/MkEmoji.vue';
+import MkCustomEmoji from './global/MkCustomEmoji.vue';
 import MkUserName from './global/MkUserName.vue';
 import MkEllipsis from './global/MkEllipsis.vue';
 import MkTime from './global/MkTime.vue';
@@ -26,6 +27,7 @@ export default function(app: App) {
 	app.component('MkAcct', MkAcct);
 	app.component('MkAvatar', MkAvatar);
 	app.component('MkEmoji', MkEmoji);
+	app.component('MkCustomEmoji', MkCustomEmoji);
 	app.component('MkUserName', MkUserName);
 	app.component('MkEllipsis', MkEllipsis);
 	app.component('MkTime', MkTime);
@@ -47,6 +49,7 @@ declare module '@vue/runtime-core' {
 		MkAcct: typeof MkAcct;
 		MkAvatar: typeof MkAvatar;
 		MkEmoji: typeof MkEmoji;
+		MkCustomEmoji: typeof MkCustomEmoji;
 		MkUserName: typeof MkUserName;
 		MkEllipsis: typeof MkEllipsis;
 		MkTime: typeof MkTime;

packages/frontend/src/components/mfm.ts

@@ -4,6 +4,7 @@ import MkUrl from '@/components/global/MkUrl.vue';
 import MkLink from '@/components/MkLink.vue';
 import MkMention from '@/components/MkMention.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
 import { concat } from '@/scripts/array';
 import MkCode from '@/components/MkCode.vue';
 import MkGoogle from '@/components/MkGoogle.vue';
@@ -47,6 +48,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		emojiUrls: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	render() {
@@ -190,16 +195,22 @@ export default defineComponent({
 							return h(MkSparkle, {}, genEl(token.children));
 						}
 						case 'rotate': {
-							const degrees = parseInt(token.props.args.deg) ?? '90';
+							const degrees = parseFloat(token.props.args.deg) ?? '90';
 							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
 							break;
 						}
 						case 'position': {
-							const x = parseInt(token.props.args.x ?? '0');
-							const y = parseInt(token.props.args.y ?? '0');
+							const x = parseFloat(token.props.args.x ?? '0');
+							const y = parseFloat(token.props.args.y ?? '0');
 							style = `transform: translateX(${x}em) translateY(${y}em);`;
 							break;
 						}
+						case 'scale': {
+							const x = Math.min(parseFloat(token.props.args.x ?? '1'), 5);
+							const y = Math.min(parseFloat(token.props.args.y ?? '1'), 5);
+							style = `transform: scale(${x}, ${y});`;
+							break;
+						}
 						case 'fg': {
 							let color = token.props.args.color;
 							if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
@@ -295,20 +306,35 @@ export default defineComponent({
 				}
 
 				case 'emojiCode': {
-					return [h(MkEmoji, {
-						key: Math.random(),
-						emoji: `:${token.props.name}:`,
-						normal: this.plain,
+					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+					if (this.author?.host == null) {
+						return [h(MkCustomEmoji, {
+							key: Math.random(),
+							name: token.props.name,
+							normal: this.plain,
+							host: null,
+						})];
+					} else {
 						// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-						host: this.author?.host,
-					})];
+						if (this.emojiUrls && (this.emojiUrls[token.props.name] == null)) {
+							return [h('span', `:${token.props.name}:`)];
+						} else {
+							return [h(MkCustomEmoji, {
+								key: Math.random(),
+								name: token.props.name,
+								// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+								url: this.emojiUrls ? this.emojiUrls[token.props.name] : null,
+								normal: this.plain,
+								host: this.author.host,
+							})];
+						}
+					}
 				}
 
 				case 'unicodeEmoji': {
 					return [h(MkEmoji, {
 						key: Math.random(),
 						emoji: token.props.emoji,
-						normal: this.plain,
 					})];
 				}
 

packages/frontend/src/custom-emojis.ts

@@ -1,37 +1,48 @@
-import { api } from './os';
+import { shallowRef, computed, markRaw } from 'vue';
+import * as Misskey from 'misskey-js';
+import { api, apiGet } from './os';
 import { miLocalStorage } from './local-storage';
+import { stream } from '@/stream';
 
 const storageCache = miLocalStorage.getItem('emojis');
-export let customEmojis: {
-	name: string;
-	aliases: string[];
-	category: string;
-	url: string;
-}[] = storageCache ? JSON.parse(storageCache) : [];
-
-export async function fetchCustomEmojis() {
-	const now = Date.now();
-	const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
-	if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60 * 24) return;
-
-	const res = await api('emojis', {});
-
-	customEmojis = res.emojis;
-	miLocalStorage.setItem('emojis', JSON.stringify(customEmojis));
-	miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
-}
-
-let cachedCategories;
-export function getCustomEmojiCategories() {
-	if (cachedCategories) return cachedCategories;
-
-	const categories = new Set();
-	for (const emoji of customEmojis) {
-		categories.add(emoji.category);
+export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
+export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
+	const categories = new Set<string>();
+	for (const emoji of customEmojis.value) {
+		if (emoji.category && emoji.category !== 'null') {
+			categories.add(emoji.category);
+		}
 	}
-	const res = Array.from(categories);
-	cachedCategories = res;
-	return res;
+	return markRaw([...Array.from(categories), null]);
+});
+
+stream.on('emojiAdded', emojiData => {
+	customEmojis.value = [emojiData.emoji, ...customEmojis.value];
+});
+
+stream.on('emojiUpdated', emojiData => {
+	customEmojis.value = customEmojis.value.map(item => emojiData.emojis.find(search => search.name === item.name) as Misskey.entities.CustomEmoji ?? item);
+});
+
+stream.on('emojiDeleted', emojiData => {
+	customEmojis.value = customEmojis.value.filter(item => !emojiData.emojis.some(search => search.name === item.name));
+});
+
+export async function fetchCustomEmojis(force = false) {
+	const now = Date.now();
+
+	let res;
+	if (force) {
+		res = await api('emojis', {});
+	} else {
+		const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
+		if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
+		res = await apiGet('emojis', {});
+	}
+
+	customEmojis.value = res.emojis;
+	miLocalStorage.setItem('emojis', JSON.stringify(res.emojis));
+	miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
 }
 
 let cachedTags;
@@ -39,7 +50,7 @@ export function getCustomEmojiTags() {
 	if (cachedTags) return cachedTags;
 
 	const tags = new Set();
-	for (const emoji of customEmojis) {
+	for (const emoji of customEmojis.value) {
 		for (const tag of emoji.aliases) {
 			tags.add(tag);
 		}

packages/frontend/src/init.ts

@@ -338,11 +338,6 @@ import { fetchCustomEmojis } from './custom-emojis';
 		}
 	});
 
-	stream.on('emojiAdded', emojiData => {
-		// TODO
-		//store.commit('instance/set', );
-	});
-
 	for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
 		import('./plugin').then(({ install }) => {
 			install(plugin);

packages/frontend/src/navbar.ts

@@ -105,7 +105,7 @@ export const navbarItemDef = reactive({
 	},
 	achievements: {
 		title: i18n.ts.achievements,
-		icon: 'ti ti-military-award',
+		icon: 'ti ti-medal',
 		show: computed(() => $i != null),
 		to: '/my/achievements',
 	},

packages/frontend/src/pages/about-misskey.vue

@@ -4,11 +4,17 @@
 	<div style="overflow: clip;">
 		<MkSpacer :content-max="600" :margin-min="20">
 			<div class="_gaps_m znqjceqz">
-				<div ref="containerEl" v-panel class="about" :class="{ playing: easterEggEngine != null }">
-					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
-					<div class="misskey">Misskey</div>
-					<div class="version">v{{ version }}</div>
-					<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :is-reaction="false" :normal="true" :no-style="true"/></span>
+				<div v-panel class="about">
+					<div ref="containerEl" class="container" :class="{ playing: easterEggEngine != null }">
+						<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
+						<div class="misskey">Misskey</div>
+						<div class="version">v{{ version }}</div>
+						<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }">
+							<MkCustomEmoji v-if="emoji.emoji[0] === ':'" class="emoji" :name="emoji.emoji" :normal="true" :no-style="true"/>
+							<MkEmoji v-else class="emoji" :emoji="emoji.emoji" :normal="true" :no-style="true"/>
+						</span>
+					</div>
+					<button v-if="thereIsTreasure" class="_button treasure" @click="getTreasure"><img src="/fluent-emoji/1f3c6.png" class="treasureImg"></button>
 				</div>
 				<div style="text-align: center;">
 					{{ i18n.ts._aboutMisskey.about }}<br><a href="https://misskey-hub.net/docs/misskey.html" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a>
@@ -37,11 +43,31 @@
 				</FormSection>
 				<FormSection>
 					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
-					<div class="_formLinksGrid">
-						<FormLink to="https://github.com/syuilo" external>@syuilo</FormLink>
-						<FormLink to="https://github.com/tamaina" external>@tamaina</FormLink>
-						<FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink>
-						<FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink>
+					<div :class="$style.contributors">
+						<a href="https://github.com/syuilo" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/4439005?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@syuilo</span>
+						</a>
+						<a href="https://github.com/tamaina" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/7973572?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@tamaina</span>
+						</a>
+						<a href="https://github.com/acid-chicken" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/20679825?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@acid-chicken</span>
+						</a>
+						<a href="https://github.com/rinsuki" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/6533808?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@rinsuki</span>
+						</a>
+						<a href="https://github.com/mei23" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/30769358?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@mei23</span>
+						</a>
+						<a href="https://github.com/robflop" target="_blank" :class="$style.contributor">
+							<img src="https://avatars.githubusercontent.com/u/8159402?v=4" :class="$style.contributorAvatar">
+							<span :class="$style.contributorUsername">@robflop</span>
+						</a>
 					</div>
 					<template #caption><MkLink url="https://github.com/misskey-dev/misskey/graphs/contributors">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template>
 				</FormSection>
@@ -70,6 +96,8 @@ import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { claimAchievement, claimedAchievements } from '@/scripts/achievements';
+import { $i } from '@/account';
 
 const patrons = [
 	'まっちゃとーにゅ',
@@ -152,6 +180,8 @@ const patrons = [
 	'pixeldesu',
 ];
 
+let thereIsTreasure = $ref($i && !claimedAchievements.includes('foundTreasure'));
+
 let easterEggReady = false;
 let easterEggEmojis = $ref([]);
 let easterEggEngine = $ref(null);
@@ -187,6 +217,11 @@ function iLoveMisskey() {
 	});
 }
 
+function getTreasure() {
+	thereIsTreasure = false;
+	claimAchievement('foundTreasure');
+}
+
 onBeforeUnmount(() => {
 	if (easterEggEngine) {
 		easterEggEngine.stop();
@@ -207,54 +242,114 @@ definePageMetadata({
 .znqjceqz {
 	> .about {
 		position: relative;
-		text-align: center;
-		padding: 16px;
 		border-radius: var(--radius);
 
-		&.playing {
-			&, * {
-				user-select: none;
-			}
-
-			* {
-				will-change: transform;
-			}
-
-			> .emoji {
-				visibility: visible;
-			}
-		}
-
-		> .icon {
-			display: block;
-			width: 80px;
-			margin: 0 auto;
-			border-radius: 16px;
-		}
-
-		> .misskey {
-			margin: 0.75em auto 0 auto;
-			width: max-content;
-		}
-
-		> .version {
-			margin: 0 auto;
-			width: max-content;
-			opacity: 0.5;
-		}
-
-		> .emoji {
+		> .treasure {
 			position: absolute;
-			top: 0;
+			top: 60px;
 			left: 0;
-			visibility: hidden;
+			right: 0;
+			margin: 0 auto;
+			width: min-content;
+
+			> .treasureImg {
+				width: 25px;
+				vertical-align: bottom;
+			}
+		}
+
+		> .container {
+			position: relative;
+			text-align: center;
+			padding: 16px;
+
+			&.playing {
+				&, * {
+					user-select: none;
+				}
+
+				* {
+					will-change: transform;
+				}
+
+				> .emoji {
+					visibility: visible;
+				}
+			}
+
+			> .icon {
+				display: block;
+				width: 80px;
+				margin: 0 auto;
+				border-radius: 16px;
+				position: relative;
+				z-index: 1;
+			}
+
+			> .misskey {
+				margin: 0.75em auto 0 auto;
+				width: max-content;
+				position: relative;
+				z-index: 1;
+			}
+
+			> .version {
+				margin: 0 auto;
+				width: max-content;
+				opacity: 0.5;
+				position: relative;
+				z-index: 1;
+			}
 
 			> .emoji {
-				pointer-events: none;
-				font-size: 24px;
-				width: 24px;
+				position: absolute;
+				z-index: 1;
+				top: 0;
+				left: 0;
+				visibility: hidden;
+
+				> .emoji {
+					pointer-events: none;
+					font-size: 24px;
+					width: 24px;
+				}
 			}
 		}
 	}
 }
 </style>
+
+<style lang="scss" module>
+.contributors {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-gap: 12px;
+}
+
+.contributor {
+	display: flex;
+	align-items: center;
+	padding: 12px;
+	background: var(--buttonBg);
+	border-radius: 6px;
+
+	&:hover {
+		text-decoration: none;
+		background: var(--buttonHoverBg);
+	}
+
+	&.active {
+		color: var(--accent);
+		background: var(--buttonHoverBg);
+	}
+}
+
+.contributorAvatar {
+	width: 30px;
+	border-radius: 100%;
+}
+
+.contributorUsername {
+	margin-left: 12px;
+}
+</style>

packages/frontend/src/pages/about.emojis.vue

@@ -39,13 +39,13 @@ import MkSelect from '@/components/MkSelect.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
-import { customEmojis, getCustomEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
+import { customEmojis, customEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
 import { i18n } from '@/i18n';
+import * as Misskey from 'misskey-js';
 
-const customEmojiCategories = getCustomEmojiCategories();
 const customEmojiTags = getCustomEmojiTags();
 let q = $ref('');
-let searchEmojis = $ref(null);
+let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null);
 let selectedTags = $ref(new Set());
 
 function search() {
@@ -55,9 +55,9 @@ function search() {
 	}
 
 	if (selectedTags.size === 0) {
-		searchEmojis = customEmojis.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q));
+		searchEmojis = customEmojis.value.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q));
 	} else {
-		searchEmojis = customEmojis.filter(emoji => (emoji.name.includes(q) || emoji.aliases.includes(q)) && [...selectedTags].every(t => emoji.aliases.includes(t)));
+		searchEmojis = customEmojis.value.filter(emoji => (emoji.name.includes(q) || emoji.aliases.includes(q)) && [...selectedTags].every(t => emoji.aliases.includes(t)));
 	}
 }
 

packages/frontend/src/pages/about.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import XEmojis from './about.emojis.vue';
 import XFederation from './about.federation.vue';
 import { version, instanceName, host } from '@/config';
@@ -100,6 +100,7 @@ import * as os from '@/os';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { claimAchievement } from '@/scripts/achievements';
 
 const props = withDefaults(defineProps<{
 	initialTab?: string;
@@ -110,6 +111,12 @@ const props = withDefaults(defineProps<{
 let stats = $ref(null);
 let tab = $ref(props.initialTab);
 
+watch($$(tab), () => {
+	if (tab === 'charts') {
+		claimAchievement('viewInstanceChart');
+	}
+});
+
 const initStats = () => os.api('stats', {
 }).then((res) => {
 	stats = res;

packages/frontend/src/pages/achievements.vue

@@ -45,7 +45,7 @@ onDeactivated(() => {
 
 definePageMetadata({
 	title: i18n.ts.achievements,
-	icon: 'ti ti-military-award',
+	icon: 'ti ti-medal',
 });
 </script>
 

packages/frontend/src/pages/admin/object-storage.vue

@@ -38,7 +38,7 @@
 							<template #label>Access key</template>
 						</MkInput>
 
-						<MkInput v-model="objectStorageSecretKey">
+						<MkInput v-model="objectStorageSecretKey" type="password">
 							<template #prefix><i class="ti ti-key"></i></template>
 							<template #label>Secret key</template>
 						</MkInput>

packages/frontend/src/pages/admin/overview.stats.vue

@@ -45,7 +45,7 @@
 				<div class="icon"><i class="ti ti-access-point"></i></div>
 				<div class="body">
 					<div class="value">
-						<MkNumber :value="stats.onlineUsersCount" style="margin-right: 0.5em;"/>
+						<MkNumber :value="onlineUsersCount" style="margin-right: 0.5em;"/>
 					</div>
 					<div class="label">Online</div>
 				</div>

packages/frontend/src/pages/emoji-edit-dialog.vue

@@ -15,7 +15,7 @@
 			<MkInput v-model="name">
 				<template #label>{{ i18n.ts.name }}</template>
 			</MkInput>
-			<MkInput v-model="category" :datalist="categories">
+			<MkInput v-model="category" :datalist="customEmojiCategories">
 				<template #label>{{ i18n.ts.category }}</template>
 			</MkInput>
 			<MkInput v-model="aliases">
@@ -36,7 +36,7 @@ import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os';
 import { unique } from '@/scripts/array';
 import { i18n } from '@/i18n';
-import { getCustomEmojiCategories } from '@/custom-emojis';
+import { customEmojiCategories } from '@/custom-emojis';
 
 const props = defineProps<{
 	emoji: any,
@@ -46,7 +46,6 @@ let dialog = $ref(null);
 let name: string = $ref(props.emoji.name);
 let category: string = $ref(props.emoji.category);
 let aliases: string = $ref(props.emoji.aliases.join(' '));
-const categories = getCustomEmojiCategories();
 
 const emit = defineEmits<{
 	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,

packages/frontend/src/pages/emojis.emoji.vue

@@ -1,6 +1,6 @@
 <template>
 <button class="zuvgdzyu _button" @click="menu">
-	<img :src="`/emoji/${emoji.name}.webp`" class="img" loading="lazy"/>
+	<img :src="emoji.url" class="img" loading="lazy"/>
 	<div class="body">
 		<div class="name _monospace">{{ emoji.name }}</div>
 		<div class="info">{{ emoji.aliases.join(' ') }}</div>
@@ -15,7 +15,12 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
-	emoji: Record<string, unknown>; // TODO
+	emoji: {
+		name: string;
+		aliases: string[];
+		category: string;
+		url: string;
+	};
 }>();
 
 function menu(ev) {

packages/frontend/src/pages/mfm-cheat-sheet.vue

@@ -313,7 +313,7 @@ let preview_mention = $ref('@example');
 let preview_hashtag = $ref('#test');
 let preview_url = $ref('https://example.com');
 let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-let preview_emoji = $ref(customEmojis.length ? `:${customEmojis[0].name}:` : ':emojiname:');
+let preview_emoji = $ref(customEmojis.value.length ? `:${customEmojis.value[0].name}:` : ':emojiname:');
 let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
 let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
 let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);

packages/frontend/src/pages/settings/index.vue

@@ -34,6 +34,7 @@ import { useRouter } from '@/router';
 import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import * as os from '@/os';
 import { miLocalStorage } from '@/local-storage';
+import { fetchCustomEmojis } from '@/custom-emojis';
 
 const indexInfo = {
 	title: i18n.ts.settings,
@@ -180,11 +181,13 @@ const menuDef = computed(() => [{
 		type: 'button',
 		icon: 'ti ti-trash',
 		text: i18n.ts.clearCache,
-		action: () => {
+		action: async () => {
+			os.waiting();
 			miLocalStorage.removeItem('locale');
 			miLocalStorage.removeItem('theme');
 			miLocalStorage.removeItem('emojis');
 			miLocalStorage.removeItem('lastEmojisFetchedAt');
+			await fetchCustomEmojis();
 			unisonReload();
 		},
 	}, {

packages/frontend/src/pages/settings/reaction.vue

@@ -6,7 +6,8 @@
 			<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
 				<template #item="{element}">
 					<button class="_button item" @click="remove(element, $event)">
-						<MkEmoji :emoji="element" :normal="true"/>
+						<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
+						<MkEmoji v-else :emoji="element" :normal="true"/>
 					</button>
 				</template>
 				<template #footer>