start of instance kanban redesign

packages/client/src/init.ts

@@ -176,8 +176,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
 	const app = createApp(
 		window.location.search === "?zen"
 			? defineAsyncComponent(() => import("@/ui/zen.vue"))
-			: !$i
-			? defineAsyncComponent(() => import("@/ui/visitor.vue"))
 			: ui === "deck"
 			? defineAsyncComponent(() => import("@/ui/deck.vue"))
 			: defineAsyncComponent(() => import("@/ui/universal.vue")),

packages/client/src/ui/_common_/navbar.vue

@@ -1,7 +1,7 @@
 <template>
 	<header class="mvcprjjd sidebar" :class="{ iconOnly }">
 		<div class="body">
-			<div class="top">
+			<div class="top" v-if="$i">
 				<div
 					class="banner"
 					:user="$i"
@@ -72,7 +72,7 @@
 				</template>
 				<div class="divider"></div>
 				<MkA
-					v-if="$i.isAdmin || $i.isModerator"
+					v-if="$i?.isAdmin || $i?.isModerator"
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.controlPanel"
 					class="item _button"

packages/client/src/ui/universal.vue

@@ -19,117 +19,123 @@
 			</main>
 		</MkStickyContainer>
 
-		<div v-if="isDesktop" ref="widgetsEl" class="widgets">
+		<template v-if="$i">
-			<XWidgets @mounted="attachSticky" />
+			<div v-if="isDesktop" ref="widgetsEl" class="widgets">
-		</div>
+				<XWidgets @mounted="attachSticky" />
+			</div>
 
-		<button
-			v-if="!isDesktop && !isMobile"
-			class="widgetButton _button"
-			@click="widgetsShowing = true"
-		>
-			<i class="ph-stack ph-bold ph-lg"></i>
-		</button>
 
-		<div v-if="isMobile" class="buttons">
 			<button
-				:aria-label="i18n.t('menu')"
+				v-if="!isDesktop && !isMobile"
-				class="button nav _button"
+				class="widgetButton _button"
-				@click="drawerMenuShowing = true"
-			>
-				<div class="button-wrapper">
-					<i class="ph-list ph-bold ph-lg"></i
-					><span v-if="menuIndicated" class="indicator"
-						><i class="ph-circle ph-fill"></i
-					></span>
-				</div>
-			</button>
-			<button
-				:aria-label="i18n.t('home')"
-				class="button home _button"
-				@click="
-					mainRouter.currentRoute.value.name === 'index'
-						? top()
-						: mainRouter.push('/');
-					updateButtonState();
-				"
-			>
-				<div
-					class="button-wrapper"
-					:class="buttonAnimIndex === 0 ? 'on' : ''"
-				>
-					<i class="ph-house ph-bold ph-lg"></i>
-				</div>
-			</button>
-			<button
-				:aria-label="i18n.t('notifications')"
-				class="button notifications _button"
-				@click="
-					mainRouter.push('/my/notifications');
-					updateButtonState();
-				"
-			>
-				<div
-					class="button-wrapper"
-					:class="buttonAnimIndex === 1 ? 'on' : ''"
-				>
-					<i class="ph-bell ph-bold ph-lg"></i
-					><span v-if="$i?.hasUnreadNotification" class="indicator"
-						><i class="ph-circle ph-fill"></i
-					></span>
-				</div>
-			</button>
-			<button
-				:aria-label="i18n.t('messaging')"
-				class="button messaging _button"
-				@click="
-					mainRouter.push('/my/messaging');
-					updateButtonState();
-				"
-			>
-				<div
-					class="button-wrapper"
-					:class="buttonAnimIndex === 2 ? 'on' : ''"
-				>
-					<i class="ph-chats-teardrop ph-bold ph-lg"></i
-					><span
-						v-if="$i?.hasUnreadMessagingMessage"
-						class="indicator"
-						><i class="ph-circle ph-fill"></i
-					></span>
-				</div>
-			</button>
-			<button
-				:aria-label="i18n.t('_deck._columns.widgets')"
-				class="button widget _button"
 				@click="widgetsShowing = true"
 			>
-				<div class="button-wrapper">
+				<i class="ph-stack ph-bold ph-lg"></i>
-					<i class="ph-stack ph-bold ph-lg"></i>
-				</div>
 			</button>
-		</div>
 
-		<button
+			<div v-if="isMobile" class="buttons">
-			v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
+				<button
-			ref="postButton"
+					:aria-label="i18n.t('menu')"
-			:aria-label="i18n.t('note')"
+					class="button nav _button"
-			class="postButton button post _button"
+					@click="drawerMenuShowing = true"
-			@click="os.post()"
+				>
-		>
+					<div class="button-wrapper">
-			<i class="ph-pencil ph-bold ph-lg"></i>
+						<i class="ph-list ph-bold ph-lg"></i
-		</button>
+						><span v-if="menuIndicated" class="indicator"
-		<button
+							><i class="ph-circle ph-fill"></i
-			v-if="
+						></span>
-				isMobile && mainRouter.currentRoute.value.name === 'messaging'
+					</div>
-			"
+				</button>
-			ref="postButton"
+				<button
-			class="postButton button post _button"
+					:aria-label="i18n.t('home')"
-			:aria-label="i18n.t('startMessaging')"
+					class="button home _button"
-			@click="messagingStart"
+					@click="
-		>
+						mainRouter.currentRoute.value.name === 'index'
-			<i class="ph-user-plus ph-bold ph-lg"></i>
+							? top()
-		</button>
+							: mainRouter.push('/');
+						updateButtonState();
+					"
+				>
+					<div
+						class="button-wrapper"
+						:class="buttonAnimIndex === 0 ? 'on' : ''"
+					>
+						<i class="ph-house ph-bold ph-lg"></i>
+					</div>
+				</button>
+				<button
+					:aria-label="i18n.t('notifications')"
+					class="button notifications _button"
+					@click="
+						mainRouter.push('/my/notifications');
+						updateButtonState();
+					"
+				>
+					<div
+						class="button-wrapper"
+						:class="buttonAnimIndex === 1 ? 'on' : ''"
+					>
+						<i class="ph-bell ph-bold ph-lg"></i
+						><span v-if="$i?.hasUnreadNotification" class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</div>
+				</button>
+				<button
+					:aria-label="i18n.t('messaging')"
+					class="button messaging _button"
+					@click="
+						mainRouter.push('/my/messaging');
+						updateButtonState();
+					"
+				>
+					<div
+						class="button-wrapper"
+						:class="buttonAnimIndex === 2 ? 'on' : ''"
+					>
+						<i class="ph-chats-teardrop ph-bold ph-lg"></i
+						><span
+							v-if="$i?.hasUnreadMessagingMessage"
+							class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</div>
+				</button>
+				<button
+					:aria-label="i18n.t('_deck._columns.widgets')"
+					class="button widget _button"
+					@click="widgetsShowing = true"
+				>
+					<div class="button-wrapper">
+						<i class="ph-stack ph-bold ph-lg"></i>
+					</div>
+				</button>
+			</div>
+
+			<button
+				v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
+				ref="postButton"
+				:aria-label="i18n.t('note')"
+				class="postButton button post _button"
+				@click="os.post()"
+			>
+				<i class="ph-pencil ph-bold ph-lg"></i>
+			</button>
+			<button
+				v-if="
+					isMobile && mainRouter.currentRoute.value.name === 'messaging'
+				"
+				ref="postButton"
+				class="postButton button post _button"
+				:aria-label="i18n.t('startMessaging')"
+				@click="messagingStart"
+			>
+				<i class="ph-user-plus ph-bold ph-lg"></i>
+			</button>
+		</template>
+		<template v-else>
+			<XKanban class="kanban" full />
+		</template>
 
 		<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
 			<div
@@ -165,6 +171,7 @@
 import { defineAsyncComponent, provide, onMounted, computed, ref } from "vue";
 import XCommon from "./_common_/common.vue";
 import * as Acct from "calckey-js/built/acct";
+import XKanban from "./visitor/kanban.vue";
 import type { ComputedRef } from "vue";
 import type { PageMetadata } from "@/scripts/page-metadata";
 import { instanceName, ui } from "@/config";
@@ -552,8 +559,8 @@ console.log(mainRouter.currentRoute.value.name);
 	}
 
 	> .contents {
-		width: 100%;
 		min-width: 0;
+		flex-grow: 1;
 		$widgets-hide-threshold: 1090px;
 		@media (max-width: $widgets-hide-threshold) {
 			padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);

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

@@ -1,313 +1,121 @@
 <template>
-	<div
+	<div class="instance-info-container">
-		class="rwqkcmrc"
+		<header
-		:style="{
+			id="instance-info"
-			backgroundImage: transparent
+		>
-				? 'none'
+			<img class="banner" :src="meta?.backgroundImageUrl" />
-				: `url(${$instance.backgroundImageUrl})`,
+			<div class="content">
-		}"
+				<header>
-	>
+					<img 
-		<div class="back" :class="{ transparent }"></div>
+						class="logo"
-		<div class="contents">
+						:src="meta?.logoImageUrl"
-			<div class="wrapper">
+					/>
-				<h1 v-if="meta" :class="{ full }">
+					<h1>
-					<MkA to="/" class="link"
+						<MkA
-						><img
+							to="/" class="link"
-							v-if="meta.logoImageUrl"
+						>{{ instanceName }}</MkA>
-							class="logo"
+					</h1>
-							:src="meta.logoImageUrl"
+				</header>
-							alt="logo"
+				<div v-if="meta" class="about">
-						/><span v-else class="text">{{
+					<Mfm
-							instanceName
+						class="desc"
-						}}</span></MkA
+						:class="{ collapsed: isLong && collapsed }"
+						:text="meta.description || i18n.ts.introMisskey"
+					></Mfm>
+					<XShowMoreButton
+						v-if="isLong"
+						v-model="collapsed"
+					></XShowMoreButton>
+				</div>
+
+				<FormSection>
+					<div class="_formLinksGrid">
+						<FormLink v-if="meta?.tosUrl" :to="meta.tosUrl"
+							><template #icon
+								><i
+									class="ph-scroll ph-bold ph-lg"
+								></i></template
+							>{{ i18n.ts.tos }}
+						</FormLink>
+					</div>
+				</FormSection>
+
+				<section class="announcements">
+					<h1>{{ i18n.ts.announcements }}</h1>
+					<MkPagination
+						v-slot="{ items }"
+						:pagination="announcements"
+						class="list"
 					>
