wip

Fix #15661

CHANGELOG.md

@@ -6,7 +6,7 @@
 ### Client
 - Feat: 設定の管理が強化されました
   - 自動でバックアップされるように
-	- 任意の設定項目をデバイス間で同期できるように(実験的)
+  - 任意の設定項目をデバイス間で同期できるように
 - Enhance: プラグインの管理が強化されました
   - インストール/アンインストール/設定の変更時にリロード不要になりました
 - Enhance: ログアウト時、ブラウザに保存されたWebクライアントのデータを全て消去するように

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2025.3.2-beta.0",
+	"version": "2025.3.2-beta.1",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

packages/frontend-embed/src/components/EmReactionsViewer.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { inject, watch, ref } from 'vue';
+import { watch, ref } from 'vue';
 import XReaction from '@/components/EmReactionsViewer.reaction.vue';
 
 const props = withDefaults(defineProps<{
@@ -22,12 +22,6 @@ const props = withDefaults(defineProps<{
 	maxNumber: Infinity,
 });
 
-const mock = inject<boolean>('mock', false);
-
-const emit = defineEmits<{
-	(ev: 'mockUpdateMyReaction', emoji: string, delta: number): void;
-}>();
-
 const initialReactions = new Set(Object.keys(props.note.reactions));
 
 const reactions = ref<[string, number][]>([]);
@@ -38,12 +32,8 @@ if (props.note.myReaction && !Object.keys(reactions.value).includes(props.note.m
 }
 
 function onMockToggleReaction(emoji: string, count: number) {
-	if (!mock) return;
-
 	const i = reactions.value.findIndex((item) => item[0] === emoji);
 	if (i < 0) return;
-
-	emit('mockUpdateMyReaction', emoji, (count - reactions.value[i][1]));
 }
 
 watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumber]) => {

packages/frontend/src/components/MkHorizontalSwipe.vue

@@ -10,19 +10,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@touchstart.passive="touchStart"
 	@touchmove.passive="touchMove"
 	@touchend.passive="touchEnd"
->
-	<Transition
-		:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]"
-		:enterActiveClass="$style.swipeAnimation_enterActive"
-		:leaveActiveClass="$style.swipeAnimation_leaveActive"
-		:enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom"
-		:leaveToClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_leaveTo : $style.swipeAnimationRight_leaveTo"
-		:style="`--swipe: ${pullDistance}px;`"
 >
 	<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
 	<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
 	<slot></slot>
-	</Transition>
 </div>
 </template>
 <script lang="ts" setup>

packages/frontend/src/components/MkNote.vue

@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock" :style="{ viewTransitionName: transitionName }"/>
 		<div :class="$style.main">
 			<MkNoteHeader :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
@@ -177,7 +177,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef, watch, provide } from 'vue';
+import { computed, inject, onMounted, ref, shallowRef, watch, provide, reactive, nextTick } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
@@ -223,6 +223,8 @@ import { focusPrev, focusNext } from '@/utility/focus.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
+import { prepareViewTransition } from '@/page.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -233,7 +235,18 @@ const props = withDefaults(defineProps<{
 	mock: false,
 });
 
-provide('mock', props.mock);
+const transitionNames = reactive({
+	avatar: '',
+});
+
+provide(DI.mock, props.mock);
+provide(DI.navHook, (path, flag) => {
+	const names = prepareViewTransition(path);
+	transitionNames.avatar = names.avatar;
+	nextTick(() => {
+		router.push(path, flag);
+	});
+});
 
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
@@ -852,6 +865,8 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: sticky !important;
 	top: calc(22px + var(--MI-stickyTop, 0px));
 	left: 0;
+
+	contain: paint;
 }
 
 .main {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article :class="$style.note" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
-			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
+			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview :style="{ viewTransitionName: transitionName }"/>
 			<div :class="$style.noteHeaderBody">
 				<div>
 					<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
@@ -255,6 +255,7 @@ import { isEnabledUrlPreview } from '@/instance.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
+import { prepareViewTransition } from '@/page.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -263,6 +264,8 @@ const props = withDefaults(defineProps<{
 	initialTab: 'replies',
 });
 
+const transitionName = prepareViewTransition('note-noteDetailed', props.note.id).avatar;
+
 const inChannel = inject('inChannel', null);
 
 const note = ref(deepClone(props.note));
