Add: header grid and icons

src/components/Timeline/Column.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="timeline">
     <div class="header">
+      <TimnelineIcon :tlType="type" iconSize="70"  class="tl-icon" />
       <div class="tl-name">{{name}}</div>
+      <div class="tl-type">{{type}}</div>
     </div>
     <div class="toot-box">
       <Toot v-for="[id,status] in statuses" :key="id" :status="status" :pref-static="pref.static"/>
@@ -14,6 +16,7 @@ import { ipcRenderer } from "electron"
 import { Component, Prop, Vue } from "vue-property-decorator"
 import { Status } from "megalodon"
 
+import TimnelineIcon from '@/components/Timeline/TimelineIcon.vue'
 import Toot from '@/components/Timeline/Toot.vue'
 
 import "@/extensions/map-sortbyvalue" // Add sortByValue function to Map prototype
@@ -27,7 +30,8 @@ type Statuses = Map<number, Status>
 
 @Component({
   components: {
-    Toot
+    Toot,
+    TimnelineIcon
   }
 })
 export default class Column extends Vue {
@@ -131,10 +135,25 @@ export default class Column extends Vue {
 
   .header {
     top: 0;
+    padding:10px;
     background-color: var(--header);
     filter: brightness(110%);
-
+    display: grid;
+    column-gap: 0.5em;
+    row-gap: 0.3em;
+    grid-template-columns: 70px 1fr 1fr;
+    grid-template-areas:
+    "icon name type"
+    "icon spacer spacer";
+    .tl-icon {
+      grid-area: icon;
+    }
     .tl-name {
+      grid-area: name;
+      height: 60px;
+    }
+    .tl-type {
+      grid-area: type;
       height: 60px;
     }
   }

src/components/Timeline/TimelineIcon.vue

@@ -0,0 +1,40 @@
+<template>
+    <span>
+        <HomeIcon :size="iconSize" v-if="tlType === 'home'"/>
+        <LocalIcon :size="iconSize" v-if="tlType === 'local'"/>
+        <NotifyIcon :size="iconSize" v-if="tlType === 'notify'"/>
+        <DMIcon :size="iconSize" v-if="tlType === 'dm'"/>
+        <FederatedIcon :size="iconSize" v-if="tlType === 'federated'"/>
+        <IntegratedIcon :size="iconSize" v-if="tlType === 'integrated'"/>
+        <LocalPlusIcon :size="iconSize" v-if="tlType === 'localPlus'"/>
+    </span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator"
+
+import HomeIcon from 'vue-material-design-icons/Home.vue'
+import LocalIcon from 'vue-material-design-icons/Account.vue'
+import NotifyIcon from 'vue-material-design-icons/Bell.vue'
+import DMIcon from 'vue-material-design-icons/Email.vue'
+import FederatedIcon from 'vue-material-design-icons/Earth.vue'
+import IntegratedIcon from 'vue-material-design-icons/SourceMerge.vue'
+import LocalPlusIcon from 'vue-material-design-icons/CallMerge.vue'
+
+
+@Component({
+  components: {
+    HomeIcon,
+    LocalIcon,
+    NotifyIcon,
+    DMIcon,
+    FederatedIcon,
+    IntegratedIcon,
+    LocalPlusIcon
+  }
+})
+export default class TimnelineIcon extends Vue {
+  @Prop() public tlType!: string
+  @Prop() public iconSize!: number
+}
+</script>