Merge branch 'notification-read-api' into swn

packages/client/src/components/form-dialog.vue

@@ -12,66 +12,67 @@
 	<template #header>
 		{{ title }}
 	</template>
-	<FormBase class="xkpnjxcv">
-		<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
-			<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
-				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</FormInput>
-			<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text">
-				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</FormInput>
-			<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]">
-				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</FormTextarea>
-			<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
-				<span v-text="form[item].label || item"></span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</FormSwitch>
-			<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]">
-				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-				<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
-			</FormSelect>
-			<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]">
-				<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-				<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
-			</FormRadios>
-			<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
-				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</FormRange>
-			<FormButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)">
-				<span v-text="form[item].content || item"></span>
-			</FormButton>
-		</template>
-	</FormBase>
+
+	<MkSpacer :margin-min="20" :margin-max="32">
+		<div class="xkpnjxcv _formRoot">
+			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
+				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormInput>
+				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormInput>
+				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormTextarea>
+				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
+					<span v-text="form[item].label || item"></span>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormSwitch>
+				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
+				</FormSelect>
+				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
+					<template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
+				</FormRadios>
+				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormRange>
+				<MkButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)" class="_formBlock">
+					<span v-text="form[item].content || item"></span>
+				</MkButton>
+			</template>
+		</div>
+	</MkSpacer>
 </XModalWindow>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
