From 980bf31ce09639cfe27aa4323f0cdd7f10ddd9b8 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Fri, 7 Apr 2023 23:13:01 -0700
Subject: [PATCH] fix comments

---
 package.json                                  |   2 +-
 packages/client/src/components/MkMention.vue  |  62 ++--
 packages/client/src/components/MkSignin.vue   | 291 ++++++++++++------
 .../client/src/components/MkSigninDialog.vue  |  14 +-
 .../client/src/components/global/MkEmoji.vue  |   6 +-
 packages/client/src/pages/timeline.vue        |  35 +--
 .../client/src/pages/welcome.entrance.a.vue   |  36 +--
 packages/client/src/pages/welcome.vue         |   6 +-
 8 files changed, 282 insertions(+), 170 deletions(-)

diff --git a/package.json b/package.json
index 4871166167..85766e5a4d 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
 		"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
 		"mocha": "pnpm --filter backend run mocha",
 		"test": "pnpm run mocha",
-		"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format",
+		"format": "pnpm rome format packages/**/* --write ; pnpm --filter client run format",
 		"clean": "pnpm node ./scripts/clean.js",
 		"clean-all": "pnpm node ./scripts/clean-all.js",
 		"cleanall": "pnpm run clean-all"
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 7e55ae0e0d..2cc29fec11 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -1,25 +1,45 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
-	// #v-ifdef VITE_CAPACITOR 
-    <img
-      :class="$style.icon"
-      :src="`${$i.instanceUrl}/avatar/@${username}@${host}`"
-      alt=""
-    />	
-	// #v-else 
-	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
-	// #v-endif 
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</a>
+	<MkA
+		v-if="url.startsWith('/')"
+		v-user-preview="canonical"
+		class="akbvjaqn"
+		:class="{ isMe }"
+		:to="url"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
+		<!-- #v-ifdef VITE_CAPACITOR -->
+		<img
+			:class="$style.icon"
+			:src="`${$i.instanceUrl}/avatar/@${username}@${host}`"
+			alt=""
+		/>
+		<!-- #v-else -->
+		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
+		<!-- #v-endif -->
+		<span class="main">
+			<span class="username">@{{ username }}</span>
+			<span
+				v-if="host != localHost || $store.state.showFullAcct"
+				class="host"
+				>@{{ toUnicode(host) }}</span
+			>
+		</span>
+	</MkA>
+	<a
+		v-else
+		class="akbvjaqn"
+		:href="url"
+		target="_blank"
+		rel="noopener"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
+		<span class="main">
+			<span class="username">@{{ username }}</span>
+			<span class="host">@{{ toUnicode(host) }}</span>
+		</span>
+	</a>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 83aa65f21a..2ac3abc06e 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -1,88 +1,91 @@
 <template>
-// #v-ifdef VITE_CAPACITOR
-  <form class="eppvobhk" :class="{ signing }" @submit.prevent="onSubmit">
-    <div class="normal-signin">
-      Instance
-      <MkSelect v-model="instanceUrl" large :model-value="instances[0]?.url">
-        <option value="other">
-          Select other instance
-        </option>
-        <option
-          v-for="(instance, i) in instances"
-          :key="instance.url"
-          :value="instance.url"
-          :selected="i === 0"
-        >
-          {{ instance.name }}
-        </option>
-      </MkSelect>
-      <template v-if="instanceUrl === 'other'">
-        URL
-			<MkInput
-          v-model="instanceUrlOther"
+	<!-- #v-ifdef VITE_CAPACITOR -->
+	<form class="eppvobhk" :class="{ signing }" @submit.prevent="onSubmit">
+		<div class="normal-signin">
+			Instance
+			<MkSelect
+				v-model="instanceUrl"
+				large
+				:model-value="instances[0]?.url"
+			>
+				<option value="other">Select other instance</option>
+				<option
+					v-for="(instance, i) in instances"
+					:key="instance.url"
+					:value="instance.url"
+					:selected="i === 0"
+				>
+					{{ instance.name }}
+				</option>
+			</MkSelect>
+			<template v-if="instanceUrl === 'other'">
+				URL
+				<MkInput
+					v-model="instanceUrlOther"
 					:spellcheck="false"
 					autofocus
 					required
