From 40c471ff56d8d3ab1b7b59df306eab8991dc7335 Mon Sep 17 00:00:00 2001
From: Natty <natty.sh.git@gmail.com>
Date: Sun, 23 Jul 2023 14:19:12 +0200
Subject: [PATCH] Frontend: Removed the update check

---
 .../frontend/calckey-js/etc/calckey-js.api.md |    4 -
 .../markdown/calckey-js.endpoints.md          |    4 -
 .../frontend/calckey-js/src/api.types.ts      |   18 +-
 .../frontend/client/src/pages/admin/index.vue |  737 ++++++------
 .../client/src/pages/settings/general.vue     |  565 +++++----
 .../pages/settings/preferences-backups.vue    |  816 ++++++-------
 fe_calckey/frontend/client/src/store.ts       |  824 +++++++------
 .../client/src/ui/_common_/navbar.vue         | 1067 ++++++++---------
 8 files changed, 1977 insertions(+), 2058 deletions(-)

diff --git a/fe_calckey/frontend/calckey-js/etc/calckey-js.api.md b/fe_calckey/frontend/calckey-js/etc/calckey-js.api.md
index c17648e..27ca443 100644
--- a/fe_calckey/frontend/calckey-js/etc/calckey-js.api.md
+++ b/fe_calckey/frontend/calckey-js/etc/calckey-js.api.md
@@ -2034,10 +2034,6 @@ export type Endpoints = {
         		req: NoParams;
         		res: ServerInfo;
         	};
