chore: format

packages/backend/src/server/web/boot.js

@@ -97,7 +97,8 @@
 
 	let fontSize = localStorage.getItem("fontSize");
 	if (fontSize) {
-		if (fontSize < 10) { // need to do this for now, as values before were 1, 2, 3 depending on the option
+		if (fontSize < 10) {
+			// need to do this for now, as values before were 1, 2, 3 depending on the option
 			localStorage.setItem("fontSize", null);
 			fontSize = localStorage.getItem("fontSize");
 		}

packages/client/src/components/MkInstanceTicker.vue

@@ -1,7 +1,9 @@
 <template>
 	<div
 		class="instance-ticker"
-		v-tooltip="instance.softwareName ? capitalize(instance.softwareName) : null"
+		v-tooltip="
+			instance.softwareName ? capitalize(instance.softwareName) : null
+		"
 		ref="ticker"
 		:style="bg"
 	>

packages/client/src/components/MkKeyValue.vue

@@ -4,11 +4,7 @@
 			<slot name="key"></slot>
 		</div>
 		<div class="value">
-			<Mfm
+			<Mfm v-if="text" :text="text" :advancedMfm="false"></Mfm>
-				v-if="text"
-				:text="text"
-				:advancedMfm="false"
-			></Mfm>
 			<slot v-else name="value"></slot>
 			<button
 				v-if="copy"

packages/client/src/components/MkMention.vue

@@ -1,11 +1,5 @@
 <template>
-	<a
+	<a v-if="to" class="mention" :href="to" rel="noopener" @click.stop>
-		v-if="to"
-		class="mention"
-		:href="to"
-		rel="noopener"
-		@click.stop
-	>
 		<i class="icon ph-bold ph-large" :class="'ph-' + icon"></i>
 		<span class="main">
 			<slot></slot>
@@ -58,19 +52,19 @@ const props = defineProps<{
 	icon?: string;
 }>();
 
-const canonical =
+const canonical = props.host
-	props.host ?
+	? props.host === localHost
-		props.host === localHost
+		? `@${props.username}`
-			? `@${props.username}`
+		: `@${props.username}@${toUnicode(props.host)}`
-			: `@${props.username}@${toUnicode(props.host)}` : null;
+	: null;
 
 const url = `/${canonical}`;
 
-const isMe =
+const isMe = props.username
-	props.username ?
+	? $i &&
-		$i &&
+	  `@${props.username}@${toUnicode(props.host)}` ===
-		`@${props.username}@${toUnicode(props.host)}` ===
+			`@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
-			`@${$i.username}@${toUnicode(localHost)}`.toLowerCase() : null;
+	: null;
 </script>
 
 <style lang="scss" scoped>
@@ -115,7 +109,7 @@ const isMe =
 	> i.icon {
 		vertical-align: middle;
 		font-size: 1.2em;
-		margin-left: .4em;
+		margin-left: 0.4em;
 	}
 
 	> .main > .host {

packages/client/src/components/MkNote.vue

@@ -75,10 +75,7 @@
 			<div class="main">
 				<div class="header-container">
 					<MkAvatar class="avatar" :user="appearNote.user" />
-					<XNoteHeader
+					<XNoteHeader class="header" :note="appearNote" />
-						class="header"
-						:note="appearNote"
-					/>
 				</div>
 				<div class="body">
 					<MkSubNoteContent

packages/client/src/components/form/link.vue

@@ -62,7 +62,7 @@ const props = defineProps<{
 		background: var(--buttonBg);
 		border-radius: 6px;
 		font-size: 0.9em;
-		transition: background .2s;
+		transition: background 0.2s;
 
 		&._button:hover {
 			text-decoration: none;

packages/client/src/components/global/MkPageHeader.vue

@@ -79,7 +79,9 @@
 				ref="tabsEl"
 				v-if="hasTabs"
 				class="tabs"
-				:class="{ collapse: hasTabs && tabs.length > 3 && !noTabCollapse }"
+				:class="{
+					collapse: hasTabs && tabs.length > 3 && !noTabCollapse,
+				}"
 			>
 				<button
 					v-for="tab in tabs"
@@ -183,10 +185,9 @@ const props = withDefaults(
 		to?: string;
 	}>(),
 	{
-		displayHomeButton: !$i
+		displayHomeButton: !$i,
 	}
-)
+);
-	
 
 const displayBackButton =
 	props.displayBackButton &&

packages/client/src/pages/welcome.entrance.a.vue

@@ -25,7 +25,7 @@
 			@slide-change="onSlideChange"
 		>
 			<swiper-slide v-slot="{ isActive }">
-				<XKanban v-if="isActive"/>
+				<XKanban v-if="isActive" />
 			</swiper-slide>
 			<swiper-slide v-slot="{ isActive }">
 				<MkSpacer :content-max="800" v-if="isActive">
@@ -152,11 +152,13 @@ watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [
-	!isDesktop ? {
+	!isDesktop
-		key: "home",
+		? {
-		icon: "ph-house ph-bold ph-lg",
+				key: "home",
-		title: i18n.ts.home,
+				icon: "ph-house ph-bold ph-lg",
-	} : [],
+				title: i18n.ts.home,
+		  }
+		: [],
 	{
 		key: "local",
 		icon: "ph-lightning ph-bold ph-lg",
@@ -220,10 +222,9 @@ let wallpaper = $ref(String);
 
 os.api("meta", { detail: true }).then((res) => {
 	meta = res;
-	wallpaper = `url("${res.backgroundImageUrl}")`
+	wallpaper = `url("${res.backgroundImageUrl}")`;
 });
 
-
 const paginationForLocal = {
 	endpoint: "notes/featured" as const,
 	limit: 10,

packages/client/src/ui/universal.vue

@@ -23,7 +23,6 @@
 			<XWidgets @mounted="attachSticky" />
 		</div>
 
-
 		<button
 			v-if="!isDesktop && !isMobile"
 			class="widgetButton _button"

packages/client/src/ui/visitor.vue

@@ -1,9 +1,10 @@
 <template>
 	<XKanban sticky v-if="isDesktop" />
-	<main
+	<main id="maincontent">
-		id="maincontent"
+		<XKanban
-	>
+			mini
-		<XKanban mini v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'" />
+			v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
+		/>
 		<RouterView />
 		<footer class="powered-by">
 			<MkA to="/">

packages/client/src/ui/visitor/kanban.vue

@@ -1,51 +1,34 @@
 <template>
 	<header v-if="mini" class="mini-header">
-		<img 
+		<img class="logo" :src="meta.logoImageUrl" />
-			class="logo"
-			:src="meta.logoImageUrl"
-		/>
 		<h1>
-			<MkA
+			<MkA to="/" class="link">{{ instanceName }}</MkA>
-				to="/" class="link"
-			>{{ instanceName }}</MkA>
 		</h1>
-		<MkButton
+		<MkButton class="home" :to="'/'" link rounded>
-			class="home"
-			:to="'/'"
-			link
-			rounded
-		>
 			<i class="ph-house ph-bold ph-lg"></i>
 			{{ i18n.ts.home }}
 		</MkButton>
 	</header>
-	<div class="instance-info-container"
+	<div class="instance-info-container" v-else :class="{ sticky }">
-		v-else
+		<header id="instance-info" v-on:scroll.passive="onScroll">
-		:class="{ sticky }"
-	>
-		<header
-			id="instance-info"
-			v-on:scroll.passive="onScroll"
-		>
 			<div class="banner">
 				<img :src="meta.backgroundImageUrl" />
 			</div>
 			<div class="content">
 				<div class="header">
-					<img 
+					<img class="logo" :src="meta.logoImageUrl" />
-						class="logo"
-						:src="meta.logoImageUrl"
-					/>
 					<h1>
-						<MkA
+						<MkA to="/" class="link">{{ instanceName }}</MkA>
-							to="/" class="link"
-						>{{ instanceName }}</MkA>
 					</h1>
 				</div>
 				<!-- <MkA class="_buttonIcon home" :to="'/'" v-tooltip="i18n.ts.home">
 					<i class="ph-house ph-bold ph-lg"></i>
 				</MkA> -->
-				<button class="_buttonIcon menu" @click="showMenu" v-tooltip="i18n.ts.more">
+				<button
+					class="_buttonIcon menu"
+					@click="showMenu"
+					v-tooltip="i18n.ts.more"
+				>
 					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 				</button>
 				<div v-if="meta" class="about">
@@ -63,23 +46,12 @@
 
 				<section>
 					<div class="_formLinksGridFlex">
-						<MkButton
+						<MkButton primary gradate rounded @click="signup">
-							primary gradate
+							<i class="ph-sign-in ph-bold"></i>
-							rounded
-							@click="signup"
-						>
-							<i
-								class="ph-sign-in ph-bold"
-							></i>
 							{{ i18n.ts.signup }}
 						</MkButton>
-						<MkButton
+						<MkButton rounded @click="signin">
-							rounded
+							<i class="ph-sign-out ph-bold"></i>
-							@click="signin"
-						>
-							<i
-								class="ph-sign-out ph-bold"
-							></i>
 							{{ i18n.ts.login }}
 						</MkButton>
 						<MkButton
@@ -88,9 +60,7 @@
 							rounded
 							to="https://calckey.org/join/"
 						>
-							<i
+							<i class="ph-airplane-tilt ph-bold"></i>
-								class="ph-airplane-tilt ph-bold"
-							></i>
 							{{ i18n.ts.findAnotherInstance }}
 						</MkButton>
 						<MkButton
@@ -100,9 +70,7 @@
 							rounded
 							to="https://calckey.org/apps/"
 						>
-							<i
+							<i class="ph-device-mobile ph-bold"></i>
-								class="ph-device-mobile ph-bold"
-							></i>
 							{{ i18n.ts.apps }}
 						</MkButton>
 					</div>
@@ -114,30 +82,37 @@
 					</p>
 
 					<FormSection v-if="announcement">
-						<FormLink :to="'/announcements'"
+						<FormLink :to="'/announcements'" naked
-							naked
 							><template #icon
 								><i
 									class="ph-megaphone-simple ph-bold ph-lg _flip"
 								></i></template
 							>{{ announcement.title }}:
-							<span style="opacity: 0.8; font-weight: 400;">{{ announcement.text }}</span>
+							<span style="opacity: 0.8; font-weight: 400">{{
+								announcement.text
+							}}</span>
 						</FormLink>
 					</FormSection>
 
-					<FormSection v-if="meta.maintainerName || meta.maintainerEmail">
+					<FormSection
+						v-if="meta.maintainerName || meta.maintainerEmail"
+					>
 						<div class="_formLinksGrid">
-							<MkKeyValue v-if="meta.maintainerName" :text="meta.maintainerName">
+							<MkKeyValue
+								v-if="meta.maintainerName"
+								:text="meta.maintainerName"
+							>
 								<template #key>{{
 									i18n.ts.administrator
 								}}</template>
 							</MkKeyValue>
 							<MkKeyValue v-if="meta.maintainerEmail">
-								<template #key>{{
+								<template #key>{{ i18n.ts.contact }}</template>
-									i18n.ts.contact
-								}}</template>
 								<template #value>
-									<MkMention :to="'mailto:' + meta.maintainerEmail" :icon="'envelope'">
+									<MkMention
+										:to="'mailto:' + meta.maintainerEmail"
+										:icon="'envelope'"
+									>
 										{{ meta.maintainerEmail }}
 									</MkMention>
 								</template>
@@ -225,17 +200,16 @@ let collapsed = $ref(!isLong);
 
 os.api("meta", { detail: true }).then((res) => {
 	meta = res;
-	isLong = meta.description && (meta.description.length > 500);
+	isLong = meta.description && meta.description.length > 500;
 });
 
 let announcement = $ref();
 os.api("announcements", {
-	limit: 1
+	limit: 1,
 }).then((res) => {
 	announcement = res[0];
 });
 
-
 function signin() {
 	os.popup(
 		XSigninDialog,
@@ -245,7 +219,7 @@ function signin() {
 		{},
 		"closed"
 	);
-};
+}
 
 function signup() {
 	os.popup(
@@ -256,7 +230,7 @@ function signup() {
 		{},
 		"closed"
 	);
-};
+}
 function showMenu(ev) {
 	openHelpMenu_(ev);
 }
@@ -302,7 +276,7 @@ function showMenu(ev) {
 		}
 	}
 	margin-left: -1px;
-	box-shadow: 0 0 48px -24px rgba(0,0,0,0.1);
+	box-shadow: 0 0 48px -24px rgba(0, 0, 0, 0.1);
 	z-index: 9000;
 }
 #instance-info {
@@ -312,7 +286,7 @@ function showMenu(ev) {
 	background: var(--accent);
 	height: max-content;
 	min-height: 100%;
-	transition: transform .4s cubic-bezier(.5,0,0,1);
+	transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
 	.banner {
 		position: sticky;
 		top: 0;
@@ -320,7 +294,7 @@ function showMenu(ev) {
 		margin-inline: -1px;
 		padding-top: 56.25%;
 		mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
-		transition: min-height .4s, max-height .4s, filter .7s;
+		transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
 		img {
 			position: absolute;
 			width: 100%;
@@ -360,7 +334,11 @@ function showMenu(ev) {
 				z-index: -1;
 				clip-path: inset(55px 0 0 0 round var(--radius));
 				mask: linear-gradient(transparent 55px, #000 50px, transparent);
-				-webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent);
+				-webkit-mask: linear-gradient(
+					transparent 55px,
+					#000 50px,
+					transparent
+				);
 			}
 			> .logo {
 				height: 90px;
@@ -368,22 +346,23 @@ function showMenu(ev) {
 				max-width: 100%;
 				border-radius: var(--radius);
 				margin-top: -5px;
-				transition: transform .4s cubic-bezier(0.5,0,0,1);
+				transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
 			}
 			> h1 {
-				margin-block: .7em;
+				margin-block: 0.7em;
 				font-size: 1.5em;
-				color: var(--fgHighlighted)
+				color: var(--fgHighlighted);
 			}
 		}
-		.menu, .home {
+		.menu,
+		.home {
 			position: absolute;
 			top: 10px;
 			right: 10px;
 			width: 42px;
 			height: 42px;
 			border-radius: 100px;
-			background: var(--buttonBg)
+			background: var(--buttonBg);
 		}
 		.home {
 			right: unset;
@@ -417,7 +396,7 @@ section {
 	margin-top: 2em;
 }
 ._formLinksGrid {
-	grid-template-columns: repeat(2,minmax(150px,1fr));
+	grid-template-columns: repeat(2, minmax(150px, 1fr));
 	text-align: initial;
 }
 </style>