Add user timeline component

src/components/AddColumn/PublicTimeline.vue

@@ -56,7 +56,7 @@ type UpdateListener = (e: Event, status: Status) => void
     TimelineToot
   }
 })
-export default class AddColumn extends Vue {
+export default class PublicTimeline extends Vue {
   public instance: Instance = ""
   public showInput: boolean = true
   public updateListeners: [string, UpdateListener][] = []
@@ -106,7 +106,6 @@ export default class AddColumn extends Vue {
     ipcRenderer.send("no-auth-timeline", timeline.name)
   }
 
-
   public loadTL(timeline: Timeline, statuses: Status[]) {
     timeline.statuses = new Map(
       statuses.map((status): [number, Status] => [status.id, status])

src/components/AddColumn/UserTimeline.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <form @submit.prevent="addTL">
+      <label
+        v-for="(types,name) in userTimelineTypes"
+        :key="name"
+        :class="{selected: name === timelineType}"
+      >
+        <input type="radio" :value="name" v-model="timelineType">
+        {{ types }}
+      </label>
+      <BaseButton
+        type="submit"
+        class="primary fill"
+        style="--font-size:.8em;margin-top:1em;"
+      >Add Column</BaseButton>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator"
+
+@Component
+export default class UserTimeline extends Vue {
+  public timelineType: string = 'home'
+  public userTimelineTypes: {
+    [key: string]: string
+  } = {
+      home: 'Home Timeline',
+      notify: 'Notifications',
+      dm: 'Direct Messages',
+      local: 'Local Timeline',
+      fediverse: 'Fediverse Timeline',
+      integrated: 'Integrated Timeline (Home + Local)',
+      localPlus: 'Integrated Timeline (Local + Boost + Reply)',
+    }
+
+  public addTL() {
+    console.log(this.timelineType)
+  }
+}
+</script>
+
+<style scoped lang="postcss">
+label {
+  display: block;
+  line-height: 2em;
+  margin: 0em;
+
+  &:hover {
+    background-color: gray;
+  }
+
+  &.selected {
+    background-color: maroon;
+  }
+
+  & > input[type="radio"] {
+    display: none;
+  }
+}
+</style>

src/components/Welcome.vue

@@ -27,7 +27,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 
 import Login from './Preferences/AccountAuth.vue'
-import Timeline from './Timeline/Timeline.vue'
+import Timeline from './AddColumn/UserTimeline.vue'
 import PublicTimeline from './AddColumn/PublicTimeline.vue'
 
 type Status = 'welcome' | 'login' | 'public_timeline' | 'select_timeline'