-    	"latest-version": {
-        		req: NoParams;
-        		res: TODO;
-        	};
     	"sw/register": {
         		req: TODO;
         		res: TODO;
diff --git a/fe_calckey/frontend/calckey-js/markdown/calckey-js.endpoints.md b/fe_calckey/frontend/calckey-js/markdown/calckey-js.endpoints.md
index c6649c2..7d342ef 100644
--- a/fe_calckey/frontend/calckey-js/markdown/calckey-js.endpoints.md
+++ b/fe_calckey/frontend/calckey-js/markdown/calckey-js.endpoints.md
@@ -1698,10 +1698,6 @@ export declare type Endpoints = {
 		req: NoParams;
 		res: ServerInfo;
 	};
-	"latest-version": {
-		req: NoParams;
-		res: TODO;
-	};
 	"sw/register": {
 		req: TODO;
 		res: TODO;
diff --git a/fe_calckey/frontend/calckey-js/src/api.types.ts b/fe_calckey/frontend/calckey-js/src/api.types.ts
index 273fec3..95e4f75 100644
--- a/fe_calckey/frontend/calckey-js/src/api.types.ts
+++ b/fe_calckey/frontend/calckey-js/src/api.types.ts
@@ -5,7 +5,6 @@ import {
 	App,
 	AuthSession,
 	Blocking,
-	Channel,
 	Clip,
 	DateString,
 	DetailedInstanceMetadata,
@@ -17,24 +16,23 @@ import {
 	FollowRequest,
 	GalleryPost,
 	Instance,
-	InstanceMetadata,
 	LiteInstanceMetadata,
 	MeDetailed,
+	MessagingMessage,
 	Note,
 	NoteFavorite,
+	NoteReaction,
+	Notification,
 	OriginType,
 	Page,
 	ServerInfo,
+	Signin,
 	Stats,
 	User,
 	UserDetailed,
 	UserGroup,
 	UserList,
 	UserSorting,
-	Notification,
-	NoteReaction,
-	Signin,
-	MessagingMessage,
 } from "./entities";
 
 type TODO = Record<string, any> | null;
@@ -758,10 +756,7 @@ export type Endpoints = {
 				$cases: [
 					[{ detail: true }, DetailedInstanceMetadata],
 					[{ detail: false }, LiteInstanceMetadata],
-					[
-						{ detail: boolean },
-						LiteInstanceMetadata | DetailedInstanceMetadata,
-					],
+					[{ detail: boolean }, LiteInstanceMetadata | DetailedInstanceMetadata]
 				];
 				$default: LiteInstanceMetadata;
 			};
@@ -977,9 +972,6 @@ export type Endpoints = {
 	// server-info
 	"server-info": { req: NoParams; res: ServerInfo };
 
-	// ck specific
-	"latest-version": { req: NoParams; res: TODO };
-
 	// sw
 	"sw/register": { req: TODO; res: TODO };
 
diff --git a/fe_calckey/frontend/client/src/pages/admin/index.vue b/fe_calckey/frontend/client/src/pages/admin/index.vue
index e6932fb..0de8e2f 100644
--- a/fe_calckey/frontend/client/src/pages/admin/index.vue
+++ b/fe_calckey/frontend/client/src/pages/admin/index.vue
@@ -1,93 +1,70 @@
 <template>
-	<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-		<div v-if="!narrow || currentPage?.route.name == null" class="nav">
-			<MkSpacer :content-max="700" :margin-min="16">
-				<div class="lxpfedzu">
-					<div class="banner">
-						<img
-							:src="$instance.iconUrl || '/favicon.ico'"
-							alt=""
-							class="icon"
-						/>
-					</div>
+    <div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
+        <div v-if="!narrow || currentPage?.route.name == null" class="nav">
+            <MkSpacer :content-max="700" :margin-min="16">
+                <div class="lxpfedzu">
+                    <div class="banner">
+                        <img
+                            :src="$instance.iconUrl || '/favicon.ico'"
+                            alt=""
+                            class="icon"
+                        />
+                    </div>
 
-					<MkInfo
-						v-if="thereIsUnresolvedAbuseReport"
-						warn
-						class="info"
-						>{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
-						<MkA to="/admin/abuses" class="_link">{{
-							i18n.ts.check
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="noMaintainerInformation" warn class="info"
-						>{{ i18n.ts.noMaintainerInformationWarning }}
-						<MkA to="/admin/settings" class="_link">{{
-							i18n.ts.configure
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="noBotProtection" warn class="info"
-						>{{ i18n.ts.noBotProtectionWarning }}
-						<MkA to="/admin/security" class="_link">{{
-							i18n.ts.configure
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="noEmailServer" warn class="info"
-						>{{ i18n.ts.noEmailServerWarning }}
-						<MkA to="/admin/email-settings" class="_link">{{
-							i18n.ts.configure
-						}}</MkA></MkInfo
-					>
-					<MkInfo v-if="updateAvailable" warn class="info"
-						>{{ i18n.ts.updateAvailable }}
-						<a
-							href="https://codeberg.org/calckey/calckey/releases"
-							target="_bank"
-							class="_link"
-							>{{ i18n.ts.check }}</a
-						></MkInfo
-					>
+                    <MkInfo
+                        v-if="thereIsUnresolvedAbuseReport"
+                        warn
+                        class="info"
+                        >{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
+                        <MkA to="/admin/abuses" class="_link">{{
+                            i18n.ts.check
+                        }}</MkA></MkInfo
+                    >
+                    <MkInfo v-if="noMaintainerInformation" warn class="info"
+                        >{{ i18n.ts.noMaintainerInformationWarning }}
+                        <MkA to="/admin/settings" class="_link">{{
+                            i18n.ts.configure
+                        }}</MkA></MkInfo
+                    >
+                    <MkInfo v-if="noBotProtection" warn class="info"
+                        >{{ i18n.ts.noBotProtectionWarning }}
+                        <MkA to="/admin/security" class="_link">{{
+                            i18n.ts.configure
+                        }}</MkA></MkInfo
+                    >
+                    <MkInfo v-if="noEmailServer" warn class="info"
+                        >{{ i18n.ts.noEmailServerWarning }}
+                        <MkA to="/admin/email-settings" class="_link">{{
+                            i18n.ts.configure
+                        }}</MkA></MkInfo
+                    >
 
-					<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
-				</div>
-			</MkSpacer>
-		</div>
-		<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-			<RouterView />
-		</div>
-	</div>
+                    <MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
+                </div>
+            </MkSpacer>
+        </div>
+        <div v-if="!(narrow && currentPage?.route.name == null)" class="main">
+            <RouterView />
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
-import {
-	defineAsyncComponent,
-	inject,
-	nextTick,
-	onMounted,
-	onUnmounted,
-	onActivated,
-	provide,
-	watch,
-	ref,
-} from "vue";
+import { onActivated, onMounted, onUnmounted, provide, ref, watch } from "vue";
 import { i18n } from "@/i18n";
 import MkSuperMenu from "@/components/MkSuperMenu.vue";
 import MkInfo from "@/components/MkInfo.vue";
-import { scroll } from "@/scripts/scroll";
 import { instance } from "@/instance";
-import { version } from "@/config";
 import { $i } from "@/account";
 import * as os from "@/os";
 import { lookupUser } from "@/scripts/lookup-user";
 import { lookupFile } from "@/scripts/lookup-file";
 import { lookupInstance } from "@/scripts/lookup-instance";
 import { indexPosts } from "@/scripts/index-posts";
-import { defaultStore } from "@/store";
 import { useRouter } from "@/router";
 import {
-	definePageMetadata,
-	provideMetadataReceiver,
-	setPageMetadata,
+    definePageMetadata,
+    provideMetadataReceiver,
 } from "@/scripts/page-metadata";
 
 const isEmpty = (x: string | null) => x == null || x === "";
@@ -95,9 +72,9 @@ const el = ref<HTMLElement | null>(null);
 const router = useRouter();
 
 const indexInfo = {
-	title: i18n.ts.controlPanel,
-	icon: "ph-gear-six ph-bold ph-lg",
-	hideHeader: true,
+    title: i18n.ts.controlPanel,
+    icon: "ph-gear-six ph-bold ph-lg",
+    hideHeader: true,
 };
 
 provide("shouldOmitHeaderTitle", false);
@@ -108,326 +85,312 @@ let narrow = $ref(false);
 let view = $ref(null);
 let pageProps = $ref({});
 let noMaintainerInformation =
-	isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+    isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
 let noBotProtection =
-	!instance.disableRegistration &&
-	!instance.enableHcaptcha &&
-	!instance.enableRecaptcha;
+    !instance.disableRegistration &&
+    !instance.enableHcaptcha &&
+    !instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
-let updateAvailable = $ref(false);
 let currentPage = $computed(() => router.currentRef.value.child);
 
 os.api("admin/abuse-user-reports", {
-	state: "unresolved",
-	limit: 1,
+    state: "unresolved",
+    limit: 1,
 }).then((reports) => {
-	if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
+    if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
 });
 
-if (defaultStore.state.showAdminUpdates) {
-	os.api("latest-version").then((res) => {
-		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
-		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
-		if (cleanRes > cleanVersion) {
-			updateAvailable = true;
-		}
-	});
-}
-
 const NARROW_THRESHOLD = 600;
 const ro = new ResizeObserver((entries, observer) => {
-	if (entries.length === 0) return;
-	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
+    if (entries.length === 0) return;
+    narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
 const menuDef = $computed(() => [
-	{
-		title: i18n.ts.quickAction,
-		items: [
-			{
-				type: "button",
-				icon: "ph-magnifying-glass ph-bold ph-lg",
-				text: i18n.ts.lookup,
-				action: lookup,
-			},
-			...(instance.disableRegistration
-				? [
-						{
-							type: "button",
-							icon: "ph-user-plus ph-bold ph-lg",
-							text: i18n.ts.invite,
-							action: invite,
-						},
-				  ]
-				: []),
-			...($i.isAdmin
-				? [
-						{
-							type: "button",
-							icon: "ph-list-magnifying-glass ph-bold ph-lg",
-							text: i18n.ts.indexPosts,
-							action: indexPosts,
-						},
-				  ]
-				: []),
-		],
-	},
-	{
-		title: i18n.ts.administration,
-		items: [
-			{
-				icon: "ph-gauge ph-bold ph-lg",
-				text: i18n.ts.dashboard,
-				to: "/admin/overview",
-				active: currentPage?.route.name === "overview",
-			},
-			{
-				icon: "ph-users ph-bold ph-lg",
-				text: i18n.ts.users,
-				to: "/admin/users",
-				active: currentPage?.route.name === "users",
-			},
-			{
-				icon: "ph-smiley ph-bold ph-lg",
-				text: i18n.ts.customEmojis,
-				to: "/admin/emojis",
-				active: currentPage?.route.name === "emojis",
-			},
-			{
-				icon: "ph-planet ph-bold ph-lg",
-				text: i18n.ts.federation,
-				to: "/admin/federation",
-				active: currentPage?.route.name === "federation",
-			},
-			{
-				icon: "ph-queue ph-bold ph-lg",
-				text: i18n.ts.jobQueue,
-				to: "/admin/queue",
-				active: currentPage?.route.name === "queue",
-			},
-			{
-				icon: "ph-cloud ph-bold ph-lg",
-				text: i18n.ts.files,
-				to: "/admin/files",
-				active: currentPage?.route.name === "files",
-			},
-			{
-				icon: "ph-megaphone-simple ph-bold ph-lg",
-				text: i18n.ts.announcements,
-				to: "/admin/announcements",
-				active: currentPage?.route.name === "announcements",
-			},
-			{
-				icon: "ph-money ph-bold ph-lg",
-				text: i18n.ts.ads,
-				to: "/admin/ads",
-				active: currentPage?.route.name === "ads",
-			},
-			{
-				icon: "ph-warning-circle ph-bold ph-lg",
-				text: i18n.ts.abuseReports,
-				to: "/admin/abuses",
-				active: currentPage?.route.name === "abuses",
-			},
-		],
-	},
-	...($i?.isAdmin
-		? [
-				{
-					title: i18n.ts.settings,
-					items: [
-						{
-							icon: "ph-gear-six ph-bold ph-lg",
-							text: i18n.ts.general,
-							to: "/admin/settings",
-							active: currentPage?.route.name === "settings",
-						},
-						{
-							icon: "ph-envelope-simple-open ph-bold ph-lg",
-							text: i18n.ts.emailServer,
-							to: "/admin/email-settings",
-							active:
-								currentPage?.route.name === "email-settings",
-						},
-						{
-							icon: "ph-cloud ph-bold ph-lg",
-							text: i18n.ts.objectStorage,
-							to: "/admin/object-storage",
-							active:
-								currentPage?.route.name === "object-storage",
-						},
-						{
-							icon: "ph-lock ph-bold ph-lg",
-							text: i18n.ts.security,
-							to: "/admin/security",
-							active: currentPage?.route.name === "security",
-						},
-						{
-							icon: "ph-flow-arrow ph-bold ph-lg",
-							text: i18n.ts.relays,
-							to: "/admin/relays",
-							active: currentPage?.route.name === "relays",
-						},
-						{
-							icon: "ph-plug ph-bold ph-lg",
-							text: i18n.ts.integration,
-							to: "/admin/integrations",
-							active: currentPage?.route.name === "integrations",
-						},
-						{
-							icon: "ph-prohibit ph-bold ph-lg",
-							text: i18n.ts.instanceBlocking,
-							to: "/admin/instance-block",
-							active:
-								currentPage?.route.name === "instance-block",
-						},
-						{
-							icon: "ph-hash ph-bold ph-lg",
-							text: i18n.ts.hiddenTags,
-							to: "/admin/hashtags",
-							active: currentPage?.route.name === "hashtags",
-						},
-						{
-							icon: "ph-ghost ph-bold ph-lg",
-							text: i18n.ts.proxyAccount,
-							to: "/admin/proxy-account",
-							active: currentPage?.route.name === "proxy-account",
-						},
-						{
-							icon: "ph-database ph-bold ph-lg",
-							text: i18n.ts.database,
-							to: "/admin/database",
-							active: currentPage?.route.name === "database",
-						},
-						{
-							icon: "ph-flask ph-bold ph-lg",
-							text: i18n.ts._experiments.title,
-							to: "/admin/experiments",
-							active: currentPage?.route.name === "experiments",
-						},
-					],
-				},
-		  ]
-		: []),
+    {
+        title: i18n.ts.quickAction,
+        items: [
+            {
+                type: "button",
+                icon: "ph-magnifying-glass ph-bold ph-lg",
+                text: i18n.ts.lookup,
+                action: lookup,
+            },
+            ...(instance.disableRegistration
+                ? [
+                      {
+                          type: "button",
+                          icon: "ph-user-plus ph-bold ph-lg",
+                          text: i18n.ts.invite,
+                          action: invite,
+                      },
+                  ]
+                : []),
+            ...($i.isAdmin
+                ? [
+                      {
+                          type: "button",
+                          icon: "ph-list-magnifying-glass ph-bold ph-lg",
+                          text: i18n.ts.indexPosts,
+                          action: indexPosts,
+                      },
+                  ]
+                : []),
+        ],
+    },
+    {
+        title: i18n.ts.administration,
+        items: [
+            {
+                icon: "ph-gauge ph-bold ph-lg",
+                text: i18n.ts.dashboard,
+                to: "/admin/overview",
+                active: currentPage?.route.name === "overview",
+            },
+            {
+                icon: "ph-users ph-bold ph-lg",
+                text: i18n.ts.users,
+                to: "/admin/users",
+                active: currentPage?.route.name === "users",
+            },
+            {
+                icon: "ph-smiley ph-bold ph-lg",
+                text: i18n.ts.customEmojis,
+                to: "/admin/emojis",
+                active: currentPage?.route.name === "emojis",
+            },
+            {
+                icon: "ph-planet ph-bold ph-lg",
+                text: i18n.ts.federation,
+                to: "/admin/federation",
+                active: currentPage?.route.name === "federation",
+            },
+            {
+                icon: "ph-queue ph-bold ph-lg",
+                text: i18n.ts.jobQueue,
+                to: "/admin/queue",
+                active: currentPage?.route.name === "queue",
+            },
+            {
+                icon: "ph-cloud ph-bold ph-lg",
+                text: i18n.ts.files,
+                to: "/admin/files",
+                active: currentPage?.route.name === "files",
+            },
+            {
+                icon: "ph-megaphone-simple ph-bold ph-lg",
+                text: i18n.ts.announcements,
+                to: "/admin/announcements",
+                active: currentPage?.route.name === "announcements",
+            },
+            {
+                icon: "ph-money ph-bold ph-lg",
+                text: i18n.ts.ads,
+                to: "/admin/ads",
+                active: currentPage?.route.name === "ads",
+            },
+            {
+                icon: "ph-warning-circle ph-bold ph-lg",
+                text: i18n.ts.abuseReports,
+                to: "/admin/abuses",
+                active: currentPage?.route.name === "abuses",
+            },
+        ],
+    },
+    ...($i?.isAdmin
+        ? [
+              {
+                  title: i18n.ts.settings,
+                  items: [
+                      {
+                          icon: "ph-gear-six ph-bold ph-lg",
+                          text: i18n.ts.general,
+                          to: "/admin/settings",
+                          active: currentPage?.route.name === "settings",
+                      },
+                      {
+                          icon: "ph-envelope-simple-open ph-bold ph-lg",
+                          text: i18n.ts.emailServer,
+                          to: "/admin/email-settings",
+                          active: currentPage?.route.name === "email-settings",
+                      },
+                      {
+                          icon: "ph-cloud ph-bold ph-lg",
+                          text: i18n.ts.objectStorage,
+                          to: "/admin/object-storage",
+                          active: currentPage?.route.name === "object-storage",
+                      },
+                      {
+                          icon: "ph-lock ph-bold ph-lg",
+                          text: i18n.ts.security,
+                          to: "/admin/security",
+                          active: currentPage?.route.name === "security",
+                      },
+                      {
+                          icon: "ph-flow-arrow ph-bold ph-lg",
+                          text: i18n.ts.relays,
+                          to: "/admin/relays",
+                          active: currentPage?.route.name === "relays",
+                      },
+                      {
+                          icon: "ph-plug ph-bold ph-lg",
+                          text: i18n.ts.integration,
+                          to: "/admin/integrations",
+                          active: currentPage?.route.name === "integrations",
+                      },
+                      {
+                          icon: "ph-prohibit ph-bold ph-lg",
+                          text: i18n.ts.instanceBlocking,
+                          to: "/admin/instance-block",
+                          active: currentPage?.route.name === "instance-block",
+                      },
+                      {
+                          icon: "ph-hash ph-bold ph-lg",
+                          text: i18n.ts.hiddenTags,
+                          to: "/admin/hashtags",
+                          active: currentPage?.route.name === "hashtags",
+                      },
+                      {
+                          icon: "ph-ghost ph-bold ph-lg",
+                          text: i18n.ts.proxyAccount,
+                          to: "/admin/proxy-account",
+                          active: currentPage?.route.name === "proxy-account",
+                      },
+                      {
+                          icon: "ph-database ph-bold ph-lg",
+                          text: i18n.ts.database,
+                          to: "/admin/database",
+                          active: currentPage?.route.name === "database",
+                      },
+                      {
+                          icon: "ph-flask ph-bold ph-lg",
+                          text: i18n.ts._experiments.title,
+                          to: "/admin/experiments",
+                          active: currentPage?.route.name === "experiments",
+                      },
+                  ],
+              },
+          ]
+        : []),
 ]);
 
 watch(narrow, () => {
-	if (currentPage?.route.name == null && !narrow) {
-		router.push("/admin/overview");
-	}
+    if (currentPage?.route.name == null && !narrow) {
+        router.push("/admin/overview");
+    }
 });
 
 onMounted(() => {
-	ro.observe(el.value);
+    ro.observe(el.value);
 
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
-	if (currentPage?.route.name == null && !narrow) {
-		router.push("/admin/overview");
-	}
+    narrow = el.value.offsetWidth < NARROW_THRESHOLD;
+    if (currentPage?.route.name == null && !narrow) {
+        router.push("/admin/overview");
+    }
 });
 
 onActivated(() => {
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
+    narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
-	if (!narrow && currentPage?.route.name == null) {
-		router.replace("/admin/overview");
-	}
+    if (!narrow && currentPage?.route.name == null) {
+        router.replace("/admin/overview");
+    }
 });
 
 onUnmounted(() => {
-	ro.disconnect();
+    ro.disconnect();
 });
 
 watch(router.currentRef, (to) => {
-	if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
-		router.replace("/admin/overview");
-	}
+    if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
+        router.replace("/admin/overview");
+    }
 });
 
 provideMetadataReceiver((info) => {
-	if (info == null) {
-		childInfo = null;
-	} else {
-		childInfo = info;
-	}
+    if (info == null) {
+        childInfo = null;
+    } else {
+        childInfo = info;
+    }
 });
 
 const invite = () => {
-	os.api("admin/invite")
-		.then((x) => {
-			os.alert({
-				type: "info",
-				text: x.code,
-			});
-		})
-		.catch((err) => {
-			os.alert({
-				type: "error",
-				text: err,
-			});
-		});
+    os.api("admin/invite")
+        .then((x) => {
+            os.alert({
+                type: "info",
+                text: x.code,
+            });
+        })
+        .catch((err) => {
+            os.alert({
+                type: "error",
+                text: err,
+            });
+        });
 };
 
 async function lookupNote() {
-	const { canceled, result: q } = await os.inputText({
-		title: i18n.ts.noteId,
-	});
-	if (canceled) return;
+    const { canceled, result: q } = await os.inputText({
+        title: i18n.ts.noteId,
+    });
+    if (canceled) return;
 
-	os.api(
-		"notes/show",
-		q.startsWith("http://") || q.startsWith("https://")
-			? { url: q.trim() }
-			: { noteId: q.trim() }
-	)
-		.then((note) => {
-			os.pageWindow(`/notes/${note.id}`);
-		})
-		.catch((err) => {
-			if (err.code === "NO_SUCH_NOTE") {
-				os.alert({
-					type: "error",
-					text: i18n.ts.notFound,
-				});
-			}
-		});
+    os.api(
+        "notes/show",
+        q.startsWith("http://") || q.startsWith("https://")
+            ? { url: q.trim() }
+            : { noteId: q.trim() }
+    )
+        .then((note) => {
+            os.pageWindow(`/notes/${note.id}`);
+        })
+        .catch((err) => {
+            if (err.code === "NO_SUCH_NOTE") {
+                os.alert({
+                    type: "error",
+                    text: i18n.ts.notFound,
+                });
+            }
+        });
 }
 
 const lookup = (ev) => {
-	os.popupMenu(
-		[
-			{
-				text: i18n.ts.user,
-				icon: "ph-user ph-bold ph-lg",
-				action: () => {
-					lookupUser();
-				},
-			},
-			{
-				text: i18n.ts.note,
-				icon: "ph-pencil ph-bold ph-lg",
-				action: () => {
-					lookupNote();
-				},
-			},
-			{
-				text: i18n.ts.file,
-				icon: "ph-cloud ph-bold ph-lg",
-				action: () => {
-					lookupFile();
-				},
-			},
-			{
-				text: i18n.ts.instance,
-				icon: "ph-planet ph-bold ph-lg",
-				action: () => {
-					lookupInstance();
-				},
-			},
-		],
-		ev.currentTarget ?? ev.target
-	);
+    os.popupMenu(
+        [
+            {
+                text: i18n.ts.user,
+                icon: "ph-user ph-bold ph-lg",
+                action: () => {
+                    lookupUser();
+                },
+            },
+            {
+                text: i18n.ts.note,
+                icon: "ph-pencil ph-bold ph-lg",
+                action: () => {
+                    lookupNote();
+                },
+            },
+            {
+                text: i18n.ts.file,
+                icon: "ph-cloud ph-bold ph-lg",
+                action: () => {
+                    lookupFile();
+                },
+            },
+            {
+                text: i18n.ts.instance,
+                icon: "ph-planet ph-bold ph-lg",
+                action: () => {
+                    lookupInstance();
+                },
+            },
+        ],
+        ev.currentTarget ?? ev.target
+    );
 };
 
 const headerActions = $computed(() => []);
@@ -437,51 +400,51 @@ const headerTabs = $computed(() => []);
 definePageMetadata(INFO);
 
 defineExpose({
-	header: {
-		title: i18n.ts.controlPanel,
-	},
+    header: {
+        title: i18n.ts.controlPanel,
+    },
 });
 </script>
 
 <style lang="scss" scoped>
 .hiyeyicy {
-	&.wide {
-		display: flex;
-		margin: 0 auto;
-		height: 100%;
+    &.wide {
+        display: flex;
+        margin: 0 auto;
+        height: 100%;
 
-		> .nav {
-			width: 32%;
-			max-width: 280px;
-			box-sizing: border-box;
-			border-right: solid 0.5px var(--divider);
-			overflow: auto;
-			height: 100%;
-		}
+        > .nav {
+            width: 32%;
+            max-width: 280px;
+            box-sizing: border-box;
+            border-right: solid 0.5px var(--divider);
+            overflow: auto;
+            height: 100%;
+        }
 
-		> .main {
-			flex: 1;
-			min-width: 0;
-		}
-	}
+        > .main {
+            flex: 1;
+            min-width: 0;
+        }
+    }
 
-	> .nav {
-		.lxpfedzu {
-			> .info {
-				margin: 16px 0;
-			}
+    > .nav {
+        .lxpfedzu {
+            > .info {
+                margin: 16px 0;
+            }
 
-			> .banner {
-				margin: 16px;
+            > .banner {
+                margin: 16px;
 
-				> .icon {
-					display: block;
-					margin: auto;
-					height: 42px;
-					border-radius: 8px;
-				}
-			}
-		}
-	}
+                > .icon {
+                    display: block;
+                    margin: auto;
+                    height: 42px;
+                    border-radius: 8px;
+                }
+            }
+        }
+    }
 }
 </style>
diff --git a/fe_calckey/frontend/client/src/pages/settings/general.vue b/fe_calckey/frontend/client/src/pages/settings/general.vue
index 36a4e2a..ca552f6 100644
--- a/fe_calckey/frontend/client/src/pages/settings/general.vue
+++ b/fe_calckey/frontend/client/src/pages/settings/general.vue
@@ -1,136 +1,136 @@
 <template>
-	<div class="_formRoot">
-		<FormSelect v-model="lang" class="_formBlock">
-			<template #label>{{ i18n.ts.uiLanguage }}</template>
-			<option v-for="x in langs" :key="x[0]" :value="x[0]">
-				{{ x[1] }}
-			</option>
-			<template #caption>
-				<I18n :src="i18n.ts.i18nInfo" tag="span">
-					<template #link>
-						<MkLink url="https://hosted.weblate.org/engage/calckey/"
-							>Weblate</MkLink
-						>
-					</template>
-				</I18n>
-			</template>
-		</FormSelect>
+    <div class="_formRoot">
+        <FormSelect v-model="lang" class="_formBlock">
+            <template #label>{{ i18n.ts.uiLanguage }}</template>
+            <option v-for="x in langs" :key="x[0]" :value="x[0]">
+                {{ x[1] }}
+            </option>
+            <template #caption>
+                <I18n :src="i18n.ts.i18nInfo" tag="span">
+                    <template #link>
+                        <MkLink url="https://hosted.weblate.org/engage/calckey/"
+                            >Weblate</MkLink
+                        >
+                    </template>
+                </I18n>
+            </template>
+        </FormSelect>
 
-		<FormRadios v-model="overridedDeviceKind" class="_formBlock">
-			<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
-			<option :value="null">{{ i18n.ts.auto }}</option>
-			<option value="smartphone">
-				<i class="ph-device-mobile ph-bold ph-lg" />
-				{{ i18n.ts.smartphone }}
-			</option>
-			<option value="tablet">
-				<i class="ph-device-tablet ph-bold ph-lg" />
-				{{ i18n.ts.tablet }}
-			</option>
-			<option value="desktop">
-				<i class="ph-desktop ph-bold ph-lg" /> {{ i18n.ts.desktop }}
-			</option>
-		</FormRadios>
+        <FormRadios v-model="overridedDeviceKind" class="_formBlock">
+            <template #label>{{ i18n.ts.overridedDeviceKind }}</template>
+            <option :value="null">{{ i18n.ts.auto }}</option>
+            <option value="smartphone">
+                <i class="ph-device-mobile ph-bold ph-lg" />
+                {{ i18n.ts.smartphone }}
+            </option>
+            <option value="tablet">
+                <i class="ph-device-tablet ph-bold ph-lg" />
+                {{ i18n.ts.tablet }}
+            </option>
+            <option value="desktop">
+                <i class="ph-desktop ph-bold ph-lg" /> {{ i18n.ts.desktop }}
+            </option>
+        </FormRadios>
 
-		<FormSection>
-			<template #label>{{ i18n.ts.behavior }}</template>
-			<FormSwitch v-model="imageNewTab" class="_formBlock">{{
-				i18n.ts.openImageInNewTab
-			}}</FormSwitch>
-			<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{
-				i18n.ts.enableInfiniteScroll
-			}}</FormSwitch>
-			<FormSwitch
-				v-model="useReactionPickerForContextMenu"
-				class="_formBlock"
-				>{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch
-			>
-			<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{
-				i18n.ts.swipeOnDesktop
-			}}</FormSwitch>
-			<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
-				i18n.ts.enterSendsMessage
-			}}</FormSwitch>
-			<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
-				i18n.ts.disablePagesScript
-			}}</FormSwitch>
-			<FormSwitch v-model="showTimelineReplies" class="_formBlock"
-				>{{ i18n.ts.flagShowTimelineReplies
-				}}<template #caption
-					>{{ i18n.ts.flagShowTimelineRepliesDescription }}
-					{{ i18n.ts.reflectMayTakeTime }}</template
-				></FormSwitch
-			>
+        <FormSection>
+            <template #label>{{ i18n.ts.behavior }}</template>
+            <FormSwitch v-model="imageNewTab" class="_formBlock">{{
+                i18n.ts.openImageInNewTab
+            }}</FormSwitch>
+            <FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{
+                i18n.ts.enableInfiniteScroll
+            }}</FormSwitch>
+            <FormSwitch
+                v-model="useReactionPickerForContextMenu"
+                class="_formBlock"
+                >{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch
+            >
+            <FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{
+                i18n.ts.swipeOnDesktop
+            }}</FormSwitch>
+            <FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
+                i18n.ts.enterSendsMessage
+            }}</FormSwitch>
+            <FormSwitch v-model="disablePagesScript" class="_formBlock">{{
+                i18n.ts.disablePagesScript
+            }}</FormSwitch>
+            <FormSwitch v-model="showTimelineReplies" class="_formBlock"
+                >{{ i18n.ts.flagShowTimelineReplies
+                }}<template #caption
+                    >{{ i18n.ts.flagShowTimelineRepliesDescription }}
+                    {{ i18n.ts.reflectMayTakeTime }}</template
+                ></FormSwitch
+            >
 
-			<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
-				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
-				<option value="reload">
-					{{ i18n.ts._serverDisconnectedBehavior.reload }}
-				</option>
-				<option value="dialog">
-					{{ i18n.ts._serverDisconnectedBehavior.dialog }}
-				</option>
-				<option value="quiet">
-					{{ i18n.ts._serverDisconnectedBehavior.quiet }}
-				</option>
-				<option value="nothing">
-					{{ i18n.ts._serverDisconnectedBehavior.nothing }}
-				</option>
-			</FormSelect>
-		</FormSection>
+            <FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
+                <template #label>{{ i18n.ts.whenServerDisconnected }}</template>
+                <option value="reload">
+                    {{ i18n.ts._serverDisconnectedBehavior.reload }}
+                </option>
+                <option value="dialog">
+                    {{ i18n.ts._serverDisconnectedBehavior.dialog }}
+                </option>
+                <option value="quiet">
+                    {{ i18n.ts._serverDisconnectedBehavior.quiet }}
+                </option>
+                <option value="nothing">
+                    {{ i18n.ts._serverDisconnectedBehavior.nothing }}
+                </option>
+            </FormSelect>
+        </FormSection>
 
-		<FormSection>
-			<template #label>{{ i18n.ts.accessibility }}</template>
-			<FormSwitch v-model="expandOnNoteClick" class="_formBlock"
-				>{{ i18n.ts.expandOnNoteClick
-				}}<template #caption>{{
-					i18n.ts.expandOnNoteClickDesc
-				}}</template>
-			</FormSwitch>
-			<FormSwitch v-model="advancedMfm" class="_formBlock">
-				{{ i18n.ts._mfm.advanced
-				}}<template #caption>{{
-					i18n.ts._mfm.advancedDescription
-				}}</template>
-			</FormSwitch>
-			<FormSwitch v-model="autoplayMfm" class="_formBlock">
-				{{ i18n.ts._mfm.alwaysPlay }}
-				<template #caption>
-					<i
-						class="ph-warning ph-bold ph-lg"
-						style="color: var(--warn)"
-					></i>
-					{{ i18n.ts._mfm.warn }}
-				</template>
-			</FormSwitch>
-			<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
-				i18n.ts.reduceUiAnimation
-			}}</FormSwitch>
-			<FormSwitch
-				v-model="disableShowingAnimatedImages"
-				class="_formBlock"
-				>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
-			>
-			<FormRadios v-model="fontSize" class="_formBlock">
-				<template #label>{{ i18n.ts.fontSize }}</template>
-				<option :value="null">
-					<span style="font-size: 14px">14</span>
-				</option>
-				<option value="15">
-					<span style="font-size: 15px">15</span>
-				</option>
-				<option value="16">
-					<span style="font-size: 16px">16</span>
-				</option>
-				<option value="17">
-					<span style="font-size: 17px">17</span>
-				</option>
-				<option value="18">
-					<span style="font-size: 18px">18</span>
-				</option>
-			</FormRadios>
+        <FormSection>
+            <template #label>{{ i18n.ts.accessibility }}</template>
+            <FormSwitch v-model="expandOnNoteClick" class="_formBlock"
+                >{{ i18n.ts.expandOnNoteClick
+                }}<template #caption>{{
+                    i18n.ts.expandOnNoteClickDesc
+                }}</template>
+            </FormSwitch>
+            <FormSwitch v-model="advancedMfm" class="_formBlock">
+                {{ i18n.ts._mfm.advanced
+                }}<template #caption>{{
+                    i18n.ts._mfm.advancedDescription
+                }}</template>
+            </FormSwitch>
+            <FormSwitch v-model="autoplayMfm" class="_formBlock">
+                {{ i18n.ts._mfm.alwaysPlay }}
+                <template #caption>
+                    <i
+                        class="ph-warning ph-bold ph-lg"
+                        style="color: var(--warn)"
+                    ></i>
+                    {{ i18n.ts._mfm.warn }}
+                </template>
+            </FormSwitch>
+            <FormSwitch v-model="reduceAnimation" class="_formBlock">{{
+                i18n.ts.reduceUiAnimation
+            }}</FormSwitch>
+            <FormSwitch
+                v-model="disableShowingAnimatedImages"
+                class="_formBlock"
+                >{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
+            >
+            <FormRadios v-model="fontSize" class="_formBlock">
+                <template #label>{{ i18n.ts.fontSize }}</template>
+                <option :value="null">
+                    <span style="font-size: 14px">14</span>
+                </option>
+                <option value="15">
+                    <span style="font-size: 15px">15</span>
+                </option>
+                <option value="16">
+                    <span style="font-size: 16px">16</span>
+                </option>
+                <option value="17">
+                    <span style="font-size: 17px">17</span>
+                </option>
+                <option value="18">
+                    <span style="font-size: 18px">18</span>
+                </option>
+            </FormRadios>
 
-			<!-- <FormRange
+            <!-- <FormRange
 				v-model="fontSize"
 				:min="12"
 				:max="18"
@@ -142,104 +142,97 @@
 			>
 				<template #label>{{ i18n.ts.fontSize }}</template>
 			</FormRange> -->
-		</FormSection>
+        </FormSection>
 
-		<FormSection>
-			<template #label>{{ i18n.ts.appearance }}</template>
-			<FormSwitch v-model="showAds" class="_formBlock">{{
-				i18n.ts.showAds
-			}}</FormSwitch>
-			<FormSwitch v-model="useBlurEffect" class="_formBlock">{{
-				i18n.ts.useBlurEffect
-			}}</FormSwitch>
-			<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{
-				i18n.ts.useBlurEffectForModal
-			}}</FormSwitch>
-			<FormSwitch
-				v-model="showGapBetweenNotesInTimeline"
-				class="_formBlock"
-				>{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch
-			>
-			<FormSwitch v-model="loadRawImages" class="_formBlock">{{
-				i18n.ts.loadRawImages
-			}}</FormSwitch>
-			<FormSwitch v-model="squareAvatars" class="_formBlock">{{
-				i18n.ts.squareAvatars
-			}}</FormSwitch>
-			<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
-				i18n.ts.seperateRenoteQuote
-			}}</FormSwitch>
-			<FormSwitch v-model="useSystemFont" class="_formBlock">{{
-				i18n.ts.useSystemFont
-			}}</FormSwitch>
-			<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
-				{{ i18n.ts.useOsNativeEmojis }}
-				<div>
-					<Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
-				</div>
-			</FormSwitch>
-			<FormSwitch v-model="disableDrawer" class="_formBlock">{{
-				i18n.ts.disableDrawer
-			}}</FormSwitch>
-			<FormSwitch v-model="showUpdates" class="_formBlock">{{
-				i18n.ts.showUpdates
-			}}</FormSwitch>
-			<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
-				i18n.ts.showFixedPostForm
-			}}</FormSwitch>
-			<FormSwitch
-				v-if="$i?.isAdmin"
-				v-model="showAdminUpdates"
-				class="_formBlock"
-				>{{ i18n.ts.showAdminUpdates }}</FormSwitch
-			>
-			<FormSelect v-model="instanceTicker" class="_formBlock">
-				<template #label>{{ i18n.ts.instanceTicker }}</template>
-				<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
-				<option value="remote">
-					{{ i18n.ts._instanceTicker.remote }}
-				</option>
-				<option value="always">
-					{{ i18n.ts._instanceTicker.always }}
-				</option>
-			</FormSelect>
+        <FormSection>
+            <template #label>{{ i18n.ts.appearance }}</template>
+            <FormSwitch v-model="showAds" class="_formBlock">{{
+                i18n.ts.showAds
+            }}</FormSwitch>
+            <FormSwitch v-model="useBlurEffect" class="_formBlock">{{
+                i18n.ts.useBlurEffect
+            }}</FormSwitch>
+            <FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{
+                i18n.ts.useBlurEffectForModal
+            }}</FormSwitch>
+            <FormSwitch
+                v-model="showGapBetweenNotesInTimeline"
+                class="_formBlock"
+                >{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch
+            >
+            <FormSwitch v-model="loadRawImages" class="_formBlock">{{
+                i18n.ts.loadRawImages
+            }}</FormSwitch>
+            <FormSwitch v-model="squareAvatars" class="_formBlock">{{
+                i18n.ts.squareAvatars
+            }}</FormSwitch>
+            <FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
+                i18n.ts.seperateRenoteQuote
+            }}</FormSwitch>
+            <FormSwitch v-model="useSystemFont" class="_formBlock">{{
+                i18n.ts.useSystemFont
+            }}</FormSwitch>
+            <FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
+                {{ i18n.ts.useOsNativeEmojis }}
+                <div>
+                    <Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
+                </div>
+            </FormSwitch>
+            <FormSwitch v-model="disableDrawer" class="_formBlock">{{
+                i18n.ts.disableDrawer
+            }}</FormSwitch>
+            <FormSwitch v-model="showUpdates" class="_formBlock">{{
+                i18n.ts.showUpdates
+            }}</FormSwitch>
+            <FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
+                i18n.ts.showFixedPostForm
+            }}</FormSwitch>
+            <FormSelect v-model="instanceTicker" class="_formBlock">
+                <template #label>{{ i18n.ts.instanceTicker }}</template>
+                <option value="none">{{ i18n.ts._instanceTicker.none }}</option>
+                <option value="remote">
+                    {{ i18n.ts._instanceTicker.remote }}
+                </option>
+                <option value="always">
+                    {{ i18n.ts._instanceTicker.always }}
+                </option>
+            </FormSelect>
 
