From 453574644c9d8fd19b3f11adc8b24250c00ea268 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sun, 26 Mar 2023 09:25:51 +0000
Subject: [PATCH 1/6] fix: add workaround for cat ears on iOS Safari

---
 packages/frontend/src/components/global/MkPageHeader.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 4d968db6a..013dc2fd6 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -8,7 +8,9 @@
 
 		<template v-if="metadata">
 			<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
-				<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
+				<div v-if="metadata.avatar" :class="$style.titleAvatarContainer">
+					<MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
+				</div>
 				<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
 
 				<div :class="$style.title">
@@ -249,6 +251,11 @@ onUnmounted(() => {
 	margin-left: 24px;
 }
 
+.titleAvatarContainer {
+	overflow: hidden;
+	padding: 8px 0;
+}
+
 .titleAvatar {
 	$size: 32px;
 	display: inline-block;

From 07cfab04890a46159e78ec0199634f98ff9f6ddd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sun, 26 Mar 2023 09:36:46 +0000
Subject: [PATCH 2/6] fix: add tight state to cat ears for workarounds

---
 .../frontend/src/components/global/MkAvatar.vue    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 814ab53d2..ed104cb0f 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -86,6 +86,18 @@ watch(() => props.user.avatarBlurhash, () => {
 	to { transform: rotate(-37.6deg) skew(-30deg); }
 }
 
+@keyframes eartightleft {
+	from { transform: rotate(37.6deg) skew(30deg); }
+	50% { transform: rotate(37.4deg) skew(30deg); }
+	to { transform: rotate(37.6deg) skew(30deg); }
+}
+
+@keyframes eartightright {
+	from { transform: rotate(-37.6deg) skew(-30deg); }
+	50% { transform: rotate(-37.4deg) skew(-30deg); }
+	to { transform: rotate(-37.6deg) skew(-30deg); }
+}
+
 .root {
 	position: relative;
 	display: inline-block;
@@ -184,6 +196,7 @@ watch(() => props.user.avatarBlurhash, () => {
 
 		> .earLeft {
 			transform: rotate(37.5deg) skew(30deg);
+			animation: eartightleft 6s infinite;
 
 			&, &::after {
 				border-radius: 0 75% 75%;
@@ -205,6 +218,7 @@ watch(() => props.user.avatarBlurhash, () => {
 
 		> .earRight {
 			transform: rotate(-37.5deg) skew(-30deg);
+			animation: eartightright 6s infinite;
 
 			&, &::after {
 				border-radius: 75% 0 75% 75%;

From 4d3f0be419a972a9233e187458ff45f13baf1dde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 27 Mar 2023 05:16:39 +0000
Subject: [PATCH 3/6] chore: respect the animation preference

---
 .../frontend/src/components/global/MkAvatar.vue   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index ed104cb0f..14075cd7b 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
+<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
 	<img :class="$style.inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 	<div v-if="user.isCat" :class="[$style.ears, { [$style.mask]: useBlurEffect }]">
@@ -27,6 +27,7 @@ import { acct, userPage } from '@/filters/user';
 import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
 import { defaultStore } from '@/store';
 
+const animation = $ref(defaultStore.state.animation);
 const squareAvatars = $ref(defaultStore.state.squareAvatars);
 const useBlurEffect = $ref(defaultStore.state.useBlurEffect);
 
@@ -156,6 +157,14 @@ watch(() => props.user.avatarBlurhash, () => {
 			mask:
 				url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><filter id="a"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter><circle cx="16" cy="16" r="15" filter="url(%23a)"/></svg>') exclude center / 50% 50%,
 				linear-gradient(#fff, #fff); // polyfill of `image(#fff)`
+
+			> .earLeft {
+				animation: eartightright 6s infinite;
+			}
+
+			> .earRight {
+				animation: eartightleft 6s infinite;
+			}
 		}
 
 		> .earLeft,
@@ -196,7 +205,6 @@ watch(() => props.user.avatarBlurhash, () => {
 
 		> .earLeft {
 			transform: rotate(37.5deg) skew(30deg);
-			animation: eartightleft 6s infinite;
 
 			&, &::after {
 				border-radius: 0 75% 75%;
@@ -218,7 +226,6 @@ watch(() => props.user.avatarBlurhash, () => {
 
 		> .earRight {
 			transform: rotate(-37.5deg) skew(-30deg);
-			animation: eartightright 6s infinite;
 
 			&, &::after {
 				border-radius: 75% 0 75% 75%;
@@ -239,7 +246,7 @@ watch(() => props.user.avatarBlurhash, () => {
 		}
 	}
 
-	&:hover {
+	&.animation:hover {
 		> .ears {
 			> .earLeft {
 				animation: earwiggleleft 1s infinite;

From 8963e36aa200ac9f663265315223a07544a17965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 27 Mar 2023 05:25:32 +0000
Subject: [PATCH 4/6] docs: note change logs

---
 CHANGELOG.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8fa82ad2..fdb88c017 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,13 @@
 -
 
 ### Client
--
+-　「にゃああああああああああああああ！！！！！！！！！！！！」 (`isCat`) 有効時にアバターに表示される猫耳について挙動を変更
+  - 「UIにぼかし効果を使用」 (`useBlurEffect`) で次の挙動が有効になります
+	  - 猫耳のアバター内部部分をぼかしでマスク表示してより猫耳っぽく見えるように
+		- 猫耳の色がアバター上部のピクセルから決定されます（無効化時はアバター全体の平均色）
+		  - 左耳は上からおよそ 10%, 左からおよそ 20% の位置で決定します
+			- 右耳は上からおよそ 10%, 左からおよそ 80% の位置で決定します
+	- 「UIのアニメーションを減らす」 (`reduceAnimation`) で猫耳を撫でられなくなります
 
 ### Server
 -

From 49d4c538fee8a44796b26cd987b953e2cc770c0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Wed, 29 Mar 2023 23:37:43 +0900
Subject: [PATCH 5/6] fix: typo

---
 packages/frontend/src/components/global/MkAvatar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 14075cd7b..9a21941c8 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -159,11 +159,11 @@ watch(() => props.user.avatarBlurhash, () => {
 				linear-gradient(#fff, #fff); // polyfill of `image(#fff)`
 
 			> .earLeft {
-				animation: eartightright 6s infinite;
+				animation: eartightleft 6s infinite;
 			}
 
 			> .earRight {
-				animation: eartightleft 6s infinite;
+				animation: eartightright 6s infinite;
 			}
 		}
 

From 14977ed2b703aaeafb26fd811035ed8fa7166ee0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Fri, 31 Mar 2023 07:47:03 +0000
Subject: [PATCH 6/6] fix: the avatar in the title bar is clipped

---
 .../src/components/global/MkPageHeader.vue      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 31f23486d..710edd797 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -252,17 +252,18 @@ onUnmounted(() => {
 }
 
 .titleAvatarContainer {
-	overflow: hidden;
-	padding: 8px 0;
+	$size: 32px;
+	contain: strict;
+	overflow: clip;
+	width: $size;
+	height: $size;
+	padding: 8px;
+	flex-shrink: 0;
 }
 
 .titleAvatar {
-	$size: 32px;
-	display: inline-block;
-	width: $size;
-	height: $size;
-	vertical-align: bottom;
-	margin: 0 8px;
+	width: 100%;
+	height: 100%;
 	pointer-events: none;
 }