From ce528ff22e5eb4501ecbfb828fc238aa953442a1 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 10 Jan 2023 10:30:38 +0900
Subject: [PATCH] refactor(client): use css modules

---
 packages/frontend/src/ui/deck.vue           | 360 ++++++++++----------
 packages/frontend/src/ui/deck/column.vue    |  12 +-
 packages/frontend/src/ui/deck/tl-column.vue |  26 +-
 packages/frontend/src/ui/universal.vue      | 316 ++++++++---------
 4 files changed, 340 insertions(+), 374 deletions(-)

diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 143dcdad64..d582c9348e 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -1,17 +1,16 @@
 <template>
-<div
-	class="mk-deck" :class="[{ isMobile }]"
->
+<div :class="[$style.root, { [$style.rootIsMobile]: 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">
+	<div :class="$style.main">
+		<XStatusBars/>
+		<div ref="columnsEl" :class="[$style.columns, 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"
+					:class="$style.column"
+					class="folder"
 					: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)"/>
@@ -20,44 +19,45 @@
 					v-else
 					:ref="ids[0]"
 					:key="ids[0]"
-					class="column"
+					:class="$style.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 v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
 				<div>{{ i18n.ts._deck.introduction }}</div>
-				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
+				<MkButton primary style="margin: 1em auto;" @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 :class="$style.sideMenu">
+				<div :class="$style.sideMenuTop">
+					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" :class="$style.sideMenuButton" class="_button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" :class="$style.sideMenuButton" class="_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 :class="$style.sideMenuMiddle">
+					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.sideMenuButton" class="_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 :class="$style.sideMenuBottom">
+					<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.sideMenuButton" class="_button" @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 v-if="isMobile" :class="$style.nav">
+		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
+		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
+		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
+		<button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>
 
 	<Transition :name="$store.state.animation ? 'menu-back' : ''">
 		<div
 			v-if="drawerMenuShowing"
-			class="menu-back _modalBg"
+			:class="$style.menuBg"
+			class="_modalBg"
 			@click="drawerMenuShowing = false"
 			@touchstart.passive="drawerMenuShowing = false"
 		></div>
@@ -245,8 +245,10 @@ async function deleteProfile() {
 .menu-back-leave-active {
 	opacity: 0;
 }
+</style>
 
-.mk-deck {
+<style lang="scss" module>
+.root {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
 	--margin: var(--marginHalf);
@@ -257,170 +259,164 @@ async function deleteProfile() {
 	height: 100dvh;
 	box-sizing: border-box;
 	flex: 1;
+}
 
-	&.isMobile {
-		padding-bottom: 100px;
+.rootIsMobile {
+	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);
 	}
 
-	> .main {
-		flex: 1;
-		min-width: 0;
+	&.folder {
 		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;
-				}
-			}
+		> *:not(:last-of-type) {
+			border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
 		}
 	}
-
-	> .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);
-	}
+}
+
+.onboarding {
+	padding: 32px;
+	height: min-content;
+	text-align: center;
+	margin: auto;
+}
+
+.sideMenu {
+	flex-shrink: 0;
+	margin-right: 0;
+	margin-left: auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 32px;
+}
+
+.sideMenuButton {
+	display: block;
+	width: 100%;
+	aspect-ratio: 1;
+}
+
+.sideMenuTop {
+	margin-bottom: auto;
+}
+
+.sideMenuMiddle {
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+.sideMenuBottom {
+	margin-top: auto;
+}
+
+.menuBg {
+	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);
+}
+
+.nav {
+	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);
+}
+
+.navButton {
+	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);
+	}
+
+	&:disabled {
+		cursor: default;
+
+		> .navButtonIcon {
+			opacity: 0.5;
+		}
+	}
+
+	&.post {
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+		color: var(--fgOnAccent);
+	}
+}
+
+.navButtonIcon {
+	font-size: 18px;
+}
+
+.navButtonIndicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--indicator);
+	font-size: 16px;
+	animation: blink 1s infinite;
 }
 </style>
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 62c2ab3968..339421a13e 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -8,7 +8,7 @@
 	@drop.prevent.stop="onDrop"
 >
 	<header
