Improve client

src/client/components/launch-pad.vue

@@ -25,7 +25,7 @@
 				<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
 			</MkA>
 			<MkA to="/about-misskey" @click.passive="close()" v-click-anime>
-				<i class="fas fa-info-circle icon"></i>
+				<img src="/static-assets/favicon.png" class="icon"/>
 				<div class="text">{{ $ts.aboutMisskey }}</div>
 			</MkA>
 		</div>
@@ -101,6 +101,7 @@ export default defineComponent({
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
+			vertical-align: bottom;
 			width: 128px;
 			height: 128px;
 			border-radius: var(--radius);
@@ -117,6 +118,7 @@ export default defineComponent({
 
 			> .icon {
 				font-size: 26px;
+				height: 32px;
 			}
 
 			> .text {

src/client/pages/about.vue

@@ -1,30 +1,38 @@
 <template>
-<FormBase class="mmnnbwxb" v-if="meta">
-	<div class="_formItem logo">
-		<img v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
-		<span v-else class="text">{{ instanceName }}</span>
+<FormBase>
+	<div class="_formItem">
+		<div class="_formPanel fwhjspax">
+			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			<span class="name">{{ $instance.name || host }}</span>
 		</div>
+	</div>
+
+	<FormTextarea readonly :value="$instance.description">
+	</FormTextarea>
+
 	<FormGroup>
 		<FormKeyValueView>
 			<template #key>Misskey</template>
 			<template #value>v{{ version }}</template>
 		</FormKeyValueView>
+		<FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink>
 	</FormGroup>
 
 	<FormGroup>
 		<FormKeyValueView>
 			<template #key>{{ $ts.administrator }}</template>
-			<template #value>{{ meta.maintainerName }}</template>
+			<template #value>{{ $instance.maintainerName }}</template>
 		</FormKeyValueView>
 		<FormKeyValueView>
 			<template #key>{{ $ts.contact }}</template>
-			<template #value>{{ meta.maintainerEmail }}</template>
+			<template #value>{{ $instance.maintainerEmail }}</template>
 		</FormKeyValueView>
 	</FormGroup>
 
-	<FormLink v-if="meta.tosUrl" :to="meta.tosUrl" external>{{ $ts.tos }}</FormLink>
+	<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink>
 
-	<FormGroup v-if="stats">
+	<FormSuspense :p="initStats">
+		<FormGroup>
 			<template #label>{{ $ts.statistics }}</template>
 			<FormKeyValueView>
 				<template #key>{{ $ts.users }}</template>
@@ -35,6 +43,16 @@
 				<template #value>{{ number(stats.originalNotesCount) }}</template>
 			</FormKeyValueView>
 		</FormGroup>
+	</FormSuspense>
+
+	<FormGroup>
+		<template #label>Well-known resources</template>
+		<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
+		<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
+		<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
+		<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
+		<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
+	</FormGroup>
 </FormBase>
 </template>
 
@@ -45,9 +63,12 @@ import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormTextarea from '@client/components/form/textarea.vue';
+import FormSuspense from '@client/components/form/suspense.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
 import * as symbols from '@client/symbols';
+import { host } from '@client/config';
 
 export default defineComponent({
 	components: {
@@ -55,6 +76,8 @@ export default defineComponent({
 		FormGroup,
 		FormLink,
 		FormKeyValueView,
+		FormTextarea,
+		FormSuspense,
 	},
 
 	data() {
@@ -63,22 +86,15 @@ export default defineComponent({
 				title: this.$ts.instanceInfo,
 				icon: 'fas fa-info-circle'
 			},
+			host,
 			version,
 			instanceName,
 			stats: null,
-		}
-	},
-
-	computed: {
-		meta() {
-			return this.$instance;
-		},
-	},
-
-	created() {
-		os.api('stats').then(stats => {
+			initStats: () => os.api('stats', {
+			}).then((stats) => {
 				this.stats = stats;
-		});
+			})
+		}
 	},
 
 	methods: {
@@ -88,18 +104,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mmnnbwxb {
-	max-width: 800px;
-	box-sizing: border-box;
-	margin: 0 auto;
-
-	> .logo {
+.fwhjspax {
+	padding: 16px;
 	text-align: center;
 
-		> img {
-			vertical-align: bottom;
-			max-height: 100px;
+	> .icon {
+		display: block;
+		margin: auto;
+		height: 64px;
+		border-radius: 8px;
 	}
+
+	> .name {
+		display: block;
+		margin-top: 12px;
 	}
 }
 </style>

src/client/pages/instance-info.vue

@@ -147,7 +147,6 @@ import * as os from '@client/os';
 import number from '@client/filters/number';
 import bytes from '@client/filters/bytes';
 import * as symbols from '@client/symbols';
-import { url } from '@client/config';
 
 const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -449,7 +448,7 @@ export default defineComponent({
 .fnfelxur {
 	padding: 16px;
 
-	> img {
+	> .icon {
 		display: block;
 		margin: auto;
 		height: 64px;

src/client/ui/default.sidebar.vue

@@ -31,8 +31,10 @@
 		<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
-	<div class="foo">
-		<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+	<div class="about">
+		<MkA class="link" to="/about" v-click-anime>
+			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+		</MkA>
 	</div>
 	<!--<MisskeyLogo class="misskey"/>-->
 </div>
@@ -260,14 +262,21 @@ export default defineComponent({
 		}
 	}
 
-	> .misskey {
+	> .about {
 		fill: currentColor;
-	}
-
-	> .foo {
-		text-align: center;
 		padding: 8px 0 16px 0;
-		opacity: 0.5;
+		text-align: center;
+
+		> .link {
+			display: block;
+			width: 32px;
+			margin: 0 auto;
+
+			img {
+				display: block;
+				width: 100%;
+			}
+		}
 	}
 
 	> .item {