64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<script setup>
|
|
import { onMounted } from "vue";
|
|
import { useIRCStore } from "@/stores/irc";
|
|
|
|
const store = useIRCStore();
|
|
|
|
onMounted(store.connect);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex flex-row" style="height: 100vh">
|
|
<v-sheet border class="buffers">
|
|
<UserCard />
|
|
<v-divider />
|
|
<BufferList />
|
|
</v-sheet>
|
|
<div class="messages d-flex flex-column">
|
|
<v-toolbar density="compact">
|
|
<v-toolbar-title>
|
|
<p>{{ store.activeBufferName }}</p>
|
|
{{ store.activeBuffer?.topic }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<MessageList
|
|
:messages="store.activeBuffer?.messages"
|
|
:me="store.clientInfo.nick"
|
|
/>
|
|
<v-sheet>
|
|
<!-- <v-text-field -->
|
|
<!-- variant="outlined" -->
|
|
<!-- :placeholder="`Message ${store.activeBufferName}`" -->
|
|
<!-- v-model="inputBuffer" -->
|
|
<!-- hide-details -->
|
|
<!-- class="ma-2" -->
|
|
<!-- @keydown.enter.exact.prevent="send" -->
|
|
<!-- /> -->
|
|
|
|
<InputBuffer @send="store.sendActiveBuffer" />
|
|
</v-sheet>
|
|
</div>
|
|
<v-sheet class="user-list h-100" border>
|
|
<UserList :users="store.activeBuffer?.users" />
|
|
</v-sheet>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.buffers {
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.messages {
|
|
height: 100%;
|
|
flex: 3;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.user-list {
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
</style>
|