1 files changed, 99 insertions, 0 deletions
diff --git a/app/src/pages/Home.vue b/app/src/pages/Home.vue
new file mode 100644
index 0000000..2fe4030
--- /dev/null
+++ b/app/src/pages/Home.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="wrap">
+    <div class="panels">
+      <Panel v-model="from" @connect="connectFrom" />
+      <Panel v-model="to" @connect="connectTo" />
+    </div>
+    <button @click="migrate">
+      Migrate!
+    </button>
+
+    <h1>FROM</h1>
+    <ul v-if="from.folders">
+      <Folders :folder="from.folders" />
+    </ul>
+    <code>
+      {{ from.folders }}
+    </code>
+
+    <h1>TO</h1>
+    <ul v-if="to.folders">
+      <Folders :folder="to.folders" />
+    </ul>
+    <code>
+      {{ to.folders }}
+    </code>
+  </div>
+</template>
+
+<script>
+import Panel from '../components/Panel.vue';
+import Folders from '../components/Folders';
+
+export default {
+  components: {
+    Panel,
+    Folders,
+  },
+
+  data () {
+    return {};
+  },
+
+  computed: {
+    from: {
+      set (value) {
+        this.$store.commit('setFrom', value);
+      },
+      get () {
+        return this.$store.state.from;
+      },
+    },
+    to: {
+      set (value) {
+        this.$store.commit('setTo', value);
+      },
+      get () {
+        return this.$store.state.to;
+      },
+    },
+  },
+
+  mounted () {
+    this.$electron.ipcRenderer.on('imap:listTree:from:reply', (event, folders) => {
+      this.from.folders = folders;
+    });
+
+    this.$electron.ipcRenderer.on('imap:listTree:to:reply', (event, folders) => {
+      this.to.folders = folders;
+    });
+  },
+
+  methods: {
+    connectFrom () {
+      this.$electron.ipcRenderer.send('imap:listTree:from', JSON.parse(JSON.stringify(this.from)));
+    },
+
+    connectTo () {
+      this.$electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(this.to)));
+    },
+
+    async migrate () {
+
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;
+  font-size: 1rem;
+  font-family: Helvetica, sans-serif;
+}
+
+.panels {
+  display: flex;
+  justify-content: space-between;
+}
+</style>