-				</h1>
+						<article
-				<template v-if="full">
+							v-for="announcement in items"
-					<div v-if="meta" class="about">
+							:key="announcement.id"
-						<div
+							class="item"
-							class="desc"
-							v-html="meta.description || i18n.ts.introMisskey"
-						></div>
-					</div>
-					<div class="action">
-						<button class="_buttonPrimary" @click="signup()">
-							{{ i18n.ts.signup }}
-						</button>
-						<button class="_button" @click="signin()">
-							{{ i18n.ts.login }}
-						</button>
-					</div>
-					<div class="announcements panel">
-						<header>{{ i18n.ts.announcements }}</header>
-						<MkPagination
-							v-slot="{ items }"
-							:pagination="announcements"
-							class="list"
 						>
-							<section
+							<div class="title">
-								v-for="announcement in items"
+								{{ announcement.title }}
-								:key="announcement.id"
+							</div>
-								class="item"
+							<div class="content">
-							>
+								<Mfm :text="announcement.text" />
-								<div class="title">
+								<img
-									{{ announcement.title }}
+									v-if="announcement.imageUrl"
-								</div>
+									:src="announcement.imageUrl"
-								<div class="content">
+									alt="announcement image"
-									<Mfm :text="announcement.text" />
+								/>
-									<img
+							</div>
-										v-if="announcement.imageUrl"
+						</article>
-										:src="announcement.imageUrl"
+					</MkPagination>
-										alt="announcement image"
+				</section>
-									/>
+				<div v-if="poweredBy" class="powered-by">
-								</div>
+					<b
-							</section>
+						><MkA to="/">{{ host }}</MkA></b
-						</MkPagination>
+					>
-					</div>
+					<small
-					<div v-if="poweredBy" class="powered-by">
+						>Powered by
-						<b
+						<a href="https://calckey.org/" target="_blank"
-							><MkA to="/">{{ host }}</MkA></b
+							>Calckey</a
-						>
+						></small
-						<small
+					>
-							>Powered by
+				</div>
-							<a href="https://calckey.org/" target="_blank"
-								>Calckey</a
-							></small
-						>
-					</div>
-				</template>
 			</div>
