Add carousel to Recent activity

.storybook/preview-body.html

@@ -1,12 +1,13 @@
 <script>
-  window.environment;
+  window.environment = "VS Code";
   window.theme;
   window.mainFont;
   window.codeFont;
-  window.isJaegerEnabled;
+  window.isJaegerEnabled = true;
   window.recentActivityRefreshInterval;
   window.recentActivityExpirationLimit;
-  window.recentActivityDocumentationURL;
+  window.recentActivityDocumentationURL =
+    "https://github.com/digma-ai/digma-vscode-plugin#%EF%B8%8F-extension-settings";
   window.wizardSkipInstallationStep;
   window.assetsRefreshInterval;
 </script>

src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts

@@ -1,15 +1,13 @@
 import styled from "styled-components";
 import { ContainerProps } from "./types";
 
-export const Container = styled.button<ContainerProps>`
+export const Container = styled.li<ContainerProps>`
+  display: flex;
   position: relative;
   cursor: pointer;
-  border: none;
-  font-family: inherit;
   font-weight: ${({ isSelected }) => (isSelected ? 700 : 500)};
   font-size: 14px;
   padding: 4px 12px;
-  white-space: nowrap;
 
   color: ${({ isSelected, theme }) => {
     if (isSelected) {
@@ -48,6 +46,9 @@ export const Container = styled.button<ContainerProps>`
     }
   }};
 
+  border-bottom: ${({ isSelected }) =>
+    isSelected ? "1px solid #5154ec" : "none"};
+
   &:hover {
     font-weight: 700;
     color: ${({ theme }) => {
@@ -62,11 +63,9 @@ export const Container = styled.button<ContainerProps>`
     }};
   }
 
-  ${({ isSelected }) => {
-    if (isSelected) {
-      return `border-bottom: 1px solid #5154ec`;
-    }
-  }}
+  transition-property: color, font-weight, border;
+  transition-duration: 300ms;
+  transition-timing-function: ease-out;
 `;
 
 export const BadgeContainer = styled.div`

src/components/RecentActivity/EnvironmentPanel/index.tsx

@@ -1,12 +1,31 @@
+import { useEffect, useState } from "react";
+import useDimensions from "react-cool-dimensions";
+import { DefaultTheme, useTheme } from "styled-components";
 import { IconButton } from "../../common/IconButton";
+import { ChevronIcon } from "../../common/icons/ChevronIcon";
 import { DigmaLogoFlatIcon } from "../../common/icons/DigmaLogoFlatIcon";
 import { ListIcon } from "../../common/icons/ListIcon";
 import { TableIcon } from "../../common/icons/TableIcon";
+import { DIRECTION } from "../../common/icons/types";
 import { EnvironmentTab } from "./EnvironmentTab";
 import * as s from "./styles";
-import { EnvironmentPanelProps } from "./types";
+import { EnvironmentPanelProps, ScrollDirection } from "./types";
+
+const getCarouselIconColor = (theme: DefaultTheme, isDisabled: boolean) => {
+  switch (theme.mode) {
+    case "light":
+      return isDisabled ? "#b9c0d4" : "#4d668a";
+    case "dark":
+    case "dark-jetbrains":
+      return isDisabled ? "#7c7c94" : "#e2e7ff";
+  }
+};
 
 export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
+  const theme = useTheme();
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const { observe, width, entry } = useDimensions();
+
   const handleEnvironmentTabClick = (name: string) => {
     props.onEnvironmentSelect(name);
   };
@@ -16,11 +35,55 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
     table: TableIcon
   };
 
+  useEffect(() => {
+    if (entry) {
+      entry.target.scrollLeft = scrollLeft;
+    }
+  }, [entry, scrollLeft]);
+
   const handleViewModeButtonClick = () => {
     const mode = props.viewMode === "table" ? "list" : "table";
     props.onViewModeChange(mode);
   };
 