-			/>
-      </template>
-      Access Token
-      <MkInput
-        v-model="token"
-        :spellcheck="false"
-        autofocus
-        required
-        data-cy-signin-username
-      ></MkInput>
-      <MkButton
-        class="_formBlock"
-        type="submit"
-        primary
-        :disabled="signing"
-        style="margin: 0 auto"
-      >
-        {{ signing ? "Logging in" : "Login" }}
-      </MkButton>
+				/>
+			</template>
+			Access Token
+			<MkInput
+				v-model="token"
+				:spellcheck="false"
+				autofocus
+				required
+				data-cy-signin-username
+			></MkInput>
+			<MkButton
+				class="_formBlock"
+				type="submit"
+				primary
+				:disabled="signing"
+				style="margin: 0 auto"
+			>
+				{{ signing ? "Logging in" : "Login" }}
+			</MkButton>
 		</div>
-    <div style="display: flex; justify-content: center"></div>
-       <a
-        href="https://misskey.io/notes/99l9jqqun2"
-        target="_blank"
-        style="color: var(--link); text-align: center"
-        >How to create a access token</a>
-</form>
-// #v-else
-<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _section _formRoot">
-		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
-		<MkInfo v-if="message">
-			{{ message }}
-		</MkInfo>
-		<div v-if="!totpLogin" class="normal-signin">
-			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
-				<template #prefix>@</template>
-				<template #suffix>@{{ host }}</template>
-			</MkInput>
-			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
-				<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
-			</MkInput>
-			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 1rem auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
-		</div>
-		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
-			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
-				<p>{{ i18n.ts.tapSecurityKey }}</p>
-				<MkButton v-if="!queryingKey" @click="queryKey">
-					{{ i18n.ts.retry }}
-				</MkButton>
-			</div>
-			<div v-if="user && user.securityKeys" class="or-hr">
-				<p class="or-msg">{{ i18n.ts.or }}</p>
-			</div>
-			<div class="twofa-group totp-group">
-				<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
-				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
-					<template #label>{{ i18n.ts.password }}</template>
-					<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+		<div style="display: flex; justify-content: center"></div>
+		<a
+			href="https://misskey.io/notes/99l9jqqun2"
+			target="_blank"
+			style="color: var(--link); text-align: center"
+			>How to create a access token</a
+		>
+	</form>
+	<!-- #v-else -->
+	<form
+		class="eppvobhk _monolithic_"
+		:class="{ signing, totpLogin }"
+		@submit.prevent="onSubmit"
+	>
+		<div class="auth _section _formRoot">
+			<div
+				v-show="withAvatar"
+				class="avatar"
+				:style="{
+					backgroundImage: user ? `url('${user.avatarUrl}')` : null,
+					marginBottom: message ? '1.5em' : null,
+				}"
+			></div>
+			<MkInfo v-if="message">
+				{{ message }}
+			</MkInfo>
+			<div v-if="!totpLogin" class="normal-signin">
+				<MkInput
+					v-model="username"
+					class="_formBlock"
+					:placeholder="i18n.ts.username"
+					type="text"
+					pattern="^[a-zA-Z0-9_]+$"
+					:spellcheck="false"
+					autofocus
+					required
+					data-cy-signin-username
+					@update:modelValue="onUsernameChange"
+				>
+					<template #prefix>@</template>
+					<template #suffix>@{{ host }}</template>
 				</MkInput>
 				<MkInput
 					v-if="!user || (user && !user.usePasswordLessLogin)"
@@ -150,38 +153,132 @@
 						></template>
 					</MkInput>
 					<MkInput
-						v-model="token"
-						type="text"
-						pattern="^[0-9]{6}$"
-						autocomplete="off"
-						:spellcheck="false"
+						v-if="!user || (user && !user.usePasswordLessLogin)"
+						v-model="password"
+						class="_formBlock"
+						:placeholder="i18n.ts.password"
+						type="password"
+						:with-password-toggle="true"
 						required
+						data-cy-signin-password
 					>
-						<template #label>{{ i18n.ts.token }}</template>
 						<template #prefix
-							><i class="ph-poker-chip ph-bold ph-lg"></i
+							><i class="ph-lock ph-bold ph-lg"></i
 						></template>
+						<template #caption
+							><button
+								class="_textButton"
+								type="button"
+								@click="resetPassword"
+							>
+								{{ i18n.ts.forgotPassword }}
+							</button></template
+						>
 					</MkInput>
 					<MkButton