-import FormBase from './debobigego/base.vue';
-import FormInput from './debobigego/input.vue';
-import FormTextarea from './debobigego/textarea.vue';
-import FormSwitch from './debobigego/switch.vue';
-import FormSelect from './debobigego/select.vue';
-import FormRange from './debobigego/range.vue';
-import FormButton from './debobigego/button.vue';
-import FormRadios from './debobigego/radios.vue';
+import FormInput from './form/input.vue';
+import FormTextarea from './form/textarea.vue';
+import FormSwitch from './form/switch.vue';
+import FormSelect from './form/select.vue';
+import FormRange from './form/range.vue';
+import MkButton from './ui/button.vue';
+import FormRadios from './form/radios.vue';
 
 export default defineComponent({
 	components: {
 		XModalWindow,
-		FormBase,
 		FormInput,
 		FormTextarea,
 		FormSwitch,
 		FormSelect,
 		FormRange,
-		FormButton,
+		MkButton,
 		FormRadios,
 	},
 

packages/client/src/components/form/range.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -58,6 +58,9 @@ export default defineComponent({
 	},
 
 	setup(props, context) {
+		const containerEl = ref<HTMLElement>();
+		const thumbEl = ref<HTMLElement>();
+
 		const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
 		const steppedValue = computed(() => {
 			if (props.step) {
@@ -78,10 +81,25 @@ export default defineComponent({
 			if (thumbEl.value == null) return 0;
 			return thumbEl.value!.offsetWidth;
 		});
-		const thumbPosition = computed(() => {
-			if (containerEl.value == null) return 0;
-			return (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
+		const thumbPosition = ref(0);
+		const calcThumbPosition = () => {
+			if (containerEl.value == null) {
+				thumbPosition.value = 0;
+			} else {
+				thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedValue.value;
+			}
+		};
+		watch([steppedValue, containerEl], calcThumbPosition);
+		onMounted(() => {
+			const ro = new ResizeObserver((entries, observer) => {
+				calcThumbPosition();
+			});
+			ro.observe(containerEl.value);
+			onUnmounted(() => {
+				ro.disconnect();
+			});
 		});
+
 		const steps = computed(() => {
 			if (props.step) {
 				return (props.max - props.min) / props.step;
@@ -89,8 +107,6 @@ export default defineComponent({
 				return 0;
 			}
 		});
-		const containerEl = ref<HTMLElement>();
-		const thumbEl = ref<HTMLElement>();
 
 		const onMousedown = (ev: MouseEvent | TouchEvent) => {
 			ev.preventDefault();

packages/client/src/components/global/spacer.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import { defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
 
 export default defineComponent({
 	props: {
@@ -24,7 +24,7 @@ export default defineComponent({
 		marginMax: {
 			type: Number,
 			required: false,
-			default: 32,
+			default: 24,
 		},
 	},
 
@@ -33,8 +33,14 @@ export default defineComponent({
 		const root = ref<HTMLElement>();
 		const content = ref<HTMLElement>();
 		const margin = ref(0);
+		const shouldSpacerMin = inject('shouldSpacerMin', false);
 		const adjust = (rect: { width: number; height: number; }) => {
-			if (rect.width > (props.contentMax || 500)) {
+			if (shouldSpacerMin) {
+				margin.value = props.marginMin;
+				return;
+			}
+
+			if (rect.width > props.contentMax || rect.width > 500) {
 				margin.value = props.marginMax;
 			} else {
 				margin.value = props.marginMin;

packages/client/src/components/media-list.vue

@@ -44,16 +44,36 @@ export default defineComponent({
 
 		onMounted(() => {
 			const lightbox = new PhotoSwipeLightbox({
-				dataSource: props.mediaList.filter(media => media.type.startsWith('image')).map(media => ({
-					src: media.url,
-					w: media.properties.width,
-					h: media.properties.height,
-					alt: media.name,
-				})),
+				dataSource: props.mediaList.filter(media => media.type.startsWith('image')).map(media => {
+					const item = {
+						src: media.url,
+						w: media.properties.width,
+						h: media.properties.height,
+						alt: media.name,
+					};
+					if (media.properties.orientation != null && media.properties.orientation >= 5) {
+						[item.w, item.h] = [item.h, item.w];
+					}
+					return item;
+				}),
 				gallery: gallery.value,
 				children: '.image',
 				thumbSelector: '.image',
-				pswpModule: PhotoSwipe
+				loop: false,
+				padding: window.innerWidth > 500 ? {
+					top: 32,
+					bottom: 32,
+					left: 32,
+					right: 32,
+				} : {
+					top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0,
+				},
+				imageClickAction: 'close',
+				tapAction: 'toggle-controls',
+				pswpModule: PhotoSwipe,
 			});
 
 			lightbox.on('itemData', (e) => {
@@ -68,6 +88,9 @@ export default defineComponent({
 				itemData.src = file.url;
 				itemData.w = Number(file.properties.width);
 				itemData.h = Number(file.properties.height);
+				if (file.properties.orientation != null && file.properties.orientation >= 5) {
+					[itemData.w, itemData.h] = [itemData.h, itemData.w];
+				}
 				itemData.msrc = file.thumbnailUrl;
 				itemData.thumbCropped = true;
 			});

packages/client/src/components/note-detailed.vue

@@ -649,7 +649,7 @@ export default defineComponent({
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
-				...(this.$i.isModerator || this.$i.isAdmin ? [
+				/*...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
 						icon: 'fas fa-bullhorn',
@@ -657,7 +657,7 @@ export default defineComponent({
 						action: this.promote
 					}]
 					: []
-				),
+				),*/
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{

packages/client/src/components/note.vue

@@ -623,6 +623,7 @@ export default defineComponent({
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
+				/*
 				...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
@@ -631,7 +632,7 @@ export default defineComponent({
 						action: this.promote
 					}]
 					: []
-				),
+				),*/
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{

packages/client/src/components/poll-editor.vue

@@ -206,8 +206,6 @@ export default defineComponent({
 
 			> .input {
 				flex: 1;
-				margin-top: 16px;
-				margin-bottom: 0;
 			}
 
 			> button {
@@ -223,7 +221,7 @@ export default defineComponent({
 	}
 
 	> section {
-		margin: 16px 0 -16px 0;
+		margin: 16px 0 0 0;
 
 		> div {
 			margin: 0 8px;

packages/client/src/components/poll.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="tivcixzd" :class="{ done: closed || isVoted }">
 	<ul>
-		<li v-for="(choice, i) in poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
+		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
 				<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
@@ -13,7 +13,7 @@
 	<p v-if="!readOnly">
 		<span>{{ $t('_poll.totalVotes', { n: total }) }}</span>
 		<span> · </span>
-		<a v-if="!closed && !isVoted" @click="toggleShowResult">{{ showResult ? $ts._poll.vote : $ts._poll.showResult }}</a>
+		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? $ts._poll.vote : $ts._poll.showResult }}</a>
 		<span v-if="isVoted">{{ $ts._poll.voted }}</span>
 		<span v-else-if="closed">{{ $ts._poll.closed }}</span>
 		<span v-if="remaining > 0"> · {{ timer }}</span>
@@ -22,9 +22,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, onUnmounted, ref, toRef } from 'vue';
 import { sum } from '@/scripts/array';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	props: {
@@ -38,71 +39,67 @@ export default defineComponent({
 			default: false,
 		}
 	},
-	data() {
-		return {
-			remaining: -1,
-			showResult: false,
-		};
-	},
-	computed: {
-		poll(): any {
-			return this.note.poll;
-		},
-		total(): number {
-			return sum(this.poll.choices.map(x => x.votes));
-		},
-		closed(): boolean {
-			return !this.remaining;
-		},
-		timer(): string {
-			return this.$t(
-				this.remaining >= 86400 ? '_poll.remainingDays' :
-				this.remaining >= 3600 ? '_poll.remainingHours' :
-				this.remaining >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
-					s: Math.floor(this.remaining % 60),
-					m: Math.floor(this.remaining / 60) % 60,
-					h: Math.floor(this.remaining / 3600) % 24,
-					d: Math.floor(this.remaining / 86400)
-				});
-		},
-		isVoted(): boolean {
-			return !this.poll.multiple && this.poll.choices.some(c => c.isVoted);
-		}
-	},
-	created() {
-		this.showResult = this.readOnly || this.isVoted;
 
-		if (this.note.poll.expiresAt) {
-			const update = () => {
-				if (this.remaining = Math.floor(Math.max(new Date(this.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000))
-					requestAnimationFrame(update);
-				else
-					this.showResult = true;
+	setup(props) {
+		const remaining = ref(-1);
+
+		const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
+		const closed = computed(() => remaining.value === 0);
+		const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
+		const timer = computed(() => i18n.t(
+			remaining.value >= 86400 ? '_poll.remainingDays' :
+			remaining.value >= 3600 ? '_poll.remainingHours' :
+			remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
+				s: Math.floor(remaining.value % 60),
+				m: Math.floor(remaining.value / 60) % 60,
+				h: Math.floor(remaining.value / 3600) % 24,
+				d: Math.floor(remaining.value / 86400)
+			}));
+
+		const showResult = ref(props.readOnly || isVoted.value);
+
+		// 期限付きアンケート
+		if (props.note.poll.expiresAt) {
+			const tick = () => {
+				remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
+				if (remaining.value === 0) {
+					showResult.value = true;
+				}
 			};
 
-			update();
+			tick();
+			const intevalId = window.setInterval(tick, 3000);
+			onUnmounted(() => {
+				window.clearInterval(intevalId);
+			});
 		}
-	},
-	methods: {
-		toggleShowResult() {
-			this.showResult = !this.showResult;
-		},
-		async vote(id) {
-			if (this.readOnly || this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return;
+
+		const vote = async (id) => {
+			if (props.readOnly || closed.value || isVoted.value) return;
 
 			const { canceled } = await os.confirm({
 				type: 'question',
-				text: this.$t('voteConfirm', { choice: this.poll.choices[id].text }),
+				text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
 			});
 			if (canceled) return;
 
 			await os.api('notes/polls/vote', {
-				noteId: this.note.id,
-				choice: id
+				noteId: props.note.id,
+				choice: id,
 			});
-			if (!this.showResult) this.showResult = !this.poll.multiple;
-		}
-	}
+			if (!showResult.value) showResult.value = !props.note.poll.multiple;
+		};
+
+		return {
+			remaining,
+			showResult,
+			total,
+			isVoted,
+			closed,
+			timer,
+			vote,
+		};
+	},
 });
 </script>
 
@@ -118,38 +115,38 @@ export default defineComponent({
 			display: block;
 			position: relative;
 			margin: 4px 0;
-			padding: 4px 8px;
-			border: solid 0.5px var(--divider);
+			padding: 4px;
+			//border: solid 0.5px var(--divider);
+			background: var(--accentedBg);
 			border-radius: 4px;
 			overflow: hidden;
 			cursor: pointer;
 
-			&:hover {
-				background: rgba(#000, 0.05);
-			}
-
-			&:active {
-				background: rgba(#000, 0.1);
-			}
-
 			> .backdrop {
 				position: absolute;
 				top: 0;
 				left: 0;
 				height: 100%;
 				background: var(--accent);
+				background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
 				transition: width 1s ease;
 			}
 
 			> span {
 				position: relative;
+				display: inline-block;
+				padding: 3px 5px;
+				background: var(--panel);
+				border-radius: 3px;
 
 				> i {
 					margin-right: 4px;
+					color: var(--accent);
 				}
 
 				> .votes {
 					margin-left: 4px;
+					opacity: 0.7;
 				}
 			}
 		}
@@ -166,14 +163,6 @@ export default defineComponent({
 	&.done {
 		> ul > li {
 			cursor: default;
-
-			&:hover {
-				background: transparent;
-			}
-
-			&:active {
-				background: transparent;
-			}
 		}
 	}
 }

packages/client/src/components/post-form.vue

@@ -289,9 +289,14 @@ export default defineComponent({
 
 		if (this.reply && this.reply.text != null) {
 			const ast = mfm.parse(this.reply.text);
+			const otherHost = this.reply.user.host;
 
 			for (const x of extractMentions(ast)) {
-				const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`;
+				const mention = x.host ?
+													`@${x.username}@${toASCII(x.host)}` :
+													(otherHost == null || otherHost == host) ?
+														`@${x.username}` :
+														`@${x.username}@${toASCII(otherHost)}`;
 
 				// 自分は除外
 				if (this.$i.username == x.username && x.host == null) continue;

packages/client/src/components/reaction-tooltip.vue

@@ -41,6 +41,7 @@ export default defineComponent({
 	> .icon {
 		display: block;
 		width: 60px;
+		font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
 		margin: 0 auto;
 	}
 

packages/client/src/components/reactions-viewer.details.vue

@@ -62,6 +62,7 @@ export default defineComponent({
 		> .icon {
 			display: block;
 			width: 60px;
+			font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
 			margin: 0 auto;
 		}
 

packages/client/src/components/ui/menu.vue

@@ -153,6 +153,7 @@ export default defineComponent({
 	box-sizing: border-box;
 	min-width: 200px;
 	overflow: auto;
+	overscroll-behavior: contain;
 
 	&.center {
 		> .item {

packages/client/src/components/ui/super-menu.vue

@@ -52,7 +52,7 @@ export default defineComponent({
 
 		> .title {
 			opacity: 0.7;
-			margin: 0 0 8px 12px;
+			margin: 0 0 8px 0;
 		}
 	
 		> .items {

packages/client/src/directives/tooltip.ts

@@ -1,3 +1,6 @@
+// TODO: useTooltip関数使うようにしたい
+// ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
+
 import { Directive, ref } from 'vue';
 import { isDeviceTouch } from '@/scripts/is-device-touch';
 import { popup, alert } from '@/os';

packages/client/src/menu.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, ref, reactive } from 'vue';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -7,7 +7,7 @@ import { $i } from './account';
 import { unisonReload } from '@/scripts/unison-reload';
 import { router } from './router';
 
-export const menuDef = {
+export const menuDef = reactive({
 	notifications: {
 		title: 'notifications',
 		icon: 'fas fa-bell',
@@ -221,4 +221,4 @@ export const menuDef = {
 			}*/], ev.currentTarget || ev.target);
 		},
 	},
-};
+});

packages/client/src/os.ts

@@ -556,7 +556,7 @@ export function contextMenu(items: any[], ev: MouseEvent) {
 	});
 }
 
-export function post(props: Record<string, any>) {
+export function post(props: Record<string, any> = {}) {
 	return new Promise((resolve, reject) => {
 		// NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
 		// NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、

packages/client/src/pages/about.vue

@@ -24,7 +24,7 @@
 		</FormSection>
 
 		<FormSection>
-			<div class="_inputSplit">
+			<div class="_inputSplit _formBlock">
 				<MkKeyValue class="_formBlock">
 					<template #key>{{ $ts.administrator }}</template>
 					<template #value>{{ $instance.maintainerName }}</template>
@@ -34,10 +34,9 @@
 					<template #value>{{ $instance.maintainerEmail }}</template>
 				</MkKeyValue>
 			</div>
+			<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ $ts.tos }}</FormLink>
 		</FormSection>
 
-		<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink>
-
 		<FormSuspense :p="initStats">
 			<FormSection>
 				<template #label>{{ $ts.statistics }}</template>

packages/client/src/pages/admin/abuses.vue

@@ -33,7 +33,7 @@
 			</div>
 			-->
 
-			<MkPagination #default="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
+			<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
 				<div v-for="report in items" :key="report.id" class="bcekxzvu _card _gap">
 					<div class="_content target">
 						<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>

packages/client/src/pages/admin/emojis.vue

@@ -7,7 +7,7 @@
 		</MkInput>
 		<MkPagination ref="emojis" :pagination="pagination">
 			<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-			<template #default="{items}">
+			<template v-slot="{items}">
 				<div class="ldhfsamy">
 					<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="edit(emoji)">
 						<img :src="emoji.url" class="img" :alt="emoji.name"/>
@@ -31,7 +31,7 @@
 		</MkInput>
 		<MkPagination ref="remoteEmojis" :pagination="remotePagination">
 			<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-			<template #default="{items}">
+			<template v-slot="{items}">
 				<div class="ldhfsamy">
 					<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
 						<img :src="emoji.url" class="img" :alt="emoji.name"/>

packages/client/src/pages/admin/files.vue

@@ -28,7 +28,7 @@
 					<template #label>MIME type</template>
 				</MkInput>
 			</div>
-			<MkPagination #default="{items}" ref="files" :pagination="pagination" class="urempief">
+			<MkPagination v-slot="{items}" ref="files" :pagination="pagination" class="urempief">
 				<button v-for="file in items" :key="file.id" class="file _panel _button _gap" @click="show(file, $event)">
 					<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 					<div class="body">

packages/client/src/pages/admin/users.vue

@@ -36,7 +36,7 @@
 			</MkInput>
 		</div>
 
-		<MkPagination #default="{items}" ref="users" :pagination="pagination" class="users">
+		<MkPagination v-slot="{items}" ref="users" :pagination="pagination" class="users">
 			<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
 				<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
 				<div class="body">

packages/client/src/pages/announcements.vue

@@ -1,6 +1,6 @@
 <template>
 <MkSpacer :content-max="800">
-	<MkPagination #default="{items}" :pagination="pagination" class="ruryvtyk _content">
+	<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
 		<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
 			<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
 			<div class="_content">

packages/client/src/pages/api-console.vue

@@ -1,26 +1,28 @@
 <template>
-<div class="_root">
-	<div class="_block" style="padding: 24px;">
-		<MkInput v-model="endpoint" :datalist="endpoints" class="" @update:modelValue="onEndpointChange()">
-			<template #label>Endpoint</template>
-		</MkInput>
-		<MkTextarea v-model="body" code>
-			<template #label>Params (JSON or JSON5)</template>
-		</MkTextarea>
-		<MkSwitch v-model="withCredential">
-			With credential
-		</MkSwitch>
-		<MkButton primary full :disabled="sending" @click="send">
-			<template v-if="sending"><MkEllipsis/></template>
-			<template v-else><i class="fas fa-paper-plane"></i> Send</template>
-		</MkButton>
+<MkSpacer :content-max="700">
+	<div class="_formRoot">
+		<div class="_formBlock">
+			<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:modelValue="onEndpointChange()">
+				<template #label>Endpoint</template>
+			</MkInput>
+			<MkTextarea v-model="body" class="_formBlock" code>
+				<template #label>Params (JSON or JSON5)</template>
+			</MkTextarea>
+			<MkSwitch v-model="withCredential" class="_formBlock">
+				With credential
+			</MkSwitch>
+			<MkButton class="_formBlock" primary :disabled="sending" @click="send">
+				<template v-if="sending"><MkEllipsis/></template>
+				<template v-else><i class="fas fa-paper-plane"></i> Send</template>
+			</MkButton>
+		</div>
+		<div v-if="res" class="_formBlock">
+			<MkTextarea v-model="res" code readonly tall>
+				<template #label>Response</template>
+			</MkTextarea>
+		</div>
 	</div>
-	<div v-if="res" class="_block" style="padding: 24px;">
-		<MkTextarea v-model="res" code readonly tall>
-			<template #label>Response</template>
-		</MkTextarea>
-	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -64,7 +66,8 @@ export default defineComponent({
 	methods: {
 		send() {
 			this.sending = true;
-			os.api(this.endpoint, JSON5.parse(this.body)).then(res => {
+			const body = JSON5.parse(this.body);
+			os.api(this.endpoint, body, body.i || this.withCredential ? undefined : null).then(res => {
 				this.sending = false;
 				this.res = JSON5.stringify(res, null, 2);
 			}, err => {

packages/client/src/pages/channels.vue

@@ -10,20 +10,20 @@
 
 	<div class="_section">
 		<div v-if="tab === 'featured'" class="_content grwlizim featured">
-			<MkPagination #default="{items}" :pagination="featuredPagination">
+			<MkPagination v-slot="{items}" :pagination="featuredPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 			</MkPagination>
 		</div>
 
 		<div v-if="tab === 'following'" class="_content grwlizim following">
-			<MkPagination #default="{items}" :pagination="followingPagination">
+			<MkPagination v-slot="{items}" :pagination="followingPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 			</MkPagination>
 		</div>
 
 		<div v-if="tab === 'owned'" class="_content grwlizim owned">
 			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-			<MkPagination #default="{items}" :pagination="ownedPagination">
+			<MkPagination v-slot="{items}" :pagination="ownedPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 			</MkPagination>
 		</div>

packages/client/src/pages/federation.vue

@@ -41,7 +41,7 @@
 			</div>
 		</div>
 
-		<MkPagination #default="{items}" ref="instances" :key="host + state" :pagination="pagination">
+		<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
 			<div class="dqokceoi">
 				<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
 					<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>

packages/client/src/pages/follow-requests.vue

@@ -7,7 +7,7 @@
 				<div>{{ $ts.noFollowRequests }}</div>
 			</div>
 		</template>
-		<template #default="{items}">
+		<template v-slot="{items}">
 			<div v-for="req in items" :key="req.id" class="user _panel">
 				<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
 				<div class="body">

packages/client/src/pages/gallery/index.vue

@@ -9,7 +9,7 @@
 	<div v-if="tab === 'explore'">
 		<MkFolder class="_gap">
 			<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
-			<MkPagination #default="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
+			<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
 				<div class="vfpdbgtk">
 					<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 				</div>
@@ -17,7 +17,7 @@
 		</MkFolder>
 		<MkFolder class="_gap">
 			<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template>
-			<MkPagination #default="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
+			<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
 				<div class="vfpdbgtk">
 					<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 				</div>
@@ -25,7 +25,7 @@
 		</MkFolder>
 	</div>
 	<div v-else-if="tab === 'liked'">
-		<MkPagination #default="{items}" :pagination="likedPostsPagination">
+		<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
 			<div class="vfpdbgtk">
 				<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
 			</div>
@@ -33,7 +33,7 @@
 	</div>
 	<div v-else-if="tab === 'my'">
 		<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA>
-		<MkPagination #default="{items}" :pagination="myPostsPagination">
+		<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 			<div class="vfpdbgtk">
 				<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 			</div>

packages/client/src/pages/gallery/post.vue

@@ -36,7 +36,7 @@
 			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
-				<MkPagination #default="{items}" :pagination="otherPostsPagination">
+				<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 					<div class="sdrarzaf">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 					</div>

packages/client/src/pages/my-antennas/index.vue

@@ -1,15 +1,17 @@
 <template>
-<div class="ieepwinx _section">
-	<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+<MkSpacer :content-max="700">
+	<div class="ieepwinx">
+		<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
-	<div class="_content">
-		<MkPagination #default="{items}" ref="list" :pagination="pagination">
-			<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
-				<div class="name">{{ antenna.name }}</div>
-			</MkA>
-		</MkPagination>
+		<div class="">
+			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+				<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
+					<div class="name">{{ antenna.name }}</div>
+				</MkA>
+			</MkPagination>
+		</div>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -29,6 +31,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.manageAntennas,
 				icon: 'fas fa-satellite',
+				bg: 'var(--bg)',
 				action: {
 					icon: 'fas fa-plus',
 					handler: this.create
@@ -45,7 +48,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .ieepwinx {
-	padding: 16px;
 
 	> .add {
 		margin: 0 auto 16px auto;

packages/client/src/pages/my-clips/index.vue

@@ -1,16 +1,16 @@
 <template>
-<div class="_section qtcaoidl">
-	<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+<MkSpacer :content-max="700">
+	<div class="qtcaoidl">
+		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
-	<div class="_content">
-		<MkPagination #default="{items}" ref="list" :pagination="pagination" class="list">
+		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
 			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
 				<b>{{ item.name }}</b>
 				<div v-if="item.description" class="description">{{ item.description }}</div>
 			</MkA>
 		</MkPagination>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -31,6 +31,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.clip,
 				icon: 'fas fa-paperclip',
+				bg: 'var(--bg)',
 				action: {
 					icon: 'fas fa-plus',
 					handler: this.create
@@ -86,17 +87,15 @@ export default defineComponent({
 		margin: 0 auto 16px auto;
 	}
 
-	> ._content {
-		> .list {
-			> .item {
-				display: block;
-				padding: 16px;
+	> .list {
+		> .item {
+			display: block;
+			padding: 16px;
 
-				> .description {
-					margin-top: 8px;
-					padding-top: 8px;
-					border-top: solid 0.5px var(--divider);
-				}
+			> .description {
+				margin-top: 8px;
+				padding-top: 8px;
+				border-top: solid 0.5px var(--divider);
 			}
 		}
 	}

packages/client/src/pages/my-groups/index.vue

@@ -12,7 +12,7 @@
 		<div v-if="tab === 'owned'" class="_content">
 			<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
 
-			<MkPagination #default="{items}" ref="owned" :pagination="ownedPagination">
+			<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
 				<div v-for="group in items" :key="group.id" class="_card">
 					<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
 					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
@@ -21,7 +21,7 @@
 		</div>
 
 		<div v-else-if="tab === 'joined'" class="_content">
-			<MkPagination #default="{items}" ref="joined" :pagination="joinedPagination">
+			<MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
 				<div v-for="group in items" :key="group.id" class="_card">
 					<div class="_title">{{ group.name }}</div>
 					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
@@ -30,7 +30,7 @@
 		</div>
 	
 		<div v-else-if="tab === 'invites'" class="_content">
-			<MkPagination #default="{items}" ref="invitations" :pagination="invitationPagination">
+			<MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination">
 				<div v-for="invitation in items" :key="invitation.id" class="_card">
 					<div class="_title">{{ invitation.group.name }}</div>
 					<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>

packages/client/src/pages/my-lists/index.vue

@@ -1,14 +1,16 @@
 <template>
-<div class="qkcjvfiv">
-	<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
+<MkSpacer :content-max="700">
+	<div class="qkcjvfiv">
+		<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
 
-	<MkPagination #default="{items}" ref="list" :pagination="pagination" class="lists _content">
-		<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
-			<div class="name">{{ list.name }}</div>
-			<MkAvatars :user-ids="list.userIds"/>
-		</MkA>
-	</MkPagination>
-</div>
+		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="lists _content">
+			<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+				<div class="name">{{ list.name }}</div>
+				<MkAvatars :user-ids="list.userIds"/>
+			</MkA>
+		</MkPagination>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -60,8 +62,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .qkcjvfiv {
-	padding: 16px;
-
 	> .add {
 		margin: 0 auto var(--margin) auto;
 	}

packages/client/src/pages/my-lists/list.vue

@@ -1,35 +1,37 @@
 <template>
-<div class="mk-list-page">
-	<transition name="zoom" mode="out-in">
-		<div v-if="list" class="_section">
-			<div class="_content">
-				<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
-				<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
-				<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
+<MkSpacer :content-max="700">
+	<div class="mk-list-page">
+		<transition name="zoom" mode="out-in">
+			<div v-if="list" class="_section">
+				<div class="_content">
+					<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
+					<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
+					<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
+				</div>
 			</div>
-		</div>
-	</transition>
+		</transition>
 
-	<transition name="zoom" mode="out-in">
-		<div v-if="list" class="_section members _gap">
-			<div class="_title">{{ $ts.members }}</div>
-			<div class="_content">
-				<div class="users">
-					<div v-for="user in users" :key="user.id" class="user _panel">
-						<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-						<div class="body">
-							<MkUserName :user="user" class="name"/>
-							<MkAcct :user="user" class="acct"/>
-						</div>
-						<div class="action">
-							<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+		<transition name="zoom" mode="out-in">
+			<div v-if="list" class="_section members _gap">
+				<div class="_title">{{ $ts.members }}</div>
+				<div class="_content">
+					<div class="users">
+						<div v-for="user in users" :key="user.id" class="user _panel">
+							<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+							<div class="body">
+								<MkUserName :user="user" class="name"/>
+								<MkAcct :user="user" class="acct"/>
+							</div>
+							<div class="action">
+								<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-	</transition>
-</div>
+		</transition>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -49,6 +51,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: computed(() => this.list ? {
 				title: this.list.name,
 				icon: 'fas fa-list-ul',
+				bg: 'var(--bg)',
 			} : null),
 			list: null,
 			users: [],

packages/client/src/pages/page-editor/page-editor.script-block.vue

@@ -45,10 +45,10 @@
 			<template #label>{{ $ts._pages.script.blocks._fn.slots }}</template>
 			<template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
 		</MkTextarea>
-		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
+		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
 	</section>
 	<section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="value.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
+		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
 	</section>
 	<section v-else class="" style="padding:16px;">
 		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="$t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots"/>

packages/client/src/pages/page-editor/page-editor.vue

@@ -1,6 +1,6 @@
 <template>
-<div>
-	<div class="jqqmcavi" style="margin: 16px;">
+<MkSpacer :content-max="700">
+	<div class="jqqmcavi">
 		<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
 		<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 		<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="fas fa-copy"></i> {{ $ts.duplicate }}</MkButton>
@@ -8,7 +8,7 @@
 	</div>
 
 	<div v-if="tab === 'settings'">
-		<div style="padding: 16px;" class="_formRoot">
+		<div class="_formRoot">
 			<MkInput v-model="title" class="_formBlock">
 				<template #label>{{ $ts._pages.title }}</template>
 			</MkInput>
@@ -43,7 +43,7 @@
 	</div>
 
 	<div v-else-if="tab === 'contents'">
-		<div style="padding: 16px;">
+		<div>
 			<XBlocks v-model="content" class="content" :hpml="hpml"/>
 
 			<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
@@ -75,7 +75,7 @@
 			<MkTextarea v-model="script" class="_code"/>
 		</div>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">

packages/client/src/pages/page.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<MkSpacer :content-max="700">
 	<transition name="fade" mode="out-in">
 		<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
 			<div class="_block main">
@@ -48,7 +48,7 @@
 			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
-				<MkPagination #default="{items}" :pagination="otherPostsPagination">
+				<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 					<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
 				</MkPagination>
 			</MkContainer>
@@ -56,7 +56,7 @@
 		<MkError v-else-if="error" @retry="fetch()"/>
 		<MkLoading v-else/>
 	</transition>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -201,14 +201,7 @@ export default defineComponent({
 }
 
 .xcukqgmh {
-	--padding: 32px;
-
-	&.max-width_450px {
-		--padding: 16px;
-	}
-
 	> .main {
-		padding: var(--padding);
 
 		> .header {
 			padding: 16px;
@@ -302,7 +295,7 @@ export default defineComponent({
 	}
 
 	> .footer {
-		margin: var(--padding);
+		margin: var(--margin) 0 var(--margin) 0;
 		font-size: 85%;
 		opacity: 0.75;
 	}

packages/client/src/pages/pages.vue

@@ -1,50 +1,40 @@
 <template>
-<MkSpacer>
-	<!-- TODO: MkHeaderに統合 -->
-	<MkTab v-if="$i" v-model="tab">
-		<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
-		<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
-		<option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option>
-	</MkTab>
+<MkSpacer :content-max="700">
+	<div v-if="tab === 'featured'" class="rknalgpo">
+		<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
+			<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+		</MkPagination>
+	</div>
 
-	<div class="_section">
-		<div v-if="tab === 'featured'" class="rknalgpo _content">
-			<MkPagination #default="{items}" :pagination="featuredPagesPagination">
-				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-			</MkPagination>
-		</div>
+	<div v-else-if="tab === 'my'" class="rknalgpo my">
+		<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+		<MkPagination v-slot="{items}" :pagination="myPagesPagination">
+			<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+		</MkPagination>
+	</div>
 
-		<div v-if="tab === 'my'" class="rknalgpo _content my">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
-			<MkPagination #default="{items}" :pagination="myPagesPagination">
-				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-			</MkPagination>
-		</div>
-
-		<div v-if="tab === 'liked'" class="rknalgpo _content">
-			<MkPagination #default="{items}" :pagination="likedPagesPagination">
-				<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
-			</MkPagination>
-		</div>
+	<div v-else-if="tab === 'liked'" class="rknalgpo">
+		<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
+			<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
+		</MkPagination>
 	</div>
 </MkSpacer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import MkPagePreview from '@/components/page-preview.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
-import MkTab from '@/components/tab.vue';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		MkPagePreview, MkPagination, MkButton, MkTab
+		MkPagePreview, MkPagination, MkButton
 	},
 	data() {
 		return {
-			[symbols.PAGE_INFO]: {
+			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.pages,
 				icon: 'fas fa-sticky-note',
 				bg: 'var(--bg)',
@@ -53,7 +43,23 @@ export default defineComponent({
 					text: this.$ts.create,
 					handler: this.create,
 				}],
-			},
+				tabs: [{
+					active: this.tab === 'featured',
+					title: this.$ts._pages.featured,
+					icon: 'fas fa-fire-alt',
+					onClick: () => { this.tab = 'featured'; },
+				}, {
+					active: this.tab === 'my',
+					title: this.$ts._pages.my,
+					icon: 'fas fa-edit',
+					onClick: () => { this.tab = 'my'; },
+				}, {
+					active: this.tab === 'liked',
+					title: this.$ts._pages.liked,
+					icon: 'fas fa-heart',
+					onClick: () => { this.tab = 'liked'; },
+				},]
+			})),
 			tab: 'featured',
 			featuredPagesPagination: {
 				endpoint: 'pages/featured',

packages/client/src/pages/settings/apps.vue

@@ -7,7 +7,7 @@
 				<div>{{ $ts.nothing }}</div>
 			</div>
 		</template>
-		<template #default="{items}">
+		<template v-slot="{items}">
 			<div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm">
 				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
 				<div class="body">

packages/client/src/pages/settings/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
 	<div v-if="!narrow || page == null" class="nav">
-		<MkSpacer :content-max="700">
+		<MkSpacer :content-max="700" :margin-min="20">
 			<div class="baaadecd">
 				<div class="title">{{ $ts.settings }}</div>
 				<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>

packages/client/src/pages/settings/mute-block.vue

@@ -7,7 +7,7 @@
 	<div v-if="tab === 'mute'">
 		<MkPagination :pagination="mutingPagination" class="muting">
 			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
+			<template v-slot="{items}">
 				<FormGroup>
 					<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
 						<MkAcct :user="mute.mutee"/>
@@ -19,7 +19,7 @@
 	<div v-if="tab === 'block'">
 		<MkPagination :pagination="blockingPagination" class="blocking">
 			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
+			<template v-slot="{items}">
 				<FormGroup>
 					<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
 						<MkAcct :user="block.blockee"/>

packages/client/src/pages/settings/security.vue

@@ -13,7 +13,7 @@
 	<FormSection>
 		<template #label>{{ $ts.signinHistory }}</template>
 		<FormPagination :pagination="pagination">
-			<template #default="{items}">
+			<template v-slot="{items}">
 				<div>
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
 						<header>

packages/client/src/pages/settings/sounds.vue

@@ -119,6 +119,7 @@ export default defineComponent({
 					mim: 0,
 					max: 1,
 					step: 0.05,
+					textConverter: (v) => `${Math.floor(v * 100)}%`,
 					label: this.$ts.volume,
 					default: this.sounds[type].volume
 				},

packages/client/src/pages/settings/theme.manage.vue

@@ -1,6 +1,6 @@
 <template>
-<FormBase>
-	<FormSelect v-model="selectedThemeId">
+<div class="_formRoot">
+	<FormSelect v-model="selectedThemeId" class="_formBlock">
 		<template #label>{{ $ts.theme }}</template>
 		<optgroup :label="$ts._theme.installedThemes">
 			<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
@@ -10,31 +10,31 @@
 		</optgroup>
 	</FormSelect>
 	<template v-if="selectedTheme">
-		<FormInput readonly :modelValue="selectedTheme.author">
-			<span>{{ $ts.author }}</span>
+		<FormInput readonly :modelValue="selectedTheme.author" class="_formBlock">
+			<template #label>{{ $ts.author }}</template>
 		</FormInput>
-		<FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc">
-			<span>{{ $ts._theme.description }}</span>
+		<FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc" class="_formBlock">
+			<template #label>{{ $ts._theme.description }}</template>
 		</FormTextarea>
-		<FormTextarea readonly tall :modelValue="selectedThemeCode">
-			<span>{{ $ts._theme.code }}</span>
-			<template #desc><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template>
+		<FormTextarea readonly tall :modelValue="selectedThemeCode" class="_formBlock">
+			<template #label>{{ $ts._theme.code }}</template>
+			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template>
 		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton>
+		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton>
 	</template>
-</FormBase>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as JSON5 from 'json5';
-import FormTextarea from '@/components/debobigego/textarea.vue';
-import FormSelect from '@/components/debobigego/select.vue';
-import FormRadios from '@/components/debobigego/radios.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
 import FormBase from '@/components/debobigego/base.vue';
 import FormGroup from '@/components/debobigego/group.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
 import { Theme, builtinThemes } from '@/scripts/theme';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';

packages/client/src/pages/timeline.vue

@@ -1,20 +1,22 @@
 <template>
-<div v-size="{ min: [800] }" v-hotkey.global="keymap" class="cmuxhskf">
-	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+<MkSpacer :content-max="800">
+	<div v-hotkey.global="keymap" class="cmuxhskf">
+		<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+		<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
-	<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-	<div class="tl _block">
-		<XTimeline ref="tl" :key="src"
-			class="tl"
-			:src="src"
-			:sound="true"
-			@before="before()"
-			@after="after()"
-			@queue="queueUpdated"
-		/>
+		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+		<div class="tl _block">
+			<XTimeline ref="tl" :key="src"
+				class="tl"
+				:src="src"
+				:sound="true"
+				@before="before()"
+				@after="after()"
+				@queue="queueUpdated"
+			/>
+		</div>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -66,7 +68,7 @@ export default defineComponent({
 					icon: 'fas fa-home',
 					iconOnly: true,
 					onClick: () => { this.src = 'home'; this.saveSrc(); },
-				}, {
+				}, ...(this.isLocalTimelineAvailable ? [{
 					active: this.src === 'local',
 					title: this.$ts._timelines.local,
 					icon: 'fas fa-comments',
@@ -78,13 +80,13 @@ export default defineComponent({
 					icon: 'fas fa-share-alt',
 					iconOnly: true,
 					onClick: () => { this.src = 'social'; this.saveSrc(); },
-				}, {
+				}] : []), ...(this.isGlobalTimelineAvailable ? [{
 					active: this.src === 'global',
 					title: this.$ts._timelines.global,
 					icon: 'fas fa-globe',
 					iconOnly: true,
 					onClick: () => { this.src = 'global'; this.saveSrc(); },
-				}],
+				}] : [])],
 			})),
 		};
 	},
@@ -188,8 +190,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .cmuxhskf {
-	padding: var(--margin);
-
 	> .new {
 		position: sticky;
 		top: calc(var(--stickyTop, 0px) + 16px);
@@ -213,10 +213,5 @@ export default defineComponent({
 		border-radius: var(--radius);
 		overflow: clip;
 	}
-
-	&.min-width_800px {
-		max-width: 800px;
-		margin: 0 auto;
-	}
 }
 </style>

packages/client/src/pages/user/clips.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkPagination #default="{items}" ref="list" :pagination="pagination">
+	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
 		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
 			<b>{{ item.name }}</b>
 			<div v-if="item.description" class="description">{{ item.description }}</div>

packages/client/src/pages/user/follow-list.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkPagination #default="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers">
+	<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers">
 		<div class="users _isolated">
 			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
 		</div>

packages/client/src/pages/user/gallery.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkPagination #default="{items}" :pagination="pagination">
+	<MkPagination v-slot="{items}" :pagination="pagination">
 		<div class="jrnovfpt">
 			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 		</div>

packages/client/src/pages/user/pages.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkPagination #default="{items}" ref="list" :pagination="pagination">
+	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
 		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
 	</MkPagination>
 </div>

packages/client/src/pages/user/reactions.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkPagination #default="{items}" ref="list" :pagination="pagination">
+	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
 		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
 			<div class="header">
 				<MkAvatar class="avatar" :user="user"/>

packages/client/src/scripts/get-user-menu.ts

@@ -109,6 +109,14 @@ export function getUserMenu(user) {
 		return !confirm.canceled;
 	}
 
+	async function invalidateFollow() {
+		os.apiWithDialog('following/invalidate', {
+			userId: user.id
+		}).then(() => {
+			user.isFollowed = !user.isFollowed;
+		})
+	}
+
 	let menu = [{
 		icon: 'fas fa-at',
 		text: i18n.locale.copyUsername,
@@ -153,6 +161,14 @@ export function getUserMenu(user) {
 			action: toggleBlock
 		}]);
 
+		if (user.isFollowed) {
+			menu = menu.concat([{
+				icon: 'fas fa-unlink',
+				text: i18n.locale.breakFollow,
+				action: invalidateFollow
+			}]);
+		}
+
 		menu = menu.concat([null, {
 			icon: 'fas fa-exclamation-circle',
 			text: i18n.locale.reportAbuse,

packages/client/src/scripts/use-tooltip.ts

@@ -1,5 +1,6 @@
 import { isScreenTouching } from '@/os';
 import { Ref, ref } from 'vue';
+import { isDeviceTouch } from './is-device-touch';
 
 export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 	let isHovering = false;
@@ -13,7 +14,7 @@ export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
 
 		// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策
 		// これが無いと、画面に触れてないのにツールチップが出たりしてしまう
-		if (!isScreenTouching) return;
+		if (isDeviceTouch && !isScreenTouching) return;
 
 		const showing = ref(true);
 		onShow(showing);

packages/client/src/ui/_common_/sidebar-for-mobile.vue

@@ -0,0 +1,205 @@
+<template>
+<div class="kmwsukvl">
+	<div>
+		<button v-click-anime 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>
+			<i class="fas fa-home fa-fw"></i><span class="text">{{ $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 } : {}">
+				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $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">
+			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		</MkA>
+		<button v-click-anime class="item _button" @click="more">
+			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $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">
+			<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		</MkA>
+		<button class="item _button post" data-cy-open-post-form @click="post">
+			<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+		</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, toRef, watch } from 'vue';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { menuDef } from '@/menu';
+import { openAccountMenu } from '@/account';
+import { defaultStore } from '@/store';
+
+export default defineComponent({
+	setup(props, context) {
+		const menu = toRef(defaultStore.state, 'menu');
+		const otherMenuItemIndicated = computed(() => {
+			for (const def in menuDef) {
+				if (menu.value.includes(def)) continue;
+				if (menuDef[def].indicated) return true;
+			}
+			return false;
+		});
+
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menu,
+			menuDef: menuDef,
+			otherMenuItemIndicated,
+			post: os.post,
+			search,
+			openAccountMenu,
+			more: () => {
+				os.popup(import('@/components/launch-pad.vue'), {}, {
+				}, 'closed');
+			},
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.kmwsukvl {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	> div {
+
+		> .divider {
+			margin: 16px 16px;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .item {
+			position: relative;
+			display: block;
+			padding-left: 24px;
+			font-size: $ui-font-size;
+			line-height: 2.85rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+			color: var(--navFg);
+
+			> i {
+				position: relative;
+				width: 32px;
+			}
+
+			> i,
+			> .avatar {
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 20px;
+				color: var(--navIndicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .text {
+				position: relative;
+				font-size: 0.9em;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+
+			&:hover, &.active {
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 24px);
+					height: 100%;
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: var(--accentedBg);
+				}
+			}
+
+			&:first-child, &:last-child {
+				position: sticky;
+				z-index: 1;
+				padding-top: 8px;
+				padding-bottom: 8px;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+			}
+
+			&:first-child {
+				top: 0;
+
+				&:hover, &.active {
+					&:before {
+						content: none;
+					}
+				}
+			}
+
+			&:last-child {
+				bottom: 0;
+				color: var(--fgOnAccent);
+
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 20px);
+					height: calc(100% - 20px);
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+				}
+				
+				&:hover, &.active {
+					&:before {
+						background: var(--accentLighten);
+					}
+				}
+			}
+		}
+	}
+}
+</style>

packages/client/src/ui/_common_/sidebar.vue

@@ -1,386 +1,305 @@
 <template>
-<div class="mvcprjjd">
-	<transition name="nav-back">
-		<div v-if="showing"
-			class="nav-back _modalBg"
-			@click="showing = false"
-			@touchstart.passive="showing = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav v-show="showing" class="nav" :class="{ iconOnly, hidden }">
-			<div>
-				<button v-click-anime 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>
-					<i class="fas fa-home fa-fw"></i><span class="text">{{ $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 } : {}">
-						<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $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">
-					<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
-				</MkA>
-				<button v-click-anime class="item _button" @click="more">
-					<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $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">
-					<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-				</MkA>
-				<button class="item _button post" data-cy-open-post-form @click="post">
-					<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-				</button>
-			</div>
-		</nav>
-	</transition>
+<div class="mvcprjjd" :class="{ iconOnly }">
+	<div>
+		<button v-click-anime 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>
+			<i class="fas fa-home fa-fw"></i><span class="text">{{ $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 } : {}">
+				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $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">
+			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		</MkA>
+		<button v-click-anime class="item _button" @click="more">
+			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $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">
+			<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		</MkA>
+		<button class="item _button post" data-cy-open-post-form @click="post">
+			<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+		</button>
+	</div>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, ref, watch } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
 import { openAccountMenu } from '@/account';
+import { defaultStore } from '@/store';
 
 export default defineComponent({
-	props: {
-		defaultHidden: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
+	setup(props, context) {
+		const iconOnly = ref(false);
 
-	data() {
-		return {
-			host: host,
-			showing: false,
-			accounts: [],
-			connection: null,
-			menuDef: menuDef,
-			iconOnly: false,
-			hidden: this.defaultHidden,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
+		const menu = computed(() => defaultStore.state.menu);
+		const otherMenuItemIndicated = computed(() => {
+			for (const def in menuDef) {
+				if (menu.value.includes(def)) continue;
+				if (menuDef[def].indicated) return true;
 			}
 			return false;
-		},
+		});
+
+		const calcViewState = () => {
+			iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+		};
+
+		calcViewState();
+
+		window.addEventListener('resize', calcViewState);
+
+		watch(defaultStore.reactiveState.menuDisplay, () => {
+			calcViewState();
+		});
+
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menu,
+			menuDef: menuDef,
+			otherMenuItemIndicated,
+			iconOnly,
+			post: os.post,
+			search,
+			openAccountMenu,
+			more: () => {
+				os.popup(import('@/components/launch-pad.vue'), {}, {
+				}, 'closed');
+			},
+		};
 	},
-
-	watch: {
-		$route(to, from) {
-			this.showing = false;
-		},
-
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-
-		hidden() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		}
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1279) || (this.$store.state.menuDisplay === 'sideIcon');
-			if (!this.defaultHidden) {
-				this.hidden = (window.innerWidth <= 650);
-			}
-		},
-
-		show() {
-			this.showing = true;
-		},
-
-		post() {
-			os.post();
-		},
-
-		search() {
-			search();
-		},
-
-		more(ev) {
-			os.popup(import('@/components/launch-pad.vue'), {}, {
-			}, 'closed');
-		},
-
-		openAccountMenu,
-	}
 });
 </script>
 
 <style lang="scss" scoped>
-.nav-enter-active,
-.nav-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-enter-from,
-.nav-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.nav-back-enter-active,
-.nav-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-back-enter-from,
-.nav-back-leave-active {
-	opacity: 0;
-}
-
 .mvcprjjd {
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$nav-width: 250px;
 	$nav-icon-only-width: 86px;
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
 
-	> .nav-back {
+	flex: 0 0 $nav-width;
+	width: $nav-width;
+	box-sizing: border-box;
+
+	> div {
+		position: fixed;
+		top: 0;
+		left: 0;
 		z-index: 1001;
-	}
-
-	> .nav {
-		$avatar-size: 32px;
-		$avatar-margin: 8px;
-
-		flex: 0 0 $nav-width;
 		width: $nav-width;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
 		box-sizing: border-box;
+		overflow: auto;
+		overflow-x: clip;
+		background: var(--navBg);
 
-		&.iconOnly {
-			flex: 0 0 $nav-icon-only-width;
-			width: $nav-icon-only-width;
-
-			&:not(.hidden) {
-				> div {
-					width: $nav-icon-only-width;
-
-					> .divider {
-						margin: 8px auto;
-						width: calc(100% - 32px);
-					}
-
-					> .item {
-						padding-left: 0;
-						padding: 18px 0;
-						width: 100%;
-						text-align: center;
-						font-size: $ui-font-size * 1.1;
-						line-height: initial;
-
-						> i,
-						> .avatar {
-							display: block;
-							margin: 0 auto;
-						}
-
-						> i {
-							opacity: 0.7;
-						}
-
-						> .text {
-							display: none;
-						}
-
-						&:hover, &.active {
-							> i, > .text {
-								opacity: 1;
-							}
-						}
-
-						&:first-child {
-							margin-bottom: 8px;
-						}
-
-						&:last-child {
-							margin-top: 8px;
-						}
-					}
-				}
-			}
+		> .divider {
+			margin: 16px 16px;
+			border-top: solid 0.5px var(--divider);
 		}
 
-		&.hidden {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-		}
-
-		&:not(.hidden) {
-			display: block !important;
-		}
-
-		> div {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-			width: $nav-width;
-			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-			height: calc(var(--vh, 1vh) * 100);
+		> .item {
+			position: relative;
+			display: block;
+			padding-left: 24px;
+			font-size: $ui-font-size;
+			line-height: 2.85rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
 			box-sizing: border-box;
-			overflow: auto;
-			overflow-x: clip;
-			background: var(--navBg);
+			color: var(--navFg);
 
-			> .divider {
-				margin: 16px 16px;
-				border-top: solid 0.5px var(--divider);
+			> i {
+				position: relative;
+				width: 32px;
 			}
 
-			> .item {
+			> i,
+			> .avatar {
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 20px;
+				color: var(--navIndicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .text {
 				position: relative;
-				display: block;
-				padding-left: 24px;
-				font-size: $ui-font-size;
-				line-height: 2.85rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
+				font-size: 0.9em;
+			}
 
-				> i {
-					position: relative;
-					width: 32px;
-				}
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
 
-				> i,
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
+			&.active {
+				color: var(--navActive);
+			}
 
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .indicator {
+			&:hover, &.active {
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 24px);
+					height: 100%;
+					margin: auto;
 					position: absolute;
 					top: 0;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: var(--accentedBg);
 				}
+			}
 
-				> .text {
-					position: relative;
-					font-size: 0.9em;
-				}
+			&:first-child, &:last-child {
+				position: sticky;
+				z-index: 1;
+				padding-top: 8px;
+				padding-bottom: 8px;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+			}
 
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
+			&:first-child {
+				top: 0;
 
 				&:hover, &.active {
 					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 24px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: var(--accentedBg);
+						content: none;
 					}
 				}
+			}
 
-				&:first-child, &:last-child {
-					position: sticky;
-					z-index: 1;
-					padding-top: 8px;
-					padding-bottom: 8px;
-					background: var(--X14);
-					-webkit-backdrop-filter: var(--blur, blur(8px));
-					backdrop-filter: var(--blur, blur(8px));
+			&:last-child {
+				bottom: 0;
+				color: var(--fgOnAccent);
+
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 20px);
+					height: calc(100% - 20px);
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+				}
+				
+				&:hover, &.active {
+					&:before {
+						background: var(--accentLighten);
+					}
+				}
+			}
+		}
+	}
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width;
+
+		> div {
+			width: $nav-icon-only-width;
+
+			> .divider {
+				margin: 8px auto;
+				width: calc(100% - 32px);
+			}
+
+			> .item {
+				padding-left: 0;
+				padding: 18px 0;
+				width: 100%;
+				text-align: center;
+				font-size: $ui-font-size * 1.1;
+				line-height: initial;
+
+				> i,
+				> .avatar {
+					display: block;
+					margin: 0 auto;
+				}
+
+				> i {
+					opacity: 0.7;
+				}
+
+				> .text {
+					display: none;
+				}
+
+				&:hover, &.active {
+					> i, > .text {
+						opacity: 1;
+					}
 				}
 
 				&:first-child {
-					top: 0;
-
-					&:hover, &.active {
-						&:before {
-							content: none;
-						}
-					}
+					margin-bottom: 8px;
 				}
 
 				&:last-child {
-					bottom: 0;
-					color: var(--fgOnAccent);
+					margin-top: 8px;
+				}
 
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 20px);
-						height: calc(100% - 20px);
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-					
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
+				&:before {
+					width: 100%;
+					border-radius: 0;
+				}
+
+				&.post {
+					height: $nav-icon-only-width;
+
+					> i {
+						opacity: 1;
 					}
 				}
+
+				&.post:before {
+					width: calc(100% - 32px);
+					height: calc(100% - 32px);
+					border-radius: 100%;
+				}
 			}
 		}
 	}

packages/client/src/ui/chat/note.vue

@@ -632,6 +632,7 @@ export default defineComponent({
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
+				/*
 				...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
@@ -640,7 +641,7 @@ export default defineComponent({
 						action: this.promote
 					}]
 					: []
-				),
+				),*/
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{

packages/client/src/ui/classic.vue

@@ -1,16 +1,14 @@
 <template>
-<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
+<div class="gbhvwtnk" :class="{ wallpaper }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
 	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
 
 	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
-		<template v-if="!isMobile">
-			<div v-if="!showMenuOnTop" class="sidebar">
-				<XSidebar/>
-			</div>
-			<div v-else ref="widgetsLeft" class="widgets left">
-				<XWidgets :place="'left'" @mounted="attachSticky('widgetsLeft')"/>
-			</div>
-		</template>
+		<div v-if="!showMenuOnTop" class="sidebar">
+			<XSidebar/>
+		</div>
+		<div v-else ref="widgetsLeft" class="widgets left">
+			<XWidgets :place="'left'" @mounted="attachSticky('widgetsLeft')"/>
+		</div>
 
 		<main class="main" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu">
 			<div class="content">
@@ -32,16 +30,6 @@
 		</div>
 	</div>
 
-	<div v-if="isMobile" class="buttons">
-		<button ref="navButton" class="button nav _button" @click="showDrawerNav"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
-		<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button>
-	</div>
-
-	<XDrawerSidebar v-if="isMobile" ref="drawerNav" class="sidebar"/>
-
 	<transition name="tray-back">
 		<div v-if="widgetsShowing"
 			class="tray-back _modalBg"
@@ -65,20 +53,17 @@ import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
 import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import XSidebar from './classic.sidebar.vue';
-import XDrawerSidebar from '@/ui/_common_/sidebar.vue';
 import XCommon from './_common_/common.vue';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
 import * as symbols from '@/symbols';
 
 const DESKTOP_THRESHOLD = 1100;
-const MOBILE_THRESHOLD = 600;
 
 export default defineComponent({
 	components: {
 		XCommon,
 		XSidebar,
-		XDrawerSidebar,
 		XHeaderMenu: defineAsyncComponent(() => import('./classic.header.vue')),
 		XWidgets: defineAsyncComponent(() => import('./classic.widgets.vue')),
 	},
@@ -86,6 +71,7 @@ export default defineComponent({
 	provide() {
 		return {
 			shouldHeaderThin: this.showMenuOnTop,
+			shouldSpacerMin: true,
 		};
 	},
 
@@ -94,7 +80,6 @@ export default defineComponent({
 			pageInfo: null,
 			menuDef: menuDef,
 			globalHeaderHeight: 0,
-			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			widgetsShowing: false,
 			fullView: false,
@@ -103,20 +88,17 @@ export default defineComponent({
 	},
 
 	computed: {
-		navIndicated(): boolean {
-			for (const def in this.menuDef) {
-				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-
 		showMenuOnTop(): boolean {
-			return !this.isMobile && this.$store.state.menuDisplay === 'top';
+			return this.$store.state.menuDisplay === 'top';
 		}
 	},
 
 	created() {
+		if (window.innerWidth < 1024) {
+			localStorage.setItem('ui', 'default');
+			location.reload();
+		}
+
 		document.documentElement.style.overflowY = 'scroll';
 
 		if (this.$store.state.widgets.length === 0) {
@@ -135,7 +117,6 @@ export default defineComponent({
 
 	mounted() {
 		window.addEventListener('resize', () => {
-			this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
 			this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
 		}, { passive: true });
 
@@ -178,22 +159,10 @@ export default defineComponent({
 			}, { passive: true });
 		},
 
-		post() {
-			os.post();
-		},
-
 		top() {
 			window.scroll({ top: 0, behavior: 'smooth' });
 		},
 
-		back() {
-			history.back();
-		},
-
-		showDrawerNav() {
-			this.$refs.drawerNav.show();
-		},
-
 		onTransition() {
 			if (window._scroll) window._scroll();
 		},
@@ -257,10 +226,9 @@ export default defineComponent({
 	opacity: 0;
 }
 
-.mk-app {
+.gbhvwtnk {
 	$ui-font-size: 1em;
 	$widgets-hide-threshold: 1200px;
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
 
 	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 	min-height: calc(var(--vh, 1vh) * 100);
@@ -271,21 +239,6 @@ export default defineComponent({
 		//backdrop-filter: var(--blur, blur(4px));
 	}
 
-	&.isMobile {
-		> .columns {
-			display: block;
-			margin: 0;
-
-			> .main {
-				margin: 0;
-				padding-bottom: 92px;
-				border: none;
-				width: 100%;
-				border-radius: 0;
-			}
-		}
-	}
-
 	> .columns {
 		display: flex;
 		justify-content: center;
@@ -371,76 +324,6 @@ export default defineComponent({
 		}
 	}
 
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		padding: 16px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		-webkit-backdrop-filter: var(--blur, blur(32px));
-		backdrop-filter: var(--blur, blur(32px));
-		background-color: var(--header);
-		border-top: solid 0.5px var(--divider);
-
-		> .button {
-			position: relative;
-			flex: 1;
-			padding: 0;
-			margin: auto;
-			height: 64px;
-			border-radius: 8px;
-			background: var(--panel);
-			color: var(--fg);
-
-			&:not(:last-child) {
-				margin-right: 12px;
-			}
-
-			@media (max-width: 400px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
-			&:hover {
-				background: var(--X2);
-			}
-
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 0;
-				color: var(--indicator);
-				font-size: 16px;
-				animation: blink 1s infinite;
-			}
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 22px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
 	> .tray-back {
 		z-index: 1001;
 	}

packages/client/src/ui/deck.vue

@@ -1,8 +1,8 @@
 <template>
-<div class="mk-deck" :class="`${deckStore.reactiveState.columnAlign.value}`" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
+<div class="mk-deck" :class="[{ isMobile }, `${deckStore.reactiveState.columnAlign.value}`]" :style="{ '--deckMargin': deckStore.reactiveState.columnMargin.value + 'px' }"
 	@contextmenu.self.prevent="onContextmenu"
 >
-	<XSidebar ref="nav"/>
+	<XSidebar v-if="!isMobile"/>
 
 	<template v-for="ids in layout">
 		<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
@@ -22,91 +22,76 @@
 		/>
 	</template>
 
-	<button v-if="$i" class="nav _button" @click="showNav()"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
-	<button v-if="$i" class="post _buttonPrimary" @click="post()"><i class="fas fa-pencil-alt"></i></button>
+	<div v-if="isMobile" class="buttons">
+		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button home _button" @click="$router.push('/')"><i class="fas fa-home"></i></button>
+		<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
+		<button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button>
+	</div>
+
+	<transition name="menu-back">
+		<div v-if="drawerMenuShowing"
+			class="menu-back _modalBg"
+			@click="drawerMenuShowing = false"
+			@touchstart.passive="drawerMenuShowing = false"
+		></div>
+	</transition>
+
+	<transition name="menu">
+		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
+	</transition>
 
 	<XCommon/>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
-import { host } from '@/config';
 import DeckColumnCore from '@/ui/deck/column-core.vue';
 import XSidebar from '@/ui/_common_/sidebar.vue';
+import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
 import { getScrollContainer } from '@/scripts/scroll';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
 import XCommon from './_common_/common.vue';
-import { deckStore, addColumn, loadDeck } from './deck/deck-store';
+import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store';
+import { useRoute } from 'vue-router';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
 		XCommon,
 		XSidebar,
+		XDrawerMenu,
 		DeckColumnCore,
 	},
 
-	provide() {
-		return deckStore.state.navWindow ? {
-			navHook: (url) => {
-				os.pageWindow(url);
-			}
-		} : {};
-	},
+	setup() {
+		const isMobile = ref(window.innerWidth <= 500);
+		window.addEventListener('resize', () => {
+			isMobile.value = window.innerWidth <= 500;
+		});
 
-	data() {
-		return {
-			deckStore,
-			host: host,
-			menuDef: menuDef,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-		};
-	},
+		const drawerMenuShowing = ref(false);
 
-	computed: {
-		columns() {
-			return deckStore.reactiveState.columns.value;
-		},
-		layout() {
-			return deckStore.reactiveState.layout.value;
-		},
-		navIndicated(): boolean {
-			if (!this.$i) return false;
-			for (const def in this.menuDef) {
-				if (this.menuDef[def].indicated) return true;
+		const route = useRoute();
+		watch(route, () => {
+			drawerMenuShowing.value = false;
+		});
+
+		const columns = deckStore.reactiveState.columns;
+		const layout = deckStore.reactiveState.layout.value;
+		const menuIndicated = computed(() => {
+			if ($i == null) return false;
+			for (const def in menuDef) {
+				if (menuDef[def].indicated) return true;
 			}
 			return false;
-		},
-	},
+		});
 
-	created() {
-		document.documentElement.style.overflowY = 'hidden';
-		document.documentElement.style.scrollBehavior = 'auto';
-		window.addEventListener('wheel', this.onWheel);
-		loadDeck();
-	},
-
-	mounted() {
-	},
-
-	methods: {
-		onWheel(e) {
-			if (getScrollContainer(e.target) == null) {
-				document.documentElement.scrollLeft += e.deltaY > 0 ? 96 : -96;
-			}
-		},
-
-		showNav() {
-			this.$refs.nav.show();
-		},
-
-		post() {
-			os.post();
-		},
-
-		async addColumn(ev) {
+		const addColumn = async (ev) => {
 			const columns = [
 				'main',
 				'widgets',
@@ -119,33 +104,83 @@ export default defineComponent({
 			];
 
 			const { canceled, result: column } = await os.select({
-				title: this.$ts._deck.addColumn,
+				title: i18n.locale._deck.addColumn,
 				items: columns.map(column => ({
-					value: column, text: this.$t('_deck._columns.' + column)
+					value: column, text: i18n.t('_deck._columns.' + column)
 				}))
 			});
 			if (canceled) return;
 
-			addColumn({
+			addColumnToStore({
 				type: column,
 				id: uuid(),
-				name: this.$t('_deck._columns.' + column),
+				name: i18n.t('_deck._columns.' + column),
 				width: 330,
 			});
-		},
+		};
 
-		onContextmenu(e) {
+		const onContextmenu = (ev) => {
 			os.contextMenu([{
-				text: this.$ts._deck.addColumn,
+				text: i18n.locale._deck.addColumn,
 				icon: null,
-				action: this.addColumn
-			}], e);
-		},
-	}
+				action: addColumn
+			}], ev);
+		};
+
+		provide('shouldSpacerMin', true);
+		if (deckStore.state.navWindow) {
+			provide('navHook', (url) => {
+				os.pageWindow(url);
+			});
+		}
+
+		document.documentElement.style.overflowY = 'hidden';
+		document.documentElement.style.scrollBehavior = 'auto';
+		window.addEventListener('wheel', (ev) => {
+			if (getScrollContainer(ev.target) == null) {
+				document.documentElement.scrollLeft += ev.deltaY > 0 ? 96 : -96;
+			}
+		});
+		loadDeck();
+
+		return {
+			isMobile,
+			deckStore,
+			drawerMenuShowing,
+			columns,
+			layout,
+			menuIndicated,
+			onContextmenu,
+			wallpaper: localStorage.getItem('wallpaper') != null,
+			post: os.post,
+		};
+	},
 });
 </script>
 
 <style lang="scss" scoped>
+.menu-enter-active,
+.menu-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menu-enter-from,
+.menu-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.menu-back-enter-active,
+.menu-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menu-back-enter-from,
+.menu-back-leave-active {
+	opacity: 0;
+}
+
 .mk-deck {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
@@ -169,6 +204,10 @@ export default defineComponent({
 		}
 	}
 
+	&.isMobile {
+		padding-bottom: 100px;
+	}
+
 	> .column {
 		flex-shrink: 0;
 		margin-right: var(--deckMargin);
@@ -183,43 +222,89 @@ export default defineComponent({
 		}
 	}
 
-	> .post,
-	> .nav {
+	> .buttons {
 		position: fixed;
 		z-index: 1000;
-		bottom: 32px;
-		width: 64px;
-		height: 64px;
-		border-radius: 100%;
-		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-		font-size: 22px;
+		bottom: 0;
+		left: 0;
+		padding: 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
 
-		@media (min-width: ($nav-hide-threshold + 1px)) {
-			display: none;
+		> .button {
+			position: relative;
+			flex: 1;
+			padding: 0;
+			margin: auto;
+			height: 64px;
+			border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+
+			&:not(:last-child) {
+				margin-right: 12px;
+			}
+
+			@media (max-width: 400px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				background: var(--X2);
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 0;
+				color: var(--indicator);
+				font-size: 16px;
+				animation: blink 1s infinite;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 22px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
 		}
 	}
 
-	> .post {
-		right: 32px;
+	> .menu-back {
+		z-index: 1001;
 	}
 
-	> .nav {
-		left: 32px;
-		background: var(--panel);
-		color: var(--fg);
-
-		&:hover {
-			background: var(--X2);
-		}
-
-		> .indicator {
-			position: absolute;
-			top: 0;
-			left: 0;
-			color: var(--indicator);
-			font-size: 16px;
-			animation: blink 1s infinite;
-		}
+	> .menu {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		width: 240px;
+		box-sizing: border-box;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--bg);
 	}
 }
 </style>

packages/client/src/ui/deck/column.vue

@@ -401,6 +401,7 @@ export default defineComponent({
 		height: calc(100% - var(--deckColumnHeaderHeight));
 		overflow: auto;
 		overflow-x: hidden;
+		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		box-sizing: border-box;
 	}

packages/client/src/ui/universal.vue

@@ -1,9 +1,9 @@
 <template>
-<div class="mk-app" :class="{ wallpaper }">
-	<XSidebar ref="nav" class="sidebar"/>
+<div class="dkgtipfy" :class="{ wallpaper }">
+	<XSidebar v-if="!isMobile" class="sidebar"/>
 
-	<div ref="contents" class="contents" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu">
-		<main ref="main">
+	<div class="contents" :style="{ background: pageInfo?.bg }" @contextmenu.stop="onContextmenu">
+		<main>
 			<div class="content">
 				<MkStickyContainer>
 					<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
@@ -20,32 +20,44 @@
 		</main>
 	</div>
 
-	<XSide v-if="isDesktop" ref="side" class="side"/>
+	<XSideView v-if="isDesktop" ref="side" class="side"/>
 
-	<div v-if="isDesktop" ref="widgets" class="widgets">
+	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
 		<XWidgets @mounted="attachSticky"/>
 	</div>
 
-	<div class="buttons" :class="{ navHidden }">
-		<button ref="navButton" class="button nav _button" @click="showNav"><i class="fas fa-bars"></i><span v-if="navIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
+	<button class="widgetButton _button" :class="{ show: true }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+
+	<div v-if="isMobile" class="buttons">
+		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="fas fa-bars"></i><span v-if="menuIndicated" class="indicator"><i class="fas fa-circle"></i></span></button>
 		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><i class="fas fa-home"></i></button>
 		<button class="button notifications _button" @click="$router.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
 		<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
-		<button class="button post _button" @click="post"><i class="fas fa-pencil-alt"></i></button>
+		<button class="button post _button" @click="post()"><i class="fas fa-pencil-alt"></i></button>
 	</div>
 
-	<button class="widgetButton _button" :class="{ navHidden }" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+	<transition name="menuDrawer-back">
+		<div v-if="drawerMenuShowing"
+			class="menuDrawer-back _modalBg"
+			@click="drawerMenuShowing = false"
+			@touchstart.passive="drawerMenuShowing = false"
+		></div>
+	</transition>
 
-	<transition name="tray-back">
+	<transition name="menuDrawer">
+		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
+	</transition>
+
+	<transition name="widgetsDrawer-back">
 		<div v-if="widgetsShowing"
-			class="tray-back _modalBg"
+			class="widgetsDrawer-back _modalBg"
 			@click="widgetsShowing = false"
 			@touchstart.passive="widgetsShowing = false"
 		></div>
 	</transition>
 
-	<transition name="tray">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
+	<transition name="widgetsDrawer">
+		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
 	</transition>
 
 	<XCommon/>
@@ -53,60 +65,69 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+import { defineComponent, defineAsyncComponent, provide, onMounted, computed, ref, watch } from 'vue';
 import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import XSidebar from '@/ui/_common_/sidebar.vue';
+import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
 import XCommon from './_common_/common.vue';
-import XSide from './classic.side.vue';
+import XSideView from './classic.side.vue';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
 import * as symbols from '@/symbols';
+import { defaultStore } from '@/store';
+import * as EventEmitter from 'eventemitter3';
+import { menuDef } from '@/menu';
+import { useRoute } from 'vue-router';
+import { i18n } from '@/i18n';
 
 const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 500;
 
 export default defineComponent({
 	components: {
 		XCommon,
 		XSidebar,
+		XDrawerMenu,
 		XWidgets: defineAsyncComponent(() => import('./universal.widgets.vue')),
-		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
+		XSideView, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
 	},
 
-	provide() {
-		return {
-			sideViewHook: this.isDesktop ? (url) => {
-				this.$refs.side.navigate(url);
-			} : null
-		};
-	},
+	setup() {
+		const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
+		const isMobile = ref(window.innerWidth <= MOBILE_THRESHOLD);
+		window.addEventListener('resize', () => {
+			isMobile.value = window.innerWidth <= MOBILE_THRESHOLD;
+		});
 
-	data() {
-		return {
-			pageInfo: null,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			menuDef: menuDef,
-			navHidden: false,
-			widgetsShowing: false,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-		};
-	},
+		const pageInfo = ref();
+		const widgetsEl = ref<HTMLElement>();
+		const widgetsShowing = ref(false);
 
-	computed: {
-		navIndicated(): boolean {
-			for (const def in this.menuDef) {
+		const sideViewController = new EventEmitter();
+
+		provide('sideViewHook', isDesktop.value ? (url) => {
+			sideViewController.emit('navigate', url);
+		} : null);
+
+		const menuIndicated = computed(() => {
+			for (const def in menuDef) {
 				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
+				if (menuDef[def].indicated) return true;
 			}
 			return false;
-		}
-	},
+		});
+
+		const drawerMenuShowing = ref(false);
+
+		const route = useRoute();
+		watch(route, () => {
+			drawerMenuShowing.value = false;
+		});
 
-	created() {
 		document.documentElement.style.overflowY = 'scroll';
 
-		if (this.$store.state.widgets.length === 0) {
-			this.$store.set('widgets', [{
+		if (defaultStore.state.widgets.length === 0) {
+			defaultStore.set('widgets', [{
 				name: 'calendar',
 				id: 'a', place: 'right', data: {}
 			}, {
@@ -117,123 +138,129 @@ export default defineComponent({
 				id: 'c', place: 'right', data: {}
 			}]);
 		}
-	},
 
-	mounted() {
-		this.adjustUI();
-
-		const ro = new ResizeObserver((entries, observer) => {
-			this.adjustUI();
+		onMounted(() => {
+			if (!isDesktop.value) {
+				window.addEventListener('resize', () => {
+					if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
+				}, { passive: true });
+			}
 		});
 
-		ro.observe(this.$refs.contents);
-
-		window.addEventListener('resize', this.adjustUI, { passive: true });
-
-		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		changePage(page) {
+		const changePage = (page) => {
 			if (page == null) return;
 			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-				document.title = `${this.pageInfo.title} | ${instanceName}`;
+				pageInfo.value = page[symbols.PAGE_INFO];
+				document.title = `${pageInfo.value.title} | ${instanceName}`;
 			}
-		},
+		};
 
-		adjustUI() {
-			const navWidth = this.$refs.nav.$el.offsetWidth;
-			this.navHidden = navWidth === 0;
-		},
-
-		showNav() {
-			this.$refs.nav.show();
-		},
-
-		attachSticky(el) {
-			const sticky = new StickySidebar(this.$refs.widgets);
-			window.addEventListener('scroll', () => {
-				sticky.calc(window.scrollY);
-			}, { passive: true });
-		},
-
-		post() {
-			os.post();
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		back() {
-			history.back();
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		onContextmenu(e) {
+		const onContextmenu = (ev) => {
 			const isLink = (el: HTMLElement) => {
 				if (el.tagName === 'A') return true;
 				if (el.parentElement) {
 					return isLink(el.parentElement);
 				}
 			};
-			if (isLink(e.target)) return;
-			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
+			if (isLink(ev.target)) return;
+			if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
 			if (window.getSelection().toString() !== '') return;
-			const path = this.$route.path;
+			const path = route.path;
 			os.contextMenu([{
 				type: 'label',
 				text: path,
 			}, {
 				icon: 'fas fa-columns',
-				text: this.$ts.openInSideView,
+				text: i18n.locale.openInSideView,
 				action: () => {
 					this.$refs.side.navigate(path);
 				}
 			}, {
 				icon: 'fas fa-window-maximize',
-				text: this.$ts.openInWindow,
+				text: i18n.locale.openInWindow,
 				action: () => {
 					os.pageWindow(path);
 				}
-			}], e);
-		},
-	}
+			}], ev);
+		};
+
+		const attachSticky = (el) => {
+			const sticky = new StickySidebar(widgetsEl.value);
+			window.addEventListener('scroll', () => {
+				sticky.calc(window.scrollY);
+			}, { passive: true });
+		};
+
+		return {
+			pageInfo,
+			isDesktop,
+			isMobile,
+			widgetsEl,
+			widgetsShowing,
+			drawerMenuShowing,
+			menuIndicated,
+			wallpaper: localStorage.getItem('wallpaper') != null,
+			changePage,
+			top: () => {
+				window.scroll({ top: 0, behavior: 'smooth' });
+			},
+			onTransition: () => {
+				if (window._scroll) window._scroll();
+			},
+			post: os.post,
+			onContextmenu,
+			attachSticky,
+		};
+	},
 });
 </script>
 
 <style lang="scss" scoped>
-.tray-enter-active,
-.tray-leave-active {
+.widgetsDrawer-enter-active,
+.widgetsDrawer-leave-active {
 	opacity: 1;
 	transform: translateX(0);
 	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.tray-enter-from,
-.tray-leave-active {
+.widgetsDrawer-enter-from,
+.widgetsDrawer-leave-active {
 	opacity: 0;
 	transform: translateX(240px);
 }
 
-.tray-back-enter-active,
-.tray-back-leave-active {
+.widgetsDrawer-back-enter-active,
+.widgetsDrawer-back-leave-active {
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.tray-back-enter-from,
-.tray-back-leave-active {
+.widgetsDrawer-back-enter-from,
+.widgetsDrawer-back-leave-active {
 	opacity: 0;
 }
 
-.mk-app {
+.menuDrawer-enter-active,
+.menuDrawer-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menuDrawer-enter-from,
+.menuDrawer-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.menuDrawer-back-enter-active,
+.menuDrawer-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menuDrawer-back-enter-from,
+.menuDrawer-back-leave-active {
+	opacity: 0;
+}
+
+.dkgtipfy {
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$widgets-hide-threshold: 1090px;
 
@@ -248,6 +275,7 @@ export default defineComponent({
 	}
 
 	> .sidebar {
+		border-right: solid 0.5px var(--divider);
 	}
 
 	> .contents {
@@ -284,6 +312,7 @@ export default defineComponent({
 		}
 	}
 
+/*
 	> .widgetButton {
 		display: block;
 		position: fixed;
@@ -304,12 +333,35 @@ export default defineComponent({
 		@media (min-width: ($widgets-hide-threshold + 1px)) {
 			display: none;
 		}
+	}*/
+
+	> .widgetButton {
+		display: none;
+	}
+
+	> .widgetsDrawer-back {
+		z-index: 1001;
+	}
+
+	> .widgetsDrawer {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--bg);
 	}
 
 	> .buttons {
 		position: fixed;
 		z-index: 1000;
 		bottom: 0;
+		left: 0;
 		padding: 16px;
 		display: flex;
 		width: 100%;
@@ -318,10 +370,6 @@ export default defineComponent({
 		backdrop-filter: var(--blur, blur(32px));
 		background-color: var(--header);
 
-		&:not(.navHidden) {
-			display: none;
-		}
-
 		> .button {
 			position: relative;
 			flex: 1;
@@ -379,22 +427,24 @@ export default defineComponent({
 		}
 	}
 
-	> .tray-back {
+	> .menuDrawer-back {
 		z-index: 1001;
 	}
 
-	> .tray {
+	> .menuDrawer {
 		position: fixed;
 		top: 0;
-		right: 0;
+		left: 0;
 		z-index: 1001;
 		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 		height: calc(var(--vh, 1vh) * 100);
-		padding: var(--margin);
+		width: 240px;
 		box-sizing: border-box;
 		overflow: auto;
+		overscroll-behavior: contain;
 		background: var(--bg);
 	}
+
 }
 </style>
 

packages/client/src/ui/visitor/kanban.vue

@@ -16,7 +16,7 @@
 				</div>
 				<div class="announcements panel">
 					<header>{{ $ts.announcements }}</header>
-					<MkPagination #default="{items}" :pagination="announcements" class="list">
+					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
 						<section v-for="announcement in items" :key="announcement.id" class="item">
 							<div class="title">{{ announcement.title }}</div>
 							<div class="content">