From 6d3a5d63cca9a7439debe58aefccd754bf2d6105 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Fri, 19 May 2023 15:41:59 -0700
Subject: [PATCH] chore: formatting

---
 packages/client/src/components/MkButton.vue   |  2 +-
 .../src/components/MkGalleryPostPreview.vue   |  3 +-
 .../client/src/components/MkMediaList.vue     |  4 +-
 packages/client/src/components/MkNote.vue     |  6 +-
 .../client/src/components/MkNoteDetailed.vue  | 72 ++++++++-----------
 packages/client/src/components/MkNoteSub.vue  |  2 +-
 .../src/components/MkShowMoreButton.vue       |  7 +-
 .../src/components/MkSubNoteContent.vue       | 16 ++++-
 packages/client/src/components/MkTab.vue      | 16 ++---
 .../src/components/MkTutorialDialog.vue       |  5 +-
 .../client/src/components/MkUserCardMini.vue  |  8 ++-
 packages/client/src/components/global/MkA.vue |  1 -
 packages/client/src/pages/note.vue            |  8 ++-
 13 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 2290daa6b0..140b8ddb03 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -193,7 +193,7 @@ function onMousedown(evt: MouseEvent): void {
 
 	&.mini {
 		padding: 4px 8px;
-		font-size: .9em;
+		font-size: 0.9em;
 		border-radius: 100px;
 	}
 
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index 9004a449d9..f171417f7b 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -34,7 +34,8 @@ const props = defineProps<{
 	position: relative;
 	height: 200px;
 
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		text-decoration: none;
 		color: var(--accent);
 
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 237afc6753..44b05e269d 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -168,11 +168,11 @@ onMounted(() => {
 		addEventListener("popstate", close);
 		// This is a workaround. Not sure why, but when clicking to open, it doesn't move focus to the photoswipe. Preventing using esc to close. However when using keyboard to open it already focuses the lightbox fine.
 		lightbox.pswp.element.focus();
-	})
+	});
 	lightbox.on("close", () => {
 		removeEventListener("popstate", close);
 		history.back();
-	})
+	});
 
 	lightbox.init();
 
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 9045c890bd..c9c38a53e0 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -130,7 +130,9 @@
 						@click="reply()"
 					>
 						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-						<template v-if="appearNote.repliesCount > 0 && !detailedView">
+						<template
+							v-if="appearNote.repliesCount > 0 && !detailedView"
+						>
 							<p class="count">{{ appearNote.repliesCount }}</p>
 						</template>
 					</button>
