wip

src/views/MainView.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useSocketsStore } from '@/stores/sockets.ts'
+import AppMenu from '@/components/AppMenu.vue'
+import LeftPane from '@/components/LeftPane.vue'
+import RightPane from '@/components/RightPane.vue'
+import UsersList from '@/components/Users/UsersList.vue'
+import SettingsList from '@/components/Settings/SettingsList.vue'
+import ChatsList from '@/components/Chats/ChatsList.vue'
+
+const socketsStore = useSocketsStore()
+
+type MenuSelected = 'chats' | 'users' | 'settings'
+
+const selected = ref<MenuSelected>()
+
+const component = computed(() => {
+  switch (selected.value) {
+    case 'chats':
+      return ChatsList
+    case 'users':
+      return UsersList
+    case 'settings':
+      return SettingsList
+    default:
+      return ChatsList
+  }
+})
+
+onMounted(() => {
+  socketsStore.init()
+})
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="flex w-full">
+      <AppMenu v-model="selected" />
+      <LeftPane>
+        <component :is="component" />
+      </LeftPane>
+    </div>
+    <RightPane />
+  </div>
+</template>
+
+<style scoped></style>