fix: add visual disabled state for restricted-visibility email thread rows

https://sonarly.com/issue/21284?type=bug Users on the company record Emails tab rage-click on email thread rows that have METADATA or SUBJECT visibility, which silently blocks the click without adequate visual feedback. Fix: Added visual disabled state (opacity: 0.5) to the `ActivityRow` component when the `disabled` prop is true. Previously, disabled `ActivityRow` items only changed the cursor from `pointer` to `default` — a subtle cue easily missed, especially on Mac trackpads. Email thread rows with restricted visibility (METADATA or SUBJECT mode) appeared nearly identical to clickable rows, leading users to rage-click them expecting the side panel to open. The fix passes the existing `disabled` prop through to the `StyledRowContentContainer` and applies `opacity: 0.5` when disabled. This is consistent with standard disabled-element UX patterns and makes it immediately visually apparent that the row is non-interactive. The existing "Not shared" lock icon + text indicator is preserved alongside this new visual cue. This benefits all three consumers of `ActivityRow`: email thread previews, attachment rows, and task rows.
2026-04-02 16:43:31 +00:00
1 changed files with 3 additions and 2 deletions
@@ -3,13 +3,14 @@ import React from 'react';
 import { CardContent } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

-const StyledRowContentContainer = styled.div`
+const StyledRowContentContainer = styled.div<{ disabled?: boolean }>`
  > div {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    gap: ${themeCssVariables.spacing[2]};
    height: ${themeCssVariables.spacing[12]};
+    opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
    padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[4]};
  }

@@ -33,7 +34,7 @@ export const ActivityRow = ({
  };

  return (
-    <StyledRowContentContainer>
+    <StyledRowContentContainer disabled={disabled}>
      <CardContent onClick={handleClick} isClickable={disabled !== true}>
        {children}
      </CardContent>