Merge branch 'develop' into img-max

2023-04-06 01:54:38 +00:00
parent ac384b5a79 52011610c6
commit 13c888531b
141 changed files with 2544 additions and 2895 deletions
--- a/packages/frontend/.storybook/fakes.ts
+++ b/packages/frontend/.storybook/fakes.ts
@@ -1,54 +1,116 @@
 import type { entities } from 'misskey-js'

-export const userDetailed = {
-	id: 'someuserid',
-	username: 'miskist',
-	host: 'misskey-hub.net',
-	name: 'Misskey User',
-	onlineStatus: 'unknown',
-	avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
-	avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay',
-	emojis: [],
-	bannerBlurhash: 'eQA^IW^-MH8w9tE8I=S^o{$*R4RikXtSxutRozjEnNR.RQadoyozog',
-	bannerColor: '#000000',
-	bannerUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
-	birthday: '2014-06-20',
-	createdAt: '2016-12-28T22:49:51.000Z',
-	description: 'I am a cool user!',
-	ffVisibility: 'public',
-	fields: [
-		{
-			name: 'Website',
-			value: 'https://misskey-hub.net',
+export function abuseUserReport() {
+	return {
+		id: 'someabusereportid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		comment: 'This user is a spammer!',
+		resolved: false,
+		reporterId: 'reporterid',
+		targetUserId: 'targetuserid',
+		assigneeId: 'assigneeid',
+		reporter: userDetailed('reporterid', 'reporter', 'misskey-hub.net', 'Reporter'),
+		targetUser: userDetailed('targetuserid', 'target', 'misskey-hub.net', 'Target'),
+		assignee: userDetailed('assigneeid', 'assignee', 'misskey-hub.net', 'Assignee'),
+		me: null,
+		forwarded: false,
+	};
+}
+
+export function galleryPost(isSensitive = false) {
+	return {
+		id: 'somepostid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		updatedAt: '2016-12-28T22:49:51.000Z',
+		userid: 'someuserid',
+		user: userDetailed(),
+		title: 'Some post title',
+		description: 'Some post description',
+		fileIds: ['somefileid'],
+		files: [
+			file(isSensitive),
+		],
+		isSensitive,
+		likedCount: 0,
+		isLiked: false,
+	}
+}
+
+export function file(isSensitive = false) {
+	return {
+		id: 'somefileid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		name: 'somefile.jpg',
+		type: 'image/jpeg',
+		md5: 'f6fc51c73dc21b1fb85ead2cdf57530a',
+		size: 77752,
+		isSensitive,
+		blurhash: 'eQAmoa^-MH8w9ZIvNLSvo^$*MwRPbwtSxutRozjEiwR.RjWBoeozog',
+		properties: {
+			width: 1024,
+			height: 270
 		},
-	],
-	followersCount: 1024,
-	followingCount: 16,
-	hasPendingFollowRequestFromYou: false,
-	hasPendingFollowRequestToYou: false,
-	isAdmin: false,
-	isBlocked: false,
-	isBlocking: false,
-	isBot: false,
-	isCat: false,
-	isFollowed: false,
-	isFollowing: false,
-	isLocked: false,
-	isModerator: false,
-	isMuted: false,
-	isSilenced: false,
-	isSuspended: false,
-	lang: 'en',
-	location: 'Fediverse',
-	notesCount: 65536,
-	pinnedNoteIds: [],
-	pinnedNotes: [],
-	pinnedPage: null,
-	pinnedPageId: null,
-	publicReactions: false,
-	securityKeys: false,
-	twoFactorEnabled: false,
-	updatedAt: null,
-	uri: null,
-	url: null,
-} satisfies entities.UserDetailed
+		url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		thumbnailUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		comment: null,
+		folderId: null,
+		folder: null,
+		userId: null,
+		user: null,
+	};
+}
+
+export function userDetailed(id = 'someuserid', username = 'miskist', host = 'misskey-hub.net', name = 'Misskey User'): entities.UserDetailed {
+	return {
+		id,
+		username,
+		host,
+		name,
+		onlineStatus: 'unknown',
+		avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+		avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay',
+		emojis: [],
+		bannerBlurhash: 'eQA^IW^-MH8w9tE8I=S^o{$*R4RikXtSxutRozjEnNR.RQadoyozog',
+		bannerColor: '#000000',
+		bannerUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		birthday: '2014-06-20',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		description: 'I am a cool user!',
+		ffVisibility: 'public',
+		fields: [
+			{
+				name: 'Website',
+				value: 'https://misskey-hub.net',
+			},
+		],
+		followersCount: 1024,
+		followingCount: 16,
+		hasPendingFollowRequestFromYou: false,
+		hasPendingFollowRequestToYou: false,
+		isAdmin: false,
+		isBlocked: false,
+		isBlocking: false,
+		isBot: false,
+		isCat: false,
+		isFollowed: false,
+		isFollowing: false,
+		isLocked: false,
+		isModerator: false,
+		isMuted: false,
+		isSilenced: false,
+		isSuspended: false,
+		lang: 'en',
+		location: 'Fediverse',
+		notesCount: 65536,
+		pinnedNoteIds: [],
+		pinnedNotes: [],
+		pinnedPage: null,
+		pinnedPageId: null,
+		publicReactions: false,
+		securityKeys: false,
+		twoFactorEnabled: false,
+		updatedAt: null,
+		uri: null,
+		url: null,
+	};
+}
--- a/packages/frontend/.storybook/generate.tsx
+++ b/packages/frontend/.storybook/generate.tsx
@@ -394,13 +394,13 @@ function toStories(component: string): string {
 	);
 }

-// promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then(
-glob('src/components/global/**/*.vue').then(
-	(components) =>
-		Promise.all(
-			components.map((component) => {
-				const stories = component.replace(/\.vue$/, '.stories.ts');
-				return writeFile(stories, toStories(component));
-			})
-		)
-);
+// glob('src/{components,pages,ui,widgets}/**/*.vue')
+Promise.all([
+	glob('src/components/global/*.vue'),
+	glob('src/components/MkGalleryPostPreview.vue'),
+])
+	.then((globs) => globs.flat())
+	.then((components) => Promise.all(components.map((component) => {
+		const stories = component.replace(/\.vue$/, '.stories.ts');
+		return writeFile(stories, toStories(component));
+	})));
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -74,23 +74,23 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
-		"@storybook/addon-essentials": "7.0.0-rc.10",
-		"@storybook/addon-interactions": "7.0.0-rc.10",
-		"@storybook/addon-links": "7.0.0-rc.10",
-		"@storybook/addon-storysource": "7.0.0-rc.10",
-		"@storybook/addons": "7.0.0-rc.10",
-		"@storybook/blocks": "7.0.0-rc.10",
-		"@storybook/core-events": "7.0.0-rc.10",
-		"@storybook/jest": "0.0.10",
-		"@storybook/manager-api": "7.0.0-rc.10",
-		"@storybook/preview-api": "7.0.0-rc.10",
-		"@storybook/react": "7.0.0-rc.10",
-		"@storybook/react-vite": "7.0.0-rc.10",
+		"@storybook/addon-essentials": "7.0.2",
+		"@storybook/addon-interactions": "7.0.2",
+		"@storybook/addon-links": "7.0.2",
+		"@storybook/addon-storysource": "7.0.2",
+		"@storybook/addons": "7.0.2",
+		"@storybook/blocks": "7.0.2",
+		"@storybook/core-events": "7.0.2",
+		"@storybook/jest": "0.1.0",
+		"@storybook/manager-api": "7.0.2",
+		"@storybook/preview-api": "7.0.2",
+		"@storybook/react": "7.0.2",
+		"@storybook/react-vite": "7.0.2",
 		"@storybook/testing-library": "0.0.14-next.1",
-		"@storybook/theming": "7.0.0-rc.10",
-		"@storybook/types": "7.0.0-rc.10",
-		"@storybook/vue3": "7.0.0-rc.10",
-		"@storybook/vue3-vite": "7.0.0-rc.10",
+		"@storybook/theming": "7.0.2",
+		"@storybook/types": "7.0.2",
+		"@storybook/vue3": "7.0.2",
+		"@storybook/vue3-vite": "7.0.2",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/vue": "^6.6.1",
 		"@types/escape-regexp": "0.0.1",
@@ -128,7 +128,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"start-server-and-test": "2.0.0",
-		"storybook": "7.0.0-rc.10",
+		"storybook": "7.0.2",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
 		"vitest": "^0.29.8",
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -36,7 +36,7 @@
 			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
 		</div>
 		<div v-if="actions" :class="$style.buttons">
-			<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
+			<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" :danger="action.danger" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
 		</div>
 	</div>
 </MkModal>
