From 7e6ef0faaea0a92fcadec05d143375931bd40380 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Thu, 15 Jun 2023 19:54:06 -0400
Subject: [PATCH] Use visitor.vue again, I tried to do something different
 earlier

---
 .../src/components/MkInstanceTicker.vue       |  14 +-
 packages/client/src/components/MkNote.vue     |   1 -
 .../client/src/components/MkNoteHeader.vue    |   2 +
 packages/client/src/init.ts                   |   2 +
 packages/client/src/ui/universal.vue          | 216 ++++++------
 packages/client/src/ui/visitor.vue            |  79 ++++-
 packages/client/src/ui/visitor/a.vue          | 302 -----------------
 packages/client/src/ui/visitor/b.vue          | 294 -----------------
 packages/client/src/ui/visitor/header.vue     | 310 ------------------
 packages/client/src/ui/visitor/kanban.vue     |   6 -
 10 files changed, 183 insertions(+), 1043 deletions(-)
 delete mode 100644 packages/client/src/ui/visitor/a.vue
 delete mode 100644 packages/client/src/ui/visitor/b.vue
 delete mode 100644 packages/client/src/ui/visitor/header.vue

diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 6deb428f0d..702e17a87a 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -1,12 +1,12 @@
 <template>
 	<div
-		class="hpaizdrt"
-		v-tooltip="capitalize(instance.softwareName)"
+		class="instance-ticker"
+		v-tooltip="instance.softwareName ? capitalize(instance.softwareName) : null"
 		ref="ticker"
 		:style="bg"
 	>
 		<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true" />
-		<span class="name">{{ instance.name }}</span>
+		<span v-if="!mini" class="name">{{ instance.name }}</span>
 	</div>
 </template>
 
@@ -22,6 +22,7 @@ const props = defineProps<{
 		themeColor?: string;
 		softwareName?: string;
 	};
+	mini?: boolean;
 }>();
 
 let ticker = $ref<HTMLElement | null>(null);