-			<FormSelect v-model="nsfw" class="_formBlock">
-				<template #label>{{ i18n.ts.nsfw }}</template>
-				<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
-				<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
-				<option value="force">{{ i18n.ts._nsfw.force }}</option>
-			</FormSelect>
-		</FormSection>
+            <FormSelect v-model="nsfw" class="_formBlock">
+                <template #label>{{ i18n.ts.nsfw }}</template>
+                <option value="respect">{{ i18n.ts._nsfw.respect }}</option>
+                <option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
+                <option value="force">{{ i18n.ts._nsfw.force }}</option>
+            </FormSelect>
+        </FormSection>
 
-		<FormRange
-			v-model="numberOfPageCache"
-			:min="1"
-			:max="10"
-			:step="1"
-			easing
-			class="_formBlock"
-		>
-			<template #label>{{ i18n.ts.numberOfPageCache }}</template>
-			<template #caption>{{
-				i18n.ts.numberOfPageCacheDescription
-			}}</template>
-		</FormRange>
+        <FormRange
+            v-model="numberOfPageCache"
+            :min="1"
+            :max="10"
+            :step="1"
+            easing
+            class="_formBlock"
+        >
+            <template #label>{{ i18n.ts.numberOfPageCache }}</template>
+            <template #caption>{{
+                i18n.ts.numberOfPageCacheDescription
+            }}</template>
+        </FormRange>
 
-		<FormLink to="/settings/deck" class="_formBlock">{{
-			i18n.ts.deck
-		}}</FormLink>
+        <FormLink to="/settings/deck" class="_formBlock">{{
+            i18n.ts.deck
+        }}</FormLink>
 
-		<FormLink to="/settings/custom-katex-macro" class="_formBlock"
-			><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
-			>{{ i18n.ts.customKaTeXMacro }}</FormLink
-		>
-	</div>
+        <FormLink to="/settings/custom-katex-macro" class="_formBlock"
+            ><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
+            >{{ i18n.ts.customKaTeXMacro }}</FormLink
+        >
+    </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, computed, ref, watch } from "vue";
-import { $i } from "@/account";
+import { computed, ref, watch } from "vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormSelect from "@/components/form/select.vue";
 import FormRadios from "@/components/form/radios.vue";
