From 79abbc832f4535a80ccfa0232a600d3377633596 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 6 May 2025 11:56:46 +0300
Subject: [PATCH] feat: recently used segment chip (#9895)

---
 .../RecentlyUsedSegmentChip.tsx               | 46 +++++++++++++++++++
 .../RecentlyUsedSegments.tsx                  |  6 +--
 2 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegmentChip.tsx

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegmentChip.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegmentChip.tsx
new file mode 100644
index 0000000000..856133f754
--- /dev/null
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegmentChip.tsx
@@ -0,0 +1,46 @@
+import type React from 'react';
+import type { ISegment } from 'interfaces/segment';
+import AddIcon from '@mui/icons-material/Add';
+import { Chip, styled, Tooltip } from '@mui/material';
+
+interface IRecentlyUsedSegmentChipProps {
+    segment: ISegment;
+    setSegments: React.Dispatch<React.SetStateAction<ISegment[]>>;
+}
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+    background: 'transparent',
+    height: 'auto',
+    fontSize: theme.typography.body2.fontSize,
+    padding: theme.spacing(0.5),
+    border: `1px dashed ${theme.palette.divider}`,
+    '& .MuiChip-icon': {
+        color: theme.palette.neutral.main,
+    },
+}));
+
+export const RecentlyUsedSegmentChip = ({
+    segment,
+    setSegments,
+}: IRecentlyUsedSegmentChipProps) => {
+    const onAdd = () => {
+        setSegments((prev) => {
+            if (prev.some((s) => s.id === segment.id)) {
+                return prev;
+            }
+            return [...prev, segment];
+        });
+    };
+
+    return (
+        <Tooltip title='Add segment' arrow>
+            <StyledChip
+                label={segment.name}
+                icon={<AddIcon />}
+                onClick={onAdd}
+                size='small'
+                variant='outlined'
+            />
+        </Tooltip>
+    );
+};
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegments.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegments.tsx
index 96ead01def..7b21473e56 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegments.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/RecentlyUsedSegments/RecentlyUsedSegments.tsx
@@ -1,7 +1,7 @@
 import { styled, Typography } from '@mui/material';
 import { useRecentlyUsedSegments } from './useRecentlyUsedSegments';
 import type { ISegment } from 'interfaces/segment';
-import { FeatureStrategySegmentChip } from '../FeatureStrategySegmentChip';
+import { RecentlyUsedSegmentChip } from './RecentlyUsedSegmentChip';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { useUiFlag } from 'hooks/useUiFlag';
 
@@ -54,12 +54,10 @@ export const RecentlyUsedSegments = ({
             <StyledHeader>Recently used segments</StyledHeader>
             <StyledSegmentsContainer>
                 {segmentObjects.map((segment) => (
-                    <FeatureStrategySegmentChip
+                    <RecentlyUsedSegmentChip
                         key={segment.id}
                         segment={segment}
                         setSegments={setSegments}
-                        preview={undefined}
-                        setPreview={() => {}}
                     />
                 ))}
             </StyledSegmentsContainer>