@@ -672,7 +674,7 @@ defineExpose({
 				display: flex;
 				justify-content: space-between;
 				flex-wrap: wrap;
-				gap: .7em;
+				gap: 0.7em;
 				margin-top: 16px;
 				opacity: 0.7;
 				font-size: 0.9em;
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index a6b2bdf7d0..f9f0e60a30 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -33,11 +33,7 @@
 			detailedView
 		></MkNote>
 
-		<MkTab 
-			v-model="tab"
-			:style="'chips'"
-			@update:modelValue="loadTab"
-		>
+		<MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab">
 			<option value="replies">
 				<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 				<template v-if="appearNote.repliesCount > 0">
@@ -77,8 +73,10 @@
 			:conversation="replies"
 			:detailedView="true"
 		/>
-		<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" />
-		
+		<MkLoading
+			v-else-if="tab === 'replies' && appearNote.repliesCount > 0"
+		/>
+
 		<MkNoteSub
 			v-if="directQuotes && tab === 'quotes'"
 			v-for="note in directQuotes"
@@ -89,27 +87,26 @@
 			:detailedView="true"
 		/>
 		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
-		
+
 		<!-- <MkPagination
 			v-if="tab === 'renotes'"
 			v-slot="{ items }"
 			ref="pagingComponent"
 			:pagination="pagination"
 		> -->
-			<MkUserCardMini
-				v-if="tab === 'renotes' && renotes"
-				v-for="item in renotes"
-				:key="item.user.id"
-				:user="item.user"
-				:with-chart="false"
-			/>
+		<MkUserCardMini
+			v-if="tab === 'renotes' && renotes"
+			v-for="item in renotes"
+			:key="item.user.id"
+			:user="item.user"
+			:with-chart="false"
+		/>
 		<!-- </MkPagination> -->
-		<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" />
+		<MkLoading
+			v-else-if="tab === 'renotes' && appearNote.renoteCount > 0"
+		/>
 
-		<div
-			v-if="tab === 'clips' && clips.length > 0"
-			class="_content clips"
-		>
+		<div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
 			<MkA
 				v-for="item in clips"
 				:key="item.id"
@@ -117,10 +114,7 @@
 				class="item _panel"
 			>
 				<b>{{ item.name }}</b>
-				<div
-					v-if="item.description"
-					class="description"
-				>
+				<div v-if="item.description" class="description">
 					{{ item.description }}
 				</div>
 				<div class="user">
@@ -129,10 +123,7 @@
 						class="avatar"
 						:show-indicator="true"
 					/>
-					<MkUserName
-						:user="item.user"
-						:nowrap="false"
-					/>
+					<MkUserName :user="item.user" :nowrap="false" />
 				</div>
 			</MkA>
 		</div>
@@ -358,16 +349,9 @@ os.api("notes/children", {
 }).then((res) => {
 	replies.value = res;
 	directReplies = res
-		.filter(
-			(note) =>
-				note.replyId === appearNote.id
-		)
+		.filter((note) => note.replyId === appearNote.id)
 		.reverse();
-	directQuotes = res
-		.filter(
-			(note) =>
-				note.renoteId === appearNote.id
-		);
+	directQuotes = res.filter((note) => note.renoteId === appearNote.id);
 });
 
 conversation = null;
@@ -404,7 +388,7 @@ function loadTab() {
 			limit: 100,
 		}).then((res) => {
 			renotes = res;
-		})
+		});
 	}
 }
 
@@ -627,7 +611,9 @@ onUnmounted(() => {
 				padding-left: 10px;
 			}
 		}
-		> .clips, > .chips, > :deep(.user-card-mini) {
+		> .clips,
+		> .chips,
+		> :deep(.user-card-mini) {
 			padding-inline: 16px !important;
 		}
 	}