@@ -259,136 +252,132 @@ const fontSize = ref(localStorage.getItem("fontSize"));
 const useSystemFont = ref(localStorage.getItem("useSystemFont") != null);
 
 async function reloadAsk() {
-	const { canceled } = await os.confirm({
-		type: "info",
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
+    const { canceled } = await os.confirm({
+        type: "info",
+        text: i18n.ts.reloadToApplySetting,
+    });
+    if (canceled) return;
 
-	unisonReload();
+    unisonReload();
 }
 
 const overridedDeviceKind = computed(
-	defaultStore.makeGetterSetter("overridedDeviceKind")
+    defaultStore.makeGetterSetter("overridedDeviceKind")
 );
 const serverDisconnectedBehavior = computed(
-	defaultStore.makeGetterSetter("serverDisconnectedBehavior")
+    defaultStore.makeGetterSetter("serverDisconnectedBehavior")
 );
 const reduceAnimation = computed(
-	defaultStore.makeGetterSetter(
-		"animation",
-		(v) => !v,
-		(v) => !v
-	)
+    defaultStore.makeGetterSetter(
+        "animation",
+        (v) => !v,
+        (v) => !v
+    )
 );
 const useBlurEffectForModal = computed(
-	defaultStore.makeGetterSetter("useBlurEffectForModal")
+    defaultStore.makeGetterSetter("useBlurEffectForModal")
 );
 const useBlurEffect = computed(defaultStore.makeGetterSetter("useBlurEffect"));
 const showGapBetweenNotesInTimeline = computed(
-	defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
+    defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
 );
 const showAds = computed(defaultStore.makeGetterSetter("showAds"));
 const advancedMfm = computed(defaultStore.makeGetterSetter("advancedMfm"));
 const autoplayMfm = computed(
-	defaultStore.makeGetterSetter(
-		"animatedMfm",
-		(v) => !v,
-		(v) => !v
-	)
+    defaultStore.makeGetterSetter(
+        "animatedMfm",
+        (v) => !v,
+        (v) => !v
+    )
 );
 const useOsNativeEmojis = computed(
-	defaultStore.makeGetterSetter("useOsNativeEmojis")
+    defaultStore.makeGetterSetter("useOsNativeEmojis")
 );
 const disableDrawer = computed(defaultStore.makeGetterSetter("disableDrawer"));
 const disableShowingAnimatedImages = computed(
-	defaultStore.makeGetterSetter("disableShowingAnimatedImages")
+    defaultStore.makeGetterSetter("disableShowingAnimatedImages")
 );
 const loadRawImages = computed(defaultStore.makeGetterSetter("loadRawImages"));
 const imageNewTab = computed(defaultStore.makeGetterSetter("imageNewTab"));
 const nsfw = computed(defaultStore.makeGetterSetter("nsfw"));
 const disablePagesScript = computed(
-	defaultStore.makeGetterSetter("disablePagesScript")
+    defaultStore.makeGetterSetter("disablePagesScript")
 );
 const expandOnNoteClick = computed(
-	defaultStore.makeGetterSetter("expandOnNoteClick")
+    defaultStore.makeGetterSetter("expandOnNoteClick")
 );
 const showFixedPostForm = computed(
-	defaultStore.makeGetterSetter("showFixedPostForm")
+    defaultStore.makeGetterSetter("showFixedPostForm")
 );
 const numberOfPageCache = computed(
-	defaultStore.makeGetterSetter("numberOfPageCache")
+    defaultStore.makeGetterSetter("numberOfPageCache")
 );
 const instanceTicker = computed(
-	defaultStore.makeGetterSetter("instanceTicker")
+    defaultStore.makeGetterSetter("instanceTicker")
 );
 const enableInfiniteScroll = computed(
-	defaultStore.makeGetterSetter("enableInfiniteScroll")
+    defaultStore.makeGetterSetter("enableInfiniteScroll")
 );
 const enterSendsMessage = computed(
-	defaultStore.makeGetterSetter("enterSendsMessage")
+    defaultStore.makeGetterSetter("enterSendsMessage")
 );
 const useReactionPickerForContextMenu = computed(
-	defaultStore.makeGetterSetter("useReactionPickerForContextMenu")
+    defaultStore.makeGetterSetter("useReactionPickerForContextMenu")
 );
 const seperateRenoteQuote = computed(
-	defaultStore.makeGetterSetter("seperateRenoteQuote")
+    defaultStore.makeGetterSetter("seperateRenoteQuote")
 );
 const squareAvatars = computed(defaultStore.makeGetterSetter("squareAvatars"));
 const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates"));
 const swipeOnDesktop = computed(
-	defaultStore.makeGetterSetter("swipeOnDesktop")
-);
-const showAdminUpdates = computed(
-	defaultStore.makeGetterSetter("showAdminUpdates")
+    defaultStore.makeGetterSetter("swipeOnDesktop")
 );
 const showTimelineReplies = computed(
-	defaultStore.makeGetterSetter("showTimelineReplies")
+    defaultStore.makeGetterSetter("showTimelineReplies")
 );
 
 watch(lang, () => {
-	localStorage.setItem("lang", lang.value as string);
-	localStorage.removeItem("locale");
+    localStorage.setItem("lang", lang.value as string);
+    localStorage.removeItem("locale");
 });
 
 watch(fontSize, () => {
-	if (fontSize.value == null) {
-		localStorage.removeItem("fontSize");
-	} else {
-		localStorage.setItem("fontSize", fontSize.value);
-	}
+    if (fontSize.value == null) {
+        localStorage.removeItem("fontSize");
+    } else {
+        localStorage.setItem("fontSize", fontSize.value);
+    }
 });
 
 watch(useSystemFont, () => {
-	if (useSystemFont.value) {
-		localStorage.setItem("useSystemFont", "t");
-	} else {
-		localStorage.removeItem("useSystemFont");
-	}
+    if (useSystemFont.value) {
+        localStorage.setItem("useSystemFont", "t");
+    } else {
+        localStorage.removeItem("useSystemFont");
+    }
 });
 
 watch(
-	[
-		lang,
-		fontSize,
-		useSystemFont,
-		enableInfiniteScroll,
-		squareAvatars,
-		showGapBetweenNotesInTimeline,
-		instanceTicker,
-		overridedDeviceKind,
-		showAds,
-		showUpdates,
-		swipeOnDesktop,
-		seperateRenoteQuote,
-		showAdminUpdates,
-		advancedMfm,
-		autoplayMfm,
-		expandOnNoteClick,
-	],
-	async () => {
-		await reloadAsk();
-	}
+    [
+        lang,
+        fontSize,
+        useSystemFont,
+        enableInfiniteScroll,
+        squareAvatars,
+        showGapBetweenNotesInTimeline,
+        instanceTicker,
+        overridedDeviceKind,
+        showAds,
+        showUpdates,
+        swipeOnDesktop,
+        seperateRenoteQuote,
+        advancedMfm,
+        autoplayMfm,
+        expandOnNoteClick,
+    ],
+    async () => {
+        await reloadAsk();
+    }
 );
 
 const headerActions = $computed(() => []);
@@ -396,7 +385,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: i18n.ts.general,
-	icon: "ph-gear-six ph-bold ph-lg",
+    title: i18n.ts.general,
+    icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
diff --git a/fe_calckey/frontend/client/src/pages/settings/preferences-backups.vue b/fe_calckey/frontend/client/src/pages/settings/preferences-backups.vue
index 313024d..b891400 100644
--- a/fe_calckey/frontend/client/src/pages/settings/preferences-backups.vue
+++ b/fe_calckey/frontend/client/src/pages/settings/preferences-backups.vue
@@ -1,58 +1,58 @@
 <template>
-	<div class="_formRoot">
-		<div :class="$style.buttons">
-			<MkButton inline primary @click="saveNew">{{
-				ts._preferencesBackups.saveNew
-			}}</MkButton>
-			<MkButton inline @click="loadFile">{{
-				ts._preferencesBackups.loadFile
-			}}</MkButton>
-		</div>
+    <div class="_formRoot">
+        <div :class="$style.buttons">
+            <MkButton inline primary @click="saveNew">{{
+                ts._preferencesBackups.saveNew
+            }}</MkButton>
+            <MkButton inline @click="loadFile">{{
+                ts._preferencesBackups.loadFile
+            }}</MkButton>
+        </div>
 
-		<FormSection>
-			<template #label>{{ ts._preferencesBackups.list }}</template>
-			<template v-if="profiles && Object.keys(profiles).length > 0">
-				<div
-					v-for="(profile, id) in profiles"
-					:key="id"
-					class="_formBlock _panel"
-					:class="$style.profile"
-					@click="($event) => menu($event, id)"
-					@contextmenu.prevent.stop="($event) => menu($event, id)"
-				>
-					<div :class="$style.profileName">{{ profile.name }}</div>
-					<div :class="$style.profileTime">
-						{{
-							t("_preferencesBackups.createdAt", {
-								date: new Date(
-									profile.createdAt
-								).toLocaleDateString(),
-								time: new Date(
-									profile.createdAt
-								).toLocaleTimeString(),
-							})
-						}}
-					</div>
-					<div v-if="profile.updatedAt" :class="$style.profileTime">
-						{{
-							t("_preferencesBackups.updatedAt", {
-								date: new Date(
-									profile.updatedAt
-								).toLocaleDateString(),
-								time: new Date(
-									profile.updatedAt
-								).toLocaleTimeString(),
-							})
-						}}
-					</div>
-				</div>
-			</template>
-			<div v-else-if="profiles">
-				<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
-			</div>
-			<MkLoading v-else />
-		</FormSection>
-	</div>
+        <FormSection>
+            <template #label>{{ ts._preferencesBackups.list }}</template>
+            <template v-if="profiles && Object.keys(profiles).length > 0">
+                <div
+                    v-for="(profile, id) in profiles"
+                    :key="id"
+                    class="_formBlock _panel"
+                    :class="$style.profile"
+                    @click="($event) => menu($event, id)"
+                    @contextmenu.prevent.stop="($event) => menu($event, id)"
+                >
+                    <div :class="$style.profileName">{{ profile.name }}</div>
+                    <div :class="$style.profileTime">
+                        {{
+                            t("_preferencesBackups.createdAt", {
+                                date: new Date(
+                                    profile.createdAt
+                                ).toLocaleDateString(),
+                                time: new Date(
+                                    profile.createdAt
+                                ).toLocaleTimeString(),
+                            })
+                        }}
+                    </div>
+                    <div v-if="profile.updatedAt" :class="$style.profileTime">
+                        {{
+                            t("_preferencesBackups.updatedAt", {
+                                date: new Date(
+                                    profile.updatedAt
+                                ).toLocaleDateString(),
+                                time: new Date(
+                                    profile.updatedAt
+                                ).toLocaleTimeString(),
+                            })
+                        }}
+                    </div>
+                </div>
+            </template>
+            <div v-else-if="profiles">
+                <MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+            </div>
+            <MkLoading v-else />
+        </FormSection>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -67,95 +67,95 @@ import { unisonReload } from "@/scripts/unison-reload";
 import { stream } from "@/stream";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
-import { version, host } from "@/config";
+import { host, version } from "@/config";
 import { definePageMetadata } from "@/scripts/page-metadata";
+
 const { t, ts } = i18n;
 
 useCssModule();
 
 const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [
-	"menu",
-	"visibility",
-	"localOnly",
-	"statusbars",
-	"widgets",
-	"tl",
-	"overridedDeviceKind",
-	"serverDisconnectedBehavior",
-	"nsfw",
-	"showAds",
-	"animation",
-	"animatedMfm",
-	"loadRawImages",
-	"imageNewTab",
-	"disableShowingAnimatedImages",
-	"disablePagesScript",
-	"enterSendsMessage",
-	"useOsNativeEmojis",
-	"disableDrawer",
-	"useBlurEffectForModal",
-	"useBlurEffect",
-	"showFixedPostForm",
-	"enableInfiniteScroll",
-	"useReactionPickerForContextMenu",
-	"showGapBetweenNotesInTimeline",
-	"instanceTicker",
-	"reactionPickerSize",
-	"reactionPickerWidth",
-	"reactionPickerHeight",
-	"reactionPickerUseDrawerForMobile",
-	"defaultSideView",
-	"menuDisplay",
-	"reportError",
-	"squareAvatars",
-	"numberOfPageCache",
-	"showUpdates",
-	"swipeOnDesktop",
-	"showAdminUpdates",
-	"enableCustomKaTeXMacro",
-	"enableEmojiReactions",
-	"showEmojisInReactionNotifications",
-	"showTimelineReplies",
+    "menu",
+    "visibility",
+    "localOnly",
+    "statusbars",
+    "widgets",
+    "tl",
+    "overridedDeviceKind",
+    "serverDisconnectedBehavior",
+    "nsfw",
+    "showAds",
+    "animation",
+    "animatedMfm",
+    "loadRawImages",
+    "imageNewTab",
+    "disableShowingAnimatedImages",
+    "disablePagesScript",
+    "enterSendsMessage",
+    "useOsNativeEmojis",
+    "disableDrawer",
+    "useBlurEffectForModal",
+    "useBlurEffect",
+    "showFixedPostForm",
+    "enableInfiniteScroll",
+    "useReactionPickerForContextMenu",
+    "showGapBetweenNotesInTimeline",
+    "instanceTicker",
+    "reactionPickerSize",
+    "reactionPickerWidth",
+    "reactionPickerHeight",
+    "reactionPickerUseDrawerForMobile",
+    "defaultSideView",
+    "menuDisplay",
+    "reportError",
+    "squareAvatars",
+    "numberOfPageCache",
+    "showUpdates",
+    "swipeOnDesktop",
+    "enableCustomKaTeXMacro",
+    "enableEmojiReactions",
+    "showEmojisInReactionNotifications",
+    "showTimelineReplies",
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
-	"lightTheme",
-	"darkTheme",
-	"syncDeviceDarkMode",
-	"plugins",
-	"mediaVolume",
-	"sound_masterVolume",
-	"sound_note",
-	"sound_noteMy",
-	"sound_notification",
-	"sound_chat",
-	"sound_chatBg",
-	"sound_antenna",
-	"sound_channel",
+    "lightTheme",
+    "darkTheme",
+    "syncDeviceDarkMode",
+    "plugins",
+    "mediaVolume",
+    "sound_masterVolume",
+    "sound_note",
+    "sound_noteMy",
+    "sound_notification",
+    "sound_chat",
+    "sound_chatBg",
+    "sound_antenna",
+    "sound_channel",
 ];
 
 const scope = ["clientPreferencesProfiles"];
 
 const profileProps = [
-	"name",
-	"createdAt",
-	"updatedAt",
-	"misskeyVersion",
-	"settings",
+    "name",
+    "createdAt",
+    "updatedAt",
+    "misskeyVersion",
+    "settings",
 ];
 
 type Profile = {
-	name: string;
-	createdAt: string;
-	updatedAt: string | null;
-	misskeyVersion: string;
-	host: string;
-	settings: {
-		hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
-		cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
-		fontSize: string | null;
-		useSystemFont: "t" | null;
-		wallpaper: string | null;
-	};
+    name: string;
+    createdAt: string;
+    updatedAt: string | null;
+    misskeyVersion: string;
+    host: string;
+    settings: {
+        hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
+        cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
+        fontSize: string | null;
+        useSystemFont: "t" | null;
+        wallpaper: string | null;
+    };
 };
 
 const connection = $i && stream.useChannel("main");
@@ -163,375 +163,375 @@ const connection = $i && stream.useChannel("main");
 let profiles = $ref<Record<string, Profile> | null>(null);
 
 os.api("i/registry/get-all", { scope }).then((res) => {
-	profiles = res || {};
+    profiles = res || {};
 });
 
 function isObject(value: unknown): value is Record<string, unknown> {
-	return value != null && typeof value === "object" && !Array.isArray(value);
+    return value != null && typeof value === "object" && !Array.isArray(value);
 }
 
 function validate(profile: unknown): void {
-	if (!isObject(profile)) throw new Error("not an object");
+    if (!isObject(profile)) throw new Error("not an object");
 
-	// Check if unnecessary properties exist
-	if (
-		Object.keys(profile).some(
-			(key) => !profileProps.includes(key) && key !== "host"
-		)
-	)
-		throw new Error("Unnecessary properties exist");
+    // Check if unnecessary properties exist
+    if (
+        Object.keys(profile).some(
+            (key) => !profileProps.includes(key) && key !== "host"
+        )
+    )
+        throw new Error("Unnecessary properties exist");
 
-	if (!profile.name) throw new Error("Missing required prop: name");
-	if (!profile.misskeyVersion)
-		throw new Error("Missing required prop: misskeyVersion");
+    if (!profile.name) throw new Error("Missing required prop: name");
+    if (!profile.misskeyVersion)
+        throw new Error("Missing required prop: misskeyVersion");
 
-	// Check if createdAt and updatedAt is Date
-	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
-	if (
-		!profile.createdAt ||
-		Number.isNaN(new Date(profile.createdAt).getTime())
-	)
-		throw new Error("createdAt is falsy or not Date");
-	if (profile.updatedAt) {
-		if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
-			throw new Error("updatedAt is not Date");
-		}
-	} else if (profile.updatedAt !== null) {
-		throw new Error("updatedAt is not null");
-	}
+    // Check if createdAt and updatedAt is Date
+    // https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
+    if (
+        !profile.createdAt ||
+        Number.isNaN(new Date(profile.createdAt).getTime())
+    )
+        throw new Error("createdAt is falsy or not Date");
+    if (profile.updatedAt) {
+        if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
+            throw new Error("updatedAt is not Date");
+        }
+    } else if (profile.updatedAt !== null) {
+        throw new Error("updatedAt is not null");
+    }
 
-	if (!profile.settings) throw new Error("Missing required prop: settings");
-	if (!isObject(profile.settings)) throw new Error("Invalid prop: settings");
+    if (!profile.settings) throw new Error("Missing required prop: settings");
+    if (!isObject(profile.settings)) throw new Error("Invalid prop: settings");
 }
 
 function getSettings(): Profile["settings"] {
-	const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
-	for (const key of defaultStoreSaveKeys) {
-		hot[key] = defaultStore.state[key];
-	}
+    const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
+    for (const key of defaultStoreSaveKeys) {
+        hot[key] = defaultStore.state[key];
+    }
 
-	const cold = {} as Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
-	for (const key of coldDeviceStorageSaveKeys) {
-		cold[key] = ColdDeviceStorage.get(key);
-	}
+    const cold = {} as Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
+    for (const key of coldDeviceStorageSaveKeys) {
+        cold[key] = ColdDeviceStorage.get(key);
+    }
 
-	return {
-		hot,
-		cold,
-		fontSize: localStorage.getItem("fontSize"),
-		useSystemFont: localStorage.getItem("useSystemFont") as "t" | null,
-		wallpaper: localStorage.getItem("wallpaper"),
-	};
+    return {
+        hot,
+        cold,
+        fontSize: localStorage.getItem("fontSize"),
+        useSystemFont: localStorage.getItem("useSystemFont") as "t" | null,
+        wallpaper: localStorage.getItem("wallpaper"),
+    };
 }
 
 async function saveNew(): Promise<void> {
-	if (!profiles) return;
+    if (!profiles) return;
 
-	const { canceled, result: name } = await os.inputText({
-		title: ts._preferencesBackups.inputName,
-	});
-	if (canceled) return;
+    const { canceled, result: name } = await os.inputText({
+        title: ts._preferencesBackups.inputName,
+    });
+    if (canceled) return;
 
-	if (Object.values(profiles).some((x) => x.name === name)) {
-		return os.alert({
-			title: ts._preferencesBackups.cannotSave,
-			text: t("_preferencesBackups.nameAlreadyExists", { name }),
-		});
-	}
+    if (Object.values(profiles).some((x) => x.name === name)) {
+        return os.alert({
+            title: ts._preferencesBackups.cannotSave,
+            text: t("_preferencesBackups.nameAlreadyExists", { name }),
+        });
+    }
 
-	const id = uuid();
-	const profile: Profile = {
-		name,
-		createdAt: new Date().toISOString(),
-		updatedAt: null,
-		misskeyVersion: version,
-		host,
-		settings: getSettings(),
-	};
-	await os.apiWithDialog("i/registry/set", {
-		scope,
-		key: id,
-		value: profile,
-	});
+    const id = uuid();
+    const profile: Profile = {
+        name,
+        createdAt: new Date().toISOString(),
+        updatedAt: null,
+        misskeyVersion: version,
+        host,
+        settings: getSettings(),
+    };
+    await os.apiWithDialog("i/registry/set", {
+        scope,
+        key: id,
+        value: profile,
+    });
 }
 
 function loadFile(): void {
-	const input = document.createElement("input");
-	input.type = "file";
-	input.multiple = false;
-	input.onchange = async () => {
-		if (!profiles) return;
-		if (!input.files || input.files.length === 0) return;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = false;
+    input.onchange = async () => {
+        if (!profiles) return;
+        if (!input.files || input.files.length === 0) return;
 
-		const file = input.files[0];
+        const file = input.files[0];
 
-		if (file.type !== "application/json") {
-			return os.alert({
-				type: "error",
-				title: ts._preferencesBackups.cannotLoad,
-				text: ts._preferencesBackups.invalidFile,
-			});
-		}
+        if (file.type !== "application/json") {
+            return os.alert({
+                type: "error",
+                title: ts._preferencesBackups.cannotLoad,
+                text: ts._preferencesBackups.invalidFile,
+            });
+        }
 
-		let profile: Profile;
-		try {
-			profile = JSON.parse(await file.text()) as unknown as Profile;
-			validate(profile);
-		} catch (err) {
-			return os.alert({
-				type: "error",
-				title: ts._preferencesBackups.cannotLoad,
-				text: err?.message,
-			});
-		}
+        let profile: Profile;
+        try {
+            profile = JSON.parse(await file.text()) as unknown as Profile;
+            validate(profile);
+        } catch (err) {
+            return os.alert({
+                type: "error",
+                title: ts._preferencesBackups.cannotLoad,
+                text: err?.message,
+            });
+        }
 
-		const id = uuid();
-		await os.apiWithDialog("i/registry/set", {
-			scope,
-			key: id,
-			value: profile,
-		});
+        const id = uuid();
+        await os.apiWithDialog("i/registry/set", {
+            scope,
+            key: id,
+            value: profile,
+        });
 
-		// 一応廃棄
-		(window as any).__misskey_input_ref__ = null;
-	};
+        // 一応廃棄
+        (window as any).__misskey_input_ref__ = null;
+    };
 
-	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
-	// iOS Safari で正常に動かす為のおまじない
-	(window as any).__misskey_input_ref__ = input;
+    // https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+    // iOS Safari で正常に動かす為のおまじない
+    (window as any).__misskey_input_ref__ = input;
 
-	input.click();
+    input.click();
 }
 
 async function applyProfile(id: string): Promise<void> {
-	if (!profiles) return;
+    if (!profiles) return;
 
-	const profile = profiles[id];
+    const profile = profiles[id];
 
-	const { canceled: cancel1 } = await os.confirm({
-		type: "warning",
-		title: ts._preferencesBackups.apply,
-		text: t("_preferencesBackups.applyConfirm", { name: profile.name }),
-	});
-	if (cancel1) return;
+    const { canceled: cancel1 } = await os.confirm({
+        type: "warning",
+        title: ts._preferencesBackups.apply,
+        text: t("_preferencesBackups.applyConfirm", { name: profile.name }),
+    });
+    if (cancel1) return;
 
-	// TODO: バージョン or ホストが違ったらさらに警告を表示
+    // TODO: バージョン or ホストが違ったらさらに警告を表示
 
-	const settings = profile.settings;
+    const settings = profile.settings;
 
-	// defaultStore
-	for (const key of defaultStoreSaveKeys) {
-		if (settings.hot[key] !== undefined) {
-			defaultStore.set(key, settings.hot[key]);
-		}
-	}
+    // defaultStore
+    for (const key of defaultStoreSaveKeys) {
+        if (settings.hot[key] !== undefined) {
+            defaultStore.set(key, settings.hot[key]);
+        }
+    }
 
-	// coldDeviceStorage
-	for (const key of coldDeviceStorageSaveKeys) {
-		if (settings.cold[key] !== undefined) {
-			ColdDeviceStorage.set(key, settings.cold[key]);
-		}
-	}
+    // coldDeviceStorage
+    for (const key of coldDeviceStorageSaveKeys) {
+        if (settings.cold[key] !== undefined) {
+            ColdDeviceStorage.set(key, settings.cold[key]);
+        }
+    }
 
-	// fontSize
-	if (settings.fontSize) {
-		localStorage.setItem("fontSize", settings.fontSize);
-	} else {
-		localStorage.removeItem("fontSize");
-	}
+    // fontSize
+    if (settings.fontSize) {
+        localStorage.setItem("fontSize", settings.fontSize);
+    } else {
+        localStorage.removeItem("fontSize");
+    }
 
-	// useSystemFont
-	if (settings.useSystemFont) {
-		localStorage.setItem("useSystemFont", settings.useSystemFont);
-	} else {
-		localStorage.removeItem("useSystemFont");
-	}
+    // useSystemFont
+    if (settings.useSystemFont) {
+        localStorage.setItem("useSystemFont", settings.useSystemFont);
+    } else {
+        localStorage.removeItem("useSystemFont");
+    }
 
-	// wallpaper
-	if (settings.wallpaper != null) {
-		localStorage.setItem("wallpaper", settings.wallpaper);
-	} else {
-		localStorage.removeItem("wallpaper");
-	}
+    // wallpaper
+    if (settings.wallpaper != null) {
+        localStorage.setItem("wallpaper", settings.wallpaper);
+    } else {
+        localStorage.removeItem("wallpaper");
+    }
 
-	const { canceled: cancel2 } = await os.confirm({
-		type: "info",
-		text: ts.reloadToApplySetting,
-	});
-	if (cancel2) return;
+    const { canceled: cancel2 } = await os.confirm({
+        type: "info",
+        text: ts.reloadToApplySetting,
+    });
+    if (cancel2) return;
 
-	unisonReload();
+    unisonReload();
 }
 
 async function deleteProfile(id: string): Promise<void> {
-	if (!profiles) return;
+    if (!profiles) return;
 
-	const { canceled } = await os.confirm({
-		type: "info",
-		title: ts.delete,
-		text: t("deleteAreYouSure", { x: profiles[id].name }),
-	});
-	if (canceled) return;
+    const { canceled } = await os.confirm({
+        type: "info",
+        title: ts.delete,
+        text: t("deleteAreYouSure", { x: profiles[id].name }),
+    });
+    if (canceled) return;
 
-	await os.apiWithDialog("i/registry/remove", { scope, key: id });
-	delete profiles[id];
+    await os.apiWithDialog("i/registry/remove", { scope, key: id });
+    delete profiles[id];
 }
 
 async function save(id: string): Promise<void> {
-	if (!profiles) return;
+    if (!profiles) return;
 
-	const { name, createdAt } = profiles[id];
+    const { name, createdAt } = profiles[id];
 
-	const { canceled } = await os.confirm({
-		type: "info",
-		title: ts._preferencesBackups.save,
-		text: t("_preferencesBackups.saveConfirm", { name }),
-	});
-	if (canceled) return;
+    const { canceled } = await os.confirm({
+        type: "info",
+        title: ts._preferencesBackups.save,
+        text: t("_preferencesBackups.saveConfirm", { name }),
+    });
+    if (canceled) return;
 
-	const profile: Profile = {
-		name,
-		createdAt,
-		updatedAt: new Date().toISOString(),
-		misskeyVersion: version,
-		host,
-		settings: getSettings(),
-	};
-	await os.apiWithDialog("i/registry/set", {
-		scope,
-		key: id,
-		value: profile,
-	});
+    const profile: Profile = {
+        name,
+        createdAt,
+        updatedAt: new Date().toISOString(),
+        misskeyVersion: version,
+        host,
+        settings: getSettings(),
+    };
+    await os.apiWithDialog("i/registry/set", {
+        scope,
+        key: id,
+        value: profile,
+    });
 }
 
 async function rename(id: string): Promise<void> {
-	if (!profiles) return;
+    if (!profiles) return;
 
-	const { canceled: cancel1, result: name } = await os.inputText({
-		title: ts._preferencesBackups.inputName,
-	});
-	if (cancel1 || profiles[id].name === name) return;
+    const { canceled: cancel1, result: name } = await os.inputText({
+        title: ts._preferencesBackups.inputName,
+    });
+    if (cancel1 || profiles[id].name === name) return;
 
-	if (Object.values(profiles).some((x) => x.name === name)) {
-		return os.alert({
-			title: ts._preferencesBackups.cannotSave,
-			text: t("_preferencesBackups.nameAlreadyExists", { name }),
-		});
-	}
+    if (Object.values(profiles).some((x) => x.name === name)) {
+        return os.alert({
+            title: ts._preferencesBackups.cannotSave,
+            text: t("_preferencesBackups.nameAlreadyExists", { name }),
+        });
+    }
 
-	const registry = Object.assign({}, { ...profiles[id] });
+    const registry = Object.assign({}, { ...profiles[id] });
 
-	const { canceled: cancel2 } = await os.confirm({
-		type: "info",
-		title: ts._preferencesBackups.rename,
-		text: t("_preferencesBackups.renameConfirm", {
-			old: registry.name,
-			new: name,
-		}),
-	});
-	if (cancel2) return;
+    const { canceled: cancel2 } = await os.confirm({
+        type: "info",
+        title: ts._preferencesBackups.rename,
+        text: t("_preferencesBackups.renameConfirm", {
+            old: registry.name,
+            new: name,
+        }),
+    });
+    if (cancel2) return;
 
-	registry.name = name;
-	await os.apiWithDialog("i/registry/set", {
-		scope,
-		key: id,
-		value: registry,
-	});
+    registry.name = name;
+    await os.apiWithDialog("i/registry/set", {
+        scope,
+        key: id,
+        value: registry,
+    });
 }
 
 function menu(ev: MouseEvent, profileId: string) {
-	if (!profiles) return;
+    if (!profiles) return;
 
-	return os.popupMenu(
-		[
-			{
-				text: ts._preferencesBackups.apply,
-				icon: "ph-caret-circle-down ph-bold ph-lg",
-				action: () => applyProfile(profileId),
-			},
-			{
-				type: "a",
-				text: ts.download,
-				icon: "ph-download-simple ph-bold ph-lg",
-				href: URL.createObjectURL(
-					new Blob([JSON.stringify(profiles[profileId], null, 2)], {
-						type: "application/json",
-					})
-				),
-				download: `${profiles[profileId].name}.json`,
-			},
-			null,
-			{
-				text: ts.rename,
-				icon: "ph-cursor-text ph-bold ph-lg",
-				action: () => rename(profileId),
-			},
-			{
-				text: ts._preferencesBackups.save,
-				icon: "ph-floppy-disk ph-bold ph-lg",
-				action: () => save(profileId),
-			},
-			null,
-			{
-				text: ts._preferencesBackups.delete,
-				icon: "ph-trash ph-bold ph-lg",
-				action: () => deleteProfile(profileId),
-				danger: true,
-			},
-		],
-		ev.currentTarget ?? ev.target
-	);
+    return os.popupMenu(
+        [
+            {
+                text: ts._preferencesBackups.apply,
+                icon: "ph-caret-circle-down ph-bold ph-lg",
+                action: () => applyProfile(profileId),
+            },
+            {
+                type: "a",
+                text: ts.download,
+                icon: "ph-download-simple ph-bold ph-lg",
+                href: URL.createObjectURL(
+                    new Blob([JSON.stringify(profiles[profileId], null, 2)], {
+                        type: "application/json",
+                    })
+                ),
+                download: `${profiles[profileId].name}.json`,
+            },
+            null,
+            {
+                text: ts.rename,
+                icon: "ph-cursor-text ph-bold ph-lg",
+                action: () => rename(profileId),
+            },
+            {
+                text: ts._preferencesBackups.save,
+                icon: "ph-floppy-disk ph-bold ph-lg",
+                action: () => save(profileId),
+            },
+            null,
+            {
+                text: ts._preferencesBackups.delete,
+                icon: "ph-trash ph-bold ph-lg",
+                action: () => deleteProfile(profileId),
+                danger: true,
+            },
+        ],
+        ev.currentTarget ?? ev.target
+    );
 }
 
 onMounted(() => {
-	// streamingのuser storage updateイベントを監視して更新
-	connection?.on(
-		"registryUpdated",
-		({ scope: recievedScope, key, value }) => {
-			if (
-				!recievedScope ||
-				recievedScope.length !== scope.length ||
-				recievedScope[0] !== scope[0]
-			)
-				return;
-			if (!profiles) return;
+    // streamingのuser storage updateイベントを監視して更新
+    connection?.on(
+        "registryUpdated",
+        ({ scope: recievedScope, key, value }) => {
+            if (
+                !recievedScope ||
+                recievedScope.length !== scope.length ||
+                recievedScope[0] !== scope[0]
+            )
+                return;
+            if (!profiles) return;
 
-			profiles[key] = value;
-		}
-	);
+            profiles[key] = value;
+        }
+    );
 });
 
 onUnmounted(() => {
-	connection?.off("registryUpdated");
+    connection?.off("registryUpdated");
 });
 
 definePageMetadata(
-	computed(() => ({
-		title: ts.preferencesBackups,
-		icon: "ph-floppy-disk ph-bold ph-lg",
-		bg: "var(--bg)",
-	}))
+    computed(() => ({
+        title: ts.preferencesBackups,
+        icon: "ph-floppy-disk ph-bold ph-lg",
+        bg: "var(--bg)",
+    }))
 );
 </script>
 
 <style lang="scss" module>
 .buttons {
-	display: flex;
-	gap: var(--margin);
-	flex-wrap: wrap;
+    display: flex;
+    gap: var(--margin);
+    flex-wrap: wrap;
 }
 
 .profile {
-	padding: 20px;
-	cursor: pointer;
+    padding: 20px;
+    cursor: pointer;
 
-	&Name {
-		font-weight: 700;
-	}
+    &Name {
+        font-weight: 700;
+    }
 
-	&Time {
-		font-size: 0.85em;
-		opacity: 0.7;
-	}
+    &Time {
+        font-size: 0.85em;
+        opacity: 0.7;
+    }
 }
 </style>
