v1.0

- added task rendering instead of molecule
- fied a lot of errors
- changes experiment page to show generic experiment info

src/Components/Layout/Sidebar/Sidebar.tsx

@@ -18,8 +18,13 @@ import {
   IconUsers,
   type IconProps,
 } from "@tabler/icons-react";
-import { Link, useLocation } from "react-router";
-import { useState, type ForwardRefExoticComponent } from "react";
+import {
+  Link,
+  useLocation,
+  useNavigate,
+  type NavigateFunction,
+} from "react-router";
+import { useEffect, useState, type ForwardRefExoticComponent } from "react";
 import { routes } from "Routes/Routes";
 import keycloak from "Api/Keycloak/Keycloak";
 import { useAuthenticationStore } from "Stores/AuthenticationStore";
@@ -33,6 +38,7 @@ interface SubtleLinkButtonProps {
   text: string;
   color: string;
   selected?: boolean;
+  nav: NavigateFunction;
 }
 
 function SubtleLinkButton(props: SubtleLinkButtonProps) {
@@ -44,16 +50,48 @@ function SubtleLinkButton(props: SubtleLinkButtonProps) {
         color={props.selected ? props.color : "contrast"}
         text={props.text}
         textAlign="left"
+        onClick={() => {
+          props.nav(props.link);
+        }}
       />
     </Link>
   );
 }
 
 function Sidebar() {
-  const { profile, profile_picture_path } = useAuthenticationStore();
+  const { profile, set_profile_picture_path, profile_picture_path } =
+    useAuthenticationStore();
   const [open, set_open] = useState(false);
   const theme = useMantineTheme();
   const location = useLocation(); // get current URL
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!profile) return;
+
+    const fetchAvatar = async () => {
+      try {
+        const response = await fetch(
+          `${import.meta.env.VITE_QUANTUM_BACKEND_URL}/user/serve/${profile.id}`,
+          {
+            headers: {
+              Authorization: `Bearer ${keycloak.token}`,
+            },
+          },
+        );
+
+        if (response.ok) {
+          const blob = await response.blob();
+          const url = URL.createObjectURL(blob);
+          set_profile_picture_path(url);
+        }
+      } catch (error) {
+        console.error("Failed to load avatar:", error);
+      }
+    };
+
+    fetchAvatar();
+  }, [profile]);
 
   return (
     <div className="sidebar">
@@ -70,8 +108,7 @@ function Sidebar() {
             text="Подтвердить"
             onClick={() =>
               keycloak.logout({
-                redirectUri:
-                  window.location.origin + "/" + import.meta.env.VITE_BASE_PATH,
+                redirectUri: window.location.origin,
               })
             }
             textSize="lg"
@@ -94,6 +131,7 @@ function Sidebar() {
           text="Эксперименты"
           color={theme.colors.teal[7]}
           selected={location.pathname.startsWith(routes.ExperimentsPage.path)}
+          nav={navigate}
         />
         <SubtleLinkButton
           link={routes.MachinesPage.path}
@@ -101,6 +139,7 @@ function Sidebar() {
           text="Вычислительные системы"
           color={theme.colors.violet[7]}
           selected={location.pathname.startsWith(routes.MachinesPage.path)}
+          nav={navigate}
         />
         <SubtleLinkButton
           link={routes.TeamsPage.path}
@@ -108,6 +147,7 @@ function Sidebar() {
           text="Команды"
           color={theme.colors.grape[7]}
           selected={location.pathname.startsWith(routes.TeamsPage.path)}
+          nav={navigate}
         />
         <SubtleLinkButton
           link={routes.DocumentationPage.path}
@@ -115,6 +155,7 @@ function Sidebar() {
           text="Документация"
           color={theme.colors.blue[7]}
           selected={location.pathname.startsWith(routes.DocumentationPage.path)}
+          nav={navigate}
         />
       </div>
       <div className="sidebar_bottom">
@@ -134,15 +175,16 @@ function Sidebar() {
               style={{ width: "100%", height: "5px", margin: "5px" }}
             />
             <div className="sidebar_bottom_bottom">
-              <Link to={routes.SettingsPage.path} className="invisible_link">
-                <CustomButton
-                  style="subtle"
-                  icon={<IconSettings2 size={26} />}
-                  text="Настройки"
-                  color="contrast"
-                  textSize="lg"
-                />
-              </Link>
+              <CustomButton
+                style="subtle"
+                icon={<IconSettings2 size={26} />}
+                text="Настройки"
+                color="contrast"
+                textSize="lg"
+                onClick={() => {
+                  navigate(routes.SettingsPage.path);
+                }}
+              />
               <CustomButton
                 style="subtle"
                 icon={<IconLogout size={26} />}