From 93f54e3258b49d8fe617f02f950ae9b29fc7494d Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Tue, 4 Oct 2022 16:02:51 +0200
Subject: [PATCH 1/2] client: refactor components/tab.vue to composition API

Refactoring this component could be done after changing its method of
receiving the list of available tabs by using slots to using an
ordinary parameter. This was possible because all uses of this
component just provided text as the tab labels.

Also removed unused imports of this component.

Also removed the use of the click-anime directive.
---
 packages/client/src/components/tab.vue        | 50 +++++++++----------
 .../client/src/pages/explore.featured.vue     | 13 +++--
 packages/client/src/pages/gallery/index.vue   |  1 -
 packages/client/src/pages/my-groups/index.vue |  1 -
 .../client/src/pages/settings/mute-block.vue  | 13 +++--
 .../client/src/pages/settings/word-mute.vue   | 13 +++--
 .../client/src/pages/user/index.timeline.vue  | 25 ++++++----
 7 files changed, 67 insertions(+), 49 deletions(-)

diff --git a/packages/client/src/components/tab.vue b/packages/client/src/components/tab.vue
index 669e9e2e1..aea4ddd5f 100644
--- a/packages/client/src/components/tab.vue
+++ b/packages/client/src/components/tab.vue
@@ -1,31 +1,29 @@
-<script lang="ts">
-import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
+<template>
+<div class="pxhvhrfw" v-size="{ max: [500] }">
+	<button
+		v-for="option in options"
+		:key="option.value"
+		:class="{ '_button': true, active: modelValue === option.value }"
+		:disabled="modelValue === option.value"
+		@click.stop="emit('update:modelValue', option.value)"
+	>
+		{{ option.label }}
+	</button>
+</div>
+</template>
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			required: true,
-		},
-	},
-	render() {
-		const options = this.$slots.default();
+<script lang="ts" setup>
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: string): void;
+}>();
 
-		return withDirectives(h('div', {
-			class: 'pxhvhrfw',
-		}, options.map(option => withDirectives(h('button', {
-			class: ['_button', { active: this.modelValue === option.props.value }],
-			key: option.key,
-			disabled: this.modelValue === option.props.value,
-			onClick: () => {
-				this.$emit('update:modelValue', option.props.value);
-			},
-		}, option.children), [
-			[resolveDirective('click-anime')],
-		]))), [
-			[resolveDirective('size'), { max: [500] }],
-		]);
-	},
-});
+const props = defineProps<{
+	modelValue: string;
+	options: {
+		value: string;
+		label: string;
+	};
+}>();
 </script>
 
 <style lang="scss">
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue
index 0f32804b7..56a213798 100644
--- a/packages/client/src/pages/explore.featured.vue
+++ b/packages/client/src/pages/explore.featured.vue
@@ -1,9 +1,6 @@
 <template>
 <MkSpacer :content-max="800">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="notes">{{ i18n.ts.notes }}</option>
-		<option value="polls">{{ i18n.ts.poll }}</option>
-	</MkTab>
+	<MkTab v-model="tab" :options="tabs" style="margin-bottom: var(--margin);"/>
 	<XNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/>
 	<XNotes v-else-if="tab === 'polls'" :pagination="paginationForPolls"/>
 </MkSpacer>
@@ -14,6 +11,14 @@ import XNotes from '@/components/notes.vue';
 import MkTab from '@/components/tab.vue';
 import { i18n } from '@/i18n';
 