-		:class="[$style.header, { [$style.indicated]: indicated }]"
+		:class="[$style.header]"
 		draggable="true"
 		@click="goTop"
 		@dragstart="onDragstart"
@@ -43,12 +43,10 @@ const props = withDefaults(defineProps<{
 	column: Column;
 	isStacked?: boolean;
 	naked?: boolean;
-	indicated?: boolean;
 	menu?: MenuItem[];
 }>(), {
 	isStacked: false,
 	naked: false,
-	indicated: false,
 });
 
 const emit = defineEmits<{
@@ -289,10 +287,6 @@ function onDrop(ev) {
 	&:not(.active) {
 		flex-basis: var(--deckColumnHeaderHeight);
 		min-height: var(--deckColumnHeaderHeight);
-
-		> .header.indicated {
-			box-shadow: 4px 0px var(--accent) inset;
-		}
 	}
 
 	&.naked {
@@ -328,10 +322,6 @@ function onDrop(ev) {
 	&, * {
 		user-select: none;
 	}
-
-	&.indicated {
-		box-shadow: 0 3px 0 0 var(--accent);
-	}
 }
 
 .title {
diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue
index 182bee9346..f75e526939 100644
--- a/packages/frontend/src/ui/deck/tl-column.vue
+++ b/packages/frontend/src/ui/deck/tl-column.vue
@@ -1,5 +1,5 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
 		<i v-if="column.tl === 'home'" class="ti ti-home"></i>
 		<i v-else-if="column.tl === 'local'" class="ti ti-planet"></i>
@@ -15,7 +15,7 @@
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
 	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
+	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')"/>
 </XColumn>
 </template>
 
@@ -40,8 +40,6 @@ const emit = defineEmits<{
 }>();
 
 let disabled = $ref(false);
-let indicated = $ref(false);
-let columnActive = $ref(true);
 
 onMounted(() => {
 	if (props.column.tl == null) {
@@ -77,26 +75,6 @@ async function setType() {
 	});
 }
 
-function queueUpdated(q) {
-	if (columnActive) {
-		indicated = q !== 0;
-	}
-}
-
-function onNote() {
-	if (!columnActive) {
-		indicated = true;
-	}
-}
-
-function onChangeActiveState(state) {
-	columnActive = state;
-
-	if (columnActive) {
-		indicated = false;
-	}
-}
-
 const menu = [{
 	icon: 'ti ti-pencil',
 	text: i18n.ts.timeline,
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 06129ffc87..e5085f3be2 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -1,8 +1,8 @@
 <template>
-<div class="dkgtipfy" :class="{ wallpaper }">
-	<XSidebar v-if="!isMobile" class="sidebar"/>
+<div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]">
+	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
 
-	<MkStickyContainer class="contents">
+	<MkStickyContainer :class="$style.contents">
 		<template #header><XStatusBars :class="$style.statusbars"/></template>
 		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
 			<div :class="$style.content" style="container-type: inline-size;">
@@ -12,44 +12,46 @@
 		</main>
 	</MkStickyContainer>
 
-	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
+	<div v-if="isDesktop" ref="widgetsEl" :class="$style.widgets">
 		<XWidgets @mounted="attachSticky"/>
 	</div>
 
-	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
+	<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 
-	<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.currentRoute.value.name === 'index' ? top() : 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 widget _button" @click="widgetsShowing = true"><i class="icon ti ti-apps"></i></button>
-		<button class="button post _button" @click="os.post()"><i class="icon ti ti-pencil"></i></button>
+	<div v-if="isMobile" :class="$style.nav">
+		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
+		<button :class="$style.navButton" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
+		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"><i :class="$style.navButtonIcon" class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
+		<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
+		<button :class="$style.navButton" class="_button post" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>
 
 	<Transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
 		<div
 			v-if="drawerMenuShowing"
-			class="menuDrawer-back _modalBg"
+			:class="$style.menuDrawerBg"
+			class="_modalBg"
 			@click="drawerMenuShowing = false"
 			@touchstart.passive="drawerMenuShowing = false"
 		></div>
 	</Transition>
 
 	<Transition :name="$store.state.animation ? 'menuDrawer' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
+		<XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/>
 	</Transition>
 
 	<Transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
 		<div
 			v-if="widgetsShowing"
-			class="widgetsDrawer-back _modalBg"
+			:class="$style.widgetsDrawerBg"
+			class="_modalBg"
 			@click="widgetsShowing = false"
 			@touchstart.passive="widgetsShowing = false"
 		></div>
 	</Transition>
 
 	<Transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
-		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
+		<XWidgets v-if="widgetsShowing" :class="$style.widgetsDrawer"/>
 	</Transition>
 
 	<XCommon/>
@@ -218,151 +220,151 @@ const wallpaper = miLocalStorage.getItem('wallpaper') != null;
 .menuDrawer-back-leave-active {
 	opacity: 0;
 }
-
-.dkgtipfy {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$widgets-hide-threshold: 1090px;
-
-	min-height: 100dvh;
-	box-sizing: border-box;
-	display: flex;
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		//backdrop-filter: var(--blur, blur(4px));
-	}
-
-	> .sidebar {
-		border-right: solid 0.5px var(--divider);
-	}
-
-	> .contents {
-		width: 100%;
-		min-width: 0;
-		background: var(--bg);
-	}
-
-	> .widgets {
-		padding: 0 var(--margin);
-		border-left: solid 0.5px var(--divider);
-		background: var(--bg);
-
-		@media (max-width: $widgets-hide-threshold) {
-			display: none;
-		}
-	}
-
-	> .widgetButton {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		bottom: 32px;
-		right: 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;
-		background: var(--panel);
-	}
-
-	> .widgetsDrawer-back {
-		z-index: 1001;
-	}
-
-	> .widgetsDrawer {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 1001;
-		height: 100dvh;
-		padding: var(--margin) !important;
-		box-sizing: border-box;
-		overflow: auto;
-		overscroll-behavior: contain;
-		background: var(--bg);
-	}
-
-	> .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 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);
-			}
-		}
-	}
-
-	> .menuDrawer-back {
-		z-index: 1001;
-	}
-
-	> .menuDrawer {
-		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>
 
 <style lang="scss" module>
+$ui-font-size: 1em; // TODO: どこかに集約したい
+$widgets-hide-threshold: 1090px;
+
+.root {
+	min-height: 100dvh;
+	box-sizing: border-box;
+	display: flex;
+}
+
+.withWallpaper {
+	background: var(--wallpaperOverlay);
+	//backdrop-filter: var(--blur, blur(4px));
+}
+
+.sidebar {
+	border-right: solid 0.5px var(--divider);
+}
+
+.contents {
+	width: 100%;
+	min-width: 0;
+	background: var(--bg);
+}
+
+.widgets {
+	padding: 0 var(--margin);
+	border-left: solid 0.5px var(--divider);
+	background: var(--bg);
+
+	@media (max-width: $widgets-hide-threshold) {
+		display: none;
+	}
+}
+
+.widgetButton {
+	display: block;
+	position: fixed;
+	z-index: 1000;
+	bottom: 32px;
+	right: 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;
+	background: var(--panel);
+}
+
+.widgetsDrawerBg {
+	z-index: 1001;
+}
+
+.widgetsDrawer {
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 1001;
+	height: 100dvh;
+	padding: var(--margin) !important;
+	box-sizing: border-box;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--bg);
+}
+
+.nav {
+	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 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);
+}
+
+.navButton {
+	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);
+	}
+
+	&:disabled {
+		cursor: default;
+
+		> .navButtonIcon {
+			opacity: 0.5;
+		}
+	}
+
+	&.post {
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+		color: var(--fgOnAccent);
+	}
+}
+
+.navButtonIcon {
+	font-size: 18px;
+}
+
+.navButtonIndicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--indicator);
+	font-size: 16px;
+	animation: blink 1s infinite;
+}
+
+.menuDrawerBg {
+	z-index: 1001;
+}
+
+.menuDrawer {
+	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);
+}
+
 .statusbars {
 	position: sticky;
 	top: 0;