From 1c16b749c3efec8f23560537d0cc341f6e8cb41e Mon Sep 17 00:00:00 2001
From: limepotato <bm01@limepot.xyz>
Date: Wed, 26 Jun 2024 13:41:23 -0600
Subject: [PATCH] prelim

---
 locales/en-US.yml                             |   6 +-
 .../client/src/components/global/MkAvatar.vue | 110 ++++++++++++++++++
 .../client/src/pages/settings/profile.vue     |   8 ++
 3 files changed, 123 insertions(+), 1 deletion(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 4abc1acf6..58e859c43 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -165,7 +165,7 @@ cacheRemoteFiles: "Cache remote files"
 cacheRemoteFilesDescription: "When this setting is disabled, remote files are loaded
   directly from the remote server. Disabling this will decrease storage usage, but
   increase traffic, as thumbnails will not be generated."
-flagAsBot: "Mark this account as a bot 🤖"
+flagAsBot: "Mark this account as a bot"
 flagAsBotDescription: "Enable this option if this account is controlled by a program.
   If enabled, it will act as a flag for other developers to prevent endless interaction
   chains with other bots and adjust Iceshrimp's internal systems to treat this account
@@ -174,6 +174,10 @@ flagAsCat: "Are you a cat? 😺"
 flagAsCatDescription: "You'll get cat ears and speak like a cat!"
 flagSpeakAsCat: "Speak as a cat"
 flagSpeakAsCatDescription: "Your beeps will get nyanified when in cat mode"
+flagAsRobo: "Are you a robot? 🤖"
+flagAsRoboDescription: "You'll get an antenna and speak like a robot!"
+flagSpeakAsRobo: "Speak as a robot"
+flagSpeakAsRoboDescription: "Your beeps will get robofied when in robot mode"
 flagShowTimelineReplies: "Show replies in timeline"
 flagShowTimelineRepliesDescription: "Shows replies of users to beeps of other users
   in the timeline if turned on."
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 77f545e4e..8d2057bf7 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -35,6 +35,43 @@
 	</MkA>
 </template>
 
+<template>
+	<span
+		v-if="disableLink"
+		v-user-preview="disablePreview ? undefined : user.id"
+		class="robomode _noSelect"
+		:class="{ cat: user.isRobo, square: $store.state.squareAvatars }"
+		:style="{ color }"
+		:title="acct(user)"
+		@click="onClick"
+	>
+		<img class="inner" :src="url" loading="lazy" decoding="async" />
+		<MkUserOnlineIndicator
+			v-if="showIndicator && user.instance == null"
+			class="indicator"
+			:user="user"
+		/>
+	</span>
+	<MkA
+		v-else
+		v-user-preview="disablePreview ? undefined : user.id"
+		class="robomode _noSelect"
+		:class="{ cat: user.isRobo, square: $store.state.squareAvatars }"
+		:style="{ color }"
+		:to="userPage(user)"
+		:title="acct(user)"
+		:target="target"
+		@click.stop
+	>
+		<img class="inner" :src="url" loading="lazy" decoding="async" />
+		<MkUserOnlineIndicator
+			v-if="showIndicator && user.instance == null"
+			class="indicator"
+			:user="user"
+		/>
+	</MkA>
+</template>
+
 <script lang="ts" setup>
 import { onMounted, watch } from "vue";
 import type * as misskey from "iceshrimp-js";
@@ -196,4 +233,77 @@ watch(
 		}
 	}
 }
+
+.robomode {
+	position: relative;
+	display: inline-block;
+	vertical-align: bottom;
+	flex-shrink: 0;
+	border-radius: 100%;
+	line-height: 30px;
+
+	> .inner {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: 0;
+		border-radius: 100%;
+		z-index: 1;
+		overflow: hidden;
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+	}
+
+	> .indicator {
+		position: absolute;
+		z-index: 1;
+		bottom: 0;
+		left: 0;
+		width: 18%;
+		height: 18%;
+	}
+
+	&.square {
+		border-radius: 20%;
+
+		> .inner {
+			border-radius: 20%;
+		}
+	}
+
+	&.cat {
+		&:before,
+		&:after {
+			background: #ebbcba;
+			border: solid 4px currentColor;
+			box-sizing: border-box;
+			content: "";
+			display: inline-block;
+			height: 100%;
+			width: 100%;
+		}
+
+		&:before {
+			border-radius: 0 75% 75%;
+			transform: rotate(37.5deg) skew(30deg);
+		}
+
+		&:after {
+			border-radius: 75% 0 75% 75%;
+			transform: rotate(-37.5deg) skew(-30deg);
+		}
+
+		&:hover {
+			&:before {
+				animation: earwiggleleft 1s infinite;
+			}
+
+			&:after {
+				animation: earwiggleright 1s infinite;
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 3b94a8248..762dde16c 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -149,6 +149,12 @@
 				i18n.ts.flagSpeakAsCatDescription
 			}}</template></FormSwitch
 		>
+		<FormSwitch v-model="profile.isRobo" class="_formBlock"
+			>{{ i18n.ts.flagAsRobo
+			}}<template #caption>{{
+				i18n.ts.flagAsRoboDescription
+			}}</template></FormSwitch
+		>
 		<FormSwitch v-model="profile.isBot" class="_formBlock"
 			>{{ i18n.ts.flagAsBot
 			}}<template #caption>{{
@@ -186,6 +192,7 @@ const profile = reactive({
 	birthday: $i?.birthday,
 	lang: $i?.lang,
 	isBot: $i?.isBot,
+	isRobo: $i?.isRobo,
 	isCat: $i?.isCat,
 	speakAsCat: $i?.speakAsCat,
 });
@@ -240,6 +247,7 @@ function save() {
 		birthday: profile.birthday || null,
 		lang: profile.lang || null,
 		isBot: !!profile.isBot,
+		isRobo: !!profile.isRobo,
 		isCat: !!profile.isCat,
 		speakAsCat: !!profile.speakAsCat,
 	});