diff --git a/fe_calckey/frontend/client/src/store.ts b/fe_calckey/frontend/client/src/store.ts
index d0b23d4..c8ba03f 100644
--- a/fe_calckey/frontend/client/src/store.ts
+++ b/fe_calckey/frontend/client/src/store.ts
@@ -1,6 +1,10 @@
 import { markRaw, ref } from "vue";
 import { Storage } from "./pizzax";
-import { Theme } from "./scripts/theme";
+/**
+ * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
+ */
+import lightTheme from "@/themes/l-rosepinedawn.json5";
+import darkTheme from "@/themes/d-rosepine.json5";
 
 export const postFormActions = [];
 export const userActions = [];
@@ -9,334 +13,330 @@ export const noteViewInterruptors = [];
 export const notePostInterruptors = [];
 
 const menuOptions = [
-	"notifications",
-	"followRequests",
-	"explore",
-	"favorites",
-	"search",
+    "notifications",
+    "followRequests",
+    "explore",
+    "favorites",
+    "search",
 ];
 
 // TODO: それぞれいちいちwhereとかdefaultというキーを付けなきゃいけないの冗長なのでなんとかする(ただ型定義が面倒になりそう)
 //       あと、現行の定義の仕方なら「whereが何であるかに関わらずキー名の重複不可」という制約を付けられるメリットもあるからそのメリットを引き継ぐ方法も考えないといけない
 export const defaultStore = markRaw(
-	new Storage("base", {
-		tutorial: {
-			where: "account",
-			default: 0,
-		},
-		tlHomeHintClosed: {
-			where: "device",
-			default: false,
-		},
-		tlLocalHintClosed: {
-			where: "device",
-			default: false,
-		},
-		tlRecommendedHintClosed: {
-			where: "device",
-			default: false,
-		},
-		tlSocialHintClosed: {
-			where: "device",
-			default: false,
-		},
-		tlGlobalHintClosed: {
-			where: "device",
-			default: false,
-		},
-		keepCw: {
-			where: "account",
-			default: true,
-		},
-		showFullAcct: {
-			where: "account",
-			default: false,
-		},
-		rememberNoteVisibility: {
-			where: "account",
-			default: false,
-		},
-		defaultNoteVisibility: {
-			where: "account",
-			default: "public",
-		},
-		defaultNoteLocalOnly: {
-			where: "account",
-			default: false,
-		},
-		uploadFolder: {
-			where: "account",
-			default: null as string | null,
-		},
-		pastedFileName: {
-			where: "account",
-			default: "yyyy-MM-dd HH-mm-ss [{{number}}]",
-		},
-		keepOriginalUploading: {
-			where: "account",
-			default: false,
-		},
-		memo: {
-			where: "account",
-			default: null,
-		},
-		reactions: {
-			where: "account",
-			default: [
-				"⭐",
-				"❤️",
-				"😆",
-				"🤔",
-				"😮",
-				"🎉",
-				"💢",
-				"😥",
-				"😇",
-				"🦋",
-				"🦊",
-			],
-		},
-		mutedWords: {
-			where: "account",
-			default: [],
-		},
-		mutedAds: {
-			where: "account",
-			default: [] as string[],
-		},
-		showAds: {
-			where: "account",
-			default: true,
-		},
-		menu: {
-			where: "deviceAccount",
-			default: menuOptions,
-		},
-		visibility: {
-			where: "deviceAccount",
-			default: "public" as "public" | "home" | "followers" | "specified",
-		},
-		localOnly: {
-			where: "deviceAccount",
-			default: false,
-		},
-		statusbars: {
-			where: "deviceAccount",
-			default: [] as {
-				name: string;
-				id: string;
-				type: string;
-				size: "verySmall" | "small" | "medium" | "large" | "veryLarge";
-				black: boolean;
-				props: Record<string, any>;
-			}[],
-		},
-		widgets: {
-			where: "deviceAccount",
-			default: [] as {
-				name: string;
-				id: string;
-				place: string | null;
-				data: Record<string, any>;
-			}[],
-		},
-		tl: {
-			where: "deviceAccount",
-			default: {
-				src: "home" as "home" | "local" | "social" | "global",
-				arg: null,
-			},
-		},
+    new Storage("base", {
+        tutorial: {
+            where: "account",
+            default: 0,
+        },
+        tlHomeHintClosed: {
+            where: "device",
+            default: false,
+        },
+        tlLocalHintClosed: {
+            where: "device",
+            default: false,
+        },
+        tlRecommendedHintClosed: {
+            where: "device",
+            default: false,
+        },
+        tlSocialHintClosed: {
+            where: "device",
+            default: false,
+        },
+        tlGlobalHintClosed: {
+            where: "device",
+            default: false,
+        },
+        keepCw: {
+            where: "account",
+            default: true,
+        },
+        showFullAcct: {
+            where: "account",
+            default: false,
+        },
+        rememberNoteVisibility: {
+            where: "account",
+            default: false,
+        },
+        defaultNoteVisibility: {
+            where: "account",
+            default: "public",
+        },
+        defaultNoteLocalOnly: {
+            where: "account",
+            default: false,
+        },
+        uploadFolder: {
+            where: "account",
+            default: null as string | null,
+        },
+        pastedFileName: {
+            where: "account",
+            default: "yyyy-MM-dd HH-mm-ss [{{number}}]",
+        },
+        keepOriginalUploading: {
+            where: "account",
+            default: false,
+        },
+        memo: {
+            where: "account",
+            default: null,
+        },
+        reactions: {
+            where: "account",
+            default: [
+                "⭐",
+                "❤️",
+                "😆",
+                "🤔",
+                "😮",
+                "🎉",
+                "💢",
+                "😥",
+                "😇",
+                "🦋",
+                "🦊",
+            ],
+        },
+        mutedWords: {
+            where: "account",
+            default: [],
+        },
+        mutedAds: {
+            where: "account",
+            default: [] as string[],
+        },
+        showAds: {
+            where: "account",
+            default: true,
+        },
+        menu: {
+            where: "deviceAccount",
+            default: menuOptions,
+        },
+        visibility: {
+            where: "deviceAccount",
+            default: "public" as "public" | "home" | "followers" | "specified",
+        },
+        localOnly: {
+            where: "deviceAccount",
+            default: false,
+        },
+        statusbars: {
+            where: "deviceAccount",
+            default: [] as {
+                name: string;
+                id: string;
+                type: string;
+                size: "verySmall" | "small" | "medium" | "large" | "veryLarge";
+                black: boolean;
+                props: Record<string, any>;
+            }[],
+        },
+        widgets: {
+            where: "deviceAccount",
+            default: [] as {
+                name: string;
+                id: string;
+                place: string | null;
+                data: Record<string, any>;
+            }[],
+        },
+        tl: {
+            where: "deviceAccount",
+            default: {
+                src: "home" as "home" | "local" | "social" | "global",
+                arg: null,
+            },
+        },
 
-		overridedDeviceKind: {
-			where: "device",
-			default: null as null | "smartphone" | "tablet" | "desktop",
-		},
-		serverDisconnectedBehavior: {
-			where: "device",
-			default: "nothing" as "nothing" | "quiet" | "reload" | "dialog",
-		},
-		seperateRenoteQuote: {
-			where: "device",
-			default: true,
-		},
-		expandOnNoteClick: {
-			where: "device",
-			default: true,
-		},
-		nsfw: {
-			where: "device",
-			default: "respect" as "respect" | "force" | "ignore",
-		},
-		animation: {
-			where: "device",
-			default: true,
-		},
-		advancedMfm: {
-			where: "device",
-			default: true,
-		},
-		animatedMfm: {
-			where: "device",
-			default: true,
-		},
-		animatedMfmWarnShown: {
-			where: "device",
-			default: false,
-		},
-		loadRawImages: {
-			where: "device",
-			default: false,
-		},
-		imageNewTab: {
-			where: "device",
-			default: false,
-		},
-		disableShowingAnimatedImages: {
-			where: "device",
-			default: false,
-		},
-		disablePagesScript: {
-			where: "device",
-			default: false,
-		},
-		useOsNativeEmojis: {
-			where: "device",
-			default: false,
-		},
-		disableDrawer: {
-			where: "device",
-			default: false,
-		},
-		useBlurEffectForModal: {
-			where: "device",
-			default: true,
-		},
-		useBlurEffect: {
-			where: "device",
-			default: true,
-		},
-		showFixedPostForm: {
-			where: "device",
-			default: false,
-		},
-		enableInfiniteScroll: {
-			where: "device",
-			default: true,
-		},
-		useReactionPickerForContextMenu: {
-			where: "device",
-			default: false,
-		},
-		showGapBetweenNotesInTimeline: {
-			where: "device",
-			default: true,
-		},
-		darkMode: {
-			where: "device",
-			default: false,
-		},
-		instanceTicker: {
-			where: "device",
-			default: "remote" as "none" | "remote" | "always",
-		},
-		reactionPickerSkinTone: {
-			where: "account",
-			default: 1,
-		},
-		reactionPickerSize: {
-			where: "device",
-			default: 3,
-		},
-		reactionPickerWidth: {
-			where: "device",
-			default: 3,
-		},
-		reactionPickerHeight: {
-			where: "device",
-			default: 3,
-		},
-		reactionPickerUseDrawerForMobile: {
-			where: "device",
-			default: true,
-		},
-		recentlyUsedEmojis: {
-			where: "device",
-			default: [] as string[],
-		},
-		recentlyUsedUsers: {
-			where: "device",
-			default: [] as string[],
-		},
-		defaultSideView: {
-			where: "device",
-			default: false,
-		},
-		menuDisplay: {
-			where: "device",
-			default: "sideFull" as "sideFull" | "sideIcon" | "top",
-		},
-		reportError: {
-			where: "device",
-			default: false,
-		},
-		squareAvatars: {
-			where: "device",
-			default: true,
-		},
-		postFormWithHashtags: {
-			where: "device",
-			default: false,
-		},
-		postFormHashtags: {
-			where: "device",
-			default: "",
-		},
-		themeInitial: {
-			where: "device",
-			default: true,
-		},
-		numberOfPageCache: {
-			where: "device",
-			default: 5,
-		},
-		enterSendsMessage: {
-			where: "device",
-			default: true,
-		},
-		showUpdates: {
-			where: "device",
-			default: true,
-		},
-		swipeOnDesktop: {
-			where: "device",
-			default: false,
-		},
-		showAdminUpdates: {
-			where: "account",
-			default: true,
-		},
-		woozyMode: {
-			where: "device",
-			default: false,
-		},
-		enableCustomKaTeXMacro: {
-			where: "device",
-			default: false,
-		},
-		enableEmojiReactions: {
-			where: "account",
-			default: true,
-		},
-		showEmojisInReactionNotifications: {
-			where: "account",
-			default: true,
-		},
-		showTimelineReplies: {
-			where: "device",
-			default: true,
-		},
-	}),
+        overridedDeviceKind: {
+            where: "device",
+            default: null as null | "smartphone" | "tablet" | "desktop",
+        },
+        serverDisconnectedBehavior: {
+            where: "device",
+            default: "nothing" as "nothing" | "quiet" | "reload" | "dialog",
+        },
+        seperateRenoteQuote: {
+            where: "device",
+            default: true,
+        },
+        expandOnNoteClick: {
+            where: "device",
+            default: true,
+        },
+        nsfw: {
+            where: "device",
+            default: "respect" as "respect" | "force" | "ignore",
+        },
+        animation: {
+            where: "device",
+            default: true,
+        },
+        advancedMfm: {
+            where: "device",
+            default: true,
+        },
+        animatedMfm: {
+            where: "device",
+            default: true,
+        },
+        animatedMfmWarnShown: {
+            where: "device",
+            default: false,
+        },
+        loadRawImages: {
+            where: "device",
+            default: false,
+        },
+        imageNewTab: {
+            where: "device",
+            default: false,
+        },
+        disableShowingAnimatedImages: {
+            where: "device",
+            default: false,
+        },
+        disablePagesScript: {
+            where: "device",
+            default: false,
+        },
+        useOsNativeEmojis: {
+            where: "device",
+            default: false,
+        },
+        disableDrawer: {
+            where: "device",
+            default: false,
+        },
+        useBlurEffectForModal: {
+            where: "device",
+            default: true,
+        },
+        useBlurEffect: {
+            where: "device",
+            default: true,
+        },
+        showFixedPostForm: {
+            where: "device",
+            default: false,
+        },
+        enableInfiniteScroll: {
+            where: "device",
+            default: true,
+        },
+        useReactionPickerForContextMenu: {
+            where: "device",
+            default: false,
+        },
+        showGapBetweenNotesInTimeline: {
+            where: "device",
+            default: true,
+        },
+        darkMode: {
+            where: "device",
+            default: false,
+        },
+        instanceTicker: {
+            where: "device",
+            default: "remote" as "none" | "remote" | "always",
+        },
+        reactionPickerSkinTone: {
+            where: "account",
+            default: 1,
+        },
+        reactionPickerSize: {
+            where: "device",
+            default: 3,
+        },
+        reactionPickerWidth: {
+            where: "device",
+            default: 3,
+        },
+        reactionPickerHeight: {
+            where: "device",
+            default: 3,
+        },
+        reactionPickerUseDrawerForMobile: {
+            where: "device",
+            default: true,
+        },
+        recentlyUsedEmojis: {
+            where: "device",
+            default: [] as string[],
+        },
+        recentlyUsedUsers: {
+            where: "device",
+            default: [] as string[],
+        },
+        defaultSideView: {
+            where: "device",
+            default: false,
+        },
+        menuDisplay: {
+            where: "device",
+            default: "sideFull" as "sideFull" | "sideIcon" | "top",
+        },
+        reportError: {
+            where: "device",
+            default: false,
+        },
+        squareAvatars: {
+            where: "device",
+            default: true,
+        },
+        postFormWithHashtags: {
+            where: "device",
+            default: false,
+        },
+        postFormHashtags: {
+            where: "device",
+            default: "",
+        },
+        themeInitial: {
+            where: "device",
+            default: true,
+        },
+        numberOfPageCache: {
+            where: "device",
+            default: 5,
+        },
+        enterSendsMessage: {
+            where: "device",
+            default: true,
+        },
+        showUpdates: {
+            where: "device",
+            default: true,
+        },
+        swipeOnDesktop: {
+            where: "device",
+            default: false,
+        },
+        woozyMode: {
+            where: "device",
+            default: false,
+        },
+        enableCustomKaTeXMacro: {
+            where: "device",
+            default: false,
+        },
+        enableEmojiReactions: {
+            where: "account",
+            default: true,
+        },
+        showEmojisInReactionNotifications: {
+            where: "account",
+            default: true,
+        },
+        showTimelineReplies: {
+            where: "device",
+            default: true,
+        },
+    })
 );
 
 // TODO: 他のタブと永続化されたstateを同期
