From 53a09b91c7be55960c69ba4fc90c804a37365a88 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Wed, 5 Jul 2023 23:49:09 -0400
Subject: [PATCH] chore: format

---
 packages/client/src/components/MkNote.vue     | 11 ++-
 .../src/components/global/MkPageHeader.vue    |  7 +-
 packages/client/src/scripts/helpMenu.ts       | 49 +++++-----
 packages/client/src/style.scss                |  6 +-
 packages/client/src/ui/visitor.vue            |  5 +-
 packages/client/src/ui/visitor/kanban.vue     | 91 +++++++++++++------
 6 files changed, 108 insertions(+), 61 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 5683ec6be0..cf8bc88d55 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -128,8 +128,15 @@
 						</div>
 					</div>
 				</div>
-				<div v-if="detailedView || (appearNote.channel && !inChannel)" class="info">
-					<MkA v-if="detailedView" class="created-at" :to="notePage(appearNote)">
+				<div
+					v-if="detailedView || (appearNote.channel && !inChannel)"
+					class="info"
+				>
+					<MkA
+						v-if="detailedView"
+						class="created-at"
+						:to="notePage(appearNote)"
+					>
 						<MkTime :time="appearNote.createdAt" mode="absolute" />
 					</MkA>
 					<MkA
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 9bf707a31d..6fe2189f03 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -101,12 +101,7 @@
 			</nav>
 		</template>
 		<div class="buttons right">
-			<MkButton
-				v-if="!$i && displayHomeButton"
-				:to="'/'"
-				link
-				rounded
-			>
+			<MkButton v-if="!$i && displayHomeButton" :to="'/'" link rounded>
 				<i class="ph-house ph-bold ph-lg"></i>
 				{{ i18n.ts.home }}
 			</MkButton>
