Migrate to Vue3 (#6587)

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160adf4e8a4147006e25a89854edab0033.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip

1 files changed, 276 insertions, 0 deletions

diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue
new file mode 100644
index 0000000000..b067b948ce
--- /dev/null
+++ b/src/client/ui/deck.vue
@@ -0,0 +1,276 @@
+<template>
+<div class="mk-deck" :class="`${$store.state.device.deckColumnAlign}`" v-hotkey.global="keymap">
+	<XSidebar ref="nav"/>
+
+	<!-- TODO: deckMainColumnPlace を見て位置変える -->
+	<deck-column class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
+		<template #header>
+			<XHeader :info="pageInfo"/>
+		</template>
+
+		<router-view v-slot="{ Component }">
+			<transition>
+				<keep-alive :include="['timeline']">
+					<component :is="Component" :ref="changePage"/>
+				</keep-alive>
+			</transition>
+		</router-view>
+	</deck-column>
+
+	<template v-for="ids in layout">
+		<div v-if="ids.length > 1" class="folder column">
+			<deck-column-core v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
+		</div>
+		<deck-column-core v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
+	</template>
+
+	<button @click="addColumn" class="_button add"><Fa :icon="faPlus"/></button>
+
+	<button v-if="$store.getters.isSignedIn" class="nav _button" @click="showNav()"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
+	<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><Fa :icon="faPencilAlt"/></button>
+
+	<StreamIndicator v-if="$store.getters.isSignedIn"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faPlus, faPencilAlt, faChevronLeft, faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
+import {  } from '@fortawesome/free-regular-svg-icons';
+import { v4 as uuid } from 'uuid';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import DeckColumnCore from '@/components/deck/column-core.vue';
+import DeckColumn from '@/components/deck/column.vue';
+import XSidebar from '@/components/sidebar.vue';
+import XHeader from './_common_/header.vue';
+import { getScrollContainer } from '@/scripts/scroll';
+import * as os from '@/os';
+import { sidebarDef } from '@/sidebar';
+
+export default defineComponent({
+	components: {
+		XSidebar,
+		XHeader,
+		DeckColumn,
+		DeckColumnCore,
+	},
+
+	data() {
+		return {
+			host: host,
+			pageInfo: null,
+			pageKey: 0,
+			connection: null,
+			menuDef: sidebarDef,
+			wallpaper: localStorage.getItem('wallpaper') != null,
+			faPlus, faPencilAlt, faChevronLeft, faBars, faCircle
+		};
+	},
+
+	computed: {
+		deck() {
+			return this.$store.state.deviceUser.deck;
+		},
+		columns(): any[] {
+			return this.deck.columns;
+		},
+		layout(): any[] {
+			return this.deck.layout;
+		},
+		navIndicated(): boolean {
+			if (!this.$store.getters.isSignedIn) return false;
+			for (const def in this.menuDef) {
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+		keymap(): any {
+			return {
+				'p': this.post,
+				'n': this.post,
+				's': this.search,
+				'h|/': this.help
+			};
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.pageKey++;
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'hidden';
+		document.documentElement.style.scrollBehavior = 'auto';
+		window.addEventListener('wheel', this.onWheel);
+
+		if (this.$store.getters.isSignedIn) {
+			this.connection = os.stream.useSharedConnection('main');
+			this.connection.on('notification', this.onNotification);
+		}
+	},
+
+	mounted() {
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+
+		onWheel(e) {
+			if (getScrollContainer(e.target) == null) {
+				document.documentElement.scrollLeft += e.deltaY > 0 ? 96 : -96;
+			}
+		},
+
+		showNav() {
+			this.$refs.nav.show();
+		},
+
+		help() {
+			this.$router.push('/docs/keyboard-shortcut');
+		},
+
+		post() {
+			os.post();
+		},
+
+		async onNotification(notification) {
+			if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) {
+				return;
+			}
+
+			if (document.visibilityState === 'visible') {
+				os.stream.send('readNotification', {
+					id: notification.id
+				});
+
+				os.popup(await import('@/components/toast.vue'), {
+					notification
+				}, {}, 'closed');
+			}
+			os.sound('notification');
+		},
+
+		async addColumn(ev) {
+			const columns = [
+				'widgets',
+				'notifications',
+				'tl',
+				'antenna',
+				'list',
+				'mentions',
+				'direct',
+			];
+
+			const { canceled, result: column } = await os.dialog({
+				title: this.$t('_deck.addColumn'),
+				type: null,
+				select: {
+					items: columns.map(column => ({
+						value: column, text: this.$t('_deck._columns.' + column)
+					}))
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			this.$store.commit('deviceUser/addDeckColumn', {
+				type: column,
+				id: uuid(),
+				name: this.$t('_deck._columns.' + column),
+				width: 330,
+			});
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-deck {
+	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
+
+	// TODO: この値を設定で変えられるようにする？
+	$columnMargin: 12px;
+
+	$deckMargin: 12px;
+
+	--margin: var(--marginHalf);
+
+	display: flex;
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+	flex: 1;
+	padding: $deckMargin 0 $deckMargin $deckMargin;
+
+	&.center {
+		> .column:first-of-type {
+			margin-left: auto;
+		}
+
+		> .add {
+			margin-right: auto;
+		}
+	}
+
+	> .column {
+		flex-shrink: 0;
+		margin-right: $columnMargin;
+
+		&.folder {
+			display: flex;
+			flex-direction: column;
+
+			> *:not(:last-child) {
+				margin-bottom: $columnMargin;
+			}
+		}
+	}
+
+	> .post,
+	> .nav {
+		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;
+	}
+
+	> .post {
+		right: 32px;
+	}
+
+	> .nav {
+		left: 32px;
+		background: var(--panel);
+		color: var(--fg);
+
+		@media (min-width: ($nav-hide-threshold + 1px)) {
+			display: none;
+		}
+
+		&:hover {
+			background: var(--X2);
+		}
+
+		> i {
+			position: absolute;
+			top: 0;
+			left: 0;
+			color: var(--indicator);
+			font-size: 16px;
+			animation: blink 1s infinite;
+		}
+	}
+}
+</style>