sharkey/packages/frontend/src/ui/deck.vue

<template>
<div
	class="mk-deck" :class="[{ isMobile }]"
>
	<XSidebar v-if="!isMobile"/>

	<div class="main">
		<XStatusBars class="statusbars"/>
		<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
			<template v-for="ids in layout">
				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
				<section
					v-if="ids.length > 1"
					class="folder column"
					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
				>
					<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
				</section>
				<DeckColumnCore
					v-else
					:ref="ids[0]"
					:key="ids[0]"
					class="column"
					:column="columns.find(c => c.id === ids[0])"
					:is-stacked="false"
					:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
					@parent-focus="moveFocus(ids[0], $event)"
				/>
			</template>
			<div v-if="layout.length === 0" class="intro _panel">
				<div>{{ i18n.ts._deck.introduction }}</div>
				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
				<div>{{ i18n.ts._deck.introduction2 }}</div>
			</div>
			<div class="sideMenu">
				<div class="top">
					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
				</div>
				<div class="middle">
					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="ti ti-plus"></i></button>
				</div>
				<div class="bottom">
					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ti ti-settings"></i></button>
				</div>
			</div>
		</div>
	</div>

	<div v-if="isMobile" class="buttons">
		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="icon ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
		<button class="button home _button" @click="mainRouter.push('/')"><i class="icon ti ti-home"></i></button>
		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="icon ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
		<button class="button post _button" @click="os.post()"><i class="icon ti ti-pencil"></i></button>
	</div>

	<Transition :name="$store.state.animation ? 'menu-back' : ''">
		<div
			v-if="drawerMenuShowing"
			class="menu-back _modalBg"
			@click="drawerMenuShowing = false"
			@touchstart.passive="drawerMenuShowing = false"
		></div>
	</Transition>

	<Transition :name="$store.state.animation ? 'menu' : ''">
		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
	</Transition>

	<XCommon/>
</div>
</template>

<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, provide, ref, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import XCommon from './_common_/common.vue';
import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
import DeckColumnCore from '@/ui/deck/column-core.vue';
import XSidebar from '@/ui/_common_/navbar.vue';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import MkButton from '@/components/MkButton.vue';
import { getScrollContainer } from '@/scripts/scroll';
import * as os from '@/os';
import { navbarItemDef } from '@/navbar';
import { $i } from '@/account';
import { i18n } from '@/i18n';
import { mainRouter } from '@/router';
import { unisonReload } from '@/scripts/unison-reload';
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));

mainRouter.navHook = (path, flag): boolean => {
	if (flag === 'forcePage') return false;
	const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
	if (deckStore.state.navWindow || noMainColumn) {
		os.pageWindow(path);
		return true;
	}
	return false;
};

const isMobile = ref(window.innerWidth <= 500);
window.addEventListener('resize', () => {
	isMobile.value = window.innerWidth <= 500;
});

const drawerMenuShowing = ref(false);

const route = 'TODO';
watch(route, () => {
	drawerMenuShowing.value = false;
});

const columns = deckStore.reactiveState.columns;
const layout = deckStore.reactiveState.layout;
const menuIndicated = computed(() => {
	if ($i == null) return false;
	for (const def in navbarItemDef) {
		if (navbarItemDef[def].indicated) return true;
	}
	return false;
});

function showSettings() {
	os.pageWindow('/settings/deck');
}

let columnsEl = $shallowRef<HTMLElement>();

const addColumn = async (ev) => {
	const columns = [
		'main',
		'widgets',
		'notifications',
		'tl',
		'antenna',
		'list',
		'mentions',
		'direct',
	];

	const { canceled, result: column } = await os.select({
		title: i18n.ts._deck.addColumn,
		items: columns.map(column => ({
			value: column, text: i18n.t('_deck._columns.' + column),
		})),
	});
	if (canceled) return;

	addColumnToStore({
		type: column,
		id: uuid(),
		name: i18n.t('_deck._columns.' + column),
		width: 330,
	});
};