+						class="_formBlock"
 						type="submit"
-						:disabled="signing"
 						primary
-						style="margin: 0 auto"
+						:disabled="signing"
+						style="margin: 1rem auto"
 						>{{
 							signing ? i18n.ts.loggingIn : i18n.ts.login
 						}}</MkButton
 					>
 				</div>
+				<div
+					v-if="totpLogin"
+					class="2fa-signin"
+					:class="{ securityKeys: user && user.securityKeys }"
+				>
+					<div
+						v-if="user && user.securityKeys"
+						class="twofa-group tap-group"
+					>
+						<p>{{ i18n.ts.tapSecurityKey }}</p>
+						<MkButton v-if="!queryingKey" @click="queryKey">
+							{{ i18n.ts.retry }}
+						</MkButton>
+					</div>
+					<div v-if="user && user.securityKeys" class="or-hr">
+						<p class="or-msg">{{ i18n.ts.or }}</p>
+					</div>
+					<div class="twofa-group totp-group">
+						<p style="margin-bottom: 0">
+							{{ i18n.ts.twoStepAuthentication }}
+						</p>
+						<MkInput
+							v-if="user && user.usePasswordLessLogin"
+							v-model="password"
+							type="password"
+							:with-password-toggle="true"
+							required
+						>
+							<template #label>{{ i18n.ts.password }}</template>
+							<template #prefix
+								><i class="ph-lock ph-bold ph-lg"></i
+							></template>
+						</MkInput>
+						<MkInput
+							v-model="token"
+							type="text"
+							pattern="^[0-9]{6}$"
+							autocomplete="off"
+							:spellcheck="false"
+							required
+						>
+							<template #label>{{ i18n.ts.token }}</template>
+							<template #prefix
+								><i class="ph-poker-chip ph-bold ph-lg"></i
+							></template>
+						</MkInput>
+						<MkButton
+							type="submit"
+							:disabled="signing"
+							primary
+							style="margin: 0 auto"
+							>{{
+								signing ? i18n.ts.loggingIn : i18n.ts.login
+							}}</MkButton
+						>
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div class="social _section">
-		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ph-twitter-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Twitter' }) }}</a>
-		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ph-github-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'GitHub' }) }}</a>
-		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ph-discord-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Discord' }) }}</a>
-	</div>
-</form>
-// #v-endif
+		<div class="social _section">
+			<a
+				v-if="meta && meta.enableTwitterIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/twitter`"
+				><i
+					class="ph-twitter-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "Twitter" }) }}</a
+			>
+			<a
+				v-if="meta && meta.enableGithubIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/github`"
+				><i
+					class="ph-github-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "GitHub" }) }}</a
+			>
+			<a
+				v-if="meta && meta.enableDiscordIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/discord`"
+				><i
+					class="ph-discord-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "Discord" }) }}</a
+			>
+		</div>
+	</form>
+	<!-- #v-endif -->
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkSigninDialog.vue b/packages/client/src/components/MkSigninDialog.vue
index 52f758df32..19e27d1681 100644
--- a/packages/client/src/components/MkSigninDialog.vue
+++ b/packages/client/src/components/MkSigninDialog.vue
@@ -1,11 +1,11 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	@close="onClose"
-	@closed="emit('closed')"
->
-	<template #header>Login</template>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		@close="onClose"
+		@closed="emit('closed')"
+	>
+		<template #header>Login</template>
 
 		<MkSignin :auto-set="autoSet" :message="message" @login="onLogin" />
 	</XModalWindow>
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 9e78e5c60a..f07d7e055a 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -1,11 +1,7 @@
 <template>
 <img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
 <img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" 
-// #v-ifdef VITE_CAPACITOR
-	:src="char2filePath(char)"
-	// #v-else
-	:src="url"
-	// #v-endif
+	:src="char2filePath(char) || url"
  	:alt="alt" :title="alt" decoding="async"/>
 <span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
 <span v-else>{{ emoji }}</span>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 7b11dbb433..eb01ef012d 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -67,22 +67,22 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XTutorial from '@/components/MkTutorialDialog.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, ref, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XTutorial from "@/components/MkTutorialDialog.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import { scroll } from "@/scripts/scroll";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import { $i } from "@/account";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import "swiper/scss";