+const tabs = [{
+	value: 'notes',
+	label: i18n.ts.notes,
+}, {
+	value: 'polls',
+	label: i18n.ts.poll,
+}];
+
 const paginationForNotes = {
 	endpoint: 'notes/featured' as const,
 	limit: 10,
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index fba8b96bd..7e420e2c9 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -47,7 +47,6 @@ import XUserList from '@/components/user-list.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkInput from '@/components/form/input.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkTab from '@/components/tab.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkGalleryPostPreview from '@/components/gallery-post-preview.vue';
 import number from '@/filters/number';
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index 5e45e31c2..f723f798f 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -45,7 +45,6 @@ import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkAvatars from '@/components/avatars.vue';
-import MkTab from '@/components/tab.vue';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index b5b1b660f..a1248b8ac 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -1,9 +1,6 @@
 <template>
 <div class="_formRoot">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="mute">{{ i18n.ts.mutedUsers }}</option>
-		<option value="block">{{ i18n.ts.blockedUsers }}</option>
-	</MkTab>
+	<MkTab v-model="tab" :options="tabs" style="margin-bottom: var(--margin);"/>
 	<div v-if="tab === 'mute'">
 		<MkPagination :pagination="mutingPagination" class="muting">
 			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
@@ -39,6 +36,14 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 
 let tab = $ref('mute');
 
+const tabs = [{
+	value: 'mute',
+	label: i18n.ts.mutedUsers,
+}, {
+	value: 'block',
+	label: i18n.ts.blockedUsers,
+}];
+
 const mutingPagination = {
 	endpoint: 'mute/list' as const,
 	limit: 10,
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index c73d55fce..a9ac2c18f 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -1,9 +1,6 @@
 <template>
 <div class="_formRoot">
-	<MkTab v-model="tab" class="_formBlock">
-		<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
-		<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
-	</MkTab>
+	<MkTab v-model="tab" :options="tabs" class="_formBlock"/>
 	<div class="_formBlock">
 		<div v-show="tab === 'soft'">
 			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.softDescription }}</MkInfo>
@@ -50,6 +47,14 @@ const render = (mutedWords) => mutedWords.map(x => {
 	}
 }).join('\n');
 
+const tabs = [{
+	value: 'soft',
+	label: i18n.ts._wordMute.soft,
+}, {
+	value: 'hard',
+	label: i18n.ts._wordMute.hard,
+}];
+
 const tab = ref('soft');
 const softMutedWords = ref(render(defaultStore.state.mutedWords));
 const hardMutedWords = ref(render($i!.mutedWords));
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index 41e241310..d441e78c0 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,16 +1,12 @@
 <template>
 <div v-sticky-container class="yrzkoczt">
-	<MkTab v-model="include" class="tab">
-		<option :value="null">{{ i18n.ts.notes }}</option>
-		<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
-		<option value="files">{{ i18n.ts.withFiles }}</option>
-	</MkTab>
+	<MkTab v-model="include" :options="tabs" class="tab"/>
 	<XNotes :no-gap="true" :pagination="pagination"/>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import * as foundkey from 'foundkey-js';
 import XNotes from '@/components/notes.vue';
 import MkTab from '@/components/tab.vue';
@@ -21,15 +17,26 @@ const props = defineProps<{
 	user: foundkey.entities.UserDetailed;
 }>();
 
-const include = ref<string | null>(null);
+const tabs = [{
+	value: 'notes',
+	label: i18n.ts.notes,
+}, {
+	value: 'replies',
+	label: i18n.ts.notesAndReplies,
+}, {
+	value: 'files',
+	label: i18n.ts.withFiles,
+}];
+
+let include: string = $ref('notes');
 
 const pagination = {
 	endpoint: 'users/notes' as const,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.user.id,
-		includeReplies: include.value === 'replies',
-		withFiles: include.value === 'files',
+		includeReplies: include === 'replies',
+		withFiles: include === 'files',
 	})),
 };
 </script>

From f4f83cb0919abd2c9d9bee2a8d7e0960a7c2b705 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Tue, 4 Oct 2022 15:34:13 +0200
Subject: [PATCH 2/2] client: remove click-anime directive

---
 packages/client/src/components/launch-pad.vue | 10 +++---
 packages/client/src/components/post-form.vue  |  2 +-
 packages/client/src/directives/click-anime.ts | 31 -------------------
 packages/client/src/directives/index.ts       |  2 --
 packages/client/src/pages/gallery/post.vue    |  6 ++--
 packages/client/src/pages/page.vue            |  4 +--
 packages/client/src/pages/user/home.vue       |  6 ++--
 packages/client/src/style.scss                | 14 ---------
 .../src/ui/_common_/sidebar-for-mobile.vue    | 12 +++----
 packages/client/src/ui/_common_/sidebar.vue   | 12 +++----
 packages/client/src/ui/classic.header.vue     | 12 +++----
 packages/client/src/ui/classic.sidebar.vue    | 14 ++++-----
 12 files changed, 39 insertions(+), 86 deletions(-)
 delete mode 100644 packages/client/src/directives/click-anime.ts

diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index 383c3e332..bd5494739 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -3,12 +3,12 @@
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
 			<template v-for="item in items">
-				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
+				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</button>
-				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
+				<MkA v-else :to="item.to" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
@@ -16,15 +16,15 @@
 			</template>
 		</div>
 		<div class="sub">
-			<button v-click-anime class="_button" @click="help">
+			<button class="_button" @click="help">
 				<i class="fas fa-question-circle icon"></i>
 				<div class="text">{{ i18n.ts.help }}</div>
 			</button>
-			<MkA v-click-anime to="/about" @click.passive="close()">
+			<MkA to="/about" @click.passive="close()">
 				<i class="fas fa-info-circle icon"></i>
 				<div class="text">{{ i18n.ts.instanceInfo }}</div>
 			</MkA>
-			<MkA v-click-anime to="/about-foundkey" @click.passive="close()">
+			<MkA to="/about-foundkey" @click.passive="close()">
 				<img src="/static-assets/favicon.png" class="icon"/>
 				<div class="text">{{ i18n.ts.aboutMisskey }}</div>
 			</MkA>
diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/post-form.vue
index 8f1b78211..c16680abb 100644
--- a/packages/client/src/components/post-form.vue
+++ b/packages/client/src/components/post-form.vue
@@ -7,7 +7,7 @@
 >
 	<header>
 		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
+		<button v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
 			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
 		</button>
 		<div>
diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts
deleted file mode 100644
index e2f514b7c..000000000
--- a/packages/client/src/directives/click-anime.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Directive } from 'vue';
-import { defaultStore } from '@/store';
-
-export default {
-	mounted(el, binding, vn) {
-		/*
-		if (!defaultStore.state.animation) return;
-
-		el.classList.add('_anime_bounce_standBy');
-
-		el.addEventListener('mousedown', () => {
-			el.classList.add('_anime_bounce_standBy');
-			el.classList.add('_anime_bounce_ready');
-
-			el.addEventListener('mouseleave', () => {
-				el.classList.remove('_anime_bounce_ready');
-			});
-		});
-
-		el.addEventListener('click', () => {
-			el.classList.add('_anime_bounce');
-		});
-
-		el.addEventListener('animationend', () => {
-			el.classList.remove('_anime_bounce_ready');
-			el.classList.remove('_anime_bounce');
-			el.classList.add('_anime_bounce_standBy');
-		});
-		*/
-	},
-} as Directive;
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index fc9b6f86d..548df230d 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -9,7 +9,6 @@ import hotkey from './hotkey';
 import appear from './appear';
 import anim from './anim';
 import stickyContainer from './sticky-container';
-import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
 
@@ -23,7 +22,6 @@ export default function(app: App) {
 	app.directive('hotkey', hotkey);
 	app.directive('appear', appear);
 	app.directive('anim', anim);
-	app.directive('click-anime', clickAnime);
 	app.directive('sticky-container', stickyContainer);
 	app.directive('panel', panel);
 	app.directive('adaptive-border', adaptiveBorder);
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 94b5c985f..2886321d2 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -22,9 +22,9 @@
 								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
 							</div>
 							<div class="other">
-								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.shareWithNote" class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.share" class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 							</div>
 						</div>
 						<div class="user">
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 82b2f7cd1..ebbd930f6 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -17,8 +17,8 @@
 							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 						</div>
 						<div class="other">
-							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.shareWithNote" class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 						</div>
 					</div>
 					<div class="user">
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 58cd90dd8..cb4d0efce 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -69,15 +69,15 @@
 						</dl>
 					</div>
 					<div class="status">
-						<MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
+						<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
 							<b>{{ number(user.notesCount) }}</b>
 							<span>{{ i18n.ts.notes }}</span>
 						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+						<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
 							<b>{{ number(user.followingCount) }}</b>
 							<span>{{ i18n.ts.following }}</span>
 						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+						<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
 							<b>{{ number(user.followersCount) }}</b>
 							<span>{{ i18n.ts.followers }}</span>
 						</MkA>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 54358e4ee..f96b0e63f 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -515,20 +515,6 @@ hr {
 	}
 }
 