-		</div>
+		</header>
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, defineAsyncComponent } from "vue";
+import { ref } from "vue";
 import { host, instanceName } from "@/config";
 import * as os from "@/os";
 import MkPagination from "@/components/MkPagination.vue";
-import XSigninDialog from "@/components/MkSigninDialog.vue";
-import XSignupDialog from "@/components/MkSignupDialog.vue";
 import MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import { i18n } from "@/i18n";
+import { DetailedInstanceMetadata } from "calckey-js/built/entities";
 
-export default defineComponent({
+defineProps<{
-	components: {
+	poweredBy?: boolean,
-		MkPagination,
+}>()
-		MkButton,
-	},
 
-	props: {
+const announcements = {
-		full: {
+	endpoint: "announcements",
-			type: Boolean,
+	limit: 10,
-			required: false,
+}
-			default: false,
+let meta = $ref<DetailedInstanceMetadata>();
-		},
-		transparent: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		poweredBy: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
 
-	data() {
+let isLong = $ref(false);
-		return {
+let collapsed = $ref(!isLong);
-			host,
-			instanceName,
-			pageInfo: null,
-			meta: null,
-			narrow: window.innerWidth < 1280,
-			announcements: {
-				endpoint: "announcements",
-				limit: 10,
-			},
-			i18n,
-		};
-	},
 
-	created() {
+os.api("meta", { detail: true }).then((res) => {
-		os.api("meta", { detail: true }).then((meta) => {
+	meta = res;
-			this.meta = meta;
+	isLong = meta.description && (meta.description.length > 100);
-		});
-	},
-
-	methods: {
-		signin() {
-			os.popup(
-				XSigninDialog,
-				{
-					autoSet: true,
-				},
-				{},
-				"closed"
-			);
-		},
-
-		signup() {
-			os.popup(
-				XSignupDialog,
-				{
-					autoSet: true,
-				},
-				{},
-				"closed"
-			);
-		},
-	},
 });
+
+
+
 </script>
 
 <style lang="scss" scoped>
-.rwqkcmrc {
-	position: relative;
-	text-align: center;
-	background-position: center;
-	background-size: cover;
-	// TODO: パララックスにしたい
 
-	> .back {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, 0.3);
-
-		&.transparent {
-			-webkit-backdrop-filter: var(--blur, blur(12px));
-			backdrop-filter: var(--blur, blur(12px));
-		}
-	}
-
-	> .contents {
-		position: relative;
-		z-index: 1;
-		height: inherit;
-		overflow: auto;
-
-		> .wrapper {
-			max-width: 380px;
-			padding: 0 16px;
-			box-sizing: border-box;
-			margin: 0 auto;
-
-			> .panel {
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-				background: rgba(0, 0, 0, 0.5);
-				border-radius: var(--radius);
-
-				&,
-				* {
-					color: #fff !important;
-				}
-			}
-
-			> h1 {
-				display: block;
-				margin: 0;
-				padding: 32px 0 32px 0;
-				color: #fff;
-
-				&.full {
-					padding: 64px 0 0 0;
-
-					> .link {
-						> ::v-deep(.logo) {
-							max-height: 130px;
-						}
-					}
-				}
-
-				> .link {
-					display: block;
-
-					> ::v-deep(.logo) {
-						vertical-align: bottom;
-						max-height: 100px;
-					}
-				}
-			}
-
-			> .about {
-				display: block;
-				margin: 24px 0;
-				text-align: center;
-				box-sizing: border-box;
-				text-shadow: 0 0 8px black;
-				color: #fff;
-			}
-
-			> .action {
-				> button {
-					display: block;
-					width: 100%;
-					padding: 10px;
-					box-sizing: border-box;
-					text-align: center;
-					border-radius: 999px;
-
-					&._button {
-						background: var(--panel);
-					}
-
-					&:first-child {
-						margin-bottom: 16px;
-					}
-				}
-			}
-
-			> .announcements {
-				margin: 32px 0;
-				text-align: left;
-
-				> header {
-					padding: 12px 16px;
-					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
-				}
-
-				> .list {
-					max-height: 300px;
-					overflow: auto;
-
-					> .item {
-						padding: 12px 16px;
-
-						& + .item {
-							border-top: solid 1px rgba(255, 255, 255, 0.5);
-						}
-
-						> .title {
-							font-weight: bold;
-						}
-
-						> .content {
-							> img {
-								max-width: 100%;
-							}
-						}
-					}
-				}
-			}
-
-			> .powered-by {
-				padding: 28px;
-				font-size: 14px;
-				text-align: center;
-				border-top: 1px solid rgba(255, 255, 255, 0.5);
-				color: #fff;
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-}
 </style>