From cd916271ccacd5d8e728fce092b1a211e989e433 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 21 Mar 2025 14:19:48 +0500
Subject: [PATCH] modal upd

---
 .env                                         |  2 +-
 .gitignore                                   |  1 +
 src/components/DesktopSelect.tsx             | 28 +++++++++++++++++
 src/components/ModalContainer.tsx            | 28 ++++++++---------
 src/components/modals/CreateSessionModal.tsx | 32 ++++++--------------
 src/pages/DashboardPage.tsx                  | 28 ++++++++---------
 6 files changed, 68 insertions(+), 51 deletions(-)
 create mode 100644 src/components/DesktopSelect.tsx

diff --git a/.env b/.env
index f6cbcd3..d965dec 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VITE_API_URL=http://192.168.1.183:3000
\ No newline at end of file
+VITE_API_URL=http://192.168.1.250:3000
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index a547bf3..438657a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*
diff --git a/src/components/DesktopSelect.tsx b/src/components/DesktopSelect.tsx
new file mode 100644
index 0000000..9e92ebe
--- /dev/null
+++ b/src/components/DesktopSelect.tsx
@@ -0,0 +1,28 @@
+import { IServer } from '../types/IServer';
+
+interface Props {
+  servers: IServer[];
+}
+
+export default function DesktopSelect({ servers }: Props) {
+  return (
+    <div>
+      {servers.map(({ id, name, sessions }) => (
+        <div key={id} className="flex gap-[0.278vw] items-center">
+          {sessions && sessions?.length > 0 && (
+            <div
+              className="rounded-full w-[0.417vw] aspect-square"
+              style={{
+                backgroundColor:
+                  sessions[sessions.length - 1].status === 'started'
+                    ? '#EF3C26'
+                    : '#108C33',
+              }}
+            />
+          )}
+          <p className="text-[0.972vw] leading-[115%]">{name}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx
index cc7373a..52012b3 100644
--- a/src/components/ModalContainer.tsx
+++ b/src/components/ModalContainer.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef } from "react";
-import useModalStore from "../stores/useModalStore";
-import { AnimatePresence, motion } from "motion/react";
-import CloseIcon from "./icons/CloseIcon";
-import Button from "./Button";
+import { useEffect, useRef } from 'react';
+import useModalStore from '../stores/useModalStore';
+import { AnimatePresence, motion } from 'motion/react';
+import CloseIcon from './icons/CloseIcon';
+import Button from './Button';
 
 const duration = 300;
 
@@ -24,7 +24,7 @@ function ModalContainer() {
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key !== "Escape") return;
+    if (e.key !== 'Escape') return;
     setIsOpen(false);
   }
 
@@ -39,12 +39,12 @@ function ModalContainer() {
   }, [isOpen]);
 
   useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("keydown", handleKeydown);
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('keydown', handleKeydown);
 
     return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("keydown", handleKeydown);
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('keydown', handleKeydown);
     };
   }, []);
 