const onContextmenu = (ev) => {
	os.contextMenu([{
		text: i18n.ts._deck.addColumn,
		action: addColumn,
	}], ev);
};

document.documentElement.style.overflowY = 'hidden';
document.documentElement.style.scrollBehavior = 'auto';
window.addEventListener('wheel', (ev) => {
	if (ev.target === columnsEl && ev.deltaX === 0) {
		columnsEl.scrollLeft += ev.deltaY;
	} else if (getScrollContainer(ev.target as HTMLElement) == null && ev.deltaX === 0) {
		columnsEl.scrollLeft += ev.deltaY;
	}
});
loadDeck();

function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
	// TODO??
}

function changeProfile(ev: MouseEvent) {
	const items = ref([{
		text: deckStore.state.profile,
		active: true.valueOf,
	}]);
	getProfiles().then(profiles => {
		items.value = [{
			text: deckStore.state.profile,
			active: true.valueOf,
		}, ...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
			text: k,
			action: () => {
				deckStore.set('profile', k);
				unisonReload();
			},
		}))), null, {
			text: i18n.ts._deck.newProfile,
			icon: 'ti ti-plus',
			action: async () => {
				const { canceled, result: name } = await os.inputText({
					title: i18n.ts._deck.profile,
					allowEmpty: false,
				});
				if (canceled) return;

				deckStore.set('profile', name);
				unisonReload();
			},
		}];
	});
	os.popupMenu(items, ev.currentTarget ?? ev.target);
}

async function deleteProfile() {
	const { canceled } = await os.confirm({
		type: 'warning',
		text: i18n.t('deleteAreYouSure', { x: deckStore.state.profile }),
	});
	if (canceled) return;

	deleteProfile_(deckStore.state.profile);
	deckStore.set('profile', 'default');
	unisonReload();
}
</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: どこかに集約したい

	--margin: var(--marginHalf);

	--deckDividerThickness: 5px;

	display: flex;
	height: 100dvh;
	box-sizing: border-box;
	flex: 1;

	&.isMobile {
		padding-bottom: 100px;
	}

	> .main {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;

		> .columns {
			flex: 1;
			display: flex;
			overflow-x: auto;
			overflow-y: clip;

			&.center {
				> .column:first-of-type {
					margin-left: auto;
				}

				> .column:last-of-type {
					margin-right: auto;
				}
			}

			> .column {
				flex-shrink: 0;
				border-right: solid var(--deckDividerThickness) var(--deckDivider);

				&:first-of-type {
					border-left: solid var(--deckDividerThickness) var(--deckDivider);
				}

				&.folder {
					display: flex;
					flex-direction: column;

					> *:not(:last-of-type) {
						border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
					}
				}
			}

			> .intro {
				padding: 32px;
				height: min-content;
				text-align: center;
				margin: auto;

				> .add {
					margin: 1em auto;
				}
			}

			> .sideMenu {
				flex-shrink: 0;
				margin-right: 0;
				margin-left: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 32px;

				> .top, > .middle, > .bottom {
					> .button {
						display: block;
						width: 100%;
						aspect-ratio: 1;
					}
				}

				> .top {
					margin-bottom: auto;
				}

				> .middle {
					margin-top: auto;
					margin-bottom: auto;
				}

				> .bottom {
					margin-top: auto;
				}
			}
		}
	}

	> .buttons {
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 8px;
		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;
			padding: 0;
			aspect-ratio: 1;
			width: 100%;
			max-width: 60px;
			margin: auto;
			border-radius: 100%;
			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;
			}

			> .icon {
				font-size: 18px;
			}

			&:disabled {
				cursor: default;

				> .icon {
					opacity: 0.5;
				}
			}

			&.post {
				background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
				color: var(--fgOnAccent);
			}
		}
	}

	> .menu-back {
		z-index: 1001;
	}

	> .menu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		height: 100dvh;
		width: 240px;
		box-sizing: border-box;
		contain: strict;
		overflow: auto;
		overscroll-behavior: contain;
		background: var(--navBg);
	}
}
</style>