@@ -643,7 +629,8 @@ onUnmounted(() => {
 	opacity: 0.7;
 }
 
-.clips { // want to redesign at some point
+.clips {
+	// want to redesign at some point
 	padding: 24px 32px;
 	padding-top: 0;
 	> .item {
@@ -652,8 +639,9 @@ onUnmounted(() => {
 		// background: var(--buttonBg);
 		border: 1px solid var(--divider);
 		margin-bottom: var(--margin);
-		transition: background .2s;
-		&:hover, &:focus-within {
+		transition: background 0.2s;
+		&:hover,
+		&:focus-within {
 			background: var(--panelHighlight);
 		}
 
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 9a3e577b6f..2b8d6e8df9 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -135,7 +135,7 @@
 				:key="reply.id"
 				:note="reply"
 				class="reply"
-				:class="{single: replies.length == 1}"
+				:class="{ single: replies.length == 1 }"
 				:conversation="conversation"
 				:depth="replies.lenght == 1 ? depth : depth + 1"
 				:replyLevel="replyLevel + 1"
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 481bc510db..3dd9acb9b0 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -1,5 +1,10 @@
 <template>
-	<button ref="el" class="_button" :class="{ fade: modelValue, showLess: !modelValue }" @click.stop="toggle">
+	<button
+		ref="el"
+		class="_button"
+		:class="{ fade: modelValue, showLess: !modelValue }"
+		@click.stop="toggle"
+	>
 		<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
 	</button>
 </template>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index a85aef3a36..9ac47f5da0 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -125,16 +125,26 @@
 					</div>
 				</template>
 				<div
-					v-if="note.cw && !showContent || showMoreButton && collapsed"
+					v-if="
+						(note.cw && !showContent) ||
+						(showMoreButton && collapsed)
+					"
 					tabindex="0"
-					v-on:focus="cwButton?.focus(); showMoreButton?.focus()"
+					v-on:focus="
+						cwButton?.focus();
+						showMoreButton?.focus();
+					"
 				></div>
 			</div>
 			<XShowMoreButton
 				v-if="isLong && !collapsed"
 				v-model="collapsed"
 			></XShowMoreButton>
-			<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" />
+			<XCwButton
+				v-if="note.cw && showContent"
+				v-model="showContent"
+				:note="note"
+			/>
 		</div>
 		<MkButton
 			v-if="hasMfm && defaultStore.state.animatedMfm"
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 1f89c8ad07..2eb3e6ac12 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -16,10 +16,7 @@ export default defineComponent({
 		return h(
 			"div",
 			{
-				class: [
-					"pxhvhrfw",
-					{ chips: this.style === "chips" },
-				],
+				class: ["pxhvhrfw", { chips: this.style === "chips" }],
 				role: "tablist",
 			},
 			options.map((option) =>
@@ -30,7 +27,10 @@ export default defineComponent({
 							class: "_button",
 							role: "tab",
 							key: option.key,
-							'aria-selected': this.modelValue === option.props?.value ? "true" : "false",
+							"aria-selected":
+								this.modelValue === option.props?.value
+									? "true"
+									: "false",
 							onClick: () => {
 								this.$emit(
 									"update:modelValue",
@@ -87,7 +87,7 @@ export default defineComponent({
 
 	&.chips {
 		padding: 12px 32px;
-		font-size: .85em;
+		font-size: 0.85em;
 		overflow-x: auto;
 		> button {
 			display: flex;
@@ -96,11 +96,11 @@ export default defineComponent({
 			flex: unset;
 			margin: 0;
 			margin-right: 8px;
-			padding: .5em 1em;
+			padding: 0.5em 1em;
 			border-radius: 100px;
 			background: var(--buttonBg);
 			> i {
-				margin-top: -.1em;
+				margin-top: -0.1em;
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index eff6f20c8b..6927e961c6 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -103,7 +103,10 @@
 								</template>
 							</I18n>
 							<br />
-							<XPostForm class="post-form _block" :show-mfm-cheat-sheet="false"/>
+							<XPostForm
+								class="post-form _block"
+								:show-mfm-cheat-sheet="false"
+							/>
 						</section>
 						<section
 							v-else-if="tutorial === 4"
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 908882ec30..6552af028e 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -29,7 +29,8 @@ import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { acct, userPage } from "@/filters/user";
 
-const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		user: misskey.entities.User;
 		withChart?: boolean;
 	}>(),
@@ -63,7 +64,7 @@ if (props.withChart) {
 	padding: 16px;
 	background: var(--panel);
 	border-radius: 8px;
-	transition: background .2s;
+	transition: background 0.2s;
 
 	> :global(.avatar) {
 		display: block;
@@ -104,7 +105,8 @@ if (props.withChart) {
 		height: 30px;
 	}
 
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		background: var(--panelHighlight);
 	}
 
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index bb1321d9f4..d276a4d9ac 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -99,7 +99,6 @@ function popout() {
 
 function nav(ev: MouseEvent) {
 	if (!ev.ctrlKey && props.behavior !== "browser") {
-
 		ev.preventDefault();
 
 		if (props.behavior) {
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 72b71996ed..8dc944213b 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -27,7 +27,9 @@
 								v-if="!showNext && hasNext"
 								class="load next"
 								@click="showNext = true"
-								v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.newer})`"
+								v-tooltip="
+									`${i18n.ts.loadMore} (${i18n.ts.newer})`
+								"
 								><i class="ph-caret-up ph-bold ph-lg"></i
 							></MkButton>
 							<div class="note _gap">
@@ -45,7 +47,9 @@
 								v-if="!showPrev && hasPrev"
 								class="load prev"
 								@click="showPrev = true"
-								v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.older})`"
+								v-tooltip="
+									`${i18n.ts.loadMore} (${i18n.ts.older})`
+								"
 								><i class="ph-caret-down ph-bold ph-lg"></i
 							></MkButton>
 						</div>