@@ -59,16 +59,16 @@ function ModalContainer() {
         >
           <div
             ref={popoverRef}
-            className="fixed top-0 left-0 w-full h-full bg-black/70 overflow-y-auto flex flex-col items-center justify-center"
+            className="fixed inset-0 bg-black/70 overflow-y-auto flex flex-col items-end justify-center"
           >
             <div className="max-h-full">
-              <div ref={divRef} className="p-[0.972vw]">
+              <div ref={divRef} className="p-[0.972vw] h-dvh">
                 <div
                   ref={buttonRef}
-                  className="absolute top-0 left-0 w-full h-full cursor-pointer"
+                  className="absolute inset-0 cursor-pointer"
                   onClick={() => setIsOpen(false)}
                 />
-                <div className="relative w-full">
+                <div className="relative w-full h-full">
                   {modal}
                   <Button
                     onlyIcon
diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx
index 2b49649..d0e5329 100644
--- a/src/components/modals/CreateSessionModal.tsx
+++ b/src/components/modals/CreateSessionModal.tsx
@@ -1,20 +1,18 @@
-import Button from "../Button.tsx";
-import SessionIcon from "../icons/SessionIcon.tsx";
-import Input from "../Input.tsx";
-import useQueryApps from "../../queries/useQueryApps.ts";
-import useQueryServers from "../../queries/useQueryServers.ts";
-import Select from "../Select.tsx";
-import DisplayIcon from "../icons/DisplayIcon.tsx";
+import { IServer } from '../../types/IServer.ts';
+import Button from '../Button.tsx';
+import Input from '../Input.tsx';
+import DisplayIcon from '../icons/DisplayIcon.tsx';
 
-export default function CreateSessionModal() {
-  const { data: apps } = useQueryApps();
-  const { data: servers } = useQueryServers();
+interface Props {
+  servers: IServer[];
+}
 
+export default function CreateSessionModal({ servers }: Props) {
   return (
-    <div className="w-[34.375vw] h-full rounded-[0.833vw] bg-white p-[1.667vw] flex flex-col justify-between gap-[1.111vw]">
+    <div className="w-[34.375vw] rounded-[0.833vw] bg-white min-h-full p-[1.667vw] flex flex-col justify-between gap-[1.111vw]">
       <div className="gap-y-[1.111vw] flex flex-col justify-between">
         <div className="space-y-[0.556vw]">
-          <div className="p-[0.833vw] ring-1 w-fit rounded-[0.556vw]">
+          <div className="p-[0.833vw] ring-[0.069vw] ring-[#E6E6E6] w-fit rounded-[0.556vw]">
             <div className="w-[1.389vw] h-[1.389vw]">
               <DisplayIcon />
             </div>
@@ -47,16 +45,6 @@ export default function CreateSessionModal() {
             <Input placeholder="sample@mail.ru" type="email" />
           </div>
         </div>
-        {apps && (
-          <div className="flex justify-between items-center">
-            <p className="text-[0.972vw]">Приложение</p>
-            <div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
-              <Select
-                options={apps.map(({ id, name }) => ({ id, value: name }))}
-              />
-            </div>
-          </div>
-        )}
         <hr className="border-black/10" />
       </div>
       <div className="flex justify-between">
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index e3d70ea..aa8220f 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -1,22 +1,22 @@
-import { useQuery } from "@tanstack/react-query";
-import { IUser } from "../types/IUser";
-import api from "../utils/api";
-import Sidebar from "../components/Sidebar";
-import { IServer } from "../types/IServer";
-import DesktopCard from "../components/DesktopCard";
-import Button from "../components/Button";
-import useModalStore from "../stores/useModalStore";
-import CreateSessionModal from "../components/modals/CreateSessionModal";
+import { useQuery } from '@tanstack/react-query';
+import { IUser } from '../types/IUser';
+import api from '../utils/api';
+import Sidebar from '../components/Sidebar';
+import { IServer } from '../types/IServer';
+import DesktopCard from '../components/DesktopCard';
+import Button from '../components/Button';
+import useModalStore from '../stores/useModalStore';
+import CreateSessionModal from '../components/modals/CreateSessionModal';
 
 function DashboardPage() {
   const { data: me } = useQuery({
-    queryKey: ["me"],
-    queryFn: () => api.get("users/me").json<IUser>(),
+    queryKey: ['me'],
+    queryFn: () => api.get('users/me').json<IUser>(),
   });
 
   const { data: servers } = useQuery({
-    queryKey: ["servers"],
-    queryFn: () => api.get("servers?withLastSession=true").json<IServer[]>(),
+    queryKey: ['servers'],
+    queryFn: () => api.get('servers?withLastSession=true').json<IServer[]>(),
     enabled: !!me,
     refetchInterval: 1000,
   });
@@ -66,7 +66,7 @@ function DashboardPage() {
           </div>
           <Sidebar />
         </div>
-        <div className="border w-[38.889vw]">
+        <div className="w-[38.889vw]">
           <div className="space-y-4">
             {servers?.map((server) => (
               <DesktopCard key={server.id} server={server} />