-._anime_bounce {
-	will-change: transform;
-  animation: bounce ease 0.7s;
-  animation-iteration-count: 1;
-  transform-origin: 50% 50%;
-}
-._anime_bounce_ready {
-	will-change: transform;
-	transform:  scaleX(0.90) scaleY(0.90) ;
-}
-._anime_bounce_standBy {
-	transition: transform 0.1s ease;
-}
-
 @keyframes bounce{
   0% {
     transform:  scaleX(0.90) scaleY(0.90) ;
diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
index 41a82d6cb..88d5c0bf4 100644
--- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
@@ -1,28 +1,28 @@
 <template>
 <div class="kmwsukvl">
 	<div>
-		<button v-click-anime class="item _button account" @click="openAccountMenuWrapper">
+		<button class="item _button account" @click="openAccountMenuWrapper">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+		<MkA class="item index" active-class="active" to="/" exact>
 			<i class="fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu" :key="item">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
-		<MkA v-if="iAmModerator" v-click-anime class="item" active-class="active" to="/admin">
+		<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin">
 			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
-		<button v-click-anime class="item _button" @click="more">
+		<button class="item _button" @click="more">
 			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
+		<MkA class="item" active-class="active" to="/settings">
 			<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="post">
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index fe3c5e84d..e3912df40 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -1,28 +1,28 @@
 <template>
 <div class="mvcprjjd" :class="{ iconOnly }">
 	<div>
-		<button v-click-anime class="item _button account" @click="openAccountMenu">
+		<button class="item _button account" @click="openAccountMenu">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+		<MkA class="item index" active-class="active" to="/" exact>
 			<i class="fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
-		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+		<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin">
 			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 		</MkA>
-		<button v-click-anime class="item _button" @click="more">
+		<button class="item _button" @click="more">
 			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
+		<MkA class="item" active-class="active" to="/settings">
 			<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="os.post">
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 21d1f759c..41d861661 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -2,30 +2,30 @@
 <div class="azykntjl">
 	<div class="body">
 		<div class="left">
-			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
+			<MkA v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
 				<i class="fas fa-home fa-fw"></i>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
-				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-tooltip="i18n.ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 					<i class="fa-fw" :class="menuDef[item].icon"></i>
 					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
-			<MkA v-if="iAmModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-if="iAmModerator" v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="fas fa-door-open fa-fw"></i>
 			</MkA>
-			<button v-click-anime class="item _button" @click="more">
+			<button class="item _button" @click="more">
 				<i class="fas fa-ellipsis-h fa-fw"></i>
 				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</button>
 		</div>
 		<div class="right">
-			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="fas fa-cog fa-fw"></i>
 			</MkA>
-			<button v-click-anime class="item _button account" @click="openAccountMenuWrapper">
+			<button class="item _button account" @click="openAccountMenuWrapper">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
 			</button>
 			<div class="post" @click="post">
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 39b031d6c..00177ba15 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -1,6 +1,6 @@
 <template>
 <div ref="sidebar" class="npcljfve" :class="{ iconOnly }">
-	<button v-if="$i" v-click-anime class="item _button account" @click="openAccountMenuWrapper">
+	<button v-if="$i" class="item _button account" @click="openAccountMenuWrapper">
 		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 	</button>
 	<div class="post" data-cy-open-post-form @click="() => { os.post(); }">
@@ -9,30 +9,30 @@
 		</MkButton>
 	</div>
 	<div class="divider"></div>
-	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+	<MkA class="item index" active-class="active" to="/" exact>
 		<i class="fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
-		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
+		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
 			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
 			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</component>
 	</template>
 	<div class="divider"></div>
-	<MkA v-if="iAmModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+	<MkA v-if="iAmModerator" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 		<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 	</MkA>
-	<button v-click-anime class="item _button" @click="more">
+	<button class="item _button" @click="more">
 		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
 		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 	</button>
-	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+	<MkA class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 		<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
-		<MkA v-click-anime class="link" to="/about">
+		<MkA class="link" to="/about">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
 		</MkA>
 	</div>