wip

src/App.vue

@@ -2,14 +2,19 @@
 import { useAuthStore } from '@/stores/auth.ts'
 import SignInView from '@/views/SignInView.vue'
 import MainView from '@/views/MainView.vue'
+import TestView from '@/views/TestView.vue'
+import { ref } from 'vue'
 
 const authStore = useAuthStore()
+
+const isTesting = ref<boolean>(false)
 </script>
 
 <template>
-  <div class="h-screen bg-gray-500">
-    <div class="h-full m-auto py-4 md:w-full sm:w-full w-full">
-      <MainView v-if="authStore.isAuth" />
+  <div class="h-screen bg-gray-800">
+    <div class="h-full m-auto max-w-7xl">
+      <TestView v-if="isTesting" />
+      <MainView v-else-if="authStore.isAuth" />
       <SignInView v-else />
     </div>
   </div>

src/components/Chats/ChatsList.vue

@@ -26,7 +26,9 @@ function getMessages([selected]: string[]) {
     <VToolbar theme="dark" class="px-2">
       <VMenu transition="slide-y-transition">
         <template v-slot:activator="{ props }">
-          <VBtn size="small" icon="mdi-menu" class="mr-2" color="white" v-bind="props" />
+          <VBtn size="small" icon class="mr-2" color="white" v-bind="props">
+            <VIcon size="large">mdi-menu</VIcon>
+          </VBtn>
         </template>
         <VList
           class="top-1"
@@ -47,7 +49,7 @@ function getMessages([selected]: string[]) {
 
       <VTextField bg-color="black" prepend-inner-icon="mdi-magnify" placeholder="search chat" />
     </VToolbar>
-    <VList theme="dark" v-model:selected="chatsStore.selected" mandatory lines="one">
+    <VList theme="dark" v-model:selected="chatsStore.selected" mandatory lines="two">
       <ChatListElement v-for="chat in chatsStore.chats" :key="chat.id" :chat />
     </VList>
   </div>

src/components/Messages/MessageInput.vue

@@ -27,7 +27,7 @@ const isEmptyText = computed(() => {
 </script>
 
 <template>
-  <div class="flex gap-2 pa-2 items-center">
+  <div class="flex gap-2 py-4 items-center">
     <VTextField
       prepend-inner-icon="mdi-emoticon-outline"
       append-inner-icon="mdi-paperclip"

src/components/Messages/MessageItem.vue

@@ -38,10 +38,14 @@ const isMyMessage = computed(() => {
   <!--  </div>-->
 
   <VSheet class="d-flex" color="transparent" :class="{ 'flex-row-reverse': isMyMessage }">
-    <div class="flex gap-2 pa-4 rounded" :class="isMyMessage ? 'bg-blue-200' : 'bg-white'">
+    <VSheet class="d-flex ga-2 px-2 py-1" rounded :color="isMyMessage ? 'blue-darken-1' : 'white'">
       <span>{{ message }}</span>
       <span class="text-xs self-end">{{ messageDate }}</span>
-    </div>
+    </VSheet>
+    <!--    <div class="flex gap-2 px-3 py-2 rounded" :class="isMyMessage ? 'bg-blue-200' : 'bg-white'">-->
+    <!--      <span>{{ message }}</span>-->
+    <!--      <span class="text-xs self-end">{{ messageDate }}</span>-->
+    <!--    </div>-->
   </VSheet>
 </template>
 

src/components/Messages/MessagesWrapper.vue

@@ -25,14 +25,14 @@ const chatInfo = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col overflow-hidden">
+  <div class="flex h-full flex-col overflow-hidden bg-gray-200">
     <div class="grow-0" v-if="chatsStore.selectedChat">
       <slot name="toolbar" :info="chatInfo" />
     </div>
-    <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
+    <div class="px-16 gap-1 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
       <slot :messages="messagesStore.messages" />
     </div>
-    <div class="grow-0">
+    <div class="px-16 grow-0">
       <slot name="input" />
     </div>
   </div>

src/main.ts

@@ -28,7 +28,13 @@ const vuetify = createVuetify({
     VBtn: { variant: 'flat' },
     VSwitch: { color: 'black', hideDetails: true },
     VOtpInput: { density: 'compact' },
-    VTextField: { color: 'black', density: 'compact', variant: 'outlined', hideDetails: true },
+    VTextField: {
+      color: 'black',
+      rounded: 'lg',
+      density: 'compact',
+      variant: 'outlined',
+      hideDetails: true,
+    },
   },
 })
 app.use(vuetify)

src/views/TestView.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+
+const url = new URL('https://example.com/search?q=web+apis&page=2&sort=recent#results')
+const params = new URLSearchParams({ q: 'hello world', page: '1' })
+
+function updateUrlParams() {
+  url.searchParams.set('page', '3')
+  url.searchParams.append('filter', 'new')
+  url.searchParams.delete('sort')
+
+  url.toString()
+}
+
+async function copyToClipboard() {
+  await navigator.clipboard.writeText('Hello, clipboard!')
+}
+
+const text = ref('')
+async function getFromClipboard() {
+  text.value = await navigator.clipboard.readText()
+}
+
+const card = useTemplateRef('my-card')
+
+const observer = new ResizeObserver((entries) => {
+  console.log(entries)
+  // for (const entry of entries) {
+  //   const width = entry.contentBoxSize[0]!.inlineSize
+  //
+  //   if (width < 400) {
+  //     entry.target.classList.add('compact')
+  //   } else {
+  //     entry.target.classList.remove('compact')
+  //   }
+  // }
+})
+
+// observer.observe(card.value!)
+</script>
+
+<template>
+  <VSheet class="pa-4 d-flex flex-column ga-4">
+    <VCard>
+      <VCardText>
+        <div>{{ url }}</div>
+        <div>{{ url.hostname }}</div>
+        <div>{{ url.pathname }}</div>
+        <div>{{ url.hash }}</div>
+        <div>{{ url.searchParams }}</div>
+        <div>{{ url.searchParams.get('q') }}</div>
+        <div>{{ url.searchParams.has('q') }}</div>
+
+        <div>{{ params }}</div>
+      </VCardText>
+    </VCard>
+
+    <VCard>
+      <VCardText>
+        <VBtn color="black" popovertarget="my-popover">Toggle popover</VBtn>
+        <div class="" id="my-popover" popover>Popover content</div>
+      </VCardText>
+    </VCard>
+
+    <VCard>
+      <VCardText>
+        <div class="flex gap-2 items-center">
+          <VBtn color="black" @click="copyToClipboard">Copy to clipboard</VBtn>
+
+          <VBtn color="primary" @click="getFromClipboard">Get from clipboard</VBtn>
+          <VTextField v-model="text"></VTextField>
+        </div>
+      </VCardText>
+    </VCard>
+
+    <VCard>
+      <VCardText>
+        <div ref="my-card" class="card">card</div>
+      </VCardText>
+    </VCard>
+  </VSheet>
+</template>
+
+<style scoped>
+#my-popover {
+  margin: 1rem;
+  padding: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+#my-popover::backdrop {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+#my-popover:popover-open {
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

vite.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
     port: 5173,
     strictPort: true,
     proxy: {
-      '/api': 'http://localhost:3000',
+      '/api': 'https://chat.madsky.ru',
     },
   },
 })