Начал дополнятть страницу чатов

package.json

@@ -14,13 +14,13 @@
     "@noble/hashes": "^1.3.0",
     "@popperjs/core": "^2.11.7",
     "@prisma/client": "4.14.0",
-    "@types/bootstrap": "^5.2.6",
     "astro": "^2.4.1",
     "astro-bootstrap": "^0.5.13",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "5.3.0-alpha3",
     "sharp": "^0.32.1"
   },
   "devDependencies": {
+    "@types/bootstrap": "^5.2.6",
     "@types/node": "^20.1.1",
     "prisma": "^4.14.0"
   }

pnpm-lock.yaml

@@ -13,23 +13,23 @@ dependencies:
   '@prisma/client':
     specifier: 4.14.0
     version: 4.14.0(prisma@4.14.0)
-  '@types/bootstrap':
-    specifier: ^5.2.6
-    version: 5.2.6
   astro:
     specifier: ^2.4.1
     version: 2.4.1(@types/node@20.1.1)(sharp@0.32.1)
   astro-bootstrap:
     specifier: ^0.5.13
-    version: 0.5.13(astro@2.4.1)(bootstrap@5.2.3)
+    version: 0.5.13(astro@2.4.1)(bootstrap@5.3.0-alpha3)
   bootstrap:
-    specifier: ^5.2.3
+    specifier: 5.3.0-alpha3
-    version: 5.2.3(@popperjs/core@2.11.7)
+    version: 5.3.0-alpha3(@popperjs/core@2.11.7)
   sharp:
     specifier: ^0.32.1
     version: 0.32.1
 
 devDependencies:
+  '@types/bootstrap':
+    specifier: ^5.2.6
+    version: 5.2.6
   '@types/node':
     specifier: ^20.1.1
     version: 20.1.1
@@ -657,7 +657,6 @@ packages:
 
   /@popperjs/core@2.11.7:
     resolution: {integrity: sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==}
-    dev: false
 
   /@prisma/client@4.14.0(prisma@4.14.0):
     resolution: {integrity: sha512-MK/XaA2sFdfaOa7I9MjNKz6dxeIEdeZlnpNRoF2w3JuRLlFJLkpp6cD3yaqw2nUUhbrn3Iqe3ZpVV+VuGGil7Q==}
@@ -714,7 +713,6 @@ packages:
     resolution: {integrity: sha512-BlAc3YATdasbHoxMoBWODrSF6qwQO/E9X8wVxCCSa6rWjnaZfpkr2N6pUMCY6jj2+wf0muUtLySbvU9etX6YqA==}
     dependencies:
       '@popperjs/core': 2.11.7
-    dev: false
 
   /@types/debug@4.1.7:
     resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
@@ -844,7 +842,7 @@ packages:
     resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
     dev: false
 
-  /astro-bootstrap@0.5.13(astro@2.4.1)(bootstrap@5.2.3):
+  /astro-bootstrap@0.5.13(astro@2.4.1)(bootstrap@5.3.0-alpha3):
     resolution: {integrity: sha512-XbixeG+lu76Wy2rB8ae/wtRE5Kf90CID3usUO7HTc/h/RS4UxWk6meyWTIB083z9jCBsRbZN1G2FsmGkLoPd+Q==}
     peerDependencies:
       astro: '>=1.x'
@@ -852,7 +850,7 @@ packages:
     dependencies:
       '@types/bootstrap': 5.2.6
       astro: 2.4.1(@types/node@20.1.1)(sharp@0.32.1)
-      bootstrap: 5.2.3(@popperjs/core@2.11.7)
+      bootstrap: 5.3.0-alpha3(@popperjs/core@2.11.7)
       clsx: 1.2.1
       dompurify: 2.4.5
       marked: 4.3.0
@@ -968,10 +966,10 @@ packages:
       readable-stream: 3.6.2
     dev: false
 
-  /bootstrap@5.2.3(@popperjs/core@2.11.7):
+  /bootstrap@5.3.0-alpha3(@popperjs/core@2.11.7):
-    resolution: {integrity: sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==}
+    resolution: {integrity: sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==}
     peerDependencies:
-      '@popperjs/core': ^2.11.6
+      '@popperjs/core': ^2.11.7
     dependencies:
       '@popperjs/core': 2.11.7
     dev: false

src/components/ChatView.astro

@@ -33,17 +33,10 @@ if (chat.messages.length > 0) {
 <div class="col d-flex flex-column" data-chatId={chat.chat.id}>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
-            <!-- <p class="navbar-brand">
-                Чат "{chat.chat.title}" с {
-                    chat.chat.user_in_chat
-                        .map((e) => e.user.fullName ?? e.user.login)
-                        .filter((e) => e !== null)
-                        .join(", ")
-                }
-            </p> -->
             <div>
                 <p class="mb-1">Чат "{chat.chat.title}"</p>
-                <small class="text-muted">
+                <button data-micromodal-trigger="modal-1">1</button>
+                <small class="text-muted" id="usersPart">
                     Пользователи: {
                         chat.chat.user_in_chat
                             .map((e) => e.user.fullName ?? e.user.login)
@@ -76,6 +69,7 @@ if (chat.messages.length > 0) {
 
 <script>
     import type { CompositeChat } from "../db";
+    import MicroModal from "micromodal";
 
     const attr = (attrName: string) => document.querySelector(`[${attrName}]`)!.getAttribute(attrName)!;
     const chatId = () => attr("data-chatId");
@@ -180,7 +174,16 @@ if (chat.messages.length > 0) {
         }
     }
 
+    async function showUsers() {
+        const cid = chatId();
+        alert(cid);
+    }
+
     document.addEventListener("DOMContentLoaded", () => {
+        MicroModal.init();
+
+        document.getElementById("usersPart")?.addEventListener("click", () => showUsers());
+
         const messageText = document.getElementById("messageText")! as HTMLInputElement;
         const sendMessageBtn = document.getElementById("sendMessage")!;