@@ -669,6 +672,8 @@ function loadConversation() {
 	flex-shrink: 0;
 	width: 58px;
 	height: 58px;
+
+	contain: paint;
 }
 
 .noteHeaderBody {

packages/frontend/src/components/MkNoteHeader.vue

@@ -40,12 +40,13 @@ import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
+import { DI } from '@/di.js';
 
 defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
-const mock = inject<boolean>('mock', false);
+const mock = inject(DI.mock, false);
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkPostForm.vue

@@ -138,6 +138,7 @@ import { emojiPicker } from '@/utility/emoji-picker.js';
 import { mfmFunctionPicker } from '@/utility/mfm-function-picker.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
+import { DI } from '@/di.js';
 
 const $i = signinRequired();
 
@@ -155,7 +156,7 @@ const props = withDefaults(defineProps<PostFormProps & {
 	initialLocalOnly: undefined,
 });
 
-provide('mock', props.mock);
+provide(DI.mock, props.mock);
 
 const emit = defineEmits<{
 	(ev: 'posted'): void;

packages/frontend/src/components/MkPostFormAttaches.vue

@@ -42,6 +42,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import { DI } from '@/di.js';
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
@@ -50,7 +51,7 @@ const props = defineProps<{
 	detachMediaFn?: (id: string) => void;
 }>();
 
-const mock = inject<boolean>('mock', false);
+const mock = inject(DI.mock, false);
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: Misskey.entities.DriveFile[]): void;

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

@@ -35,6 +35,7 @@ import * as sound from '@/utility/sound.js';
 import { checkReactionPermissions } from '@/utility/check-reaction-permissions.js';
 import { customEmojisMap } from '@/custom-emojis.js';
 import { prefer } from '@/preferences.js';
+import { DI } from '@/di.js';
 
 const props = defineProps<{
 	reaction: string;
@@ -43,7 +44,7 @@ const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
-const mock = inject<boolean>('mock', false);
+const mock = inject(DI.mock, false);
 
 const emit = defineEmits<{
 	(ev: 'reactionToggled', emoji: string, newCount: number): void;

packages/frontend/src/components/MkReactionsViewer.vue

@@ -22,6 +22,7 @@ import * as Misskey from 'misskey-js';
 import { inject, watch, ref } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { prefer } from '@/preferences.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -30,7 +31,7 @@ const props = withDefaults(defineProps<{
 	maxNumber: Infinity,
 });
 
-const mock = inject<boolean>('mock', false);
+const mock = inject(DI.mock, false);
 
 const emit = defineEmits<{
 	(ev: 'mockUpdateMyReaction', emoji: string, delta: number): void;

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

@@ -20,6 +20,7 @@ import * as os from '@/os.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/router/supplier.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	to: string;
@@ -37,6 +38,7 @@ const el = shallowRef<HTMLElement>();
 defineExpose({ $el: el });
 
 const router = useRouter();
+const navHook = inject(DI.navHook, null);
 
 const active = computed(() => {
 	if (props.activeClass == null) return false;
@@ -99,6 +101,10 @@ function nav(ev: MouseEvent) {
 		return openWindow();
 	}
 
+	if (navHook != null) {
+		navHook(props.to, ev.ctrlKey ? 'forcePage' : null);
+	} else {
 		router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
 	}
+}
 </script>

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

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:exclude="pageCacheController"
 >
 	<Suspense :timeout="0">
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)" :style="{ viewTransitionName: viewId }"/>
 
 		<template #fallback>
 			<MkLoading/>
@@ -20,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
+import { v4 as uuid } from 'uuid';
 import type { IRouter, Resolved, RouteDef } from '@/nirax.js';
 import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
@@ -40,6 +41,12 @@ if (router == null) {
 const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
+const viewId = uuid();
+provide(DI.viewId, viewId);
+
+const viewTransitionId = ref(uuid());
+provide(DI.viewTransitionId, viewTransitionId);
+
 function resolveNested(current: Resolved, d = 0): Resolved | null {
 	if (!props.nested) return current;
 
@@ -59,19 +66,31 @@ const currentPageComponent = shallowRef('component' in current.route ? current.r
 const currentPageProps = ref(current.props);
 const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
 
-function onChange({ resolved, key: newKey }) {
+async function onChange({ resolved, key: newKey }) {
 	const current = resolveNested(resolved);
 	if (current == null || 'redirect' in current.route) return;
+
+	viewTransitionId.value = uuid();
+	await nextTick();
+	nextTick(() => {
+		console.log('onChange', viewTransitionId.value);
+		document.startViewTransition(() => new Promise((res) => {
+			console.log('startViewTransition', viewTransitionId.value);
 			currentPageComponent.value = current.route.component;
 			currentPageProps.value = current.props;
 			key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
 
-	nextTick(() => {
+			nextTick(async () => {
+				//res();
+				setTimeout(res, 100);
+
 				// ページ遷移完了後に再びキャッシュを有効化
 				if (clearCacheRequested.value) {
 					clearCacheRequested.value = false;
 				}
 			});
+		}));
+	});
 }
 
 router.addListener('change', onChange);
@@ -100,3 +119,31 @@ onBeforeUnmount(() => {
 	router.removeListener('change', onChange);
 });
 </script>
+
+<style lang="scss" scoped>
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes slide-from-right {
+  from { transform: translateX(300px); }
+}
+
+@keyframes slide-to-left {
+  to { transform: translateX(-300px); }
+}
+
+::view-transition-old(v-bind(viewId)) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(v-bind(viewId)) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+</style>

packages/frontend/src/di.ts

@@ -4,9 +4,13 @@
  */
 
 import type { InjectionKey, Ref } from 'vue';
-import type { IRouter } from '@/nirax.js';
+import type { IRouter, RouterFlag } from '@/nirax.js';
 
 export const DI = {
 	routerCurrentDepth: Symbol() as InjectionKey<number>,
 	router: Symbol() as InjectionKey<IRouter>,
+	viewId: Symbol() as InjectionKey<string>,
+	viewTransitionId: Symbol() as InjectionKey<Ref<string>>,
+	mock: Symbol() as InjectionKey<boolean>,
+	navHook: Symbol() as InjectionKey<(path: string, flag?: RouterFlag) => void>,
 };

packages/frontend/src/nirax.ts

@@ -37,7 +37,7 @@ interface RouteDefWithRedirect extends RouteDefBase {
 
 export type RouteDef = RouteDefWithComponent | RouteDefWithRedirect;
 
-export type RouterFlag = 'forcePage';
+export type RouterFlag = 'forcePage' | null;
 
 type ParsedPath = (string | {
 	name: string;

packages/frontend/src/page.ts

@@ -4,8 +4,9 @@
  */
 
 import * as Misskey from 'misskey-js';
-import { inject, isRef, onActivated, onBeforeUnmount, provide, ref, toValue, watch } from 'vue';
+import { computed, inject, isRef, onActivated, onBeforeUnmount, provide, ref, toValue, watch } from 'vue';
 import type { MaybeRefOrGetter, Ref } from 'vue';
+import { DI } from '@/di.js';
 
 export type PageMetadata = {
 	title: string;
@@ -69,3 +70,12 @@ export const injectReactiveMetadata = (): Ref<PageMetadata | null> => {
 	const metadataRef = getMetadata();
 	return isRef(metadataRef) ? metadataRef : ref(null);
 };
+
+export function prepareViewTransition(type: string, id: string) {
+	const viewId = inject(DI.viewId);
+	const viewTransitionId = inject(DI.viewTransitionId);
+	return {
+		avatar: computed(() => 'adsfsdfsfg' + viewId + viewTransitionId.value + id),
+		//avatar: computed(() => 'adsfsdfsfg' + id),
+	};
+}

packages/frontend/src/pages/note.vue

@@ -8,7 +8,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div>
-			<Transition :name="prefer.s.animation ? 'fade' : ''" mode="out-in">
 			<div v-if="note">
 				<div v-if="showNext" class="_margin">
 					<MkNotes class="" :pagination="showNext === 'channel' ? nextChannelPagination : nextUserPagination" :noGap="true" :disableAutoLoad="true"/>
@@ -41,7 +40,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<MkError v-else-if="error" @retry="fetchNote()"/>
 			<MkLoading v-else/>
-			</Transition>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>

packages/frontend/src/pages/notifications.vue

@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkSpacer :contentMax="800">
 		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'all'" key="all">
+				<div style="view-transition-name: a; contain: paint; margin: 64px;">BBBBBBBBB</div>
 				<XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/>
 			</div>
 			<div v-else-if="tab === 'mentions'" key="mention">
@@ -24,13 +25,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import { notificationTypes } from '@@/js/const.js';
 import XNotifications from '@/components/MkNotifications.vue';
 import MkNotes from '@/components/MkNotes.vue';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
-import { notificationTypes } from '@@/js/const.js';
 
 const tab = ref('all');
 const includeTypes = ref<string[] | null>(null);

packages/frontend/src/pages/timeline.vue

@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkSpacer :contentMax="800">
 		<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
 			<div :key="src" ref="rootEl">
+				<div style="view-transition-name: a; contain: paint;">AAAAAAAAAA</div>
 				<MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
 					{{ i18n.ts._timelineDescription[src] }}
 				</MkInfo>

packages/frontend/src/router/supplier.ts

@@ -5,7 +5,6 @@
 
 import { inject } from 'vue';
 import type { IRouter } from '@/nirax.js';
-import { Router } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
 import { DI } from '@/di.js';
 
@@ -14,7 +13,7 @@ import { DI } from '@/di.js';
  * あらかじめ{@link setupRouter}を実行しておく必要がある（{@link provide}により{@link IRouter}のインスタンスを注入可能であるならばこの限りではない）
  */
 export function useRouter(): IRouter {
-	return inject<Router | null>(DI.router, null) ?? mainRouter;
+	return inject(DI.router, null) ?? mainRouter;
 }
 
 /**

packages/frontend/src/store.ts

@@ -178,7 +178,18 @@ export const store = markRaw(new Storage('base', {
 	},
 	menu: {
 		where: 'deviceAccount',
-		default: [],
+		default: [
+			'notifications',
+			'clips',
+			'drive',
+			'followRequests',
+			'-',
+			'explore',
+			'announcements',
+			'search',
+			'-',
+			'ui',
+		],
 	},
 	statusbars: {
 		where: 'deviceAccount',

packages/misskey-js/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "misskey-js",
-	"version": "2025.3.2-beta.0",
+	"version": "2025.3.2-beta.1",
 	"description": "Misskey SDK for JavaScript",
 	"license": "MIT",
 	"main": "./built/index.js",