@@ -344,110 +344,106 @@ export const defaultStore = markRaw(
 const PREFIX = "miux:";
 
 type Plugin = {
-	id: string;
-	name: string;
-	active: boolean;
-	configData: Record<string, any>;
-	token: string;
-	ast: any[];
+    id: string;
+    name: string;
+    active: boolean;
+    configData: Record<string, any>;
+    token: string;
+    ast: any[];
 };
 
-/**
- * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
- */
-import lightTheme from "@/themes/l-rosepinedawn.json5";
-import darkTheme from "@/themes/d-rosepine.json5";
-
 export class ColdDeviceStorage {
-	public static default = {
-		lightTheme,
-		darkTheme,
-		syncDeviceDarkMode: true,
-		plugins: [] as Plugin[],
-		mediaVolume: 0.5,
-		sound_masterVolume: 0.3,
-		sound_note: { type: "none", volume: 0 },
-		sound_noteMy: { type: "syuilo/up", volume: 1 },
-		sound_notification: { type: "syuilo/pope2", volume: 1 },
-		sound_chat: { type: "syuilo/pope1", volume: 1 },
-		sound_chatBg: { type: "syuilo/waon", volume: 1 },
-		sound_antenna: { type: "syuilo/triple", volume: 1 },
-		sound_channel: { type: "syuilo/square-pico", volume: 1 },
-	};
+    public static default = {
+        lightTheme,
+        darkTheme,
+        syncDeviceDarkMode: true,
+        plugins: [] as Plugin[],
+        mediaVolume: 0.5,
+        sound_masterVolume: 0.3,
+        sound_note: { type: "none", volume: 0 },
+        sound_noteMy: { type: "syuilo/up", volume: 1 },
+        sound_notification: { type: "syuilo/pope2", volume: 1 },
+        sound_chat: { type: "syuilo/pope1", volume: 1 },
+        sound_chatBg: { type: "syuilo/waon", volume: 1 },
+        sound_antenna: { type: "syuilo/triple", volume: 1 },
+        sound_channel: { type: "syuilo/square-pico", volume: 1 },
+    };
 
-	public static watchers = [];
+    public static watchers = [];
 
-	public static get<T extends keyof typeof ColdDeviceStorage.default>(
-		key: T,
-	): typeof ColdDeviceStorage.default[T] {
-		// TODO: indexedDBにする
-		//       ただしその際はnullチェックではなくキー存在チェックにしないとダメ
-		//       (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
-		const value = localStorage.getItem(PREFIX + key);
-		if (value == null) {
-			return ColdDeviceStorage.default[key];
-		} else {
-			return JSON.parse(value);
-		}
-	}
+    public static get<T extends keyof typeof ColdDeviceStorage.default>(
+        key: T
+    ): (typeof ColdDeviceStorage.default)[T] {
+        // TODO: indexedDBにする
+        //       ただしその際はnullチェックではなくキー存在チェックにしないとダメ
+        //       (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
+        const value = localStorage.getItem(PREFIX + key);
+        if (value == null) {
+            return ColdDeviceStorage.default[key];
+        } else {
+            return JSON.parse(value);
+        }
+    }
 
-	public static set<T extends keyof typeof ColdDeviceStorage.default>(
-		key: T,
-		value: typeof ColdDeviceStorage.default[T],
-	): void {
-		// 呼び出し側のバグ等で undefined が来ることがある
-		// undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
-		if (value === undefined) {
-			console.error(`attempt to store undefined value for key '${key}'`);
-			return;
-		}
+    public static set<T extends keyof typeof ColdDeviceStorage.default>(
+        key: T,
+        value: (typeof ColdDeviceStorage.default)[T]
+    ): void {
+        // 呼び出し側のバグ等で undefined が来ることがある
+        // undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
+        if (value === undefined) {
+            console.error(`attempt to store undefined value for key '${key}'`);
+            return;
+        }
 
-		localStorage.setItem(PREFIX + key, JSON.stringify(value));
+        localStorage.setItem(PREFIX + key, JSON.stringify(value));
 
-		for (const watcher of this.watchers) {
-			if (watcher.key === key) watcher.callback(value);
-		}
-	}
+        for (const watcher of this.watchers) {
+            if (watcher.key === key) watcher.callback(value);
+        }
+    }
 
-	public static watch(key, callback) {
-		this.watchers.push({ key, callback });
-	}
+    public static watch(key, callback) {
+        this.watchers.push({ key, callback });
+    }
 
-	// TODO: VueのcustomRef使うと良い感じになるかも
-	public static ref<T extends keyof typeof ColdDeviceStorage.default>(key: T) {
-		const v = ColdDeviceStorage.get(key);
-		const r = ref(v);
-		// TODO: このままではwatcherがリークするので開放する方法を考える
-		this.watch(key, (v) => {
-			r.value = v;
-		});
-		return r;
-	}
+    // TODO: VueのcustomRef使うと良い感じになるかも
+    public static ref<T extends keyof typeof ColdDeviceStorage.default>(
+        key: T
+    ) {
+        const v = ColdDeviceStorage.get(key);
+        const r = ref(v);
+        // TODO: このままではwatcherがリークするので開放する方法を考える
+        this.watch(key, (v) => {
+            r.value = v;
+        });
+        return r;
+    }
 
-	/**
-	 * 特定のキーの、簡易的なgetter/setterを作ります
-	 * 主にvue場で設定コントロールのmodelとして使う用
-	 */
-	public static makeGetterSetter<
-		K extends keyof typeof ColdDeviceStorage.default,
-	>(key: K) {
-		// TODO: VueのcustomRef使うと良い感じになるかも
-		const valueRef = ColdDeviceStorage.ref(key);
-		return {
-			get: () => {
-				return valueRef.value;
-			},
-			set: (value: unknown) => {
-				const val = value;
-				ColdDeviceStorage.set(key, val);
-			},
-		};
-	}
+    /**
+     * 特定のキーの、簡易的なgetter/setterを作ります
+     * 主にvue場で設定コントロールのmodelとして使う用
+     */
+    public static makeGetterSetter<
+        K extends keyof typeof ColdDeviceStorage.default
+    >(key: K) {
+        // TODO: VueのcustomRef使うと良い感じになるかも
+        const valueRef = ColdDeviceStorage.ref(key);
+        return {
+            get: () => {
+                return valueRef.value;
+            },
+            set: (value: unknown) => {
+                const val = value;
+                ColdDeviceStorage.set(key, val);
+            },
+        };
+    }
 }
 
 // このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
 declare module "@vue/runtime-core" {
-	interface ComponentCustomProperties {
-		$store: typeof defaultStore;
-	}
+    interface ComponentCustomProperties {
+        $store: typeof defaultStore;
+    }
 }
diff --git a/fe_calckey/frontend/client/src/ui/_common_/navbar.vue b/fe_calckey/frontend/client/src/ui/_common_/navbar.vue
index 7905c33..3a7a694 100644
--- a/fe_calckey/frontend/client/src/ui/_common_/navbar.vue
+++ b/fe_calckey/frontend/client/src/ui/_common_/navbar.vue
@@ -1,148 +1,147 @@
 <template>
-	<header class="mvcprjjd sidebar" :class="{ iconOnly }">
-		<div class="body">
-			<div class="top">
-				<div
-					class="banner"
-					:user="$i"
-					:style="{ backgroundImage: `url(${$i.bannerUrl})` }"
-				></div>
-				<button
-					v-click-anime
-					v-tooltip.noDelay.right="
-						`${i18n.ts.account}: @${$i.username}`
-					"
-					class="item _button account"
-					@click="openAccountMenu"
-				>
-					<MkAvatar
-						:user="$i"
-						class="icon"
-						disableLink
-					/><!-- <MkAcct class="text" :user="$i"/> -->
-				</button>
-			</div>
-			<nav class="middle">
-				<MkA
-					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts.timeline"
-					class="item index"
-					active-class="active"
-					to="/"
-					exact
-				>
-					<i class="icon ph-house ph-bold ph-fw ph-lg"></i
-					><span class="text">{{ i18n.ts.timeline }}</span>
-				</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.noDelay.right="
-							i18n.ts[navbarItemDef[item].title]
-						"
-						class="item _button"
-						:class="[item, { active: navbarItemDef[item].active }]"
-						active-class="active"
-						:to="navbarItemDef[item].to"
-						v-on="
-							navbarItemDef[item].action
-								? { click: navbarItemDef[item].action }
-								: {}
-						"
-					>
-						<i
-							class="icon ph-fw ph-lg"
-							:class="navbarItemDef[item].icon"
-						></i
-						><span class="text">{{
-							i18n.ts[navbarItemDef[item].title]
-						}}</span>
-						<span
-							v-if="navbarItemDef[item].indicated"
-							class="indicator"
-							><i class="icon ph-circle ph-fill"></i
-						></span>
-					</component>
-				</template>
-				<div class="divider"></div>
-				<MkA
-					v-if="$i.isAdmin || $i.isModerator"
-					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts.controlPanel"
-					class="item _button"
-					active-class="active"
-					to="/admin"
-				>
-					<span
-						v-if="
-							thereIsUnresolvedAbuseReport ||
-							noMaintainerInformation ||
-							noBotProtection ||
-							noEmailServer ||
-							updateAvailable
-						"
-						class="indicator"
-					></span
-					><i class="icon ph-door ph-bold ph-fw ph-lg"></i
-					><span class="text">{{ i18n.ts.controlPanel }}</span>
-				</MkA>
-				<button
-					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts.more"
-					class="item _button"
-					@click="more"
-				>
-					<i
-						class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
-					></i
-					><span class="text">{{ i18n.ts.more }}</span>
-					<span v-if="otherMenuItemIndicated" class="indicator"
-						><i class="icon ph-circle ph-fill"></i
-					></span>
-				</button>
-				<MkA
-					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts.settings"
-					class="item _button"
-					active-class="active"
-					to="/settings"
-				>
-					<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
-					><span class="text">{{ i18n.ts.settings }}</span>
-				</MkA>
-			</nav>
-			<div class="bottom">
-				<button
-					v-tooltip.noDelay.right="i18n.ts.note"
-					class="item _button post"
-					data-cy-open-post-form
-					@click="os.post"
-				>
-					<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i
-					><span class="text">{{ i18n.ts.note }}</span>
-				</button>
-				<button
-					v-tooltip.noDelay.right="i18n.ts.help"
-					class="item _button help"
-					@click="openHelpMenu"
-				>
-					<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
-				</button>
-				<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+    <header class="mvcprjjd sidebar" :class="{ iconOnly }">
+        <div class="body">
+            <div class="top">
+                <div
+                    class="banner"
+                    :user="$i"
+                    :style="{ backgroundImage: `url(${$i.bannerUrl})` }"
+                ></div>
+                <button
+                    v-click-anime
+                    v-tooltip.noDelay.right="
+                        `${i18n.ts.account}: @${$i.username}`
+                    "
+                    class="item _button account"
+                    @click="openAccountMenu"
+                >
+                    <MkAvatar
+                        :user="$i"
+                        class="icon"
+                        disableLink
+                    /><!-- <MkAcct class="text" :user="$i"/> -->
+                </button>
+            </div>
+            <nav class="middle">
+                <MkA
+                    v-click-anime
+                    v-tooltip.noDelay.right="i18n.ts.timeline"
+                    class="item index"
+                    active-class="active"
+                    to="/"
+                    exact
+                >
+                    <i class="icon ph-house ph-bold ph-fw ph-lg"></i
+                    ><span class="text">{{ i18n.ts.timeline }}</span>
+                </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.noDelay.right="
+                            i18n.ts[navbarItemDef[item].title]
+                        "
+                        class="item _button"
+                        :class="[item, { active: navbarItemDef[item].active }]"
+                        active-class="active"
+                        :to="navbarItemDef[item].to"
+                        v-on="
+                            navbarItemDef[item].action
+                                ? { click: navbarItemDef[item].action }
+                                : {}
+                        "
+                    >
+                        <i
+                            class="icon ph-fw ph-lg"
+                            :class="navbarItemDef[item].icon"
+                        ></i
+                        ><span class="text">{{
+                            i18n.ts[navbarItemDef[item].title]
+                        }}</span>
+                        <span
+                            v-if="navbarItemDef[item].indicated"
+                            class="indicator"
+                            ><i class="icon ph-circle ph-fill"></i
+                        ></span>
+                    </component>
+                </template>
+                <div class="divider"></div>
+                <MkA
+                    v-if="$i.isAdmin || $i.isModerator"
+                    v-click-anime
+                    v-tooltip.noDelay.right="i18n.ts.controlPanel"
+                    class="item _button"
+                    active-class="active"
+                    to="/admin"
+                >
+                    <span
+                        v-if="
+                            thereIsUnresolvedAbuseReport ||
+                            noMaintainerInformation ||
+                            noBotProtection ||
+                            noEmailServer
+                        "
+                        class="indicator"
+                    ></span
+                    ><i class="icon ph-door ph-bold ph-fw ph-lg"></i
+                    ><span class="text">{{ i18n.ts.controlPanel }}</span>
+                </MkA>
+                <button
+                    v-click-anime
+                    v-tooltip.noDelay.right="i18n.ts.more"
+                    class="item _button"
+                    @click="more"
+                >
+                    <i
+                        class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
+                    ></i
+                    ><span class="text">{{ i18n.ts.more }}</span>
+                    <span v-if="otherMenuItemIndicated" class="indicator"
+                        ><i class="icon ph-circle ph-fill"></i
+                    ></span>
+                </button>
+                <MkA
+                    v-click-anime
+                    v-tooltip.noDelay.right="i18n.ts.settings"
+                    class="item _button"
+                    active-class="active"
+                    to="/settings"
+                >
+                    <i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
+                    ><span class="text">{{ i18n.ts.settings }}</span>
+                </MkA>
+            </nav>
+            <div class="bottom">
+                <button
+                    v-tooltip.noDelay.right="i18n.ts.note"
+                    class="item _button post"
+                    data-cy-open-post-form
+                    @click="os.post"
+                >
+                    <i class="icon ph-pencil ph-bold ph-fw ph-lg"></i
+                    ><span class="text">{{ i18n.ts.note }}</span>
+                </button>
+                <button
+                    v-tooltip.noDelay.right="i18n.ts.help"
+                    class="item _button help"
+                    @click="openHelpMenu"
+                >
+                    <i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+                </button>
+                <!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
 				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button> -->
-				<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
+                <!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
 			</button> -->
-			</div>
-		</div>
-	</header>
+            </div>
+        </div>
+    </header>
 </template>
 
 <script lang="ts" setup>
@@ -154,7 +153,6 @@ import { openHelpMenu_ } from "@/scripts/helpMenu";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
-import { version } from "@/config";
 
 const isEmpty = (x: string | null) => x == null || x === "";
 
@@ -162,17 +160,17 @@ const iconOnly = ref(false);
 
 const menu = computed(() => defaultStore.state.menu);
 const otherMenuItemIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (menu.value.includes(def)) continue;
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
+    for (const def in navbarItemDef) {
+        if (menu.value.includes(def)) continue;
+        if (navbarItemDef[def].indicated) return true;
+    }
+    return false;
 });
 
 const calcViewState = () => {
-	iconOnly.value =
-		window.innerWidth <= 1279 ||
-		defaultStore.state.menuDisplay === "sideIcon";
+    iconOnly.value =
+        window.innerWidth <= 1279 ||
+        defaultStore.state.menuDisplay === "sideIcon";
 };
 
 calcViewState();
