feature/webgl-preview-update (#21)

Co-authored-by: itoshi <kkzemeow@gmail.com>
Reviewed-on: #21

src/widgets/Layout/index.tsx

@@ -8,7 +8,7 @@ import { AppBar } from "./ui/AppBar";
 import { Drawer } from "./ui/Drawer";
 import { DrawerHeader } from "./ui/DrawerHeader";
 import { NavigationList } from "@features";
-import { authStore, userStore, menuStore } from "@shared";
+import { authStore, menuStore, isMediaIdEmpty } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
 import { Typography } from "@mui/material";
@@ -27,13 +27,10 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
     setIsMenuOpen(open);
   }, [open]);
 
-  const { getUsers, users } = userStore;
+  const { getMeAction, me } = authStore;
 
   useEffect(() => {
-    const fetchUsers = async () => {
-      await getUsers();
-    };
-    fetchUsers();
+    getMeAction();
   }, []);
 
   const handleDrawerOpen = () => {
@@ -45,37 +42,43 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
   };
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <Box
+      sx={{
+        display: "flex",
+        height: "100vh",
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
       <AppBar position="fixed" open={open}>
         <Toolbar className="flex justify-between">
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={handleDrawerOpen}
-            edge="start"
-            sx={[
-              {
-                marginRight: 5,
-              },
-              open && { display: "none" },
-            ]}
-          >
-            <Menu />
-          </IconButton>
-          <CitySelector />
+          <div className="flex items-center">
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={handleDrawerOpen}
+              edge="start"
+              sx={[
+                {
+                  marginRight: 5,
+                },
+                open && { display: "none" },
+              ]}
+            >
+              <Menu />
+            </IconButton>
+            <CitySelector />
+          </div>
+
           <div className="flex gap-2 items-center">
-            <div className="flex flex-col gap-1">
-              {(() => {
-                return (
-                  <>
-                    <p className=" text-white">
-                      {
-                        users?.data?.find(
-                          // @ts-ignore
-                          (user) => user.id === authStore.payload?.user_id
-                        )?.name
-                      }
-                    </p>
+            {(() => {
+              const hasAvatar = me?.icon && !isMediaIdEmpty(me.icon);
+              const token = localStorage.getItem("token");
+
+              return (
+                <>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-white">{me?.name}</p>
                     <div
                       className="text-center text-xs"
                       style={{
@@ -85,18 +88,27 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
                         padding: "2px 10px",
                       }}
                     >
-                      {/* @ts-ignore */}
-                      {authStore.payload?.is_admin
+                      {me?.roles?.includes("admin")
                         ? "Администратор"
                         : "Режим пользователя"}
                     </div>
-                  </>
-                );
-              })()}
-            </div>
-            <div className="w-10 h-10 bg-gray-600 rounded-full flex items-center justify-center">
-              <User />
-            </div>
+                  </div>
+                  <div className="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden bg-gray-600 shrink-0">
+                    {hasAvatar ? (
+                      <img
+                        src={`${
+                          import.meta.env.VITE_KRBL_MEDIA
+                        }${me?.icon}/download?token=${token}`}
+                        alt="Аватар"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <User className="text-white" size={20} />
+                    )}
+                  </div>
+                </>
+              );
+            })()}
           </div>
         </Toolbar>
       </AppBar>
@@ -114,7 +126,7 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
             }}
           >
             <img
-              src="/favicon_ship.png"
+              src="/favicon_ship.svg"
               alt="logo"
               width={40}
               height={40}
@@ -135,15 +147,23 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
           )}
         </DrawerHeader>
         <NavigationList open={open} onDrawerOpen={handleDrawerOpen} />
+        <div className="mt-auto flex justify-center items-center pb-5 text-sm text-gray-300">
+          v.{__APP_VERSION__}
+        </div>
       </Drawer>
       <Box
         component="main"
         sx={{
           width: "100%",
           flexGrow: 1,
+          minWidth: 0,
+          minHeight: 0,
+          height: "100vh",
           p: 3,
-          overflow: "auto",
+          overflowY: "auto",
+          overflowX: "hidden",
           maxWidth: "100vw",
+          boxSizing: "border-box",
         }}
       >
         <div className="mt-16"></div>