Merge branch 'develop' into vue3

src/client/components/channel-follow-button.vue

@@ -0,0 +1,141 @@
+<template>
+<button class="hdcaacmi _button"
+	:class="{ wait, active: isFollowing, full }"
+	@click="onClick"
+	:disabled="wait"
+>
+	<template v-if="!wait">
+		<template v-if="isFollowing">
+			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+		</template>
+		<template v-else>
+			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+		</template>
+	</template>
+	<template v-else>
+		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+	</template>
+</button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	props: {
+		channel: {
+			type: Object,
+			required: true
+		},
+		full: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			isFollowing: this.channel.isFollowing,
+			wait: false,
+			faSpinner, faPlus, faMinus,
+		};
+	},
+
+	methods: {
+		async onClick() {
+			this.wait = true;
+
+			try {
+				if (this.isFollowing) {
+					await this.$root.api('channels/unfollow', {
+						channelId: this.channel.id
+					});
+					this.isFollowing = false;
+				} else {
+					await this.$root.api('channels/follow', {
+						channelId: this.channel.id
+					});
+					this.isFollowing = true;
+				}
+			} catch (e) {
+				console.error(e);
+			} finally {
+				this.wait = false;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.hdcaacmi {
+	position: relative;
+	display: inline-block;
+	font-weight: bold;
+	color: var(--accent);
+	background: transparent;
+	border: solid 1px var(--accent);
+	padding: 0;
+	height: 31px;
+	font-size: 16px;
+	border-radius: 32px;
+	background: #fff;
+
+	&.full {
+		padding: 0 8px 0 12px;
+		font-size: 14px;
+	}
+
+	&:not(.full) {
+		width: 31px;
+	}
+
+	&:focus {
+		&:after {
+			content: "";
+			pointer-events: none;
+			position: absolute;
+			top: -5px;
+			right: -5px;
+			bottom: -5px;
+			left: -5px;
+			border: 2px solid var(--focus);
+			border-radius: 32px;
+		}
+	}
+
+	&:hover {
+		//background: mix($primary, #fff, 20);
+	}
+
+	&:active {
+		//background: mix($primary, #fff, 40);
+	}
+
+	&.active {
+		color: #fff;
+		background: var(--accent);
+
+		&:hover {
+			background: var(--accentLighten);
+			border-color: var(--accentLighten);
+		}
+
+		&:active {
+			background: var(--accentDarken);
+			border-color: var(--accentDarken);
+		}
+	}
+
+	&.wait {
+		cursor: wait !important;
+		opacity: 0.7;
+	}
+
+	> span {
+		margin-right: 6px;
+	}
+}
+</style>

src/client/components/channel-preview.vue

@@ -0,0 +1,144 @@
+<template>
+<router-link :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+	<div class="banner" v-if="channel.bannerUrl" :style="`background-image: url('${channel.bannerUrl}')`">
+		<div class="fade"></div>
+		<div class="name"><fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
+		<div class="status">
+			<div><fa :icon="faUsers" fixed-width/><i18n path="_channel.usersCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.usersCount }}</b></i18n></div>
+			<div><fa :icon="faPencilAlt" fixed-width/><i18n path="_channel.notesCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.notesCount }}</b></i18n></div>
+		</div>
+	</div>
+	<article v-if="channel.description">
+		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
+	</article>
+	<footer>
+		<span>
+			{{ $t('updatedAt') }}: <mk-time :time="channel.lastNotedAt"/>
+		</span>
+	</footer>
+</router-link>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	props: {
+		channel: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			faSatelliteDish, faUsers, faPencilAlt,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.eftoefju {
+	display: block;
+	overflow: hidden;
+	width: 100%;
+	border: 1px solid var(--divider);
+
+	&:hover {
+		text-decoration: none;
+	}
+
+	> .banner {
+		position: relative;
+		width: 100%;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+
+		> .fade {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+		}
+
+		> .name {
+			position: absolute;
+			top: 16px;
+			left: 16px;
+			padding: 12px 16px;
+			background: rgba(0, 0, 0, 0.7);
+			color: #fff;
+			font-size: 1.2em;
+		}
+
+		> .status {
+			position: absolute;
+			z-index: 1;
+			bottom: 16px;
+			right: 16px;
+			padding: 8px 12px;
+			font-size: 80%;
+			background: rgba(0, 0, 0, 0.7);
+			border-radius: 6px;
+			color: #fff;
+		}
+	}
+
+	> article {
+		padding: 16px;
+
+		> p {
+			margin: 0;
+			font-size: 1em;
+		}
+	}
+
+	> footer {
+		padding: 12px 16px;
+		border-top: solid 1px var(--divider);
+
+		> span {
+			opacity: 0.7;
+			font-size: 0.9em;
+		}
+	}
+
+	@media (max-width: 550px) {
+		font-size: 0.9em;
+
+		> .banner {
+			height: 80px;
+
+			> .status {
+				display: none;
+			}
+		}
+
+		> article {
+			padding: 12px;
+		}
+
+		> footer {
+			display: none;
+		}
+	}
+
+	@media (max-width: 500px) {
+		font-size: 0.8em;
+
+		> .banner {
+			height: 70px;
+		}
+
+		> article {
+			padding: 8px;
+		}
+	}
+}
+
+</style>

src/client/components/instance-stats.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="zbcjwnqg">
+<div class="zbcjwnqg" v-size="{ max: [550, 1200] }">
 	<div class="stats" v-if="info">
 		<div class="_panel">
 			<div>
@@ -84,7 +84,7 @@
 	</div>
 
 	<section class="_card">
-		<div class="_title"><fa :icon="faChartBar"/> {{ $t('statistics') }}</div>
+		<div class="_title" style="position: relative;"><fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><fa :icon="faSync"/></button></div>
 		<div class="_content" style="margin-top: -8px;">
 			<div class="selects" style="display: flex;">
 				<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
@@ -123,12 +123,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChartBar, faUser, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faChartBar, faUser, faPencilAlt, faSync } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
 import number from '../filters/number';
 
-const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
 const alpha = (hex, a) => {
@@ -144,6 +143,19 @@ export default defineComponent({
 		MkSelect
 	},
 
+	props: {
+		chartLimit: {
+			type: Number,
+			required: false,
+			default: 90
+		},
+		detailed: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+
 	data() {
 		return {
 			info: null,
@@ -160,7 +172,7 @@ export default defineComponent({
 			chartInstance: null,
 			chartSrc: 'notes',
 			chartSpan: 'hour',
-			faChartBar, faUser, faPencilAlt
+			faChartBar, faUser, faPencilAlt, faSync
 		}
 	},
 
@@ -209,62 +221,69 @@ export default defineComponent({
 
 		this.now = new Date();
 
-		const [perHour, perDay] = await Promise.all([Promise.all([
-			this.$root.api('charts/federation', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/users', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/active-users', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/notes', { limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/drive', { limit: chartLimit, span: 'hour' }),
-		]), Promise.all([
-			this.$root.api('charts/federation', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/users', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/active-users', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/notes', { limit: chartLimit, span: 'day' }),
-			this.$root.api('charts/drive', { limit: chartLimit, span: 'day' }),
-		])]);
-
-		const chart = {
-			perHour: {
-				federation: perHour[0],
-				users: perHour[1],
-				activeUsers: perHour[2],
-				notes: perHour[3],
-				drive: perHour[4],
-			},
-			perDay: {
-				federation: perDay[0],
-				users: perDay[1],
-				activeUsers: perDay[2],
-				notes: perDay[3],
-				drive: perDay[4],
-			}
-		};
-
-		this.notesLocalWoW = this.info.originalNotesCount - chart.perDay.notes.local.total[7];
-		this.notesLocalDoD = this.info.originalNotesCount - chart.perDay.notes.local.total[1];
-		this.notesRemoteWoW = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[7];
-		this.notesRemoteDoD = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[1];
-		this.usersLocalWoW = this.info.originalUsersCount - chart.perDay.users.local.total[7];
-		this.usersLocalDoD = this.info.originalUsersCount - chart.perDay.users.local.total[1];
-		this.usersRemoteWoW = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[7];
-		this.usersRemoteDoD = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[1];
-
-		this.chart = chart;
-
-		this.renderChart();
+		this.fetchChart();
 	},
 
 	methods: {
+		async fetchChart() {
+			const [perHour, perDay] = await Promise.all([Promise.all([
+				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
+				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
+			]), Promise.all([
+				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/users', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
+				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
+			])]);
+
+			const chart = {
+				perHour: {
+					federation: perHour[0],
+					users: perHour[1],
+					activeUsers: perHour[2],
+					notes: perHour[3],
+					drive: perHour[4],
+				},
+				perDay: {
+					federation: perDay[0],
+					users: perDay[1],
+					activeUsers: perDay[2],
+					notes: perDay[3],
+					drive: perDay[4],
+				}
+			};
+
+			this.notesLocalWoW = this.info.originalNotesCount - chart.perDay.notes.local.total[7];
+			this.notesLocalDoD = this.info.originalNotesCount - chart.perDay.notes.local.total[1];
+			this.notesRemoteWoW = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[7];
+			this.notesRemoteDoD = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[1];
+			this.usersLocalWoW = this.info.originalUsersCount - chart.perDay.users.local.total[7];
+			this.usersLocalDoD = this.info.originalUsersCount - chart.perDay.users.local.total[1];
+			this.usersRemoteWoW = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[7];
+			this.usersRemoteDoD = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[1];
+
+			this.chart = chart;
+
+			this.renderChart();
+		},
+
 		renderChart() {
 			if (this.chartInstance) {
 				this.chartInstance.destroy();
 			}
 
+			// TODO: var(--panel)の色が暗いか明るいかで判定する
+			const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+
 			Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 			this.chartInstance = new Chart(this.$refs.chart, {
 				type: 'line',
 				data: {
-					labels: new Array(chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
+					labels: new Array(this.chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
 					datasets: this.data.series.map(x => ({
 						label: x.name,
 						data: x.data.slice().reverse(),
@@ -272,7 +291,9 @@ export default defineComponent({
 						lineTension: 0,
 						borderWidth: 2,
 						borderColor: x.color,
+						borderDash: x.borderDash || [],
 						backgroundColor: alpha(x.color, 0.1),
+						fill: x.fill == null ? true : x.fill,
 						hidden: !!x.hidden
 					}))
 				},
@@ -294,17 +315,28 @@ export default defineComponent({
 					},
 					scales: {
 						xAxes: [{
+							type: 'time',
+							time: {
+								stepSize: 1,
+								unit: this.chartSpan == 'day' ? 'month' : 'day',
+							},
 							gridLines: {
-								display: false
+								display: this.detailed,
+								color: gridColor,
+								zeroLineColor: gridColor,
 							},
 							ticks: {
-								display: false
+								display: this.detailed
 							}
 						}],
 						yAxes: [{
-							position: 'right',
+							position: 'left',
+							gridLines: {
+								color: gridColor,
+								zeroLineColor: gridColor,
+							},
 							ticks: {
-								display: false
+								display: this.detailed
 							}
 						}]
 					},
@@ -326,7 +358,11 @@ export default defineComponent({
 		},
 
 		format(arr) {
-			return arr;
+			const now = Date.now();
+			return arr.map((v, i) => ({
+				x: new Date(now - ((this.chartSpan == 'day' ? 86400000 :3600000 ) * i)),
+				y: v
+			}));
 		},
 
 		federationInstancesChart(total: boolean): any {
@@ -348,6 +384,8 @@ export default defineComponent({
 					name: 'All',
 					type: 'line',
 					color: '#008FFB',
+					borderDash: [5, 5],
+					fill: false,
 					data: this.format(type == 'combined'
 						? sum(this.stats.notes.local.inc, negate(this.stats.notes.local.dec), this.stats.notes.remote.inc, negate(this.stats.notes.remote.dec))
 						: sum(this.stats.notes[type].inc, negate(this.stats.notes[type].dec))
@@ -464,7 +502,9 @@ export default defineComponent({
 				series: [{
 					name: 'All',
 					type: 'line',
-					color: '#008FFB',
+					color: '#09d8e2',
+					borderDash: [5, 5],
+					fill: false,
 					data: this.format(
 						sum(
 							this.stats.drive.local.incSize,
@@ -481,17 +521,17 @@ export default defineComponent({
 				}, {
 					name: 'Local -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FF4560',
 					data: this.format(negate(this.stats.drive.local.decSize))
 				}, {
 					name: 'Remote +',
 					type: 'area',
-					color: '#008FFB',
+					color: '#00E396',
 					data: this.format(this.stats.drive.remote.incSize)
 				}, {
 					name: 'Remote -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FEB019',
 					data: this.format(negate(this.stats.drive.remote.decSize))
 				}]
 			};
@@ -526,7 +566,9 @@ export default defineComponent({
 				series: [{
 					name: 'All',
 					type: 'line',
-					color: '#008FFB',
+					color: '#09d8e2',
+					borderDash: [5, 5],
+					fill: false,
 					data: this.format(
 						sum(
 							this.stats.drive.local.incCount,
@@ -543,17 +585,17 @@ export default defineComponent({
 				}, {
 					name: 'Local -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FF4560',
 					data: this.format(negate(this.stats.drive.local.decCount))
 				}, {
 					name: 'Remote +',
 					type: 'area',
-					color: '#008FFB',
+					color: '#00E396',
 					data: this.format(this.stats.drive.remote.incCount)
 				}, {
 					name: 'Remote -',
 					type: 'area',
-					color: '#008FFB',
+					color: '#FEB019',
 					data: this.format(negate(this.stats.drive.remote.decCount))
 				}]
 			};
@@ -589,17 +631,30 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .zbcjwnqg {
+	&.max-width_1200px {
+		> .stats {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: 1fr 1fr;
+		}
+	}
+
+	&.max-width_550px {
+		> .stats {
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr 1fr 1fr 1fr;
+		}
+	}
+
 	> .stats {
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		margin: calc(0px - var(--margin) / 2);
-		margin-bottom: calc(var(--margin) / 2);
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+		grid-template-rows: 1fr;
+		gap: var(--margin);
+		margin-bottom: var(--margin);
+		font-size: 90%;
 
 		> div {
 			display: flex;
-			flex: 1 0 213px;
-			margin: calc(var(--margin) / 2);
 			box-sizing: border-box;
 			padding: 16px 20px;
 
@@ -634,7 +689,7 @@ export default defineComponent({
 							margin: 0;
 						}
 
-						> dt {
+						> dd {
 							text-overflow: ellipsis;
 							overflow: hidden;
 							white-space: nowrap;

src/client/components/note.sub.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wrpstxzv" :class="{ children }" v-size="[{ max: 450 }]">
+<div class="wrpstxzv" :class="{ children }" v-size="{ max: [450] }">
 	<div class="main">
 		<mk-avatar class="avatar" :user="note.user"/>
 		<div class="body">

src/client/components/note.vue

@@ -6,7 +6,7 @@
 	:tabindex="!isDeleted ? '-1' : null"
 	:class="{ renote: isRenote }"
 	v-hotkey="keymap"
-	v-size="[{ max: 500 }, { max: 450 }, { max: 350 }, { max: 300 }]"
+	v-size="{ max: [500, 450, 350, 300] }"
 >
 	<x-sub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
 	<x-sub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
@@ -57,6 +57,7 @@
 					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
 				</div>
+				<router-link v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</router-link>
 			</div>
 			<footer class="footer">
 				<x-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
@@ -96,7 +97,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
+import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
 import { sum, unique } from '../../prelude/array';
@@ -134,6 +135,12 @@ export default defineComponent({
 		MkUrlPreview,
 	},
 
+	inject: {
+		inChannel: {
+			default: null
+		}
+	},
+
 	props: {
 		note: {
 			type: Object,
@@ -160,7 +167,7 @@ export default defineComponent({
 			isDeleted: false,
 			muted: false,
 			noteBody: this.$refs.noteBody,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug
+			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},
 
@@ -957,6 +964,11 @@ export default defineComponent({
 						}
 					}
 				}
+
+				> .channel {
+					opacity: 0.7;
+					font-size: 80%;
+				}
 			}
 
 			> .footer {

src/client/components/notification.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="qglefbjs" :class="notification.type" v-size="[{ max: 500 }, { max: 600 }]">
+<div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }">
 	<div class="head">
 		<mk-avatar v-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else class="icon" :src="notification.icon" alt=""/>

src/client/components/post-form.vue

@@ -10,7 +10,7 @@
 		<div>
 			<span class="local-only" v-if="localOnly" v-text="$t('_visibility.localOnly')" />
 			<span class="text-count" :class="{ over: trimmedLength(text) > max }">{{ max - trimmedLength(text) }}</span>
-			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$t('visibility')">
+			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$t('visibility')" :disabled="channel != null">
 				<span v-if="visibility === 'public'"><fa :icon="faGlobe"/></span>
 				<span v-if="visibility === 'home'"><fa :icon="faHome"/></span>
 				<span v-if="visibility === 'followers'"><fa :icon="faUnlock"/></span>
@@ -88,6 +88,10 @@ export default defineComponent({
 			type: Object,
 			required: false
 		},
+		channel: {
+			type: Object,
+			required: false
+		},
 		mention: {
 			type: Object,
 			required: false
@@ -140,30 +144,38 @@ export default defineComponent({
 	},
 
 	computed: {
-		draftId(): string {
-			return this.renote
-				? `renote:${this.renote.id}`
-				: this.reply
-					? `reply:${this.reply.id}`
-					: 'note';
+		draftKey(): string {
+			let key = this.channel ? `channel:${this.channel.id}` : '';
+
+			if (this.renote) {
+				key += `renote:${this.renote.id}`;
+			} else if (this.reply) {
+				key += `reply:${this.reply.id}`;
+			} else {
+				key += 'note';
+			}
+
+			return key;
 		},
 
 		placeholder(): string {
-			const xs = [
-				this.$t('_postForm._placeholders.a'),
-				this.$t('_postForm._placeholders.b'),
-				this.$t('_postForm._placeholders.c'),
-				this.$t('_postForm._placeholders.d'),
-				this.$t('_postForm._placeholders.e'),
-				this.$t('_postForm._placeholders.f')
-			];
-			const x = xs[Math.floor(Math.random() * xs.length)];
-
-			return this.renote
-				? this.$t('_postForm.quotePlaceholder')
-				: this.reply
-					? this.$t('_postForm.replyPlaceholder')
-					: x;
+			if (this.renote) {
+				return this.$t('_postForm.quotePlaceholder');
+			} else if (this.reply) {
+				return this.$t('_postForm.replyPlaceholder');
+			} else if (this.channel) {
+				return this.$t('_postForm.channelPlaceholder');
+			} else {
+				const xs = [
+					this.$t('_postForm._placeholders.a'),
+					this.$t('_postForm._placeholders.b'),
+					this.$t('_postForm._placeholders.c'),
+					this.$t('_postForm._placeholders.d'),
+					this.$t('_postForm._placeholders.e'),
+					this.$t('_postForm._placeholders.f')
+				];
+				return xs[Math.floor(Math.random() * xs.length)];
+			}
 		},
 
 		submitText(): string {
@@ -224,9 +236,11 @@ export default defineComponent({
 		}
 
 		// デフォルト公開範囲
-		this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.visibility : this.$store.state.settings.defaultNoteVisibility);
+		if (this.channel == null) {
+			this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.visibility : this.$store.state.settings.defaultNoteVisibility);
 
-		this.localOnly = this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.localOnly : this.$store.state.settings.defaultNoteLocalOnly;
+			this.localOnly = this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.localOnly : this.$store.state.settings.defaultNoteLocalOnly;
+		}
 
 		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
 		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
@@ -266,7 +280,7 @@ export default defineComponent({
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
 			if (!this.instant && !this.mention) {
-				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
+				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftKey];
 				if (draft) {
 					this.text = draft.data.text;
 					this.useCw = draft.data.useCw;
@@ -398,6 +412,10 @@ export default defineComponent({
 		},
 
 		setVisibility() {
+			if (this.channel) {
+				// TODO: information dialog
+				return;
+			}
 			const w = this.$root.new(MkVisibilityChooser, {
 				source: this.$refs.visibilityButton,
 				currentVisibility: this.visibility,
@@ -510,7 +528,7 @@ export default defineComponent({
 
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
-			data[this.draftId] = {
+			data[this.draftKey] = {
 				updatedAt: new Date(),
 				data: {
 					text: this.text,
@@ -529,7 +547,7 @@ export default defineComponent({
 		deleteDraft() {
 			const data = JSON.parse(localStorage.getItem('drafts') || '{}');
 
-			delete data[this.draftId];
+			delete data[this.draftKey];
 
 			localStorage.setItem('drafts', JSON.stringify(data));
 		},
@@ -540,6 +558,7 @@ export default defineComponent({
 				fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : this.quoteId ? this.quoteId : undefined,
+				channelId: this.channel ? this.channel.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
 				cw: this.useCw ? this.cw || '' : undefined,
 				localOnly: this.localOnly,

src/client/components/stream-indicator.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="nsbbhtug" v-if="hasDisconnected" @click="resetDisconnected">
+<div class="nsbbhtug" v-if="hasDisconnected && $store.state.device.serverDisconnectedBehavior === 'quiet'" @click="resetDisconnected">
 	<div>{{ $t('disconnectedFromServer') }}</div>
 	<div class="command">
 		<button class="_textButton" @click="reload">{{ $t('reload') }}</button>
@@ -23,21 +23,12 @@ export default defineComponent({
 		},
 	},
 	created() {
-		this.$root.stream.on('_connected_', this.onConnected);
 		this.$root.stream.on('_disconnected_', this.onDisconnected);
 	},
 	beforeDestroy() {
-		this.$root.stream.off('_connected_', this.onConnected);
 		this.$root.stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
-		onConnected() {
-			if (this.hasDisconnected) {
-				if (this.$store.state.device.autoReload) {
-					this.reload();
-				}
-			}
-		},
 		onDisconnected() {
 			this.hasDisconnected = true;
 		},

src/client/components/tab.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="pxhvhrfw" v-size="[{ max: 500 }]">
+<div class="pxhvhrfw" v-size="{ max: [500] }">
 	<button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
 </div>
 </template>

src/client/components/timeline.vue

@@ -24,6 +24,10 @@ export default defineComponent({
 			type: String,
 			required: false
 		},
+		channel: {
+			type: String,
+			required: false
+		},
 		sound: {
 			type: Boolean,
 			required: false,
@@ -31,6 +35,12 @@ export default defineComponent({
 		}
 	},
 
+	provide() {
+		return {
+			inChannel: this.src === 'channel'
+		};
+	},
+
 	data() {
 		return {
 			connection: null,
@@ -112,6 +122,15 @@ export default defineComponent({
 			this.connection.on('note', prepend);
 			this.connection.on('userAdded', onUserAdded);
 			this.connection.on('userRemoved', onUserRemoved);
+		} else if (this.src == 'channel') {
+			endpoint = 'channels/timeline';
+			this.query = {
+				channelId: this.channel
+			};
+			this.connection = this.$root.stream.connectToChannel('channel', {
+				channelId: this.channel
+			});
+			this.connection.on('note', prepend);
 		}
 
 		this.pagination = {

src/client/components/ui/container.vue

@@ -1,12 +1,14 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable }" v-size="[{ max: 500 }]">
-	<header v-if="showHeader">
+<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380], el: resizeBaseEl }">
+	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
-		<slot name="func"></slot>
-		<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
-			<template v-if="showBody"><fa :icon="faAngleUp"/></template>
-			<template v-else><fa :icon="faAngleDown"/></template>
-		</button>
+		<div class="sub">
+			<slot name="func"></slot>
+			<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
+				<template v-if="showBody"><fa :icon="faAngleUp"/></template>
+				<template v-else><fa :icon="faAngleDown"/></template>
+			</button>
+		</div>
 	</header>
 	<transition name="container-toggle"
 		@enter="enter"
@@ -52,6 +54,9 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		resizeBaseEl: {
+			required: false,
+		},
 	},
 	data() {
 		return {
@@ -59,6 +64,18 @@ export default defineComponent({
 			faAngleUp, faAngleDown
 		};
 	},
+	mounted() {
+		this.$watch('showBody', showBody => {
+			this.$el.style.minHeight = `${this.$refs.header.offsetHeight}px`;
+			if (showBody) {
+				this.$el.style.flexBasis = `auto`;
+			} else {
+				this.$el.style.flexBasis = `${this.$refs.header.offsetHeight}px`;
+			}
+		}, {
+			immediate: true
+		});
+	},
 	methods: {
 		toggleContent(show: boolean) {
 			if (!this.bodyTogglable) return;
@@ -103,10 +120,6 @@ export default defineComponent({
 	position: relative;
 	overflow: hidden;
 
-	& + .ukygtjoj {
-		margin-top: var(--margin);
-	}
-
 	&.naked {
 		background: transparent !important;
 		box-shadow: none !important;
@@ -127,6 +140,7 @@ export default defineComponent({
 		z-index: 2;
 		background: var(--panelHeaderBg);
 		color: var(--panelHeaderFg);
+		line-height: 1.4em;
 
 		> .title {
 			margin: 0;
@@ -141,23 +155,42 @@ export default defineComponent({
 			}
 		}
 
-		> button {
+		> .sub {
 			position: absolute;
 			z-index: 2;
 			top: 0;
 			right: 0;
-			padding: 0;
-			width: 42px;
 			height: 100%;
+
+			> button {
+				width: 42px;
+				height: 100%;
+			}
 		}
 	}
 
-	&.max-width_500px {
+	> div {
+		> ::v-deep ._content {
+			padding: 24px;
+
+			& + ._content {
+				border-top: solid 1px var(--divider);
+			}
+		}
+	}
+
+	&.max-width_380px {
 		> header {
 			> .title {
 				padding: 8px 10px;
 			}
 		}
+
+		> div {
+			> ::v-deep ._content {
+				padding: 16px;
+			}
+		}
 	}
 }
 

src/client/components/ui/folder.vue

@@ -0,0 +1,126 @@
+<template>
+<div class="ssazuxis" v-size="{ max: [500] }">
+	<header @click="() => showBody = !showBody" class="_button">
+		<div class="title"><slot name="header"></slot></div>
+		<div class="divider"></div>
+		<button class="_button">
+			<template v-if="showBody"><fa :icon="faAngleUp"/></template>
+			<template v-else><fa :icon="faAngleDown"/></template>
+		</button>
+	</header>
+	<transition name="folder-toggle"
+		@enter="enter"
+		@after-enter="afterEnter"
+		@leave="leave"
+		@after-leave="afterLeave"
+	>
+		<div v-show="showBody">
+			<slot></slot>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	props: {
+		expanded: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+	},
+	data() {
+		return {
+			showBody: this.expanded,
+			faAngleUp, faAngleDown
+		};
+	},
+	methods: {
+		toggleContent(show: boolean) {
+			this.showBody = show;
+		},
+
+		enter(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = 0;
+			el.offsetHeight; // reflow
+			el.style.height = elementHeight + 'px';
+		},
+		afterEnter(el) {
+			el.style.height = null;
+		},
+		leave(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = elementHeight + 'px';
+			el.offsetHeight; // reflow
+			el.style.height = 0;
+		},
+		afterLeave(el) {
+			el.style.height = null;
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.folder-toggle-enter-active, .folder-toggle-leave-active {
+	overflow-y: hidden;
+	transition: opacity 0.5s, height 0.5s !important;
+}
+.folder-toggle-enter {
+	opacity: 0;
+}
+.folder-toggle-leave-to {
+	opacity: 0;
+}
+
+.ssazuxis {
+	position: relative;
+
+	> header {
+		display: flex;
+		position: relative;
+		z-index: 2;
+		// TODO
+		// position: sticky;
+		// top: var(--stickyTopOffset);
+		// backdrop-filter: blur(20px);
+
+		> .title {
+			margin: 0;
+			padding: 12px 16px 12px 8px;
+
+			> [data-icon] {
+				margin-right: 6px;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .divider {
+			flex: 1;
+			margin: auto;
+			height: 1px;
+			background: var(--divider);
+		}
+
+		> button {
+			width: 42px;
+		}
+	}
+
+	&.max-width_500px {
+		> header {
+			> .title {
+				padding: 8px 10px;
+			}
+		}
+	}
+}
+</style>

src/client/components/ui/input.vue

@@ -64,7 +64,7 @@
 		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
 	</div>
 	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
-	<div class="desc"><slot name="desc"></slot></div>
+	<div class="desc _caption"><slot name="desc"></slot></div>
 </div>
 </template>
 
@@ -401,13 +401,11 @@ export default defineComponent({
 
 	> .save {
 		margin: 6px 0 0 0;
-		font-size: 13px;
+		font-size: 0.8em;
 	}
 
 	> .desc {
 		margin: 6px 0 0 0;
-		font-size: 13px;
-		opacity: 0.7;
 
 		&:empty {
 			display: none;

src/client/components/ui/select.vue

@@ -196,7 +196,7 @@ export default defineComponent({
 
 	> .text {
 		margin: 6px 0;
-		font-size: 13px;
+		font-size: 0.8em;
 
 		&:empty {
 			display: none;

src/client/components/ui/textarea.vue

@@ -14,7 +14,7 @@
 		></textarea>
 	</div>
 	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
-	<div class="desc"><slot name="desc"></slot></div>
+	<div class="desc _caption"><slot name="desc"></slot></div>
 </div>
 </template>
 
@@ -163,13 +163,11 @@ export default defineComponent({
 
 	> .save {
 		margin: 6px 0 0 0;
-		font-size: 13px;
+		font-size: 0.8em;
 	}
 
 	> .desc {
 		margin: 6px 0 0 0;
-		font-size: 13px;
-		opacity: 0.7;
 
 		&:empty {
 			display: none;

src/client/components/url-preview.vue

@@ -6,7 +6,7 @@
 <div v-else-if="tweetId && tweetExpanded" class="twitter" ref="twitter">
 	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', left: `${tweetLeft}px`, width: `${tweetLeft < 0 ? 'auto' : '100%'}`, height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.device.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 </div>
-<div v-else class="mk-url-preview" v-size="[{ max: 400 }, { max: 350 }]">
+<div v-else class="mk-url-preview" v-size="{ max: [400, 350] }">
 	<transition name="zoom" mode="out-in">
 		<component :is="self ? 'router-link' : 'a'" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url" v-if="!fetching">
 			<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">