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 1/6] 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 {

From 0996e2e2b62cfe330281548961db73b28222c566 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 14 May 2023 17:21:28 -0400
Subject: [PATCH 2/6] fix mobile navbar

---
 packages/client/src/ui/universal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 068f3f7f3..105cc41d4 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -462,7 +462,9 @@ console.log(mainRouter.currentRoute.value.name);
 
 	&.centered {
 		justify-content: center;
-		--navBg: transparent;
+		&:not(.isMobile) {
+			--navBg: transparent;
+		}
 
 		> :deep(.sidebar:not(.iconOnly)) {
 			margin-left: -200px;

From d2cee55c358c159f0832752a90652eb062a9caad Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 14 May 2023 19:10:48 -0400
Subject: [PATCH 3/6] Change "Classic" to "Centered"

---
 locales/en-US.yml             |  2 +-
 packages/client/src/navbar.ts | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 7df19e815..58f64d823 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -919,7 +919,7 @@ manageAccounts: "Manage Accounts"
 makeReactionsPublic: "Set reaction history to public"
 makeReactionsPublicDescription: "This will make the list of all your past reactions\
   \ publicly visible."
-classic: "Classic"
+classic: "Centered"
 muteThread: "Mute thread"
 unmuteThread: "Unmute thread"
 ffVisibility: "Follows/Followers Visibility"
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index 3f1ae2824..074e8896c 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -120,14 +120,6 @@ export const navbarItemDef = reactive({
 							unisonReload();
 						},
 					},
-					{
-						text: i18n.ts.deck,
-						active: ui === "deck",
-						action: () => {
-							localStorage.setItem("ui", "deck");
-							unisonReload();
-						},
-					},
 					{
 						text: i18n.ts.classic,
 						active: ui === "classic",
@@ -136,6 +128,14 @@ export const navbarItemDef = reactive({
 							unisonReload();
 						},
 					},
+					{
+						text: i18n.ts.deck,
+						active: ui === "deck",
+						action: () => {
+							localStorage.setItem("ui", "deck");
+							unisonReload();
+						},
+					},
 				],
 				ev.currentTarget ?? ev.target,
 			);

From 8b91a6faa14f2e893fa3e33104049995330a5069 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 14 May 2023 19:10:59 -0400
Subject: [PATCH 4/6] tweak navbar

---
 packages/client/src/ui/universal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 105cc41d4..a5d8d76eb 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -472,6 +472,7 @@ console.log(mainRouter.currentRoute.value.name);
 			box-sizing: content-box;
 			.banner {
 				pointer-events: none;
+				top: -20% !important;
 				mask: radial-gradient(
 					farthest-side at top,
 					hsl(0, 0%, 0%) 0%,
@@ -512,7 +513,7 @@ console.log(mainRouter.currentRoute.value.name);
 				) !important;
 				width: 125% !important;
 				left: -12.5% !important;
-				height: 125% !important;
+				height: 145% !important;
 			}
 		}
 

From ba1f39a9acdb72562b1f57ddb64a352c0615abbd Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 14 May 2023 19:14:54 -0400
Subject: [PATCH 5/6] Remove classic header (isn't used anywhere anymore)

---
 packages/client/src/ui/classic.header.vue | 285 ----------------------
 1 file changed, 285 deletions(-)
 delete mode 100644 packages/client/src/ui/classic.header.vue

diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
deleted file mode 100644
index 99a0ab098..000000000
--- a/packages/client/src/ui/classic.header.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-	<div class="azykntjl">
-		<div class="body">
-			<div class="left">
-				<MkA
-					v-click-anime
-					v-tooltip="i18n.ts.timeline"
-					class="item index"
-					active-class="active"
-					to="/"
-					exact
-				>
-					<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i>
-				</MkA>
-				<template v-for="item in menu">
-					<div v-if="item === '-'" class="divider"></div>
-					<component
-						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
-						v-else-if="
-							navbarItemDef[item] &&
-							navbarItemDef[item].show !== false
-						"
-						v-click-anime
-						v-tooltip="$ts[navbarItemDef[item].title]"
-						class="item _button"
-						:class="item"
-						active-class="active"
-						:to="navbarItemDef[item].to"
-						v-on="
-							navbarItemDef[item].action
-								? { click: navbarItemDef[item].action }
-								: {}
-						"
-					>
-						<i
-							class="ph-fw ph-lg"
-							:class="navbarItemDef[item].icon"
-						></i>
-						<span
-							v-if="navbarItemDef[item].indicated"
-							class="indicator"
-							><i class="ph-circle ph-fill"></i
-						></span>
-					</component>
-				</template>
-				<div class="divider"></div>
-				<MkA
-					v-if="$i.isAdmin || $i.isModerator"
-					v-click-anime
-					v-tooltip="i18n.ts.controlPanel"
-					class="item"
-					active-class="active"
-					to="/admin"
-					:behavior="settingsWindowed ? 'modalWindow' : null"
-				>
-					<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i>
-				</MkA>
-				<button v-click-anime class="item _button" @click="more">
-					<i
-						class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
-					></i>
-					<span v-if="otherNavItemIndicated" class="indicator"
-						><i class="ph-circle ph-fill"></i
-					></span>
-				</button>
-			</div>
-			<div class="right">
-				<MkA
-					v-click-anime
-					v-tooltip="i18n.ts.settings"
-					class="item"
-					active-class="active"
-					to="/settings"
-					:behavior="settingsWindowed ? 'modalWindow' : null"
-				>
-					<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i>
-				</MkA>
-				<button
-					v-click-anime
-					class="item _button account"
-					@click="openAccountMenu"
-				>
-					<MkAvatar :user="$i" class="avatar" /><MkAcct
-						class="acct"
-						:user="$i"
-						disableLink
-					/>
-				</button>
-				<div class="post" @click="post">
-					<MkButton class="button" gradate full rounded>
-						<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
-					</MkButton>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from "vue";
-import { host } from "@/config";
-import { search } from "@/scripts/search";
-import * as os from "@/os";
-import { navbarItemDef } from "@/navbar";
-import { openAccountMenu } from "@/account";
-import MkButton from "@/components/MkButton.vue";
-import { i18n } from "@/i18n";
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			navbarItemDef: navbarItemDef,
-			settingsWindowed: false,
-			i18n,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.navbarItemDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.navbarItemDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		"$store.reactiveState.menuDisplay.value"() {
-			this.calcViewState();
-		},
-	},
-
-	created() {
-		window.addEventListener("resize", this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		calcViewState() {
-			this.settingsWindowed = window.innerWidth > 1400;
-		},
-
-		post() {
-			os.post();
-		},
-
-		search() {
-			search();
-		},
-
-		more(ev) {
-			os.popup(
-				defineAsyncComponent(
-					() => import("@/components/MkLaunchPad.vue")
-				),
-				{
-					src: ev.currentTarget ?? ev.target,
-					anchor: { x: "center", y: "bottom" },
-				},
-				{},
-				"closed"
-			);
-		},
-
-		openAccountMenu: (ev) => {
-			openAccountMenu(
-				{
-					withExtraOperation: true,
-				},
-				ev
-			);
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.azykntjl {
-	$height: 60px;
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	position: sticky;
-	top: 0;
-	z-index: 1000;
-	width: 100%;
-	height: $height;
-	background-color: var(--bg);
-
-	> .body {
-		max-width: 1380px;
-		margin: 0 auto;
-		display: flex;
-
-		> .right,
-		> .left {
-			> .item {
-				position: relative;
-				font-size: 0.9em;
-				display: inline-block;
-				padding: 0 12px;
-				line-height: $height;
-
-				> i,
-				> .avatar {
-					margin-right: 0;
-				}
-
-				> i {
-					left: 10px;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .indicator {
-					position: absolute;
-					top: 0;
-					left: 0;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-			}
-
-			> .divider {
-				display: inline-block;
-				height: 16px;
-				margin: 0 10px;
-				border-right: solid 0.5px var(--divider);
-			}
-
-			> .post {
-				display: inline-block;
-
-				> .button {
-					width: 40px;
-					height: 40px;
-					padding: 0;
-					min-width: 0;
-				}
-			}
-
-			> .account {
-				display: inline-flex;
-				align-items: center;
-				vertical-align: top;
-				margin-right: 8px;
-
-				> .acct {
-					margin-left: 8px;
-				}
-			}
-		}
-
-		> .right {
-			margin-left: auto;
-		}
-	}
-}
-</style>

From cda1e7bbf4203595b6a686758e7df54abcdbfa6c Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 14 May 2023 19:19:00 -0400
Subject: [PATCH 6/6] classic view spacing

---
 packages/client/src/components/global/MkSpacer.vue | 5 +++++
 packages/client/src/ui/universal.vue               | 4 ----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
index 3dc93efdd..d6ec1bf44 100644
--- a/packages/client/src/components/global/MkSpacer.vue
+++ b/packages/client/src/components/global/MkSpacer.vue
@@ -9,6 +9,7 @@
 <script lang="ts" setup>
 import { inject, onMounted, onUnmounted, ref } from "vue";
 import { deviceKind } from "@/scripts/device-kind";
+import { ui } from "@/config";
 
 const props = withDefaults(
 	defineProps<{
@@ -34,6 +35,10 @@ const adjust = (rect: { width: number; height: number }) => {
 		margin = props.marginMin;
 		return;
 	}
+	if ( ui === "classic" ) {
+		margin = 12;
+		return;
+	}
 
 	if (
 		rect.width > (props.contentMax ?? 0) ||
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index a5d8d76eb..707f1ef6b 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -210,10 +210,6 @@ provideMetadataReceiver((info) => {
 	}
 });
 
-if (ui === "classic") {
-	provide("shouldSpacerMin", true);
-}
-
 const menuIndicated = computed(() => {
 	for (const def in navbarItemDef) {
 		if (def === "notifications") continue; // 通知は下にボタンとして表示されてるから