diff --git a/packages/client/src/scripts/helpMenu.ts b/packages/client/src/scripts/helpMenu.ts
index 7d08393f84..00ca019016 100644
--- a/packages/client/src/scripts/helpMenu.ts
+++ b/packages/client/src/scripts/helpMenu.ts
@@ -6,7 +6,6 @@ import XTutorial from "../components/MkTutorialDialog.vue";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 
-
 export function openHelpMenu_(ev: MouseEvent) {
 	os.popupMenu(
 		[
@@ -42,33 +41,39 @@ export function openHelpMenu_(ev: MouseEvent) {
 					window.open("https://calckey.org/apps", "_blank");
 				},
 			},
-			$i ? null : {
-				type: "link",
-				text: i18n.ts._mfm.cheatSheet,
-				icon: "ph-question ph-bold ph-lg",
-				to: "/mfm-cheat-sheet",
-			},
-			$i ? {
-				type: "button",
-				action: async () => {
-					defaultStore.set("tutorial", 0);
-					os.popup(XTutorial, {}, {}, "closed");
-				},
-				text: i18n.ts.replayTutorial,
-				icon: "ph-circle-wavy-question ph-bold ph-lg",
-			} : undefined,
+			$i
+				? null
+				: {
+						type: "link",
+						text: i18n.ts._mfm.cheatSheet,
+						icon: "ph-question ph-bold ph-lg",
+						to: "/mfm-cheat-sheet",
+				  },
+			$i
+				? {
+						type: "button",
+						action: async () => {
+							defaultStore.set("tutorial", 0);
+							os.popup(XTutorial, {}, {}, "closed");
+						},
+						text: i18n.ts.replayTutorial,
+						icon: "ph-circle-wavy-question ph-bold ph-lg",
+				  }
+				: undefined,
 			null,
 			{
 				type: "parent",
 				text: i18n.ts.developer,
 				icon: "ph-code ph-bold ph-lg",
 				children: [
-					$i ? {
-						type: "link",
-						to: "/api-console",
-						text: "API Console",
-						icon: "ph-terminal-window ph-bold ph-lg",
-					} : undefined,
+					$i
+						? {
+								type: "link",
+								to: "/api-console",
+								text: "API Console",
+								icon: "ph-terminal-window ph-bold ph-lg",
+						  }
+						: undefined,
 					{
 						text: i18n.ts.document,
 						icon: "ph-file-doc ph-bold ph-lg",
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index a0551db4a1..1f95121db6 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -540,11 +540,13 @@ hr {
 	}
 }
 
-._formLinksGridFlex { // "grid", anyways display flex my beloved
+._formLinksGridFlex {
+	// "grid", anyways display flex my beloved
 	display: flex;
 	flex-wrap: wrap;
 	gap: 12px;
-	> ._button, > .linkBoxed {
+	> ._button,
+	> .linkBoxed {
 		flex-basis: 34%;
 		flex-grow: 1;
 		width: 0;
diff --git a/packages/client/src/ui/visitor.vue b/packages/client/src/ui/visitor.vue
index d0a3908d80..6f0649ba9f 100644
--- a/packages/client/src/ui/visitor.vue
+++ b/packages/client/src/ui/visitor.vue
@@ -6,7 +6,10 @@
 	<XKanban sticky v-else-if="isDesktop" />
 	<main id="maincontent">
 		<RouterView />
-		<footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'">
+		<footer
+			class="powered-by"
+			v-if="mainRouter.currentRoute.value.name !== 'index'"
+		>
 			<MkA to="/">
 				<MkInstanceTicker :instance="meta"></MkInstanceTicker>
 				<small>{{ i18n.ts.poweredBy }}</small>
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index d9a8ced8b0..9e2976c6c9 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -1,7 +1,7 @@
 <template>
 	<header v-if="mini" class="mini-header">
-		<img 
-			class="logo" 
+		<img
+			class="logo"
 			:src="
 				meta.logoImageUrl ||
 				$instance.iconUrl ||
@@ -17,22 +17,26 @@
 			{{ i18n.ts.home }}
 		</MkButton>
 	</header>
-	<div class="instance-info-container" v-else :class="{ sticky, wallpaper: meta.backgroundImageUrl }">
+	<div
+		class="instance-info-container"
+		v-else
+		:class="{ sticky, wallpaper: meta.backgroundImageUrl }"
+	>
 		<header id="instance-info" v-on:scroll.passive="onScroll">
 			<div class="banner" v-if="meta.bannerUrl">
 				<img :src="meta.bannerUrl" />
 			</div>
 			<div class="content">
 				<div class="header">
-					<img 
-						class="logo" 
+					<img
+						class="logo"
 						:src="
 							$instance.iconUrl ||
 							$instance.faviconUrl ||
 							'/favicon.ico'
 						"
 					/>
-					<img 
+					<img
 						v-if="meta.logoImageUrl"
 						:src="meta.logoImageUrl"
 						class="logo"
@@ -143,7 +147,10 @@
 
 					<FormSection v-if="meta.tosUrl">
 						<div class="_formLinksGridFlex">
-							<FormLink v-if="meta.tosUrl" :to="meta.tosUrl" external
+							<FormLink
+								v-if="meta.tosUrl"
+								:to="meta.tosUrl"
+								external
 								><template #icon
 									><i
 										class="ph-scroll ph-bold ph-lg"
@@ -164,40 +171,53 @@
 						<div class="_formLinksGridFlex">
 							<FormLink wrap>
 								{{ i18n.ts.timelines }}
-								<template #suffix>{{ 
-										`${ i18n.ts._timelines.home },` +
-											(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
-											(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.social },`) +
-											(meta.disableRecommendedTimeline ? '' : ` ${ i18n.ts._timelines.recommended },`) +
-											(meta.disableGlobalTimeline ? '' : ` ${ i18n.ts._timelines.global }`)
+								<template #suffix>{{
+									`${i18n.ts._timelines.home},` +
+									(meta.disableLocalTimeline
+										? ""
+										: ` ${i18n.ts._timelines.local},`) +
+									(meta.disableLocalTimeline
+										? ""
+										: ` ${i18n.ts._timelines.social},`) +
+									(meta.disableRecommendedTimeline
+										? ""
+										: ` ${i18n.ts._timelines.recommended},`) +
+									(meta.disableGlobalTimeline
+										? ""
+										: ` ${i18n.ts._timelines.global}`)
 								}}</template>
 							</FormLink>
 							<FormLink wrap>
 								{{ i18n.ts.characterLimit }}
 								<template #suffix>{{
-									i18n.t('_cw.chars', { count: meta.maxNoteTextLength })
+									i18n.t("_cw.chars", {
+										count: meta.maxNoteTextLength,
+									})
 								}}</template>
 							</FormLink>
 							<FormLink wrap>
 								{{ i18n.ts.advancedSearch }}
 								<template #suffix>{{
-									meta.features.searchFilters ? i18n.ts.yes : i18n.ts.no
+									meta.features.searchFilters
+										? i18n.ts.yes
+										: i18n.ts.no
 								}}</template>
 							</FormLink>
 							<FormLink wrap>
 								{{ i18n.ts.driveCapacityPerLocalAccount }}
 								<template #suffix>{{
-									meta.driveCapacityPerLocalUserMb + 'MB'
+									meta.driveCapacityPerLocalUserMb + "MB"
 								}}</template>
 							</FormLink>
 							<FormLink wrap>
 								{{ i18n.ts.pushNotification }}
 								<template #suffix>{{
-									meta.features.serviceWorker ? i18n.ts.yes : i18n.ts.no
+									meta.features.serviceWorker
+										? i18n.ts.yes
+										: i18n.ts.no
 								}}</template>
 							</FormLink>
 
-
 							<!-- <MkKeyValue 
 								:text="`${ i18n.ts._timelines.home },` +
 										(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
@@ -262,15 +282,18 @@ let meta = $ref<DetailedInstanceMetadata>();
 
 let isLong = $ref(false);
 let collapsed = $ref(!isLong);
-const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent");;
+const accentColor = getComputedStyle(document.documentElement).getPropertyValue(
+	"--accent"
+);
 let wallpaper = $ref();
 
 os.api("meta", { detail: true }).then((res) => {
 	meta = res;
 	isLong = meta.description && meta.description.length > 500;
-	wallpaper = 
-		meta.backgroundImageUrl && props.sticky ? `url(${meta.backgroundImageUrl})` 
-		: meta.themeColor ?? accentColor;
+	wallpaper =
+		meta.backgroundImageUrl && props.sticky
+			? `url(${meta.backgroundImageUrl})`
+			: meta.themeColor ?? accentColor;
 	// wallpaper = meta.backgroundImageUrl ? null : meta.themeColor ?? accentColor;
 });
 
@@ -357,7 +380,7 @@ function showMenu(ev) {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	background: v-bind('wallpaper');
+	background: v-bind("wallpaper");
 	background-position: center;
 	background-size: cover;
 	background-attachment: fixed;
@@ -372,7 +395,12 @@ function showMenu(ev) {
 		padding-top: min(56.25%, 70vh);
 		margin-bottom: calc(-120px - var(--radius));
 		mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
-		-webkit-mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
+		-webkit-mask: linear-gradient(
+			to bottom,
+			black,
+			calc(100% - 50px),
+			transparent
+		);
 		transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
 		img {
 			position: absolute;
@@ -429,10 +457,14 @@ function showMenu(ev) {
 				filter: brightness(1.2);
 				pointer-events: none;
 				z-index: -1;
-				opacity: .5;
+				opacity: 0.5;
 				clip-path: inset(55px 0 0 0 round var(--radius));
 				mask: linear-gradient(transparent 55px, #000 50px, transparent);
-				-webkit-mask: llinear-gradient(transparent 55px, #000 50px, transparent);
+				-webkit-mask: llinear-gradient(
+					transparent 55px,
+					#000 50px,
+					transparent
+				);
 			}
 			> .logo {
 				height: 80px;
@@ -444,7 +476,7 @@ function showMenu(ev) {
 				&:last-child {
 					display: block;
 					margin-inline: auto;
-					margin-block: .5em 1em !important;
+					margin-block: 0.5em 1em !important;
 				}
 			}
 			> h1 {
@@ -476,7 +508,10 @@ function showMenu(ev) {
 				position: relative;
 				max-height: calc(9em + 50px);
 				mask: linear-gradient(black calc(100% - 64px), transparent);
-				-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
+				-webkit-mask: linear-gradient(
+					black calc(100% - 64px),
+					transparent
+				);
 			}
 		}
 		.announcements {