Add timeline toot component

src/components/AddColumn/PublicTimeline.vue

@@ -15,37 +15,12 @@
       <div v-for="(value, key, index) in pubTL" :key="index" class="tl">
         {{value.name}}
         <!--とりあえずここに書かせて-->
-        <div v-for="[id,status] in sortedStatus(value.statuses)" :key="id" class="tl">
+        <TimelineToot
-          <div class="toot">
+          v-for="[id,status] in sortedStatus(value.statuses)"
-            <div class="tootAvatar">
+          :key="id"
-              <!--ここは公開TLなので@clickでユーザー情報表示はない-->
+          :status="status"
-              <img :src="pref.static ? status.account.avatar : status.account.avatar_static">
+          :pref-static="pref.static"
-            </div>
+        />
-            <div class="tootUser">
-              {{status.account.display_name}}
-              <small>@{{status.account.acct}}</small>
-            </div>
-            <div class="tootContent" v-html="status.content"></div>
-            <div class="tootMedia" v-if="status.media_attachments">
-              <div
-                v-for="(media,mediaId) in status.media_attachments"
-                :key="mediaId"
-                class="tootImg"
-              >
-                <img :src="media.preview_url" @click="showImage(media.url, media.type)">
-              </div>
-            </div>
-            <div class="tootCard" v-if="status.card">
-              <template
-                v-if="status.card.description"
-              >{{status.card.title}} - {{status.card.description}}</template>
-              <template v-else-if="status.card.html" v-html="status.card.html"></template>
-            </div>
-            <div class="tootAction">
-              <!--ここは公開TLなのでふぁぼ等はなし-->
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <BaseButton
@@ -62,6 +37,8 @@ import { ipcRenderer } from "electron"
 import { Component, Vue } from "vue-property-decorator"
 import { Status } from "megalodon"
 
+import TimelineToot from '@/components/Timeline/Toot.vue'
+
 import "@/extensions/map-sortbyvalue" // Add sortByValue function to Map prototype
 
 type DeleteListener = (e: Event, id: number) => void
@@ -74,7 +51,11 @@ type Timeline = {
 type Timelines = Timeline[]
 type UpdateListener = (e: Event, status: Status) => void
 
-@Component
+@Component({
+  components: {
+    TimelineToot
+  }
+})
 export default class AddColumn extends Vue {
   public instance: Instance = ""
   public showInput: boolean = true
@@ -176,31 +157,4 @@ export default class AddColumn extends Vue {
   height: 100%;
   flex-grow: 4;
 }
-.toot {
-  text-align: left;
-  display: grid;
-  grid-template-columns: 43px 2fr 1fr;
-  grid-template-areas: "avatar user user" "avatar content content" "avatar media media" "avatar card card" "avatar action action";
-  .tootAvatar {
-    grid-area: avatar;
-    img {
-      width: 100%;
-    }
-  }
-  .tootUser {
-    grid-area: user;
-  }
-  .tootContent {
-    grid-area: content;
-  }
-  .tootMedia {
-    grid-area: media;
-  }
-  .tootCard {
-    grid-area: card;
-  }
-  .tootAction {
-    grid-area: card;
-  }
-}
 </style>

src/components/Timeline/Toot.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="toot" :data-status-id="status.id">
+    <div class="tootAvatar">
+      <!--ここは公開TLなので@clickでユーザー情報表示はない-->
+      <img :src="pref.static ? status.account.avatar_static : status.account.avatar">
+    </div>
+    <div class="tootUser">
+      {{status.account.display_name}}
+      <small>@{{status.account.acct}}</small>
+    </div>
+    <div class="tootContent" v-html="status.content"></div>
+    <div class="tootMedia" v-if="status.media_attachments">
+      <div v-for="(media,mediaId) in status.media_attachments" :key="mediaId" class="tootImg">
+        <img :src="media.preview_url" @click="showImage(media.url, media.type)">
+      </div>
+    </div>
+    <div class="tootCard" v-if="status.card">
+      <template v-if="status.card.description">{{status.card.title}} - {{status.card.description}}</template>
+      <template v-else-if="status.card.html" v-html="status.card.html"></template>
+    </div>
+    <div class="tootAction">
+      <!--ここは公開TLなのでふぁぼ等はなし-->
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Status } from 'megalodon'
+
+interface Preferences {
+  static?: boolean
+}
+
+@Component
+export default class Toot extends Vue {
+  @Prop() public status!: Status
+  @Prop() public prefStatic?: boolean
+
+  get pref(): Preferences {
+    return {
+      static: this.prefStatic
+    }
+  }
+
+  mounted() {
+    console.log(this.status)
+  }
+}
+</script>
+
+<style scoped lang="postcss">
+.toot {
+  text-align: left;
+  display: grid;
+  grid-template-columns: 43px 2fr 1fr;
+  grid-template-areas: "avatar user user" "avatar content content" "avatar media media" "avatar card card" "avatar action action";
+  .tootAvatar {
+    grid-area: avatar;
+    img {
+      width: 100%;
+    }
+  }
+  .tootUser {
+    grid-area: user;
+  }
+  .tootContent {
+    grid-area: content;
+  }
+  .tootMedia {
+    grid-area: media;
+  }
+  .tootCard {
+    grid-area: card;
+  }
+  .tootAction {
+    grid-area: card;
+  }
+}
+</style>

src/main/Timeline.ts

@@ -5,7 +5,6 @@ import {
 import { Status, Response } from 'megalodon'
 
 import Client from './Client'
-import Window from './Window'
 
 export default class Timeline {
     public static ready() {