@@ -180,468 +178,457 @@ calcViewState();
 matchMedia("(max-width: 1279px)").onchange = (mql) => calcViewState();
 
 watch(defaultStore.reactiveState.menuDisplay, () => {
-	calcViewState();
+    calcViewState();
 });
 
 let noMaintainerInformation =
-	isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+    isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
 let noBotProtection =
-	!instance.disableRegistration &&
-	!instance.enableHcaptcha &&
-	!instance.enableRecaptcha;
+    !instance.disableRegistration &&
+    !instance.enableHcaptcha &&
+    !instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
-let updateAvailable = $ref(false);
 
 if ($i?.isAdmin) {
-	os.api("admin/abuse-user-reports", {
-		state: "unresolved",
-		limit: 1,
-	}).then((reports) => {
-		if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
-	});
-}
-
-if (defaultStore.state.showAdminUpdates) {
-	os.api("latest-version").then((res) => {
-		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
-		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
-		if (cleanRes > cleanVersion) {
-			updateAvailable = true;
-		}
-	});
+    os.api("admin/abuse-user-reports", {
+        state: "unresolved",
+        limit: 1,
+    }).then((reports) => {
+        if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
+    });
 }
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_(
-		{
-			withExtraOperation: true,
-		},
-		ev
-	);
+    openAccountMenu_(
+        {
+            withExtraOperation: true,
+        },
+        ev
+    );
 }
 
 function openHelpMenu(ev: MouseEvent) {
-	openHelpMenu_(ev);
+    openHelpMenu_(ev);
 }
 
 function more(ev: MouseEvent) {
-	os.popup(
-		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
-		{
-			src: ev.currentTarget ?? ev.target,
-		},
-		{},
-		"closed"
-	);
+    os.popup(
+        defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
+        {
+            src: ev.currentTarget ?? ev.target,
+        },
+        {},
+        "closed"
+    );
 }
 </script>
 
 <style lang="scss" scoped>
 .mvcprjjd {
-	$nav-width: 250px;
-	$nav-icon-only-width: 80px;
-	flex: 0 0 $nav-width;
-	width: $nav-width;
-	box-sizing: border-box;
+    $nav-width: 250px;
+    $nav-icon-only-width: 80px;
+    flex: 0 0 $nav-width;
+    width: $nav-width;
+    box-sizing: border-box;
 
-	> .body {
-		position: sticky;
-		top: 0;
-		width: $nav-icon-only-width;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
-		box-sizing: border-box;
-		overflow: auto;
-		overflow-x: clip;
-		#calckey_app > :not(.wallpaper) & {
-			background: var(--navBg);
-		}
-		#calckey_app > .wallpaper:not(.centered) & {
-			border-right: 1px solid var(--divider);
-		}
-		contain: strict;
-		display: flex;
-		flex-direction: column;
-	}
+    > .body {
+        position: sticky;
+        top: 0;
+        width: $nav-icon-only-width;
+        // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+        height: calc(var(--vh, 1vh) * 100);
+        box-sizing: border-box;
+        overflow: auto;
+        overflow-x: clip;
+        #calckey_app > :not(.wallpaper) & {
+            background: var(--navBg);
+        }
+        #calckey_app > .wallpaper:not(.centered) & {
+            border-right: 1px solid var(--divider);
+        }
+        contain: strict;
+        display: flex;
+        flex-direction: column;
+    }
 
