From 2a313e73ff3431ad1b333baa780abfd9b1bafb9a Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 14 May 2023 17:06:58 -0400
Subject: [PATCH] Replace classic.vue w/ a class in universal.vue

---
 packages/client/src/init.ts          |   2 -
 packages/client/src/ui/classic.vue   | 410 ---------------------------
 packages/client/src/ui/universal.vue |  85 +++++-
 3 files changed, 82 insertions(+), 415 deletions(-)
 delete mode 100644 packages/client/src/ui/classic.vue

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 34cdc16ef..43a92a316 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -191,8 +191,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
 			? defineAsyncComponent(() => import("@/ui/visitor.vue"))
 			: ui === "deck"
 			? defineAsyncComponent(() => import("@/ui/deck.vue"))
-			: ui === "classic"
-			? defineAsyncComponent(() => import("@/ui/classic.vue"))
 			: defineAsyncComponent(() => import("@/ui/universal.vue")),
 	);
 
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
deleted file mode 100644
index 4ee25a0fe..000000000
--- a/packages/client/src/ui/classic.vue
+++ /dev/null
@@ -1,410 +0,0 @@
-<template>
-	<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 }"
-		>
-			<XSidebar v-if="!showMenuOnTop" />
-			<div v-else ref="widgetsLeft" class="widgets left">
-				<XWidgets
-					:place="'left'"
-					@mounted="attachSticky(widgetsLeft)"
-				/>
-			</div>
-
-			<main
-				class="main"
-				:style="{ background: pageMetadata?.value?.bg }"
-				@contextmenu.stop="onContextmenu"
-			>
-				<div class="content">
-					<RouterView />
-				</div>
-			</main>
-
-			<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
-				<XWidgets :place="null" @mounted="attachSticky(widgetsRight)" />
-			</div>
-		</div>
-
-		<transition :name="$store.state.animation ? 'tray-back' : ''">
-			<div
-				v-if="widgetsShowing"
-				class="tray-back _modalBg"
-				@click="widgetsShowing = false"
-				@touchstart.passive="widgetsShowing = false"
-			></div>
-		</transition>
-
-		<transition :name="$store.state.animation ? 'tray' : ''">
-			<XWidgets v-if="widgetsShowing" class="tray" />
-		</transition>
-
-		<XCommon />
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, markRaw, ref, onMounted, provide } from "vue";
-import XSidebar from "./_common_/navbar.vue";
-import XCommon from "./_common_/common.vue";
-import type { ComputedRef } from "vue";
-import type { PageMetadata } from "@/scripts/page-metadata";
-import { instanceName } from "@/config";
-import { StickySidebar } from "@/scripts/sticky-sidebar";
-import * as os from "@/os";
-import { mainRouter } from "@/router";
-import {
-	provideMetadataReceiver,
-	setPageMetadata,
-} from "@/scripts/page-metadata";
-import { defaultStore } from "@/store";
-import { i18n } from "@/i18n";
-const XHeaderMenu = defineAsyncComponent(() => import("./classic.header.vue"));
-const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
-
-const DESKTOP_THRESHOLD = 1100;
-
-let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let widgetsShowing = $ref(false);
-let fullView = $ref(false);
-let globalHeaderHeight = $ref(0);
-const wallpaper = localStorage.getItem("wallpaper") != null;
-const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === "top");
-let live2d = $ref<HTMLIFrameElement>();
-let widgetsLeft = $ref();
-let widgetsRight = $ref();
-
-provide("router", mainRouter);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
-	}
-});
-provide("shouldHeaderThin", showMenuOnTop);
-provide("shouldSpacerMin", true);
-
-function attachSticky(el) {
-	const sticky = new StickySidebar(
-		el,
-		defaultStore.state.menuDisplay === 0,
-		defaultStore.state.menuDisplay === "top" ? 60 : 0
-	); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-	window.addEventListener(
-		"scroll",
-		() => {
-			sticky.calc(window.scrollY);
-		},
-		{ passive: true }
-	);
-}
-
-function top() {
-	window.scroll({ top: 0, behavior: "smooth" });
-}
-
-function onContextmenu(ev: MouseEvent) {
-	const isLink = (el: HTMLElement) => {
-		if (el.tagName === "A") return true;
-		if (el.parentElement) {
-			return isLink(el.parentElement);
-		}
-	};
-	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 = mainRouter.getCurrentPath();
-	os.contextMenu(
-		[
-			{
-				type: "label",
-				text: path,
-			},
-			{
-				icon: fullView
-					? "ph-arrows-in-simple ph-bold ph-lg"
-					: "ph-arrows-out-simple ph-bold ph-lg",
-				text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView,
-				action: () => {
-					fullView = !fullView;
-				},
-			},
-			{
-				icon: "ph-browser ph-bold ph-lg",
-				text: i18n.ts.openInWindow,
-				action: () => {
-					os.pageWindow(path);
-				},
-			},
-		],
-		ev
-	);
-}
-
-if (window.innerWidth < 1024) {
-	localStorage.setItem("ui", "default");
-	location.reload();
-}
-
-document.documentElement.style.overflowY = "scroll";
-
-if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set("widgets", [
-		{
-			name: "calendar",
-			id: "a",
-			place: null,
-			data: {},
-		},
-		{
-			name: "notifications",
-			id: "b",
-			place: null,
-			data: {},
-		},
-		{
-			name: "trends",
-			id: "c",
-			place: null,
-			data: {},
-		},
-	]);
-}
-
-onMounted(() => {
-	window.addEventListener(
-		"resize",
-		() => {
-			isDesktop = window.innerWidth >= DESKTOP_THRESHOLD;
-		},
-		{ passive: true }
-	);
-});
-</script>
-
-<style lang="scss" scoped>
-.tray-enter-active,
-.tray-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 {
-	opacity: 0;
-	transform: translateX(240px);
-}
-
-.tray-back-enter-active,
-.tray-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-back-enter-from,
-.tray-back-leave-active {
-	opacity: 0;
-}
-
-.gbhvwtnk {
-	display: flex;
-	justify-content: center;
-	$ui-font-size: 1em;
-	$widgets-hide-threshold: 1200px;
-
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
-	box-sizing: border-box;
-
-	--navBg: transparent;
-	--X14: var(--acrylicBg);
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		:deep(main) {
-			background: var(--acrylicBg) !important;
-			backdrop-filter: blur(12px);
-		}
-		:deep(.tl),
-		:deep(.notes) {
-			background: none !important;
-		}
-	}
-
-	> .columns {
-		display: flex;
-		justify-content: center;
-		max-width: 100%;
-		//margin: 32px 0;
-
-		&.fullView {
-			margin: 0;
-
-			> :deep(.sidebar) {
-				display: none;
-			}
-
-			> .widgets {
-				display: none;
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-
-		> :deep(.sidebar) {
-			margin-left: -200px;
-			padding-left: 200px;
-			box-sizing: content-box;
-			.banner {
-				pointer-events: none;
-				mask: radial-gradient(
-					farthest-side at top,
-					hsl(0, 0%, 0%) 0%,
-					hsla(0, 0%, 0%, 0.987) 0.3%,
-					hsla(0, 0%, 0%, 0.951) 1.4%,
-					hsla(0, 0%, 0%, 0.896) 3.2%,
-					hsla(0, 0%, 0%, 0.825) 5.8%,
-					hsla(0, 0%, 0%, 0.741) 9.3%,
-					hsla(0, 0%, 0%, 0.648) 13.6%,
-					hsla(0, 0%, 0%, 0.55) 18.9%,
-					hsla(0, 0%, 0%, 0.45) 25.1%,
-					hsla(0, 0%, 0%, 0.352) 32.4%,
-					hsla(0, 0%, 0%, 0.259) 40.7%,
-					hsla(0, 0%, 0%, 0.175) 50.2%,
-					hsla(0, 0%, 0%, 0.104) 60.8%,
-					hsla(0, 0%, 0%, 0.049) 72.6%,
-					hsla(0, 0%, 0%, 0.013) 85.7%,
-					hsla(0, 0%, 0%, 0) 100%
-				) !important;
-				-webkit-mask: radial-gradient(
-					farthest-side at top,
-					hsl(0, 0%, 0%) 0%,
-					hsla(0, 0%, 0%, 0.987) 0.3%,
-					hsla(0, 0%, 0%, 0.951) 1.4%,
-					hsla(0, 0%, 0%, 0.896) 3.2%,
-					hsla(0, 0%, 0%, 0.825) 5.8%,
-					hsla(0, 0%, 0%, 0.741) 9.3%,
-					hsla(0, 0%, 0%, 0.648) 13.6%,
-					hsla(0, 0%, 0%, 0.55) 18.9%,
-					hsla(0, 0%, 0%, 0.45) 25.1%,
-					hsla(0, 0%, 0%, 0.352) 32.4%,
-					hsla(0, 0%, 0%, 0.259) 40.7%,
-					hsla(0, 0%, 0%, 0.175) 50.2%,
-					hsla(0, 0%, 0%, 0.104) 60.8%,
-					hsla(0, 0%, 0%, 0.049) 72.6%,
-					hsla(0, 0%, 0%, 0.013) 85.7%,
-					hsla(0, 0%, 0%, 0) 100%
-				) !important;
-				width: 125% !important;
-				left: -12.5% !important;
-				height: 125% !important;
-			}
-		}
-
-		> .main {
-			min-width: 0;
-			width: 750px;
-			margin: 0 16px 0 0;
-			background: var(--panel);
-			border-left: solid 1px var(--divider);
-			border-right: solid 1px var(--divider);
-			border-radius: 0;
-			overflow: clip;
-			--margin: 12px;
-			background: var(--bg);
-		}
-
-		> .widgets {
-			//--panelBorder: none;
-			width: 300px;
-
-			@media (max-width: $widgets-hide-threshold) {
-				display: none;
-			}
-
-			&.left {
-				margin-right: 16px;
-			}
-		}
-
-		&.withGlobalHeader {
-			> .main {
-				margin-top: 0;
-				border: solid 1px var(--divider);
-				border-radius: var(--radius);
-				--stickyTop: var(--globalHeaderHeight);
-			}
-
-			> .widgets {
-				--stickyTop: var(--globalHeaderHeight);
-				margin-top: 0;
-			}
-		}
-
-		@media (max-width: 850px) {
-			margin: 0;
-
-			> :deep(.sidebar) {
-				border-right: solid 0.5px var(--divider);
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-	}
-
-	> .tray-back {
-		z-index: 1001;
-	}
-
-	> .tray {
-		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;
-		background: var(--bg);
-	}
-
-	> .ivnzpscs {
-		position: fixed;
-		bottom: 0;
-		right: 0;
-		width: 300px;
-		height: 600px;
-		border: none;
-		pointer-events: none;
-	}
-}
-</style>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index f6b57c081..068f3f7f3 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="dkgtipfy" :class="{ wallpaper, isMobile }">
+	<div class="dkgtipfy" :class="{ wallpaper, isMobile, centered: ui === 'classic' }">
 		<XSidebar v-if="!isMobile" class="sidebar" />
 
 		<MkStickyContainer class="contents">
@@ -160,7 +160,7 @@ import XCommon from "./_common_/common.vue";
 import * as Acct from "calckey-js/built/acct";
 import type { ComputedRef } from "vue";
 import type { PageMetadata } from "@/scripts/page-metadata";
-import { instanceName } from "@/config";
+import { instanceName, ui } from "@/config";
 import { StickySidebar } from "@/scripts/sticky-sidebar";
 import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
 import * as os from "@/os";
@@ -210,6 +210,10 @@ provideMetadataReceiver((info) => {
 	}
 });
 
+if (ui === "classic") {
+	provide("shouldSpacerMin", true);
+}
+
 const menuIndicated = computed(() => {
 	for (const def in navbarItemDef) {
 		if (def === "notifications") continue; // 通知は下にボタンとして表示されてるから
@@ -454,7 +458,82 @@ console.log(mainRouter.currentRoute.value.name);
 	}
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
-		//backdrop-filter: var(--blur, blur(4px));
+	}
+
+	&.centered {
+		justify-content: center;
+		--navBg: transparent;
+
+		> :deep(.sidebar:not(.iconOnly)) {
+			margin-left: -200px;
+			padding-left: 200px;
+			box-sizing: content-box;
+			.banner {
+				pointer-events: none;
+				mask: radial-gradient(
+					farthest-side at top,
+					hsl(0, 0%, 0%) 0%,
+					hsla(0, 0%, 0%, 0.987) 0.3%,
+					hsla(0, 0%, 0%, 0.951) 1.4%,
+					hsla(0, 0%, 0%, 0.896) 3.2%,
+					hsla(0, 0%, 0%, 0.825) 5.8%,
+					hsla(0, 0%, 0%, 0.741) 9.3%,
+					hsla(0, 0%, 0%, 0.648) 13.6%,
+					hsla(0, 0%, 0%, 0.55) 18.9%,
+					hsla(0, 0%, 0%, 0.45) 25.1%,
+					hsla(0, 0%, 0%, 0.352) 32.4%,
+					hsla(0, 0%, 0%, 0.259) 40.7%,
+					hsla(0, 0%, 0%, 0.175) 50.2%,
+					hsla(0, 0%, 0%, 0.104) 60.8%,
+					hsla(0, 0%, 0%, 0.049) 72.6%,
+					hsla(0, 0%, 0%, 0.013) 85.7%,
+					hsla(0, 0%, 0%, 0) 100%
+				) !important;
+				-webkit-mask: radial-gradient(
+					farthest-side at top,
+					hsl(0, 0%, 0%) 0%,
+					hsla(0, 0%, 0%, 0.987) 0.3%,
+					hsla(0, 0%, 0%, 0.951) 1.4%,
+					hsla(0, 0%, 0%, 0.896) 3.2%,
+					hsla(0, 0%, 0%, 0.825) 5.8%,
+					hsla(0, 0%, 0%, 0.741) 9.3%,
+					hsla(0, 0%, 0%, 0.648) 13.6%,
+					hsla(0, 0%, 0%, 0.55) 18.9%,
+					hsla(0, 0%, 0%, 0.45) 25.1%,
+					hsla(0, 0%, 0%, 0.352) 32.4%,
+					hsla(0, 0%, 0%, 0.259) 40.7%,
+					hsla(0, 0%, 0%, 0.175) 50.2%,
+					hsla(0, 0%, 0%, 0.104) 60.8%,
+					hsla(0, 0%, 0%, 0.049) 72.6%,
+					hsla(0, 0%, 0%, 0.013) 85.7%,
+					hsla(0, 0%, 0%, 0) 100%
+				) !important;
+				width: 125% !important;
+				left: -12.5% !important;
+				height: 125% !important;
+			}
+		}
+
+		> .contents {
+			min-width: 0;
+			width: 750px;
+			background: var(--panel);
+			border-radius: 0;
+			overflow: clip;
+			--margin: 12px;
+			background: var(--bg);
+		}
+
+		&.wallpaper {
+			.contents {
+				background: var(--acrylicBg) !important;
+				backdrop-filter: blur(12px);
+			}
+			:deep(.tl),
+			:deep(.notes) {
+				background: none !important;
+			}
+		}
 	}
 
 	> .sidebar {