+import "swiper/scss/virtual";
 // #v-ifdef VITE_CAPACITOR
 import { Camera } from "@capacitor/camera";
 // #v-endif
@@ -371,10 +371,9 @@ onMounted(() => {
 // #v-ifdef VITE_CAPACITOR
 const permissionState = await Camera.checkPermissions();
 if (!permissionState.camera) {
-  Camera.requestPermissions({ permissions: ["photos", "camera"] });
+	Camera.requestPermissions({ permissions: ["photos", "camera"] });
 }
 // #v-endif
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index f1f7d35284..5e5f15705e 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -1,16 +1,16 @@
 <template>
-	// #v-ifdef VITE_CAPACITOR
+	<!-- #v-ifdef VITE_CAPACITOR -->
 <div class="rsqzvsbo">
-	// #v-else
+	<!-- #v-else -->
 <div v-if="meta" class="rsqzvsbo">
-	// #v-endif
+	<!-- #v-endif -->
 	<div class="top">
-		// #v-ifdef VITE_CAPACITOR
+		<!-- #v-ifdef VITE_CAPACITOR -->
 		<!-- aaa -->
-		// #v-else
+		<!-- #v-else -->
 		<MkFeaturedPhotos class="bg"/>
 		<XTimeline class="tl"/>
-		// #v-endif
+		<!-- #v-endif -->
 		<div class="shape1"></div>
 		<div class="shape2"></div>
 		<img src="/client-assets/misskey.svg" class="misskey"/>
@@ -28,30 +28,30 @@
 			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
 		</div>
 		<div class="main">
-			// #v-ifdef VITE_CAPACITOR
+			<!-- #v-ifdef VITE_CAPACITOR -->
 			<!-- aaa -->
-			// #v-else
+			<!-- #v-else -->
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			// #v-endif
+			<!-- #v-endif -->
 			<button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
 			<div class="fg">
 				<h1>
-					// #v-ifdef VITE_CAPACITOR
+					<!-- #v-ifdef VITE_CAPACITOR -->
 					<span class="text">Calckey Mobile</span>
-					// #v-else
+					<!-- #v-else -->
 					<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
 					<span v-else class="text">{{ instanceName }}</span>
-					// #v-endif
+					<!-- #v-endif -->
 				</h1>
 				<div class="about">
-					// #v-ifdef VITE_CAPACITOR
+					<!-- #v-ifdef VITE_CAPACITOR -->
 					<div class="desc">🌎 Calckey is an open source, decentralized social media platform that's free forever! 🚀</div>
-					// #v-else
+					<!-- #v-else -->
 					<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
-					// #v-endif
+					<!-- #v-endif -->
 				</div>
 				<div class="action">
-					// #v-ifdef VITE_CAPACITOR
+					<!-- #v-ifdef VITE_CAPACITOR -->
 					<MkButton inline rounded data-cy-signin @click="signin()">Login</MkButton>
 					<MkSelect v-model="lang">
               <template #label>{{ i18n.ts.uiLanguage }}</template>
@@ -66,11 +66,11 @@
                 {{ x[1] }}
               </option>
             </MkSelect>
-					// #v-else
+					<!-- #v-else -->
 					<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
 					<MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
 					<MkButton inline rounded style="margin-left: 12px; margin-top: 12px;" onclick="window.location.href='/explore'">Explore</MkButton>
-					// #v-endif
+					<!-- #v-endif -->
 				</div>
 			</div>
 			<div v-if="instances" class="federation">
diff --git a/packages/client/src/pages/welcome.vue b/packages/client/src/pages/welcome.vue
index d7b93dc893..7f4bb84e4e 100644
--- a/packages/client/src/pages/welcome.vue
+++ b/packages/client/src/pages/welcome.vue
@@ -1,12 +1,12 @@
 <template>
-// #v-ifdef VITE_CAPACITOR
+<!-- #v-ifdef VITE_CAPACITOR -->
 <XEntrance />
-// #v-else
+<!-- #v-else -->
 <div v-if="meta">
 	<XSetup v-if="meta.requireSetup"/>
 	<XEntrance v-else/>
 </div>
-// #v-endif
+<!-- #v-endif -->
 </template>
 
 <script lang="ts" setup>