fix: add back color dots next to the translation state filters (#3324)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added visual indicators for translation states in the translation
filter. Icons are shown for specific states and colored dots for others
to provide quick status cues.
* Filter items updated to display the new state indicator alongside
existing controls and adjusted layout to accommodate it.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: Anty0

webapp/src/views/projects/translations/TranslationFilters/FilterItem.tsx

@@ -13,7 +13,7 @@ import { CompactMenuItem } from 'tg.component/ListComponents';
 
 const StyledMenuItem = styled(CompactMenuItem)`
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto 1fr auto auto;
   align-items: center;
   padding-left: 4px !important;
   & .hidden {
@@ -50,10 +50,19 @@ type Props = MenuItemProps & {
   excluded?: boolean;
   onExclude?: () => void;
   exclusive?: boolean;
+  indicator?: React.ReactNode;
 };
 
 export const FilterItem = React.forwardRef(function FilterItem(
-  { label, excluded, selected, onExclude, exclusive, ...other }: Props,
+  {
+    label,
+    excluded,
+    selected,
+    onExclude,
+    exclusive,
+    indicator,
+    ...other
+  }: Props,
   ref
 ) {
   const { t } = useTranslate();
@@ -96,6 +105,7 @@ export const FilterItem = React.forwardRef(function FilterItem(
             : t('translation_filter_item_exclude')}
         </ButtonToggle>
       )}
+      {indicator}
     </StyledMenuItem>
   );
 });

webapp/src/views/projects/translations/TranslationFilters/StateIndicator.tsx

@@ -0,0 +1,41 @@
+import { styled } from '@mui/material';
+import { Flag02 } from '@untitled-ui/icons-react';
+import { TRANSLATION_STATES } from 'tg.constants/translationStates';
+import { Mt } from 'tg.component/CustomIcons';
+import { TranslationStateType } from './tools';
+
+const StyledDot = styled('div')`
+  margin-left: 12px;
+  margin-right: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+`;
+
+const StyledIcon = styled('div')`
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  color: ${({ theme }) => theme.palette.tokens.icon.secondary};
+`;
+
+type Props = {
+  state: TranslationStateType;
+};
+
+export const StateIndicator = ({ state }: Props) => {
+  if (state === 'AUTO_TRANSLATED' || state === 'OUTDATED') {
+    return (
+      <StyledIcon>
+        {state === 'AUTO_TRANSLATED' && <Mt />}
+        {state === 'OUTDATED' && <Flag02 />}
+      </StyledIcon>
+    );
+  }
+
+  const color = TRANSLATION_STATES[state].color;
+  return <StyledDot style={{ background: color }} />;
+};

webapp/src/views/projects/translations/TranslationFilters/SubfilterTranslations.tsx

@@ -10,6 +10,7 @@ import { CompactListSubheader } from 'tg.component/ListComponents';
 import { FiltersInternal, FilterActions, TranslationStateType } from './tools';
 import { FilterItem } from './FilterItem';
 import { LanguageModel } from './tools';
+import { StateIndicator } from './StateIndicator';
 
 type Props = {
   projectId: number;
@@ -94,6 +95,7 @@ export const SubfilterTranslations = ({
                     value.filterTranslationState?.includes(state)
                   )}
                   onClick={() => toggleFilterState(state)}
+                  indicator={<StateIndicator state={state} />}
                 />
               );
             })}