feat: ⚗️ ripple effect

packages/client/src/pages/timeline.vue

@@ -1,12 +1,13 @@
 <template>
 <MkStickyContainer>
-		<template #header
-			><MkPageHeader
+	<template #header>
+		<MkPageHeader
 			v-model:tab="src"
 			:actions="headerActions"
 			:tabs="headerTabs"
 			:display-my-avatar="true"
-		/></template>
+		/>
+	</template>
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
 			<XTutorial
@@ -72,7 +73,6 @@ const DESKTOP_THRESHOLD = 1100;
 const MOBILE_THRESHOLD = 500;
 
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
-const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 const isMobile = ref(
 	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
 );
@@ -297,6 +297,7 @@ if (isMobile.value) {
 		/* reset values */
 		xDown = null;
 		yDown = null;
+		return;
 	}
 }
 </script>

packages/client/src/ui/universal.vue

@@ -304,8 +304,20 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 			height: 64px;
 			border-radius: 8px;
 			background: var(--panel);
+			background-position: center;
+			transition: background 0.6s;
 			color: var(--fg);
 
+			&:hover {
+				background: var(--panelHover) radial-gradient(circle, transparent 1%, var(--panelHover) 1%) center/15000%;
+			}
+
+			&:active {
+				background-color: var(--accentedBg);
+				background-size: 100%;
+				transition: background 0s;
+			}
+
 			&:not(:last-child) {
 				margin-right: 12px;
 			}