packages/client/src/pages/welcome.timeline.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="civpbkhh">
-	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
+	<div ref="scroll" class="scrollbox" :class="{ scroll: isScrolling }">
-		<div v-for="note in notes" class="note">
+		<div v-for="note in notes" :key="note.id" class="note">
 			<div class="content _panel">
 				<div class="body">
 					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
@@ -12,7 +12,7 @@
 					<XMediaList :media-list="note.files"/>
 				</div>
 				<div v-if="note.poll">
-					<XPoll :note="note" :readOnly="true"/>
+					<XPoll :note="note" :read-only="true"/>
 				</div>
 			</div>
 			<XReactionsViewer ref="reactionsViewer" :note="note"/>
@@ -21,37 +21,26 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { onUpdated, ref, Ref } from 'vue';
+import { Note } from 'misskey-js/built/entities';
 import XReactionsViewer from '@/components/reactions-viewer.vue';
 import XMediaList from '@/components/media-list.vue';
 import XPoll from '@/components/poll.vue';
 import * as os from '@/os';
+import { $i } from '@/account';
 
-export default defineComponent({
+const notes: Ref<Note[]> = ref([]);
-	components: {
+const isScrolling = ref(false);
-		XReactionsViewer,
+const scroll: Ref<HTMLElement | null> = ref(null);
-		XMediaList,
-		XPoll
-	},
 
-	data() {
+os.api('notes/featured').then(newNotes => {
-		return {
+	notes.value = newNotes;
-			notes: [],
+});
-			isScrolling: false,
-		};
-	},
 
-	created() {
+onUpdated(() => {
-		os.api('notes/featured').then(notes => {
+	if (scroll.value && scroll.value.clientHeight > window.innerHeight) {
-			this.notes = notes;
+		isScrolling.value = true;
-		});
-	},
-
-	updated() {
-		if (this.$refs.scroll.clientHeight > window.innerHeight) {
-			this.isScrolling = true;
-		}
 	}
 });
 </script>