@@ -58,7 +59,7 @@ function getInstanceIcon(instance): string {
 </script>
 
 <style lang="scss" scoped>
-.hpaizdrt {
+.instance-ticker {
 	display: flex;
 	align-items: center;
 	height: 1.1em;
@@ -79,7 +80,6 @@ function getInstanceIcon(instance): string {
 	}
 
 	> .name {
-		display: none;
 		margin-left: 4px;
 		font-size: 0.85em;
 		vertical-align: top;
@@ -88,10 +88,6 @@ function getInstanceIcon(instance): string {
 		white-space: nowrap;
 		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg),
 			-1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
-		.article > .main &,
-		.header > .body & {
-			display: unset;
-		}
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 19205e0d99..29345d0406 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -78,7 +78,6 @@
 					<XNoteHeader
 						class="header"
 						:note="appearNote"
-						:mini="true"
 					/>
 				</div>
 				<div class="body">
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index dc8b71d935..2d2b1993e4 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -36,6 +36,7 @@
 					v-if="showTicker"
 					class="ticker"
 					:instance="note.user.instance"
+					:mini="mini"
 				/>
 			</div>
 		</div>
@@ -55,6 +56,7 @@ import { i18n } from "@/i18n";
 const props = defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
+	mini?: boolean;
 }>();
 
 let note = $ref(props.note);
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index d1547b2a72..5d9ae12f36 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -175,6 +175,8 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
 	const app = createApp(
 		window.location.search === "?zen"
 			? defineAsyncComponent(() => import("@/ui/zen.vue"))
+			: !$i
+			? defineAsyncComponent(() => import("@/ui/visitor.vue"))
 			: ui === "deck"
 			? defineAsyncComponent(() => import("@/ui/deck.vue"))
 			: defineAsyncComponent(() => import("@/ui/universal.vue")),
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index aeddfae66d..30c5ac63a0 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -3,8 +3,7 @@
 		class="dkgtipfy"
 		:class="{ wallpaper, isMobile, centered: ui === 'classic' }"
 	>
-		<XSidebar v-if="!isMobile && $i" />
-		<XKanban sticky v-if="isDesktop && !$i" />
+		<XSidebar v-if="!isMobile" />
 
 		<MkStickyContainer class="contents">
 			<template #header
@@ -20,120 +19,118 @@
 			</main>
 		</MkStickyContainer>
 
-		<template v-if="$i">
-			<div v-if="isDesktop" ref="widgetsEl" class="widgets-container">
-				<XWidgets @mounted="attachSticky" />
-			</div>
+		<div v-if="isDesktop" ref="widgetsEl" class="widgets-container">
+			<XWidgets @mounted="attachSticky" />
+		</div>
 
 
+		<button
+			v-if="!isDesktop && !isMobile"
+			class="widgetButton _button"
+			@click="widgetsShowing = true"
+		>
+			<i class="ph-stack ph-bold ph-lg"></i>
+		</button>
+
+		<div v-if="isMobile" class="buttons">
 			<button
-				v-if="!isDesktop && !isMobile"
-				class="widgetButton _button"
+				:aria-label="i18n.t('menu')"
+				class="button nav _button"
+				@click="drawerMenuShowing = true"
+			>
+				<div class="button-wrapper">
+					<i class="ph-list ph-bold ph-lg"></i
+					><span v-if="menuIndicated" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				:aria-label="i18n.t('home')"
+				class="button home _button"
+				@click="
+					mainRouter.currentRoute.value.name === 'index'
+						? top()
+						: mainRouter.push('/');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 0 ? 'on' : ''"
+				>
+					<i class="ph-house ph-bold ph-lg"></i>
+				</div>
+			</button>
+			<button
+				:aria-label="i18n.t('notifications')"
+				class="button notifications _button"
+				@click="
+					mainRouter.push('/my/notifications');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 1 ? 'on' : ''"
+				>
+					<i class="ph-bell ph-bold ph-lg"></i
+					><span v-if="$i?.hasUnreadNotification" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				:aria-label="i18n.t('messaging')"
+				class="button messaging _button"
+				@click="
+					mainRouter.push('/my/messaging');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 2 ? 'on' : ''"
+				>
+					<i class="ph-chats-teardrop ph-bold ph-lg"></i
+					><span
+						v-if="$i?.hasUnreadMessagingMessage"
+						class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				:aria-label="i18n.t('_deck._columns.widgets')"
+				class="button widget _button"
 				@click="widgetsShowing = true"
 			>
-				<i class="ph-stack ph-bold ph-lg"></i>
+				<div class="button-wrapper">
+					<i class="ph-stack ph-bold ph-lg"></i>
+				</div>
 			</button>
+		</div>
 
-			<div v-if="isMobile" class="buttons">
-				<button
-					:aria-label="i18n.t('menu')"
-					class="button nav _button"
-					@click="drawerMenuShowing = true"
-				>
-					<div class="button-wrapper">
-						<i class="ph-list ph-bold ph-lg"></i
-						><span v-if="menuIndicated" class="indicator"
-							><i class="ph-circle ph-fill"></i
-						></span>
-					</div>
-				</button>
-				<button
-					:aria-label="i18n.t('home')"
-					class="button home _button"
-					@click="
-						mainRouter.currentRoute.value.name === 'index'
-							? top()
-							: mainRouter.push('/');
-						updateButtonState();
-					"
-				>
-					<div
-						class="button-wrapper"
-						:class="buttonAnimIndex === 0 ? 'on' : ''"
-					>
-						<i class="ph-house ph-bold ph-lg"></i>
-					</div>
-				</button>
-				<button
-					:aria-label="i18n.t('notifications')"
-					class="button notifications _button"
-					@click="
-						mainRouter.push('/my/notifications');
-						updateButtonState();
-					"
-				>
-					<div
-						class="button-wrapper"
-						:class="buttonAnimIndex === 1 ? 'on' : ''"
-					>
-						<i class="ph-bell ph-bold ph-lg"></i
-						><span v-if="$i?.hasUnreadNotification" class="indicator"
-							><i class="ph-circle ph-fill"></i
-						></span>
-					</div>
-				</button>
-				<button
-					:aria-label="i18n.t('messaging')"
-					class="button messaging _button"
-					@click="
-						mainRouter.push('/my/messaging');
-						updateButtonState();
-					"
-				>
-					<div
-						class="button-wrapper"
-						:class="buttonAnimIndex === 2 ? 'on' : ''"
-					>
-						<i class="ph-chats-teardrop ph-bold ph-lg"></i
-						><span
-							v-if="$i?.hasUnreadMessagingMessage"
-							class="indicator"
-							><i class="ph-circle ph-fill"></i
-						></span>
-					</div>
-				</button>
-				<button
-					:aria-label="i18n.t('_deck._columns.widgets')"
-					class="button widget _button"
-					@click="widgetsShowing = true"
-				>
-					<div class="button-wrapper">
-						<i class="ph-stack ph-bold ph-lg"></i>
-					</div>
-				</button>
-			</div>
-
-			<button
-				v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
-				ref="postButton"
-				:aria-label="i18n.t('note')"
-				class="postButton button post _button"
-				@click="os.post()"
-			>
-				<i class="ph-pencil ph-bold ph-lg"></i>
-			</button>
-			<button
-				v-if="
-					isMobile && mainRouter.currentRoute.value.name === 'messaging'
-				"
-				ref="postButton"
-				class="postButton button post _button"
-				:aria-label="i18n.t('startMessaging')"
-				@click="messagingStart"
-			>
-				<i class="ph-user-plus ph-bold ph-lg"></i>
-			</button>
-		</template>
+		<button
+			v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
+			ref="postButton"
+			:aria-label="i18n.t('note')"
+			class="postButton button post _button"
+			@click="os.post()"
+		>
+			<i class="ph-pencil ph-bold ph-lg"></i>
+		</button>
+		<button
+			v-if="
+				isMobile && mainRouter.currentRoute.value.name === 'messaging'
+			"
+			ref="postButton"
+			class="postButton button post _button"
+			:aria-label="i18n.t('startMessaging')"
+			@click="messagingStart"
+		>
+			<i class="ph-user-plus ph-bold ph-lg"></i>
+		</button>
 
 		<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
 			<div
@@ -169,7 +166,6 @@
 import { defineAsyncComponent, provide, onMounted, computed, ref } from "vue";
 import XCommon from "./_common_/common.vue";
 import * as Acct from "calckey-js/built/acct";
-import XKanban from "./visitor/kanban.vue";
 import type { ComputedRef } from "vue";
 import type { PageMetadata } from "@/scripts/page-metadata";
 import { instanceName, ui } from "@/config";
diff --git a/packages/client/src/ui/visitor.vue b/packages/client/src/ui/visitor.vue
index a00813415a..2e1f0fe40d 100644
--- a/packages/client/src/ui/visitor.vue
+++ b/packages/client/src/ui/visitor.vue
@@ -1,20 +1,77 @@
 <template>
-	<DesignB />
+	<XKanban sticky v-if="isDesktop" />
+	<main
+		id="maincontent"
+	>
+		<RouterView />
+		<footer class="powered-by">
+			<MkA to="/">
+				<MkInstanceTicker :instance="meta"></MkInstanceTicker>
+				<small>{{ i18n.ts.poweredBy }}</small>
+			</MkA>
+		</footer>
+	</main>
 	<XCommon />
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
-import DesignA from "./visitor/a.vue";
-import DesignB from "./visitor/b.vue";
+<script lang="ts" setup>
+import { provide } from "vue";
 import XCommon from "./_common_/common.vue";
 import { i18n } from "@/i18n";
+import { mainRouter } from "@/router";
+import XKanban from "@/ui/visitor/kanban.vue";
+import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
+import * as os from "@/os";
+import { LiteInstanceMetadata } from "calckey-js/built/entities";
+import { host } from "@/config";
 
-export default defineComponent({
-	components: {
-		XCommon,
-		DesignA,
-		DesignB,
-	},
+
+
+provide("router", mainRouter);
+
+const DESKTOP_THRESHOLD = 1100;
+let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
+matchMedia(`(min-width: ${DESKTOP_THRESHOLD - 1}px)`).onchange = (mql) => {
+	isDesktop = mql.matches;
+};
+
+const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent");
+
+console.log(accentColor);
+
+let meta = $ref<LiteInstanceMetadata>();
+
+os.api("meta").then((res) => {
+	meta = res;
 });
+
 </script>
+<style lang="scss">
+#calckey_app {
+	display: flex;
+	min-height: 100vh;
+}
+#maincontent {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	flex-grow: 1;
+	flex-basis: 900px;
+}
+.powered-by {
+	display: block;
+	margin-top: auto;
+	padding: 28px;
+	text-align: center;
+	border-top: 1px solid var(--divider);
+	.instance-ticker {
+		font-size: 1.5em;
+		display: inline-flex !important;
+	}
+	small {
+		display: block;
+		margin-top: 8px;
+		opacity: 0.5;
+	}
+}
+</style>
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
deleted file mode 100644
index 159c0e17fa..0000000000
--- a/packages/client/src/ui/visitor/a.vue
+++ /dev/null
@@ -1,302 +0,0 @@
-<template>
-	<div class="mk-app">
-		<div
-			v-if="mainRouter.currentRoute?.name === 'index'"
-			class="banner"
-			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
-		>
-			<div>
-				<h1 v-if="meta">
-					<img
-						v-if="meta.logoImageUrl"
-						class="logo"
-						:src="meta.logoImageUrl"
-					/><span v-else class="text">{{ instanceName }}</span>
-				</h1>
-				<div v-if="meta" class="about">
-					<div
-						class="desc"
-						v-html="meta.description || i18n.ts.introMisskey"
-					></div>
-				</div>
-				<div class="action">
-					<button class="_button primary" @click="signup()">
-						{{ i18n.ts.signup }}
-					</button>
-					<button class="_button" @click="signin()">
-						{{ i18n.ts.login }}
-					</button>
-				</div>
-			</div>
-		</div>
-		<div
-			v-else
-			class="banner-mini"
-			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
-		>
-			<div>
-				<h1 v-if="meta">
-					<img
-						v-if="meta.logoImageUrl"
-						class="logo"
-						:src="meta.logoImageUrl"
-					/><span v-else class="text">{{ instanceName }}</span>
-				</h1>
-			</div>
-		</div>
-
-		<div class="main">
-			<div ref="contents" class="contents" :class="{ wallpaper }">
-				<header
-					v-show="mainRouter.currentRoute?.name !== 'index'"
-					ref="header"
-					class="header"
-				>
-					<XHeader :info="pageInfo" />
-				</header>
-				<main ref="main">
-					<RouterView />
-				</main>
-				<div class="powered-by">
-					<b
-						><MkA to="/">{{ host }}</MkA></b
-					>
-					<small
-						>Powered by
-						<a href="https://calckey.org/" target="_blank"
-							>Calckey</a
-						></small
-					>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
-import XHeader from "./header.vue";
-import { host, instanceName } from "@/config";
-import { search } from "@/scripts/search";
-import * as os from "@/os";
-import MkPagination from "@/components/MkPagination.vue";
-import MkButton from "@/components/MkButton.vue";
-import { ColdDeviceStorage } from "@/store";
-import { mainRouter } from "@/router";
-import { i18n } from "@/i18n";
-
-const DESKTOP_THRESHOLD = 1100;
-
-export default defineComponent({
-	components: {
-		XHeader,
-		MkPagination,
-		MkButton,
-	},
-
-	data() {
-		return {
-			host,
-			instanceName,
-			pageInfo: null,
-			meta: null,
-			narrow: window.innerWidth < 1280,
-			announcements: {
-				endpoint: "announcements",
-				limit: 10,
-			},
-			mainRouter,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			i18n,
-		};
-	},
-
-	computed: {
-		keymap(): any {
-			return {
-				d: () => {
-					if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
-					this.$store.set("darkMode", !this.$store.state.darkMode);
-				},
-				s: search,
-				"h|/": this.help,
-			};
-		},
-	},
-
-	created() {
-		document.documentElement.style.overflowY = "scroll";
-
-		os.api("meta", { detail: true }).then((meta) => {
-			this.meta = meta;
-		});
-	},
-
-	mounted() {
-		if (!this.isDesktop) {
-			window.addEventListener(
-				"resize",
-				() => {
-					if (window.innerWidth >= DESKTOP_THRESHOLD)
-						this.isDesktop = true;
-				},
-				{ passive: true }
-			);
-		}
-	},
-
-	methods: {
-		// @ThatOneCalculator: Are these methods even used?
-		// I can't find references to them anywhere else in the code...
-
-		// setParallax(el) {
-		// 	new simpleParallax(el);
-		// },
-
-		changePage(page) {
-			if (page == null) return;
-
-			if (page[symbols.PAGE_INFO]) {
-				this.pageInfo = page[symbols.PAGE_INFO];
-			}
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: "smooth" });
-		},
-
-		help() {
-			// TODO(thatonecalculator): popup with keybinds
-			// window.open('https://misskey-hub.net/docs/keyboard-shortcut.md', '_blank');
-			console.log("d = dark/light mode, s = search, p = post :3");
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-app {
-	min-height: 100vh;
-
-	> .banner {
-		position: relative;
-		width: 100%;
-		text-align: center;
-		background-position: center;
-		background-size: cover;
-
-		> div {
-			height: 100%;
-			background: rgba(0, 0, 0, 0.3);
-
-			* {
-				color: #fff;
-			}
-
-			> h1 {
-				margin: 0;
-				padding: 96px 32px 0 32px;
-				text-shadow: 0 0 8px black;
-
-				> .logo {
-					vertical-align: bottom;
-					max-height: 150px;
-				}
-			}
-
-			> .about {
-				padding: 32px;
-				max-width: 580px;
-				margin: 0 auto;
-				box-sizing: border-box;
-				text-shadow: 0 0 8px black;
-			}
-
-			> .action {
-				padding-bottom: 64px;
-
-				> button {
-					display: inline-block;
-					padding: 10px 20px;
-					box-sizing: border-box;
-					text-align: center;
-					border-radius: 999px;
-					background: var(--panel);
-					color: var(--fg);
-
-					&.primary {
-						background: var(--accent);
-						color: #fff;
-					}
-
-					&:first-child {
-						margin-right: 16px;
-					}
-				}
-			}
-		}
-	}
-
-	> .banner-mini {
-		position: relative;
-		width: 100%;
-		text-align: center;
-		background-position: center;
-		background-size: cover;
-
-		> div {
-			position: relative;
-			z-index: 1;
-			height: 100%;
-			background: rgba(0, 0, 0, 0.3);
-
-			* {
-				color: #fff !important;
-			}
-
-			> header {
-			}
-
-			> h1 {
-				margin: 0;
-				padding: 32px;
-				text-shadow: 0 0 8px black;
-
-				> .logo {
-					vertical-align: bottom;
-					max-height: 100px;
-				}
-			}
-		}
-	}
-
-	> .main {
-		> .contents {
-			position: relative;
-			z-index: 1;
-
-			> .header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				z-index: 1000;
-			}
-
-			> .powered-by {
-				padding: 28px;
-				font-size: 14px;
-				text-align: center;
-				border-top: 1px solid var(--divider);
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-}
-</style>
-
-<style lang="scss"></style>
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
deleted file mode 100644
index 335e9bf626..0000000000
--- a/packages/client/src/ui/visitor/b.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<template>
-	<div class="mk-app">
-		<div v-if="!narrow && !root" class="side">
-			<XKanban class="kanban" full />
-		</div>
-
-		<div class="main">
-			<XKanban v-if="narrow && !root" class="banner" :powered-by="root" />
-
-			<div class="contents">
-				<XHeader v-if="!root" class="header" :info="pageInfo" />
-				<main>
-					<RouterView />
-				</main>
-				<div v-if="!root" class="powered-by">
-					<b
-						><MkA to="/">{{ host }}</MkA></b
-					>
-					<small
-						>Powered by
-						<a href="https://calckey.org/" target="_blank"
-							>Calckey</a
-						></small
-					>
-				</div>
-			</div>
-		</div>
-
-		<transition :name="$store.state.animation ? 'tray-back' : ''">
-			<div
-				v-if="showMenu"
-				class="menu-back _modalBg"
-				@click="showMenu = false"
-				@touchstart.passive="showMenu = false"
-			></div>
-		</transition>
-
-		<transition :name="$store.state.animation ? 'tray' : ''">
-			<div v-if="showMenu" class="menu">
-				<MkA to="/" class="link" active-class="active"
-					><i class="ph-house ph-bold ph-lg icon"></i
-					>{{ i18n.ts.home }}</MkA
-				>
-				<MkA to="/explore" class="link" active-class="active"
-					><i class="ph-compass ph-bold ph-lg icon"></i
-					>{{ i18n.ts.explore }}</MkA
-				>
-				<MkA to="/channels" class="link" active-class="active"
-					><i class="ph-television ph-bold ph-lg icon"></i
-					>{{ i18n.ts.channel }}</MkA
-				>
-				<MkA to="/pages" class="link" active-class="active"
-					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</MkA
-				>
-				<MkA to="/gallery" class="link" active-class="active"
-					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</MkA
-				>
-				<div class="action">
-					<button class="_buttonPrimary" @click="signup()">
-						{{ i18n.ts.signup }}
-					</button>
-					<button class="_button" @click="signin()">
-						{{ i18n.ts.login }}
-					</button>
-				</div>
-			</div>
-		</transition>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ComputedRef, onMounted, provide } from "vue";
-import XHeader from "./header.vue";
-import XKanban from "./kanban.vue";
-import { host, instanceName } from "@/config";
-import { search } from "@/scripts/search";
-import * as os from "@/os";
-import { instance } from "@/instance";
-import MkPagination from "@/components/MkPagination.vue";
-import XSigninDialog from "@/components/MkSigninDialog.vue";
-import XSignupDialog from "@/components/MkSignupDialog.vue";
-import MkButton from "@/components/MkButton.vue";
-import { ColdDeviceStorage, defaultStore } from "@/store";
-import { mainRouter } from "@/router";
-import {
-	PageMetadata,
-	provideMetadataReceiver,
-	setPageMetadata,
-} from "@/scripts/page-metadata";
-import { i18n } from "@/i18n";
-
-const DESKTOP_THRESHOLD = 1000;
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-
-provide("router", mainRouter);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
-	}
-});
-
-const announcements = {
-	endpoint: "announcements",
-	limit: 10,
-};
-const isTimelineAvailable =
-	!instance.disableLocalTimeline ||
-	!instance.disableRecommendedTimeline ||
-	!instance.disableGlobalTimeline;
-let showMenu = $ref(false);
-let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
-let narrow = $ref(window.innerWidth < 1280);
-let meta = $ref();
-
-const keymap = $computed(() => {
-	return {
-		d: () => {
-			if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
-			defaultStore.set("darkMode", !defaultStore.state.darkMode);
-		},
-		s: search,
-	};
-});
-
-const root = $computed(() => mainRouter.currentRoute.value.name === "index");
-
-os.api("meta", { detail: true }).then((res) => {
-	meta = res;
-});
-
-function signin() {
-	os.popup(
-		XSigninDialog,
-		{
-			autoSet: true,
-		},
-		{},
-		"closed"
-	);
-}
-
-function signup() {
-	os.popup(
-		XSignupDialog,
-		{
-			autoSet: true,
-		},
-		{},
-		"closed"
-	);
-}
-
-onMounted(() => {
-	if (!isDesktop) {
-		window.addEventListener(
-			"resize",
-			() => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
-			},
-			{ passive: true }
-		);
-	}
-});
-
-defineExpose({
-	showMenu: $$(showMenu),
-});
-</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;
-}
-
-.mk-app {
-	display: flex;
-	min-height: 100vh;
-	background-position: center;
-	background-size: cover;
-	background-attachment: fixed;
-
-	> .side {
-		width: 500px;
-		height: 100vh;
-
-		> .kanban {
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 500px;
-			height: 100vh;
-			overflow: auto;
-		}
-	}
-
-	> .main {
-		flex: 1;
-		min-width: 0;
-
-		> .banner {
-		}
-
-		> .contents {
-			position: relative;
-			z-index: 1;
-
-			> .powered-by {
-				padding: 28px;
-				font-size: 14px;
-				text-align: center;
-				border-top: 1px solid var(--divider);
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .menu-back {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-	}
-
-	> .menu {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 240px;
-		height: 100vh;
-		background: var(--panel);
-
-		> .link {
-			display: block;
-			padding: 16px;
-
-			> .icon {
-				margin-right: 1em;
-			}
-		}
-
-		> .action {
-			padding: 16px;
-
-			> button {
-				display: block;
-				width: 100%;
-				padding: 10px;
-				box-sizing: border-box;
-				text-align: center;
-				border-radius: 999px;
-
-				&._button {
-					background: var(--panel);
-				}
-
-				&:first-child {
-					margin-bottom: 16px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
deleted file mode 100644
index dbeeb3d2ce..0000000000
--- a/packages/client/src/ui/visitor/header.vue
+++ /dev/null
@@ -1,310 +0,0 @@
-<template>
-	<div class="sqxihjet">
-		<div v-if="narrow === false" class="wide">
-			<div class="content">
-				<MkA to="/" class="link" active-class="active"
-					><i class="ph-house ph-bold ph-lg icon"></i
-					>{{ i18n.ts.home }}</MkA
-				>
-				<!-- <MkA
-					v-if="isTimelineAvailable"
-					to="/timeline"
-					class="link"
-					active-class="active"
-					><i class="ph-chats-circle ph-bold ph-lg icon"></i
-					>{{ i18n.ts.timeline }}</MkA
-				> -->
-				<MkA to="/explore" class="link" active-class="active"
-					><i class="ph-compass ph-bold ph-lg icon"></i
-					>{{ i18n.ts.explore }}</MkA
-				>
-				<MkA to="/channels" class="link" active-class="active"
-					><i class="ph-television ph-bold ph-lg icon"></i
-					>{{ i18n.ts.channel }}</MkA
-				>
-				<MkA to="/pages" class="link" active-class="active"
-					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</MkA
-				>
-				<MkA to="/gallery" class="link" active-class="active"
-					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</MkA
-				>
-				<div v-if="info" class="page active link">
-					<div class="title">
-						<i v-if="info.icon" class="icon" :class="info.icon"></i>
-						<MkAvatar
-							v-else-if="info.avatar"
-							class="avatar"
-							:user="info.avatar"
-							:disable-preview="true"
-							:show-indicator="true"
-						/>
-						<span v-if="info.title" class="text">{{
-							info.title
-						}}</span>
-						<MkUserName
-							v-else-if="info.userName"
-							:user="info.userName"
-							:nowrap="false"
-							class="text"
-						/>
-					</div>
-					<button
-						v-if="info.action"
-						class="_button action"
-						@click.stop="info.action.handler"
-					>
-						<!-- TODO -->
-					</button>
-				</div>
-				<div class="right">
-					<button class="_button search" @click="search()">
-						<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
-						><span>{{ i18n.ts.search }}</span>
-					</button>
-					<button class="_buttonPrimary signup" @click="signup()">
-						{{ i18n.ts.signup }}
-					</button>
-					<button class="_button login" @click="signin()">
-						{{ i18n.ts.login }}
-					</button>
-				</div>
-			</div>
-		</div>
-		<div v-else-if="narrow === true" class="narrow">
-			<button class="menu _button" @click="$parent.showMenu = true">
-				<i class="ph-list ph-bold ph-lg icon"></i>
-			</button>
-			<div v-if="info" class="title">
-				<i v-if="info.icon" class="icon" :class="info.icon"></i>
-				<MkAvatar
-					v-else-if="info.avatar"
-					class="avatar"
-					:user="info.avatar"
-					:disable-preview="true"
-					:show-indicator="true"
-				/>
-				<span v-if="info.title" class="text">{{ info.title }}</span>
-				<MkUserName
-					v-else-if="info.userName"
-					:user="info.userName"
-					:nowrap="false"
-					class="text"
-				/>
-			</div>
-			<button
-				v-if="info && info.action"
-				class="action _button"
-				@click.stop="info.action.handler"
-			>
-				<!-- TODO -->
-			</button>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import XSigninDialog from "@/components/MkSigninDialog.vue";
-import XSignupDialog from "@/components/MkSignupDialog.vue";
-import * as os from "@/os";
-import { instance } from "@/instance";
-import { search } from "@/scripts/search";
-import { i18n } from "@/i18n";
-
-export default defineComponent({
-	props: {
-		info: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			narrow: null,
-			showMenu: false,
-			i18n,
-			isTimelineAvailable:
-				!instance.disableLocalTimeline ||
-				!instance.disableRecommendedTimeline ||
-				!instance.disableGlobalTimeline,
-		};
-	},
-
-	mounted() {
-		this.narrow = this.$el.clientWidth < 1300;
-	},
-
-	methods: {
-		signin() {
-			os.popup(
-				XSigninDialog,
-				{
-					autoSet: true,
-				},
-				{},
-				"closed"
-			);
-		},
-
-		signup() {
-			os.popup(
-				XSignupDialog,
-				{
-					autoSet: true,
-				},
-				{},
-				"closed"
-			);
-		},
-
-		search,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.sqxihjet {
-	$height: 60px;
-	position: sticky;
-	top: 0;
-	left: 0;
-	z-index: 1000;
-	line-height: $height;
-	-webkit-backdrop-filter: var(--blur, blur(32px));
-	backdrop-filter: var(--blur, blur(32px));
-	background-color: var(--X16);
-
-	> .wide {
-		> .content {
-			max-width: 1400px;
-			margin: 0 auto;
-			display: flex;
-			align-items: center;
-
-			> .link {
-				$line: 3px;
-				display: inline-block;
-				padding: 0 16px;
-				line-height: $height - ($line * 2);
-				border-top: solid $line transparent;
-				border-bottom: solid $line transparent;
-
-				> .icon {
-					margin-right: 0.5em;
-				}
-
-				&.page {
-					border-bottom-color: var(--accent);
-				}
-			}
-
-			> .page {
-				> .title {
-					display: inline-block;
-					vertical-align: bottom;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					position: relative;
-
-					> .icon + .text {
-						margin-left: 8px;
-					}
-
-					> .avatar {
-						$size: 32px;
-						display: inline-block;
-						width: $size;
-						height: $size;
-						vertical-align: middle;
-						margin-right: 8px;
-						pointer-events: none;
-					}
-
-					&._button {
-						&:hover {
-							color: var(--fgHighlighted);
-						}
-					}
-
-					&.selected {
-						box-shadow: 0 -2px 0 0 var(--accent) inset;
-						color: var(--fgHighlighted);
-					}
-				}
-
-				> .action {
-					padding: 0 0 0 16px;
-				}
-			}
-
-			> .right {
-				margin-left: auto;
-
-				> .search {
-					background: var(--bg);
-					border-radius: 999px;
-					width: 230px;
-					line-height: $height - 20px;
-					margin-right: 16px;
-					text-align: left;
-
-					> * {
-						opacity: 0.7;
-					}
-
-					> .icon {
-						padding: 0 16px;
-					}
-				}
-
-				> .signup {
-					border-radius: 999px;
-					padding: 0 24px;
-					line-height: $height - 20px;
-				}
-
-				> .login {
-					padding: 0 16px;
-				}
-			}
-		}
-	}
-
-	> .narrow {
-		display: flex;
-
-		> .menu,
-		> .action {
-			width: $height;
-			height: $height;
-			font-size: 20px;
-		}
-
-		> .title {
-			flex: 1;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			position: relative;
-			text-align: center;
-
-			> .icon + .text {
-				margin-left: 8px;
-			}
-
-			> .avatar {
-				$size: 32px;
-				display: inline-block;
-				width: $size;
-				height: $size;
-				vertical-align: middle;
-				margin-right: 8px;
-				pointer-events: none;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index f6f59bf6e3..f087364bc1 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -213,12 +213,6 @@ import XSignupDialog from "@/components/MkSignupDialog.vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
 import MkMention from "@/components/MkMention.vue";
 
-// let expanded = $ref(window.innerWidth >= 1000);
-
-// matchMedia("(max-width: 1000px)").onchange = (mql) => {
-// 	expanded = !mql.matches;
-// };
-
 defineProps<{
 	sticky?: boolean;
 }>();