Cutls's internal commit (merge kPherox's commits)

src/components/AddColumn/PublicTimeline.vue

@@ -55,7 +55,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][] = []
@@ -105,7 +105,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])
@@ -146,7 +145,7 @@ export default class AddColumn extends Vue {
     console.log("Account dialog:" + id)
   }
 }
-</script>=
+</script>
 
 <style scoped lang="postcss">
 #timelines {

src/components/AddColumn/UserTimeline.vue

@@ -0,0 +1,65 @@
+<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 {
+  @Prop() public username!: string
+
+  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/Main.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="main">
+    <!-- 仮置き -->
+    <p>Main View</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  components: {
+  }
+})
+export default class Main extends Vue {
+}
+</script>
+
+<style lang="postcss">
+</style>

src/components/Preferences/AccountAuth.vue

@@ -18,12 +18,22 @@
     >Login</BaseButton>
   </form>
 </template>
+
 <script lang="ts">
 import { ipcRenderer } from "electron"
 import { Component, Vue } from "vue-property-decorator"
+
 type Instance = string
+interface Account {
+  domain: string
+  acct: string
+  avatar: string
+  avatarStatic: string
+  accessToken?: string
+}
+
 @Component
-export default class Auth extends Vue {
+export default class AccountAuth extends Vue {
   public instance: Instance = ""
   public code: string = ""
   public domain: string = ""
@@ -38,15 +48,15 @@ export default class Auth extends Vue {
     ipcRenderer.send(`new-account-setup`, this.instance)
   }
   public authCode() {
-    let code = this.code
-    ipcRenderer.send(`new-account-auth`, code, this.instance)
+    ipcRenderer.send(`new-account-auth`, this.code, this.instance)
     this.code = ""
+    this.instance = ''
     ipcRenderer.once(
       `login-complete`,
-      (e: Event) => {
-        status="timeline"
+      (e: Event, account: Account) => {
+        this.$emit('login-complete', account)
       }
-    );
+    )
   }
 }
 </script>

src/components/Timeline/Timeline.vue

@@ -155,7 +155,7 @@ export default class AddColumn extends Vue {
     console.log("Account dialog:" + id);
   }
 }
-</script>=
+</script>
 
 <style scoped lang="postcss">
 #timelines {

src/components/Welcome.vue

@@ -4,16 +4,21 @@
     <h1>Welcome to TheDesk</h1>
     <BaseButton @click.native="status = 'login'" class="primary fill">{{ loginButton }}</BaseButton>
     <BaseButton @click.native="status = 'public_timeline'" class="primary">{{ publicTLButton }}</BaseButton>
-    <BaseButton @click.native="status = 'timeline'" class="primary">{{ TLButton }}</BaseButton>
 
     <BaseOverlay
       v-show="status !== 'welcome'"
       @close="status = 'welcome'"
-      :title="status === 'login' ? loginButton : status === 'timeline' ? TLButton : publicTLButton"
+      :disableClose="status === 'select_timeline'"
+      :title="status === 'login'
+              ? loginButton
+              : status === 'public_timeline'
+              ? publicTLButton
+              : status === 'select_timeline'
+              ? selectTimeline : ''"
     >
-      <Login v-if="status === 'login'"/>
+      <Login v-if="status === 'login'" @login-complete="loggedIn"/>
       <PublicTimeline v-else-if="status === 'public_timeline'"/>
-      <Timeline v-else-if="status === 'timeline'"/>
+      <UserTimeline v-else-if="status === 'select_timeline'" :username="username"/>
     </BaseOverlay>
   </div>
 </template>
@@ -21,26 +26,40 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 
-import Login from './Preference/AccountManager.vue'
-import Timeline from './Timeline/Timeline.vue'
+import Login from './Preferences/AccountAuth.vue'
+import UserTimeline from './AddColumn/UserTimeline.vue'
 import PublicTimeline from './AddColumn/PublicTimeline.vue'
 
-type Status = 'welcome' | 'login' | 'public_timeline' | 'timeline'
+type Status = 'welcome' | 'login' | 'public_timeline' | 'select_timeline'
+interface Account {
+  domain: string
+  acct: string
+  avatar: string
+  avatarStatic: string
+  accessToken?: string
+}
 
 @Component({
   components: {
     Login,
-    Timeline,
+    UserTimeline,
     PublicTimeline,
   }
 })
 export default class Welcome extends Vue {
-  public status: Status = 'welcome'
   public loginButton: string = 'Login'
   public publicTLButton: string = 'Streaming Public Timeline'
-  public TLButton: string = 'Timeline'
+  public selectTimeline: string = 'Select Timeline'
+
+  public username: string = ''
+  public status: Status = 'welcome'
+
+  public loggedIn(account: Account) {
+    this.username = `@${account.acct}@${account.domain}`
+    this.status = 'select_timeline'
+  }
 }
-</script>=
+</script>
 
 <style lang="postcss">
 #welcome {

src/components/globals/BaseButton.vue

@@ -11,7 +11,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
   inheritAttrs: false,
 })
 export default class BaseButton extends Vue {
-  @Prop() private type?: string
+  @Prop() public type?: string
 }
 </script>
 

src/components/globals/BaseOverlay.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div class="overlay">
-      <button type="button" class="close-button" @click="closeOverlay">X</button>
+      <button type="button" class="close-button" @click="closeOverlay" v-show="!disableClose">X</button>
       <h1>{{ title }}</h1>
       <div class="overlay-inner">
         <slot/>
@@ -19,6 +19,8 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 export default class BaseOverlay extends Vue {
   @Prop()
   public title?: string
+  @Prop()
+  public disableClose?: boolean
 
   public closeOverlay() {
     this.$emit('close')