3804 use email visibility to display only the shared information frontend (#3875)

* create and use component

* visibility working

* Fix click behavior for email thread previews

* Add dynamic styling to EmailThreadPreview component

* refactor to respect the convention

packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconLock } from '@/ui/display/icon';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex: 1 0 0;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: 20px;
+  padding: ${({ theme }) => theme.spacing(0, 1)};
+
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  background: ${({ theme }) => theme.background.transparent.lighter};
+
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+`;
+
+export const EmailThreadNotShared = () => {
+  const theme = useTheme();
+  return (
+    <StyledContainer>
+      <IconLock size={theme.icon.size.md} />
+      Not shared
+    </StyledContainer>
+  );
+};