chore: formatting

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;
 	}
 

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);
 

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();
 

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;

packages/client/src/components/MkNoteDetailed.vue

@@ -33,11 +33,7 @@
 			detailedView
 		></MkNote>
 
-		<MkTab 
+		<MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab">
-			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,7 +73,9 @@
 			: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'"
@@ -104,12 +102,11 @@
 			:with-chart="false"
 		/>
 		<!-- </MkPagination> -->
-		<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" />
+		<MkLoading
+			v-else-if="tab === 'renotes' && appearNote.renoteCount > 0"
+		/>
 
-		<div
+		<div v-if="tab === 'clips' && clips.length > 0" class="_content clips">
-			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
+				<div v-if="item.description" class="description">
-					v-if="item.description"
-					class="description"
-				>
 					{{ item.description }}
 				</div>
 				<div class="user">
@@ -129,10 +123,7 @@
 						class="avatar"
 						:show-indicator="true"
 					/>
-					<MkUserName
+					<MkUserName :user="item.user" :nowrap="false" />
-						:user="item.user"
-						:nowrap="false"
-					/>
 				</div>
 			</MkA>
 		</div>
@@ -358,16 +349,9 @@ os.api("notes/children", {
 }).then((res) => {
 	replies.value = res;
 	directReplies = res
-		.filter(
+		.filter((note) => note.replyId === appearNote.id)
-			(note) =>
-				note.replyId === appearNote.id
-		)
 		.reverse();
-	directQuotes = res
+	directQuotes = res.filter((note) => note.renoteId === appearNote.id);
-		.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;
+		transition: background 0.2s;
-		&:hover, &:focus-within {
+		&:hover,
+		&:focus-within {
 			background: var(--panelHighlight);
 		}
 

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"

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>

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"

packages/client/src/components/MkTab.vue

@@ -16,10 +16,7 @@ export default defineComponent({
 		return h(
 			"div",
 			{
-				class: [
+				class: ["pxhvhrfw", { chips: this.style === "chips" }],
-					"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;
 			}
 		}
 	}

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"

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);
 	}
 

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) {

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>