start implementing client based on meshtxt

src/components/pages/ConnectPage.vue

@@ -0,0 +1,28 @@
+<template>
+    <Page>
+
+        <!-- app bar -->
+        <AppBar title="Connect" subtitle="Select a Connection Method"/>
+
+        <!-- list -->
+        <div class="mx-auto my-auto">
+            <ConnectButtons/>
+        </div>
+
+    </Page>
+</template>
+
+<script>
+import AppBar from "../AppBar.vue";
+import Page from "./Page.vue";
+import ConnectButtons from "../connect/ConnectButtons.vue";
+
+export default {
+    name: 'ConnectPage',
+    components: {
+        ConnectButtons,
+        Page,
+        AppBar,
+    },
+}
+</script>

src/components/pages/MainPage.vue

@@ -0,0 +1,49 @@
+<template>
+    <Page>
+
+        <!-- header -->
+        <Header/>
+
+        <!-- tab content -->
+        <div v-if="contacts.length > 0" class="flex h-full w-full overflow-hidden">
+            <ContactsList :contacts="contacts" @contact-click="onContactClick"/>
+        </div>
+
+        <!-- not connected and no content -->
+        <div v-if="!GlobalState.connection && contacts.length === 0" class="mx-auto my-auto">
+            <ConnectButtons/>
+        </div>
+
+    </Page>
+</template>
+
+<script>
+import Header from "../Header.vue";
+import Page from "./Page.vue";
+import GlobalState from "../../js/GlobalState.js";
+import ConnectButtons from "../connect/ConnectButtons.vue";
+import ContactsList from "../contacts/ContactsList.vue";
+
+export default {
+    name: 'MainPage',
+    components: {
+        ContactsList,
+        ConnectButtons,
+        Page,
+        Header,
+    },
+    methods: {
+        onContactClick(contact) {
+            // todo
+        },
+    },
+    computed: {
+        GlobalState() {
+            return GlobalState;
+        },
+        contacts() {
+            return GlobalState.contacts;
+        },
+    },
+}
+</script>

src/components/pages/Page.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="flex flex-col h-full max-w-2xl mx-auto border-x bg-gray-300">
+        <slot/>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Page',
+}
+</script>