-	&:not(.iconOnly) {
-		> .body {
-			margin-left: -200px;
-			padding-left: 200px;
-			box-sizing: content-box;
-			width: $nav-width;
+    &:not(.iconOnly) {
+        > .body {
+            margin-left: -200px;
+            padding-left: 200px;
+            box-sizing: content-box;
+            width: $nav-width;
 
-			> .top {
-				position: relative;
-				z-index: 1;
-				padding: 2rem 0;
-				> .banner {
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					background-size: cover;
-					background-position: center center;
-					-webkit-mask-image: linear-gradient(var(--gradient));
-					mask-image: linear-gradient(var(--gradient));
-				}
+            > .top {
+                position: relative;
+                z-index: 1;
+                padding: 2rem 0;
+                > .banner {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background-size: cover;
+                    background-position: center center;
+                    -webkit-mask-image: linear-gradient(var(--gradient));
+                    mask-image: linear-gradient(var(--gradient));
+                }
 
-				> .account {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
+                > .account {
+                    position: relative;
+                    display: block;
+                    text-align: center;
+                    width: 100%;
 
-					> .icon {
-						display: inline-block;
-						width: 55px;
-						aspect-ratio: 1;
-					}
-				}
-			}
+                    > .icon {
+                        display: inline-block;
+                        width: 55px;
+                        aspect-ratio: 1;
+                    }
+                }
+            }
 
-			> .bottom {
-				padding: 20px 0;
+            > .bottom {
+                padding: 20px 0;
 
-				> .post {
-					position: relative;
-					width: 100%;
-					height: 40px;
-					color: var(--fgOnAccent);
-					font-weight: bold;
-					text-align: left;
-					display: flex;
-					align-items: center;
+                > .post {
+                    position: relative;
+                    width: 100%;
+                    height: 40px;
+                    color: var(--fgOnAccent);
+                    font-weight: bold;
+                    text-align: left;
+                    display: flex;
+                    align-items: center;
 
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 38px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(
-							90deg,
-							var(--buttonGradateA),
-							var(--buttonGradateB)
-						);
-					}
+                    &:before {
+                        content: "";
+                        display: block;
+                        width: calc(100% - 38px);
+                        height: 100%;
+                        margin: auto;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        border-radius: 999px;
+                        background: linear-gradient(
+                            90deg,
+                            var(--buttonGradateA),
+                            var(--buttonGradateB)
+                        );
+                    }
 
-					&:hover,
-					&:focus-within,
-					&.active {
-						&:before {
-							background: var(--accentLighten);
-							transition: all 0.4s ease;
-						}
-					}
+                    &:hover,
+                    &:focus-within,
+                    &.active {
+                        &:before {
+                            background: var(--accentLighten);
+                            transition: all 0.4s ease;
+                        }
+                    }
 
-					> .icon,
-					> .text {
-						position: relative;
-						left: 3rem;
-						color: var(--fgOnAccent);
-						transform: translateY(0em);
-					}
+                    > .icon,
+                    > .text {
+                        position: relative;
+                        left: 3rem;
+                        color: var(--fgOnAccent);
+                        transform: translateY(0em);
+                    }
 
-					> .text {
-						margin-left: 1rem;
-					}
-				}
+                    > .text {
+                        margin-left: 1rem;
+                    }
+                }
 
-				> .instance {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
+                > .instance {
+                    position: relative;
+                    display: block;
+                    text-align: center;
+                    width: 100%;
 
-					> .icon {
-						display: inline-block;
-						width: 32px !important;
-						aspect-ratio: 1;
-						margin-top: 1rem;
-					}
-				}
+                    > .icon {
+                        display: inline-block;
+                        width: 32px !important;
+                        aspect-ratio: 1;
+                        margin-top: 1rem;
+                    }
+                }
 
-				> .help {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
-					margin-top: 1rem;
-					color: var(--navFg);
+                > .help {
+                    position: relative;
+                    display: block;
+                    text-align: center;
+                    width: 100%;
+                    margin-top: 1rem;
+                    color: var(--navFg);
 
-					> .icon {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
-				}
-			}
+                    > .icon {
+                        display: inline-block;
+                        width: 38px;
+                        aspect-ratio: 1;
+                    }
+                }
+            }
 
-			> .middle {
-				flex: 0.1;
+            > .middle {
+                flex: 0.1;
 
-				> .divider {
-					margin: 16px 16px;
-					border-top: solid 0.5px var(--divider);
-				}
+                > .divider {
+                    margin: 16px 16px;
+                    border-top: solid 0.5px var(--divider);
+                }
 
-				> .item {
-					position: relative;
-					display: flex;
-					align-items: center;
-					padding-left: 30px;
-					line-height: 2.85rem;
-					margin-bottom: 0.5rem;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
+                > .item {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    padding-left: 30px;
+                    line-height: 2.85rem;
+                    margin-bottom: 0.5rem;
+                    white-space: nowrap;
+                    width: 100%;
+                    text-align: left;
+                    box-sizing: border-box;
+                    color: var(--navFg);
 
-					> .icon {
-						position: relative;
-						width: 32px;
-						margin-right: 8px;
-					}
+                    > .icon {
+                        position: relative;
+                        width: 32px;
+                        margin-right: 8px;
+                    }
 
-					> .indicator {
-						position: absolute;
-						top: 0;
-						left: 20px;
-						color: var(--navIndicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
-					}
+                    > .indicator {
+                        position: absolute;
+                        top: 0;
+                        left: 20px;
+                        color: var(--navIndicator);
+                        font-size: 8px;
+                        animation: blink 1s infinite;
+                    }
 
-					> .text {
-						position: relative;
-						font-size: 0.9em;
-						overflow: hidden;
-						text-overflow: ellipsis;
-					}
+                    > .text {
+                        position: relative;
+                        font-size: 0.9em;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
 
-					&:hover,
-					&:focus-within {
-						text-decoration: none;
-						color: var(--navHoverFg);
-						transition: all 0.4s ease;
-					}
+                    &:hover,
+                    &:focus-within {
+                        text-decoration: none;
+                        color: var(--navHoverFg);
+                        transition: all 0.4s ease;
+                    }
 
-					&.active {
-						color: var(--navActive);
-					}
+                    &.active {
+                        color: var(--navActive);
+                    }
 
-					&:hover,
-					&:focus-within,
-					&.active {
-						color: var(--accent);
-						transition: all 0.4s ease;
+                    &:hover,
+                    &:focus-within,
+                    &.active {
+                        color: var(--accent);
+                        transition: all 0.4s ease;
 
-						&:before {
-							content: "";
-							display: block;
-							width: calc(100% - 34px);
-							height: 100%;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-					}
-				}
-			}
-		}
-	}
+                        &:before {
+                            content: "";
+                            display: block;
+                            width: calc(100% - 34px);
+                            height: 100%;
+                            margin: auto;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            right: 0;
+                            bottom: 0;
+                            border-radius: 999px;
+                            background: var(--accentedBg);
+                        }
+                    }
+                }
+            }
+        }
+    }
 
-	&.iconOnly {
-		flex: 0 0 $nav-icon-only-width;
-		width: $nav-icon-only-width;
+    &.iconOnly {
+        flex: 0 0 $nav-icon-only-width;
+        width: $nav-icon-only-width;
 
-		> .body {
-			width: $nav-icon-only-width;
+        > .body {
+            width: $nav-icon-only-width;
 
-			> .top {
-				padding: 2rem 0;
+            > .top {
+                padding: 2rem 0;
 
-				> .account {
-					display: block;
-					text-align: center;
-					width: 100%;
+                > .account {
+                    display: block;
+                    text-align: center;
+                    width: 100%;
 
-					> .icon {
-						display: inline-block;
-						width: 40px;
-						aspect-ratio: 1;
-						transform: translateY(0em);
-					}
-				}
-			}
+                    > .icon {
+                        display: inline-block;
+                        width: 40px;
+                        aspect-ratio: 1;
+                        transform: translateY(0em);
+                    }
+                }
+            }
 
-			> .bottom {
-				padding: 20px 0;
+            > .bottom {
+                padding: 20px 0;
 
-				> .post {
-					display: block;
-					position: relative;
-					width: 100%;
-					height: 52px;
-					margin-bottom: 16px;
-					text-align: center;
+                > .post {
+                    display: block;
+                    position: relative;
+                    width: 100%;
+                    height: 52px;
+                    margin-bottom: 16px;
+                    text-align: center;
 
-					&:before {
-						content: "";
-						display: block;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						margin: auto;
-						width: 52px;
-						aspect-ratio: 1/1;
-						border-radius: 100%;
-						background: linear-gradient(
-							90deg,
-							var(--buttonGradateA),
-							var(--buttonGradateB)
-						);
-					}
+                    &:before {
+                        content: "";
+                        display: block;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        margin: auto;
+                        width: 52px;
+                        aspect-ratio: 1/1;
+                        border-radius: 100%;
+                        background: linear-gradient(
+                            90deg,
+                            var(--buttonGradateA),
+                            var(--buttonGradateB)
+                        );
+                    }
 
-					&:hover,
-					&:focus-within,
-					&.active {
-						&:before {
-							background: var(--accentLighten);
-							transition: all 0.4s ease;
-						}
-					}
+                    &:hover,
+                    &:focus-within,
+                    &.active {
+                        &:before {
+                            background: var(--accentLighten);
+                            transition: all 0.4s ease;
+                        }
+                    }
 
-					> .icon {
-						position: relative;
-						color: var(--fgOnAccent);
-					}
+                    > .icon {
+                        position: relative;
+                        color: var(--fgOnAccent);
+                    }
 
-					> .text {
-						display: none;
-					}
-				}
+                    > .text {
+                        display: none;
+                    }
+                }
 
-				> .help {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
-					margin-top: 1rem;
-					color: var(--navFg);
+                > .help {
+                    position: relative;
+                    display: block;
+                    text-align: center;
+                    width: 100%;
+                    margin-top: 1rem;
+                    color: var(--navFg);
 
-					> .icon {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
-				}
+                    > .icon {
+                        display: inline-block;
+                        width: 38px;
+                        aspect-ratio: 1;
+                    }
+                }
 
-				> .instance {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
+                > .instance {
+                    position: relative;
+                    display: block;
+                    text-align: center;
+                    width: 100%;
 
-					> .icon {
-						display: inline-block;
-						width: 32px !important;
-						aspect-ratio: 1;
-					}
-				}
-			}
+                    > .icon {
+                        display: inline-block;
+                        width: 32px !important;
+                        aspect-ratio: 1;
+                    }
+                }
+            }
 
-			> .middle {
-				flex: 0.1;
+            > .middle {
+                flex: 0.1;
 
-				> .divider {
-					margin: 8px auto;
-					width: calc(100% - 32px);
-					border-top: solid 0.5px var(--divider);
-				}
+                > .divider {
+                    margin: 8px auto;
+                    width: calc(100% - 32px);
+                    border-top: solid 0.5px var(--divider);
+                }
 
-				> .item {
-					display: block;
-					position: relative;
-					padding: 1.1rem 0;
-					margin-bottom: 0.2rem;
-					width: 100%;
-					text-align: center;
+                > .item {
+                    display: block;
+                    position: relative;
+                    padding: 1.1rem 0;
+                    margin-bottom: 0.2rem;
+                    width: 100%;
+                    text-align: center;
 
-					> .icon {
-						display: block;
-						margin: 0 auto;
-						opacity: 0.7;
-						transform: translateY(0em);
-					}
+                    > .icon {
+                        display: block;
+                        margin: 0 auto;
+                        opacity: 0.7;
+                        transform: translateY(0em);
+                    }
 
-					> .text {
-						display: none;
-					}
+                    > .text {
+                        display: none;
+                    }
 
-					> .indicator {
-						position: absolute;
-						top: 6px;
-						left: 24px;
-						color: var(--navIndicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
-					}
+                    > .indicator {
+                        position: absolute;
+                        top: 6px;
+                        left: 24px;
+                        color: var(--navIndicator);
+                        font-size: 8px;
+                        animation: blink 1s infinite;
+                    }
 
-					&:hover,
-					&:focus-within,
-					&.active {
-						text-decoration: none;
-						color: var(--accent);
-						transition: all 0.4s ease;
+                    &:hover,
+                    &:focus-within,
+                    &.active {
+                        text-decoration: none;
+                        color: var(--accent);
+                        transition: all 0.4s ease;
 
-						&:before {
-							content: "";
-							display: block;
-							height: 100%;
-							aspect-ratio: 1;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
+                        &:before {
+                            content: "";
+                            display: block;
+                            height: 100%;
+                            aspect-ratio: 1;
+                            margin: auto;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            right: 0;
+                            bottom: 0;
+                            border-radius: 999px;
+                            background: var(--accentedBg);
+                        }
 
-						> .icon,
-						> .text {
-							opacity: 1;
-						}
-					}
-				}
-			}
-		}
-	}
+                        > .icon,
+                        > .text {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+        }
+    }
 
-	.item {
-		outline: none;
-		&:focus-visible:before {
-			outline: auto;
-		}
-	}
+    .item {
+        outline: none;
+        &:focus-visible:before {
+            outline: auto;
+        }
+    }
 }
 </style>