feat: big major update

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, userStore, menuStore, isMediaIdEmpty } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
 import { Typography } from "@mui/material";
@@ -67,18 +67,18 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
           </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 currentUser = users?.data?.find(
+                (user) => user.id === (authStore.payload as { user_id?: number })?.user_id,
+              );
+              const hasAvatar =
+                currentUser?.icon && !isMediaIdEmpty(currentUser.icon);
+              const token = localStorage.getItem("token");
+
+              return (
+                <>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-white">{currentUser?.name}</p>
                     <div
                       className="text-center text-xs"
                       style={{
@@ -88,18 +88,27 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
                         padding: "2px 10px",
                       }}
                     >
-                      {/* @ts-ignore */}
-                      {authStore.payload?.is_admin
+                      {(authStore.payload as { is_admin?: boolean })?.is_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
+                        }${currentUser!.icon}/download?token=${token}`}
+                        alt="Аватар"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <User className="text-white" size={20} />
+                    )}
+                  </div>
+                </>
+              );
+            })()}
           </div>
         </Toolbar>
       </AppBar>
@@ -138,6 +147,9 @@ 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"