wip

src/App.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import WebSocketComponent from '@/components/WebSocketComponent.vue'
 import { ref } from 'vue'
+import ChatMessageText from '@/components/ChatMessageText.vue'
+import ChatMessage from '@/components/ChatMessage.vue'
 
 const email = ref('vadim.olonin@gmail.com')
+const search = ref('foobar')
 
 async function onSubmit() {
   console.log('onSubmit')
@@ -28,20 +31,120 @@ async function onSubmit() {
 </script>
 
 <template>
-  <div>
-    <div>chat</div>
-    <form @submit.prevent="onSubmit">
-      <div>login</div>
-      <div>
-        <input v-model="email" placeholder="email" type="email" />
-        <button>login</button>
-      </div>
-    </form>
-    <hr />
-    <div>
-      <WebSocketComponent />
-    </div>
-  </div>
+  <v-app>
+    <v-main class="chat-fullscreen">
+      <v-container fluid class="h-100 pa-0">
+        <v-row no-gutters class="h-100">
+          <v-col cols="12" md="3">
+            <v-sheet class="pa-4 d-flex flex-column h-100" theme="dark">
+              <div class="d-flex align-center ga-4">
+                <v-btn icon="mdi-menu" variant="text"></v-btn>
+                <v-text-field
+                  v-model="search"
+                  rounded="xl"
+                  density="compact"
+                  hide-details
+                  variant="outlined"
+                  bg-color="black"
+                  base-color="black"
+                  color="primary"
+                />
+              </div>
+
+              <v-list theme="dark" density="compact" lines="two">
+                <v-list-subheader>Чаты</v-list-subheader>
+
+                <v-list-item
+                  v-for="n in 5"
+                  :key="n"
+                  :title="'Контакт ' + n"
+                  :subtitle="'Последнее сообщение...'"
+                >
+                  <template v-slot:prepend>
+                    <v-avatar color="grey-lighten-1" text="V"> </v-avatar>
+                  </template>
+                  <template v-slot:append>
+                    <div class="d-flex flex-column align-end">
+                      <v-chip density="compact" size="small">2</v-chip>
+                      <div class="text-caption">22:22</div>
+                    </div>
+                  </template>
+                </v-list-item>
+              </v-list>
+            </v-sheet>
+          </v-col>
+
+          <v-col cols="9" class="d-flex flex-column h-100">
+            <v-toolbar color="white" class="flex-grow-0 px-4">
+              <v-avatar color="grey-lighten-1" text="V"></v-avatar>
+              <v-toolbar-title class="">name</v-toolbar-title>
+            </v-toolbar>
+
+            <v-card
+              rounded="0"
+              variant="flat"
+              color="grey-lighten-3"
+              class="flex-grow-1 d-flex flex-column"
+              style="overflow: hidden"
+            >
+              <v-card-text
+                class="flex-grow-1 d-flex ga-4 flex-column flex-column-reverse"
+                style="overflow-y: auto"
+              >
+                <!--                <div class="d-flex justify-center">-->
+                <!--                  <v-chip size="small">Сегодня</v-chip>-->
+                <!--                </div>-->
+
+                <chat-message />
+                <chat-message username="Vadim" text="Привет! Как дела? Что нового?" />
+                <chat-message
+                  username="Vadim"
+                  text="Привет! Как дела? Что нового?"
+                  created-at="2020-02-04T05:45:00.000Z"
+                />
+              </v-card-text>
+
+              <v-card-actions class="flex-grow-0 bg-white pa-4">
+                <v-row dense align="center">
+                  <v-col>
+                    <v-text-field
+                      rounded="xl"
+                      bg-color="white"
+                      variant="outlined"
+                      hide-details
+                      label="message"
+                    >
+                      <template v-slot:prepend-inner>
+                        <v-btn icon variant="text" density="compact" color="grey-darken-1">
+                          <v-icon>mdi-emoticon-outline</v-icon>
+                        </v-btn>
+                      </template>
+                    </v-text-field>
+                  </v-col>
+
+                  <v-col cols="auto">
+                    <v-btn icon variant="text" color="grey-darken-1">
+                      <v-icon>mdi-paperclip</v-icon>
+                    </v-btn>
+                  </v-col>
+
+                  <v-col cols="auto">
+                    <v-btn icon variant="flat" color="primary">
+                      <v-icon>mdi-send</v-icon>
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
 </template>
 
-<style scoped></style>
+<style scoped>
+.chat-fullscreen {
+  height: 100vh;
+}
+</style>