nanka iroiro (#6847)

* wip

* wip

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* wip

src/client/pages/note.vue

@@ -1,21 +1,31 @@
 <template>
 <div class="fcuexfpr">
 	<div v-if="note" class="note">
-		<div class="_section">
-			<XNotes v-if="showNext" class="_content" :pagination="next"/>
-			<MkButton v-else-if="hasNext" class="load _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
+		<div class="_section" v-if="showNext">
+			<XNotes class="_content" :pagination="next"/>
 		</div>
 
-		<div class="_section">
-			<div class="_content">
+		<div class="_section main">
+			<MkButton v-if="!showNext && hasNext" class="load next _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
+			<div class="_content _vMargin">
 				<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_vMargin"/>
 				<XNote v-model:note="note" :key="note.id" :detail="true" class="_vMargin"/>
 			</div>
+			<div class="_content clips _vMargin" v-if="clips && clips.length > 0">
+				<div class="title">{{ $t('clip') }}</div>
+				<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _vMargin">
+					<b>{{ item.name }}</b>
+					<div v-if="item.description" class="description">{{ item.description }}</div>
+					<div class="user">
+						<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
+					</div>
+				</MkA>
+			</div>
+			<MkButton v-if="!showPrev && hasPrev" class="load prev _content" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
 		</div>
 
-		<div class="_section">
-			<XNotes v-if="showPrev" class="_content" :pagination="prev"/>
-			<MkButton v-else-if="hasPrev" class="load _content" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
+		<div class="_section" v-if="showPrev">
+			<XNotes class="_content" :pagination="prev"/>
 		</div>
 	</div>
 
@@ -28,7 +38,6 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import Progress from '@/scripts/loading';
 import XNote from '@/components/note.vue';
 import XNotes from '@/components/notes.vue';
 import MkRemoteCaution from '@/components/remote-caution.vue';
@@ -55,6 +64,7 @@ export default defineComponent({
 				avatar: this.note.user,
 			} : null),
 			note: null,
+			clips: null,
 			hasPrev: false,
 			hasNext: false,
 			showPrev: false,
@@ -88,11 +98,13 @@ export default defineComponent({
 	},
 	methods: {
 		fetch() {
-			Progress.start();
 			os.api('notes/show', {
 				noteId: this.noteId
 			}).then(note => {
 				Promise.all([
+					os.api('notes/clips', {
+						noteId: note.id,
+					}),
 					os.api('users/notes', {
 						userId: note.userId,
 						untilId: note.id,
@@ -103,15 +115,14 @@ export default defineComponent({
 						sinceId: note.id,
 						limit: 1,
 					}),
-				]).then(([prev, next]) => {
+				]).then(([clips, prev, next]) => {
+					this.clips = clips;
 					this.hasPrev = prev.length !== 0;
 					this.hasNext = next.length !== 0;
 					this.note = note;
 				});
 			}).catch(e => {
 				this.error = e;
-			}).finally(() => {
-				Progress.done();
 			});
 		}
 	}
@@ -121,10 +132,46 @@ export default defineComponent({
 <style lang="scss" scoped>
 .fcuexfpr {
 	> .note {
-		> ._section {
+		> .main {
 			> .load {
 				min-width: 0;
 				border-radius: 999px;
+
+				&.next {
+					margin-bottom: var(--margin);
+				}
+
+				&.prev {
+					margin-top: var(--margin);
+				}
+			}
+
+			> .clips {
+				> .title {
+					font-weight: bold;
+					padding: 12px;
+				}
+
+				> .item {
+					display: block;
+					padding: 16px;
+
+					> .description {
+						padding: 8px 0;
+					}
+
+					> .user {
+						$height: 32px;
+						padding-top: 16px;
+						border-top: solid 1px var(--divider);
+						line-height: $height;
+
+						> .avatar {
+							width: $height;
+							height: $height;
+						}
+					}
+				}
 			}
 		}
 	}