@@ -84,6 +84,7 @@ const props = withDefaults(defineProps<{
 	actions?: {
 		text: string;
 		primary?: boolean,
+		danger?: boolean,
 		callback: (...args: any[]) => void;
 	}[];
 	showOkButton?: boolean;
--- a/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts
+++ b/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts
@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect } from '@storybook/jest';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import { galleryPost } from '../../.storybook/fakes';
+import MkGalleryPostPreview from './MkGalleryPostPreview.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkGalleryPostPreview,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkGalleryPostPreview v-bind="props" />',
+		};
+	},
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+		const links = canvas.getAllByRole('link');
+		await expect(links).toHaveLength(2);
+		await expect(links[0]).toHaveAttribute('href', `/gallery/${galleryPost().id}`);
+		await expect(links[1]).toHaveAttribute('href', `/@${galleryPost().user.username}@${galleryPost().user.host}`);
+	},
+	args: {
+		post: galleryPost(),
+	},
+	decorators: [
+		() => ({
+			template: '<div style="width:260px"><story /></div>',
+		}),
+	],
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const Hover = {
+	...Default,
+	async play(context) {
+		await Default.play(context);
+		const canvas = within(context.canvasElement);
+		const links = canvas.getAllByRole('link');
+		await waitFor(() => userEvent.hover(links[0]));
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const HoverThenUnhover = {
+	...Default,
+	async play(context) {
+		await Hover.play(context);
+		const canvas = within(context.canvasElement);
+		const links = canvas.getAllByRole('link');
+		await waitFor(() => userEvent.unhover(links[0]));
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const Sensitive = {
+	...Default,
+	args: {
+		...Default.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const SensitiveHover = {
+	...Hover,
+	args: {
+		...Hover.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const SensitiveHoverThenUnhover = {
+	...HoverThenUnhover,
+	args: {
+		...HoverThenUnhover.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
--- a/packages/frontend/src/components/MkGalleryPostPreview.vue
+++ b/packages/frontend/src/components/MkGalleryPostPreview.vue
@@ -1,7 +1,10 @@
 <template>
-<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
+<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1" @pointerenter="enterHover" @pointerleave="leaveHover">
 	<div class="thumbnail">
-		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
+		<ImgWithBlurhash class="img" :hash="post.files[0].blurhash"/>
+		<Transition>
+			<ImgWithBlurhash v-if="show" class="img layered" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
+		</Transition>
 	</div>
 	<article>
 		<header>
@@ -15,12 +18,25 @@
 </template>

 <script lang="ts" setup>
-import { } from 'vue';
+import * as misskey from 'misskey-js';
+import { computed, ref } from 'vue';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { defaultStore } from '@/store';

 const props = defineProps<{
-	post: any;
+	post: misskey.entities.GalleryPost;
 }>();
+
+const hover = ref(false);
+const show = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive || hover.value);
+
+function enterHover(): void {
+	hover.value = true;
+}
+
+function leaveHover(): void {
+	hover.value = false;
+}
 </script>

 <style lang="scss" scoped>
@@ -56,6 +72,21 @@ const props = defineProps<{
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
+
+			&.layered {
+				position: absolute;
+				top: 0;
+
+				&.v-enter-active,
+				&.v-leave-active {
+					transition: opacity 0.5s ease;
+				}
+
+				&.v-enter-from,
+				&.v-leave-to {
+					opacity: 0;
+				}
+			}
 		}
 	}

--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -31,7 +31,7 @@
 				<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
 				<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
 			</span>
-			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
+			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
 			<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
 		</div>
 	</div>
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -30,7 +30,7 @@
 				<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
 				<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
 			</span>
-			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
+			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -48,7 +48,7 @@
 							<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
 							<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
 						</span>
-						<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
+						<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
 					</div>
 				</div>
 				<div class="username"><MkAcct :user="appearNote.user"/></div>
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -17,7 +17,7 @@
 			<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
 			<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
 		</span>
-		<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-world-off"></i></span>
+		<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
 		<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
 	</div>
 </header>
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -3,7 +3,7 @@
 	<MkAvatar :class="$style.avatar" :user="$i" link preview/>
 	<div :class="$style.main">
 		<div :class="$style.header">
-			<MkUserName :user="$i"/>
+			<MkUserName :user="$i" :nowrap="true"/>
 		</div>
 		<div>
 			<div :class="$style.content">
@@ -50,6 +50,9 @@ const props = defineProps<{
 .header {
 	margin-bottom: 2px;
 	font-weight: bold;
+	width: 100%;
+	overflow: clip;
+    text-overflow: ellipsis;
 }

@container (min-width: 350px) {
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -83,7 +83,7 @@
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef, onMounted, onUnmounted, watch } from 'vue';
+import { ref, shallowRef } from 'vue';
 import * as misskey from 'misskey-js';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
@@ -94,7 +94,6 @@ import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
-import { stream } from '@/stream';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';

@@ -110,35 +109,6 @@ const props = withDefaults(defineProps<{
 const elRef = shallowRef<HTMLElement>(null);
 const reactionRef = ref(null);

-let readObserver: IntersectionObserver | undefined;
-let connection;
-
-onMounted(() => {
-	if (!props.notification.isRead) {
-		readObserver = new IntersectionObserver((entries, observer) => {
-			if (!entries.some(entry => entry.isIntersecting)) return;
-			stream.send('readNotification', {
-				id: props.notification.id,
-			});
-			observer.disconnect();
-		});
-
-		readObserver.observe(elRef.value);
-
-		connection = stream.useChannel('main');
-		connection.on('readAllNotifications', () => readObserver.disconnect());
-
-		watch(props.notification.isRead, () => {
-			readObserver.disconnect();
-		});
-	}
-});
-
-onUnmounted(() => {
-	if (readObserver) readObserver.disconnect();
-	if (connection) connection.dispose();
-});
-
 const followRequestDone = ref(false);

 const acceptFollowRequest = () => {
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -29,7 +29,6 @@ import { notificationTypes } from '@/const';

 const props = defineProps<{
 	includeTypes?: typeof notificationTypes[number][];
-	unreadOnly?: boolean;
 }>();

 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
@@ -40,23 +39,17 @@ const pagination: Paging = {
 	params: computed(() => ({
 		includeTypes: props.includeTypes ?? undefined,
 		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
-		unreadOnly: props.unreadOnly,
 	})),
 };

 const onNotification = (notification) => {
 	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
 	if (isMuted || document.visibilityState === 'visible') {
-		stream.send('readNotification', {
-			id: notification.id,
-		});
+		stream.send('readNotification');
 	}

 	if (!isMuted) {
-		pagingComponent.value.prepend({
-			...notification,
-			isRead: document.visibilityState === 'visible',
-		});
+		pagingComponent.value.prepend(notification);
 	}
 };

@@ -65,30 +58,6 @@ let connection;
 onMounted(() => {
 	connection = stream.useChannel('main');
 	connection.on('notification', onNotification);
-	connection.on('readAllNotifications', () => {
-		if (pagingComponent.value) {
-			for (const item of pagingComponent.value.queue) {
-				item.isRead = true;
-			}
-			for (const item of pagingComponent.value.items) {
-				item.isRead = true;
-			}
-		}
-	});
-	connection.on('readNotifications', notificationIds => {
-		if (pagingComponent.value) {
-			for (let i = 0; i < pagingComponent.value.queue.length; i++) {
-				if (notificationIds.includes(pagingComponent.value.queue[i].id)) {
-					pagingComponent.value.queue[i].isRead = true;
-				}
-			}
-			for (let i = 0; i < (pagingComponent.value.items || []).length; i++) {
-				if (notificationIds.includes(pagingComponent.value.items[i].id)) {
-					pagingComponent.value.items[i].isRead = true;
-				}
-			}
-		}
-	});
 });

 onUnmounted(() => {
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -7,20 +7,35 @@
 	@drop.stop="onDrop"
 >
 	<header :class="$style.header">
-		<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
-		</button>
-		<div :class="$style.headerRight">
-			<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" :class="$style.localOnly"><i class="ti ti-world-off"></i></span>
-			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button" :class="$style.visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
-				<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
-				<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
-				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+		<div :class="$style.headerLeft">
+			<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
+			<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
+				<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
+			</button>
+		</div>
+		<div :class="$style.headerRight">
+			<template v-if="!(channel != null && fixed)">
+				<button v-if="channel == null" ref="visibilityButton" v-click-anime v-tooltip="i18n.ts.visibility" :class="['_button', $style.headerRightItem, $style.visibility]" @click="setVisibility">
+					<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+					<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
+					<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
+					<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+					<span :class="$style.headerRightButtonText">{{ i18n.ts._visibility[visibility] }}</span>
+				</button>
+				<button v-else :class="['_button', $style.headerRightItem, $style.visibility]" disabled>
+					<span><i class="ti ti-device-tv"></i></span>
+					<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
+				</button>
+			</template>
+			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" :class="['_button', $style.headerRightItem, $style.localOnly, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
+				<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
+				<span v-else><i class="ti ti-rocket-off"></i></span>
+			</button>
+			<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" :class="['_button', $style.headerRightItem, $style.reactionAcceptance, { [$style.danger]: reactionAcceptance }]" @click="toggleReactionAcceptance">
+				<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
+				<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
+				<span v-else><i class="ti ti-icons"></i></span>
 			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.previewButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
 			<button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
@@ -31,50 +46,49 @@
 			</button>
 		</div>
 	</header>
-	<div :class="[$style.form]">
-		<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
-		<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
-		<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
-		<div v-if="visibility === 'specified'" :class="$style.toSpecified">
-			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-			<div :class="$style.visibleUsers">
-				<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
-					<MkAcct :user="u"/>
-					<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
-				</span>
-				<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
-			</div>
+	<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
+	<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
+	<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
+	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
+		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
+		<div :class="$style.visibleUsers">
+			<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
+				<MkAcct :user="u"/>
+				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+			</span>
+			<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
 		</div>
-		<MkInfo v-if="localOnly && channel == null" warn :class="$style.disableFederationWarn">{{ i18n.ts.disableFederationWarn }}</MkInfo>
-		<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<textarea ref="textareaEl" v-model="text" :class="[$style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
-		<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-		<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
-		<div v-if="showingOptions" style="padding: 0 16px;">
-			<MkSelect v-model="reactionAcceptance" small>
-				<template #label>{{ i18n.ts.reactionAcceptance }}</template>
-				<option :value="null">{{ i18n.ts.all }}</option>
-				<option value="likeOnly">{{ i18n.ts.likeOnly }}</option>
-				<option value="likeOnlyForRemote">{{ i18n.ts.likeOnlyForRemote }}</option>
-			</MkSelect>
-		</div>
-		<button v-tooltip="i18n.ts.emoji" class="_button" :class="$style.emojiButton" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-		<footer :class="$style.footer">
+	</div>
+	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
+	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
+	</div>
+	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
+	<XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
+	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+	<div v-if="showingOptions" style="padding: 8px 16px;">
+	</div>
+	<footer :class="$style.footer">
+		<div :class="$style.footerLeft">
 			<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
 			<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
 			<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
 			<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
 			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
 			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
-			<button v-tooltip="i18n.ts.more" class="_button" :class="$style.footerButton" @click="showingOptions = !showingOptions"><i class="ti ti-dots"></i></button>
-		</footer>
-		<datalist id="hashtags">
-			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-		</datalist>
-	</div>
+			<button v-tooltip="i18n.ts.emoji" :class="['_button', $style.footerButton]" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+		</div>
+		<div :class="$style.footerRight">
+			<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.footerButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
+			<!--<button v-tooltip="i18n.ts.more" class="_button" :class="$style.footerButton" @click="showingOptions = !showingOptions"><i class="ti ti-dots"></i></button>-->
+		</div>
+	</footer>
+	<datalist id="hashtags">
+		<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
+	</datalist>
 </div>
 </template>

@@ -85,7 +99,6 @@ import * as misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode/';
 import * as Acct from 'misskey-js/built/acct';
-import MkSelect from './MkSelect.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
@@ -113,7 +126,7 @@ const modal = inject('modal');
 const props = withDefaults(defineProps<{
 	reply?: misskey.entities.Note;
 	renote?: misskey.entities.Note;
-	channel?: any; // TODO
+	channel?: misskey.entities.Channel; // TODO
 	mention?: misskey.entities.User;
 	specified?: misskey.entities.User;
 	initialText?: string;
@@ -401,13 +414,14 @@ function upload(file: File, name?: string) {

 function setVisibility() {
 	if (props.channel) {
-		// TODO: information dialog
+		visibility = 'public';
+		localOnly = true; // TODO: チャンネルが連合するようになった折には消す
 		return;
 	}

 	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
 		currentVisibility: visibility,
-		currentLocalOnly: localOnly,
+		localOnly: localOnly,
 		src: visibilityButton,
 	}, {
 		changeVisibility: v => {
@@ -416,15 +430,65 @@ function setVisibility() {
 				defaultStore.set('visibility', visibility);
 			}
 		},
-		changeLocalOnly: v => {
-			localOnly = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('localOnly', localOnly);
-			}
-		},
 	}, 'closed');
 }

+async function toggleLocalOnly() {
+	if (props.channel) {
+		visibility = 'public';
+		localOnly = true; // TODO: チャンネルが連合するようになった折には消す
+		return;
+	}
+
+	const neverShowInfo = miLocalStorage.getItem('neverShowLocalOnlyInfo');
+
+	if (!localOnly && neverShowInfo !== 'true') {
+		const confirm = await os.actions({
+			type: 'question',
+			title: i18n.ts.disableFederationConfirm,
+			text: i18n.ts.disableFederationConfirmWarn,
+			actions: [
+				{
+					value: 'yes' as const,
+					text: i18n.ts.disableFederationOk,
+					primary: true,
+				},
+				{
+					value: 'neverShow' as const,
+					text: `${i18n.ts.disableFederationOk} (${i18n.ts.neverShow})`,
+					danger: true,
+				},
+				{
+					value: 'no' as const,
+					text: i18n.ts.cancel,
+				},
+			],
+		});
+		if (confirm.canceled) return;
+		if (confirm.result === 'no') return;
+
+		if (confirm.result === 'neverShow') {
+			miLocalStorage.setItem('neverShowLocalOnlyInfo', 'true');
+		}
+	}
+
+	localOnly = !localOnly;
+}
+
+async function toggleReactionAcceptance() {
+	const select = await os.select({
+		title: i18n.ts.reactionAcceptance,
+		items: [
+			{ value: null, text: i18n.ts.all },
+			{ value: 'likeOnly' as const, text: i18n.ts.likeOnly },
+			{ value: 'likeOnlyForRemote' as const, text: i18n.ts.likeOnlyForRemote },
+		],
+		default: reactionAcceptance,
+	});
+	if (select.canceled) return;
+	reactionAcceptance = select.result;
+}
+
 function pushVisibleUser(user) {
 	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
 		visibleUsers.push(user);
@@ -591,7 +655,8 @@ async function post(ev?: MouseEvent) {
 		text.includes('$[x4') ||
 		text.includes('$[scale') ||
 		text.includes('$[position');
-	if (annoying) {
+
+	if (annoying && visibility === 'public') {
 		const { canceled, result } = await os.actions({
 			type: 'warning',
 			text: i18n.ts.thisPostMayBeAnnoying,
@@ -817,6 +882,7 @@ defineExpose({
 <style lang="scss" module>
 .root {
 	position: relative;
+	container-type: inline-size;

 	&.modal {
 		width: 100%;
@@ -824,21 +890,29 @@ defineExpose({
 	}
 }

+//#region header
 .header {
 	z-index: 1000;
-	height: 66px;
+	min-height: 50px;
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 4px;
+}
+
+.headerLeft {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(36px, 50px));
+	grid-template-rows: minmax(40px, 100%);
 }

 .cancel {
 	padding: 0;
 	font-size: 1em;
-	width: 64px;
-	line-height: 66px;
+	height: 100%;
 }

 .account {
 	height: 100%;
-	aspect-ratio: 1/1;
 	display: inline-flex;
 	vertical-align: bottom;
 }
@@ -846,55 +920,23 @@ defineExpose({
 .avatar {
 	width: 28px;
 	height: 28px;
-	margin: auto;
+	margin: auto 0;
 }

 .headerRight {
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-.textCount {
-	opacity: 0.7;
-	line-height: 66px;
-}
-
-.visibility {
-	height: 34px;
-	width: 34px;
-	margin: 0 0 0 8px;
-
-	& + .localOnly {
-		margin-left: 0 !important;
-	}
-}
-
-.localOnly {
-	margin: 0 0 0 12px;
-	opacity: 0.7;
-}
-
-.previewButton {
-	display: inline-block;
-	padding: 0;
-	margin: 0 8px 0 0;
-	font-size: 16px;
-	width: 34px;
-	height: 34px;
-	border-radius: 6px;
-
-	&:hover {
-		background: var(--X5);
-	}
-
-	&.previewButtonActive {
-		color: var(--accent);
-	}
+	display: flex;
+	min-height: 48px;
+	font-size: 0.9em;
+	flex-wrap: nowrap;
+	align-items: center;
+	margin-left: auto;
+	gap: 4px;
+	overflow: clip;
+	padding-left: 4px;
 }

 .submit {
-	margin: 16px 16px 16px 0;
+	margin: 12px 12px 12px 6px;
 	vertical-align: bottom;

 	&:disabled {
@@ -922,17 +964,48 @@ defineExpose({
 	padding: 0 12px;
 	line-height: 34px;
 	font-weight: bold;
-	border-radius: 4px;
-	font-size: 0.9em;
+	border-radius: 6px;
 	min-width: 90px;
 	box-sizing: border-box;
 	color: var(--fgOnAccent);
 	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 }

-.form {
+.headerRightItem {
+	margin: 0;
+	padding: 8px;
+	border-radius: 6px;
+
+	&:hover {
+		background: var(--X5);
+	}
+
+	&:disabled {
+		background: none;
+	}
+
+	&.danger {
+		color: #ff2a2a;
+	}
 }

+.headerRightButtonText {
+	padding-left: 6px;
+}
+
+.visibility {
+	overflow: clip;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+	&:enabled {
+		> .headerRightButtonText {
+			opacity: 0.8;
+		}
+	}
+}
+//#endregion
+
 .preview {
 	padding: 16px 20px 0 20px;
 }
@@ -966,10 +1039,6 @@ defineExpose({
 	background: var(--X4);
 }

-.disableFederationWarn {
-	margin: 0 20px 16px 20px;
-}
-
 .hasNotSpecifiedMentions {
 	margin: 0 20px 16px 20px;
 }
@@ -1011,18 +1080,61 @@ defineExpose({
 	border-top: solid 0.5px var(--divider);
 }

-.text {
-	max-width: 100%;
-	min-width: 100%;
-	min-height: 90px;
+.textOuter {
+	width: 100%;
+	position: relative;

 	&.withCw {
 		padding-top: 8px;
 	}
 }

+.text {
+	max-width: 100%;
+	min-width: 100%;
+	width: 100%;
+	min-height: 90px;
+	height: 100%;
+}
+
+.textCount {
+	position: absolute;
+	top: 0;
+	right: 2px;
+	padding: 4px 6px;
+	font-size: .9em;
+	color: var(--warn);
+	border-radius: 6px;
+	min-width: 1.6em;
+	text-align: center;
+
+	&.textOver {
+		color: #ff2a2a;
+	}
+}
+
 .footer {
+	display: flex;
 	padding: 0 16px 16px 16px;
+	font-size: 1em;
+}
+
+.footerLeft {
+	flex: 1;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+	grid-auto-rows: 46px;
+}
+
+.footerRight {
+	flex: 0.3;
+	margin-left: auto;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+	grid-auto-rows: 46px;
+	direction: rtl;
 }

 .footerButton {
@@ -1030,8 +1142,8 @@ defineExpose({
 	padding: 0;
 	margin: 0;
 	font-size: 1em;
-	width: 46px;
-	height: 46px;
+	width: auto;
+	height: 100%;
 	border-radius: 6px;

 	&:hover {
@@ -1043,42 +1155,34 @@ defineExpose({
 	}
 }

-.emojiButton {
-	position: absolute;
-	top: 55px;
-	right: 13px;
-	display: inline-block;
-	padding: 0;
-	margin: 0;
-	font-size: 1em;
-	width: 32px;
-	height: 32px;
+.previewButtonActive {
+	color: var(--accent);
 }

@container (max-width: 500px) {
-	.header {
-		height: 50px;
+	.headerRight {
+		font-size: .9em;
+	}

-		> .cancel {
-			width: 50px;
-			line-height: 50px;
-		}
+	.headerRightButtonText {
+		display: none;
+	}

-		> .headerRight {
-			> .textCount {
-				line-height: 50px;
-			}
+	.visibility {
+		overflow: initial;
+	}

-			> .submit {
-				margin: 8px;
-			}
-		}
+	.submit {
+		margin: 8px 8px 8px 4px;
 	}

 	.toSpecified {
 		padding: 6px 16px;
 	}

+	.preview {
+		padding: 16px 14px 0 14px;
+	}
 	.cw,
 	.hashtags,
 	.text {
@@ -1094,11 +1198,13 @@ defineExpose({
 	}
 }

-@container (max-width: 310px) {
-	.footerButton {
+@container (max-width: 330px) {
+	.headerRight {
+		gap: 0;
+	}
+
+	.footer {
 		font-size: 14px;
-		width: 44px;
-		height: 44px;
 	}
 }
 </style>
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -24,19 +24,19 @@ const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.d

 const props = defineProps<{
 	modelValue: any[];
-	detachMediaFn: () => void;
+	detachMediaFn?: (id: string) => void;
 }>();

 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any[]): void;
-	(ev: 'detach'): void;
+	(ev: 'detach', id: string): void;
 	(ev: 'changeSensitive'): void;
 	(ev: 'changeName'): void;
 }>();

 let menuShowing = false;

-function detachMedia(id) {
+function detachMedia(id: string) {
 	if (props.detachMediaFn) {
 		props.detachMediaFn(id);
 	} else {
--- a/packages/frontend/src/components/MkVisibilityPicker.vue
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@@ -1,6 +1,9 @@
 <template>
-<MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="_popup" :class="$style.root">
+<MkModal ref="modal" v-slot="{ type }" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
+	<div class="_popup" :class="{ [$style.root]: true, [$style.asDrawer]: type === 'drawer' }">
+		<div :class="[$style.label, $style.item]">
+			{{ i18n.ts.visibility }}
+		</div>
 		<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
 			<div :class="$style.icon"><i class="ti ti-world"></i></div>
 			<div :class="$style.body">
@@ -29,21 +32,12 @@
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
 			</div>
 		</button>
-		<div :class="$style.divider"></div>
-		<button key="localOnly" class="_button" :class="[$style.item, $style.localOnly, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
-			<div :class="$style.icon"><i class="ti ti-world-off"></i></div>
-			<div :class="$style.body">
-				<span :class="$style.itemTitle">{{ i18n.ts._visibility.disableFederation }}</span>
-				<span :class="$style.itemDescription">{{ i18n.ts._visibility.disableFederationDescription }}</span>
-			</div>
-			<div :class="$style.toggle"><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
-		</button>
 	</div>
 </MkModal>
 </template>

 <script lang="ts" setup>
-import { nextTick, watch } from 'vue';
+import { nextTick } from 'vue';
 import * as misskey from 'misskey-js';
 import MkModal from '@/components/MkModal.vue';
 import { i18n } from '@/i18n';
@@ -52,42 +46,58 @@ const modal = $shallowRef<InstanceType<typeof MkModal>>();

 const props = withDefaults(defineProps<{
 	currentVisibility: typeof misskey.noteVisibilities[number];
-	currentLocalOnly: boolean;
+	localOnly: boolean;
 	src?: HTMLElement;
 }>(), {
 });

 const emit = defineEmits<{
 	(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
-	(ev: 'changeLocalOnly', v: boolean): void;
 	(ev: 'closed'): void;
 }>();

 let v = $ref(props.currentVisibility);
-let localOnly = $ref(props.currentLocalOnly);
-
-watch($$(localOnly), () => {
-	emit('changeLocalOnly', localOnly);
-});

 function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 	v = visibility;
 	emit('changeVisibility', visibility);
 	nextTick(() => {
-		modal.close();
+		if (modal) modal.close();
 	});
 }
 </script>

 <style lang="scss" module>
 .root {
-	width: 240px;
+	min-width: 240px;
 	padding: 8px 0;
+
+	&.asDrawer {
+		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
+		width: 100%;
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+
+		.label {
+			pointer-events: none;
+			font-size: 12px;
+			padding-bottom: 4px;
+			opacity: 0.7;
+		}
+
+		.item {
+			font-size: 14px;
+			padding: 10px 24px;
+		}
+	}
 }

-.divider {
-	margin: 8px 0;
-	border-top: solid 0.5px var(--divider);
+.label {
+	pointer-events: none;
+	font-size: 10px;
+	padding-bottom: 4px;
+	opacity: 0.7;
 }

 .item {
@@ -107,13 +117,7 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 	}

 	&.active {
-		color: var(--fgOnAccent);
-		background: var(--accent);
-	}
-
-	&.localOnly.active {
 		color: var(--accent);
-		background: inherit;
 	}
 }

@@ -144,16 +148,4 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 .itemDescription {
 	opacity: 0.6;
 }
-
-.toggle {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-left: 10px;
-	width: 16px;
-	top: 0;
-	bottom: 0;
-	margin-top: auto;
-	margin-bottom: auto;
-}
 </style>
--- a/packages/frontend/src/components/global/MkAcct.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkAcct.stories.impl.ts
@@ -25,7 +25,7 @@ export const Default = {
 	},
 	args: {
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			host: null,
 		},
 	},
@@ -37,7 +37,7 @@ export const Detail = {
 	...Default,
 	args: {
 		...Default.args,
-		user: userDetailed,
+		user: userDetailed(),
 		detail: true,
 	},
 } satisfies StoryObj<typeof MkAcct>;
--- a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts
@@ -24,7 +24,7 @@ const common = {
 		};
 	},
 	args: {
-		user: userDetailed,
+		user: userDetailed(),
 	},
 	decorators: [
 		(Story, context) => ({
@@ -49,7 +49,7 @@ export const ProfilePageCat = {
 	args: {
 		...ProfilePage.args,
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			isCat: true,
 		},
 	},
--- a/packages/frontend/src/components/global/MkError.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkError.stories.impl.ts
@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect } from '@storybook/jest';
+import { waitFor } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import MkError from './MkError.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkError,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+			},
+			template: '<MkError v-bind="props" />',
+		};
+	},
+	async play({ canvasElement }) {
+		await expect(canvasElement.firstElementChild).not.toBeNull();
+		await waitFor(async () => expect(canvasElement.firstElementChild?.classList).not.toContain('_transition_zoom-enter-active'));
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkError>;
--- a/packages/frontend/src/components/global/MkUrl.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkUrl.stories.impl.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { expect } from '@storybook/jest';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
 import { rest } from 'msw';
 import { commonHandlers } from '../../../.storybook/mocks';
@@ -30,7 +30,7 @@ export const Default = {
 		const canvas = within(canvasElement);
 		const a = canvas.getByRole<HTMLAnchorElement>('link');
 		await expect(a).toHaveAttribute('href', 'https://misskey-hub.net/');
-		await userEvent.hover(a);
+		await waitFor(() => userEvent.hover(a));
 		/*
 		await tick(); // FIXME: wait for network request
 		const anchors = canvas.getAllByRole<HTMLAnchorElement>('link');
@@ -44,7 +44,7 @@ export const Default = {
 		await expect(icon).toBeInTheDocument();
 		await expect(icon).toHaveAttribute('src', 'https://misskey-hub.net/favicon.ico');
 		 */
-		await userEvent.unhover(a);
+		await waitFor(() => userEvent.unhover(a));
 	},
 	args: {
 		url: 'https://misskey-hub.net/',
--- a/packages/frontend/src/components/global/MkUserName.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkUserName.stories.impl.ts
@@ -26,10 +26,10 @@ export const Default = {
 		};
 	},
 	async play({ canvasElement }) {
-		await expect(canvasElement).toHaveTextContent(userDetailed.name);
+		await expect(canvasElement).toHaveTextContent(userDetailed().name);
 	},
 	args: {
-		user: userDetailed,
+		user: userDetailed(),
 	},
 	parameters: {
 		layout: 'centered',
@@ -38,12 +38,12 @@ export const Default = {
 export const Anonymous = {
 	...Default,
 	async play({ canvasElement }) {
-		await expect(canvasElement).toHaveTextContent(userDetailed.username);
+		await expect(canvasElement).toHaveTextContent(userDetailed().username);
 	},
 	args: {
 		...Default.args,
 		user: {
-			...userDetailed,
+			...userDetailed(),
 			name: null,
 		},
 	},
--- a/packages/frontend/src/init.ts
+++ b/packages/frontend/src/init.ts
@@ -513,15 +513,6 @@ if ($i) {
 		updateAccount({ hasUnreadAnnouncement: false });
 	});

-	main.on('readAllChannels', () => {
-		updateAccount({ hasUnreadChannel: false });
-	});
-
-	main.on('unreadChannel', () => {
-		updateAccount({ hasUnreadChannel: true });
-		sound.play('channel');
-	});
-
 	// トークンが再生成されたとき
 	// このままではMisskeyが利用できないので強制的にサインアウトさせる
 	main.on('myTokenRegenerated', () => {
--- a/packages/frontend/src/local-storage.ts
+++ b/packages/frontend/src/local-storage.ts
@@ -6,6 +6,7 @@ type Keys =
 	'accounts' |
 	'latestDonationInfoShownAt' |
 	'neverShowDonationInfo' |
+	'neverShowLocalOnlyInfo' |
 	'lastUsed' |
 	'lang' |
 	'drafts' |
--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@@ -215,6 +215,7 @@ export function actions<T extends {
 	value: string;
 	text: string;
 	primary?: boolean,
+	danger?: boolean,
 }[]>(props: {
 	type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
 	title?: string | null;
@@ -229,6 +230,7 @@ export function actions<T extends {
 			actions: props.actions.map(a => ({
 				text: a.text,
 				primary: a.primary,
+				danger: a.danger,
 				callback: () => {
 					resolve({ canceled: false, result: a.value });
 				},
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -98,9 +98,7 @@ function edit() {

 function openPostForm() {
 	os.post({
-		channel: {
-			id: channel.id,
-		},
+		channel,
 	});
 }

--- a/packages/frontend/src/pages/notifications.vue
+++ b/packages/frontend/src/pages/notifications.vue
@@ -2,8 +2,8 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div v-if="tab === 'all' || tab === 'unread'">
-			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
+		<div v-if="tab === 'all'">
+			<XNotifications class="notifications" :include-types="includeTypes"/>
 		</div>
 		<div v-else-if="tab === 'mentions'">
 			<MkNotes :pagination="mentionsPagination"/>
@@ -26,7 +26,6 @@ import { notificationTypes } from '@/const';

 let tab = $ref('all');
 let includeTypes = $ref<string[] | null>(null);
-let unreadOnly = $computed(() => tab === 'unread');

 const mentionsPagination = {
 	endpoint: 'notes/mentions' as const,
@@ -76,10 +75,6 @@ const headerTabs = $computed(() => [{
 	key: 'all',
 	title: i18n.ts.all,
 	icon: 'ti ti-point',
-}, {
-	key: 'unread',
-	title: i18n.ts.unread,
-	icon: 'ti ti-loader',
 }, {
 	key: 'mentions',
 	title: i18n.ts.mentions,
--- a/packages/frontend/src/pages/user/index.photos.vue
+++ b/packages/frontend/src/pages/user/index.photos.vue
@@ -28,6 +28,7 @@ import * as os from '@/os';
 import MkContainer from '@/components/MkContainer.vue';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';

 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -88,7 +88,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	reactionAcceptance: {
 		where: 'account',
-		default: null,
+		default: null as 'likeOnly' | 'likeOnlyForRemote' | null,
 	},
 	mutedWords: {
 		where: 'account',
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -53,9 +53,7 @@ function onNotification(notification) {
 	if ($i.mutingNotificationTypes.includes(notification.type)) return;

 	if (document.visibilityState === 'visible') {
-		stream.send('readNotification', {
-			id: notification.id,
-		});
+		stream.send('readNotification');

 		notifications.unshift(notification);
 		window.setTimeout(() => {
--- a/packages/frontend/src/ui/classic.header.vue
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -31,7 +31,7 @@
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
 			</button>
-			<div class="post" @click="post">
+			<div class="post" @click="os.post()">
 				<MkButton class="button" gradate full rounded>
 					<i class="ti ti-pencil ti-fw"></i>
 				</MkButton>
@@ -41,93 +41,50 @@
 </div>
 </template>

-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, onMounted } from 'vue';
 import { openInstanceMenu } from './_common_/common';
-import { host } from '@/config';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
-import { openAccountMenu, $i } from '@/account';
+import { openAccountMenu as openAccountMenu_, $i } from '@/account';
 import MkButton from '@/components/MkButton.vue';
-import { mainRouter } from '@/router';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';

-export default defineComponent({
-	components: {
-		MkButton,
-	},
+const WINDOW_THRESHOLD = 1400;

-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			navbarItemDef: navbarItemDef,
-			settingsWindowed: false,
-			defaultStore,
-			instance,
-			$i,
-			i18n,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return defaultStore.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.navbarItemDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.navbarItemDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		'defaultStore.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		openInstanceMenu,
-
-		calcViewState() {
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		post() {
-			os.post();
-		},
-
-		search() {
-			mainRouter.push('/search');
-		},
-
-		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-				anchor: { x: 'center', y: 'bottom' },
-			}, {
-			}, 'closed');
-		},
-
-		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
-		},
-	},
+let settingsWindowed = $ref(window.innerWidth > WINDOW_THRESHOLD);
+let menu = $ref(defaultStore.state.menu);
+// const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
+let otherNavItemIndicated = computed<boolean>(() => {
+	for (const def in navbarItemDef) {
+		if (menu.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
 });
+
+function more(ev: MouseEvent) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+		src: ev.currentTarget ?? ev.target,
+		anchor: { x: 'center', y: 'bottom' },
+	}, {
+	}, 'closed');
+}
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+onMounted(() => {
+	window.addEventListener('resize', () => {
+		settingsWindowed = (window.innerWidth >= WINDOW_THRESHOLD);
+	}, { passive: true });	
+});
+
 </script>

 <style lang="scss" scoped>
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -3,7 +3,7 @@
 	<button v-click-anime class="item _button account" @click="openAccountMenu">
 		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 	</button>
-	<div class="post" data-cy-open-post-form @click="post">
+	<div class="post" data-cy-open-post-form @click="os.post">
 		<MkButton class="button" gradate full rounded>
 			<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
 		</MkButton>
@@ -40,109 +40,59 @@
 </div>
 </template>

-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent, onMounted, computed, watch, nextTick } from 'vue';
 import { openInstanceMenu } from './_common_/common';
-import { host } from '@/config';
+// import { host } from '@/config';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
-import { openAccountMenu, $i } from '@/account';
+import { openAccountMenu as openAccountMenu_, $i } from '@/account';
 import MkButton from '@/components/MkButton.vue';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
-import { mainRouter } from '@/router';
+// import { StickySidebar } from '@/scripts/sticky-sidebar';
+// import { mainRouter } from '@/router';
 //import MisskeyLogo from '@assets/client/misskey.svg';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';

-export default defineComponent({
-	components: {
-		MkButton,
-		//MisskeyLogo,
-	},
+const WINDOW_THRESHOLD = 1400;

-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			navbarItemDef: navbarItemDef,
-			iconOnly: false,
-			settingsWindowed: false,
-			defaultStore,
-			instance,
-			$i,
-			i18n,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.defaultStore.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.navbarItemDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.navbarItemDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		'defaultStore.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		const sticky = new StickySidebar(this.$el.parentElement, 16);
-		window.addEventListener('scroll', () => {
-			sticky.calc(window.scrollY);
-		}, { passive: true });
-	},
-
-	methods: {
-		openInstanceMenu,
-
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.defaultStore.state.menuDisplay === 'sideIcon');
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		post() {
-			os.post();
-		},
-
-		search() {
-			mainRouter.push('/search');
-		},
-
-		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-			}, {}, 'closed');
-		},
-
-		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
-		},
-	},
+const menu = $ref(defaultStore.state.menu);
+const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
+const otherNavItemIndicated = computed<boolean>(() => {
+	for (const def in navbarItemDef) {
+		if (menu.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
 });
+let el = $shallowRef<HTMLElement>();
+// let accounts = $ref([]);
+// let connection = $ref(null);
+let iconOnly = $ref(false);
+let settingsWindowed = $ref(false);
+
+function calcViewState() {
+	iconOnly = (window.innerWidth <= WINDOW_THRESHOLD) || (menuDisplay.value === 'sideIcon');
+	settingsWindowed = (window.innerWidth > WINDOW_THRESHOLD);
+}
+
+function more(ev: MouseEvent) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+		src: ev.currentTarget ?? ev.target,
+	}, {}, 'closed');
+}
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+watch(defaultStore.reactiveState.menuDisplay, () => {
+	calcViewState();
+});
+
 </script>

 <style lang="scss" scoped>
--- a/packages/frontend/src/ui/deck/channel-column.vue
+++ b/packages/frontend/src/ui/deck/channel-column.vue
@@ -14,13 +14,13 @@
 </template>

 <script lang="ts" setup>
-import { } from 'vue';
 import XColumn from './column.vue';
 import { updateColumn, Column } from './deck-store';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import * as misskey from 'misskey-js';

 const props = defineProps<{
 	column: Column;
@@ -33,6 +33,7 @@ const emit = defineEmits<{
 }>();

 let timeline = $shallowRef<InstanceType<typeof MkTimeline>>();
+let channel = $shallowRef<misskey.entities.Channel>();

 if (props.column.channelId == null) {
 	setChannel();
@@ -56,11 +57,15 @@ async function setChannel() {
 	});
 }

-function post() {
+async function post() {
+	if (!channel || channel.id !== props.column.channelId) {
+		channel = await os.api('channels/show', {
+			channelId: props.column.channelId,
+		});
+	}
+
 	os.post({
-		channel: {
-			id: props.column.channelId,
-		},
+		channel,
 	});
 }