クリップタイムラインの埋め込み

packages/frontend/src/pages/embed/_timeline_ui_.vue

@@ -0,0 +1,39 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.timelineRoot">
+	<div v-if="showHeader" :class="$style.header"><slot name="header"></slot></div>
+	<div :class="$style.body"><slot name="body"></slot></div>
+</div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+	showHeader?: boolean;
+}>(), {
+	showHeader: true,
+});
+</script>
+
+<style module lang="scss">
+.timelineRoot {
+	background-color: var(--panel);
+	height: 100%;
+	max-height: var(--embedMaxHeight, none);
+	display: flex;
+	flex-direction: column;
+}
+
+.header {
+	flex-shrink: 0;
+	border-bottom: 1px solid var(--divider);
+}
+
+.body {
+	flex-grow: 1;
+	overflow-y: auto;
+}
+</style>

packages/frontend/src/pages/embed/clip.vue

@@ -0,0 +1,145 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<div>
+		<MkLoading v-if="loading"/>
+		<XEmbedTimelineUI v-else-if="clip" :showHeader="normalizedShowHeader">
+			<template #header>
+				<div :class="$style.clipHeader">
+					<div :class="$style.headerClipIconRoot">
+						<i class="ti ti-paperclip"></i>
+					</div>
+					<div :class="$style.headerTitle" @click="top">
+						<div class="_nowrap"><a :href="`/clips/${clip.id}`" target="_blank" rel="noopener">{{ clip.name }}</a></div>
+						<div :class="$style.sub">{{ i18n.tsx.fromX({ x: instanceName }) }}</div>
+					</div>
+					<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
+						<img
+							:class="$style.instanceIcon"
+							:src="instance.iconUrl || '/favicon.ico'"
+						/>
+					</a>
+				</div>
+			</template>
+			<template #body>
+				<MkNotes
+					ref="notesEl"
+					:class="$style.userTimelineNotes"
+					:pagination="pagination"
+					:disableAutoLoad="!normalizedEnableAutoLoad"
+					:noGap="true"
+					:ad="false"
+				/>
+			</template>
+		</XEmbedTimelineUI>
+		<XNotFound v-else/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, shallowRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkNotes from '@/components/MkNotes.vue';
+import XNotFound from '@/pages/not-found.vue';
+import XEmbedTimelineUI from '@/pages/embed/_timeline_ui_.vue';
+import type { Paging } from '@/components/MkPagination.vue';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import { url, instanceName } from '@/config.js';
+import { scrollToTop } from '@/scripts/scroll.js';
+import { isLink } from '@/scripts/is-link.js';
+
+const props = defineProps<{
+	clipId: string;
+	showHeader?: string;
+	enableAutoLoad?: string;
+}>();
+
+// デフォルト: true
+const normalizedShowHeader = computed(() => props.showHeader !== 'false');
+
+// デフォルト: false
+const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
+
+const clip = ref<Misskey.entities.Clip | null>(null);
+const pagination = computed(() => ({
+	endpoint: 'clips/notes',
+	params: {
+		clipId: props.clipId,
+	},
+} as Paging));
+const loading = ref(true);
+
+const notesEl = shallowRef<InstanceType<typeof MkNotes> | null>(null);
+
+function top(ev: MouseEvent) {
+	const target = ev.target as HTMLElement | null;
+	if (target && isLink(target)) return;
+
+	if (notesEl.value) {
+		scrollToTop(notesEl.value.$el as HTMLElement, { behavior: 'smooth' });
+	}
+}
+
+misskeyApi('clips/show', {
+	clipId: props.clipId,
+}).then(res => {
+	clip.value = res;
+	loading.value = false;
+}).catch(err => {
+	console.error(err);
+	loading.value = false;
+});
+</script>
+
+<style lang="scss" module>
+.clipHeader {
+	padding: 8px 16px;
+	display: flex;
+	min-width: 0;
+	align-items: center;
+	gap: var(--margin);
+	overflow: hidden;
+
+	.headerClipIconRoot {
+		flex-shrink: 0;
+		width: 32px;
+		height: 32px;
+		line-height: 32px;
+		font-size: 14px;
+		text-align: center;
+		background-color: var(--accentedBg);
+		color: var(--accent);
+		border-radius: 50%;
+	}
+
+	.headerTitle {
+		flex-grow: 1;
+		font-weight: 700;
+		line-height: 1.1;
+		min-width: 0;
+
+		.sub {
+			font-size: 0.8em;
+			font-weight: 400;
+			opacity: 0.7;
+		}
+	}
+
+	.instanceIconLink {
+		flex-shrink: 0;
+		display: block;
+		margin-left: auto;
+		height: 24px;
+	}
+
+	.instanceIcon {
+		height: 24px;
+		border-radius: 4px;
+	}
+}
+</style>

packages/frontend/src/pages/embed/user-timeline.vue

@@ -4,10 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-	<div :class="$style.userTimelineRoot">
+	<div>
 		<MkLoading v-if="loading"/>
-		<template v-else-if="user">
+		<XEmbedTimelineUI v-else-if="user" :showHeader="normalizedShowHeader">
-			<div v-if="normalizedShowHeader" :class="$style.userHeader">
+			<template #header>
+				<div :class="$style.userHeader">
 					<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
 						<MkAvatar :class="$style.avatar" :user="user"/>
 					</a>
@@ -28,6 +29,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						/>
 					</a>
 				</div>
+			</template>
+			<template #body>
 				<MkNotes
 					ref="notesEl"
 					:class="$style.userTimelineNotes"
@@ -37,6 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:ad="false"
 				/>
 			</template>
+		</XEmbedTimelineUI>
 		<XNotFound v-else/>
 	</div>
 </template>
@@ -46,6 +50,7 @@ import { ref, computed, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkNotes from '@/components/MkNotes.vue';
 import XNotFound from '@/pages/not-found.vue';
+import XEmbedTimelineUI from '@/pages/embed/_timeline_ui_.vue';
 import type { Paging } from '@/components/MkPagination.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -98,22 +103,12 @@ misskeyApi('users/show', {
 </script>
 
 <style lang="scss" module>
-.userTimelineRoot {
-	background-color: var(--panel);
-	height: 100%;
-	max-height: var(--embedMaxHeight, none);
-	display: flex;
-	flex-direction: column;
-}
-
 .userHeader {
-	flex-shrink: 0;
 	padding: 8px 16px;
 	display: flex;
 	min-width: 0;
 	align-items: center;
 	gap: var(--margin);
-	border-bottom: 1px solid var(--divider);
 	overflow: hidden;
 
 	.avatarLink {
@@ -151,9 +146,4 @@ misskeyApi('users/show', {
 		border-radius: 4px;
 	}
 }
-
-.userTimelineNotes {
-	flex: 1;
-	overflow-y: auto;
-}
 </style>

packages/frontend/src/router/definition.ts

@@ -565,6 +565,13 @@ const routes: RouteDef[] = [{
 		header: 'showHeader',
 		autoload: 'enableAutoLoad',
 	}
+}, {
+	path: '/embed/clips/:clipId',
+	component: page(() => import('@/pages/embed/clip.vue')),
+	query: {
+		header: 'showHeader',
+		autoload: 'enableAutoLoad',
+	}
 }, {
 	path: '/timeline',
 	component: page(() => import('@/pages/timeline.vue')),