+  const handleCarouselButtonClick = (direction: ScrollDirection) => {
+    if (entry) {
+      let delta = width;
+      if (direction === "left") {
+        delta *= -1;
+      }
+
+      let newScrollLeft = entry.target.scrollLeft + delta;
+
+      if (newScrollLeft >= entry.target.scrollWidth - width) {
+        newScrollLeft = entry.target.scrollWidth - width;
+      }
+
+      if (newScrollLeft < 0) {
+        newScrollLeft = 0;
+      }
+
+      setScrollLeft(newScrollLeft);
+    }
+  };
+
+  const isCarouselButtonDisabled = (direction: ScrollDirection) => {
+    if (entry) {
+      if (direction === "left") {
+        return scrollLeft === 0;
+      }
+
+      if (direction === "right") {
+        return scrollLeft === entry.target.scrollWidth - width;
+      }
+    }
+
+    return false;
+  };
+
+  const isLeftCarouselButtonDisabled = isCarouselButtonDisabled("left");
+  const isRightCarouselButtonDisabled = isCarouselButtonDisabled("right");
+
   return (
     <s.BorderContainer>
       <s.Container>
@@ -29,15 +92,37 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
             <DigmaLogoFlatIcon size={22} />
           </s.LogoContainer>
         </s.LogoRotationContainer>
-        {props.environments.map((environment) => (
-          <EnvironmentTab
-            key={environment.name}
-            text={environment.name}
-            hasBadge={environment.hasBadge}
-            isSelected={props.selectedEnvironment === environment.name}
-            onClick={handleEnvironmentTabClick}
+        <s.CarouselButton
+          key={"left"}
+          onClick={() => handleCarouselButtonClick("left")}
+          disabled={isLeftCarouselButtonDisabled}
+        >
+          <ChevronIcon
+            direction={DIRECTION.LEFT}
+            color={getCarouselIconColor(theme, isLeftCarouselButtonDisabled)}
+          />
+        </s.CarouselButton>
+        <s.EnvironmentList ref={observe}>
+          {props.environments.map((environment) => (
+            <EnvironmentTab
+              key={environment.name}
+              text={environment.name}
+              hasBadge={environment.hasBadge}
+              isSelected={props.selectedEnvironment === environment.name}
+              onClick={handleEnvironmentTabClick}
+            />
+          ))}
+        </s.EnvironmentList>
+        <s.CarouselButton
+          key={"right"}
+          onClick={() => handleCarouselButtonClick("right")}
+          disabled={isRightCarouselButtonDisabled}
+        >
+          <ChevronIcon
+            direction={DIRECTION.RIGHT}
+            color={getCarouselIconColor(theme, isRightCarouselButtonDisabled)}
           />
-        ))}
+        </s.CarouselButton>
         <s.ViewModeButtonContainer>
           <IconButton
             icon={icons[props.viewMode]}

src/components/RecentActivity/EnvironmentPanel/styles.ts

@@ -9,7 +9,6 @@ const backgroundAnimation = keyframes`
 `;
 export const BorderContainer = styled.div`
   padding: 1px;
-  min-width: fit-content;
   border-radius: ${BORDER_RADIUS}px;
   ${/* TODO: Change to radial gradient after cross-fading */ ""}
   background: ${({ theme }) => {
@@ -42,7 +41,7 @@ export const Container = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
-  gap: 12px;
+  gap: 4px;
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -57,8 +56,28 @@ export const Container = styled.div`
   border-radius: 8px;
   position: relative;
   box-sizing: border-box;
+`;
+
+export const EnvironmentList = styled.ul`
+  display: flex;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  scroll-behavior: smooth;
+`;
+
+export const CarouselButton = styled.button`
+  display: flex;
+  background: none;
+  padding: 0;
+  border: none;
+  cursor: pointer;
 
-  flex-wrap: wrap;
+  &:disabled {
+    cursor: initial;
+  }
 `;
 
 const rotateAnimation = keyframes`

src/components/RecentActivity/EnvironmentPanel/types.ts

@@ -7,3 +7,5 @@ export interface EnvironmentPanelProps {
 }
 
 export type ViewMode = "table" | "list";
+
+export type ScrollDirection = "left" | "right";

src/components/common/ToggleSwitch/styles.ts

@@ -27,8 +27,7 @@ export const SwitchContainer = styled.div<SwitchContainerProps>`
   border-radius: 8px;
   width: 28px;
   height: 16px;
-  transition-property: background;
-  transition-duration: 0.3s;
+  transition: background 300ms;
   display: flex;
   align-items: center;
 
@@ -48,7 +47,7 @@ export const Circle = styled.div<CircleProps>`
   height: 8px;
   border-radius: 50%;
   transition-property: background, margin-left;
-  transition-duration: 0.3s;
+  transition-duration: 300ms;
 
   margin-left: ${({ isChecked }) => (isChecked ? "16px" : "4px")};
   background: ${({ isChecked, theme }) => {