fix: better selector tiles for colorblind users

packages/locales/lib/human/en.json

@@ -779,5 +779,6 @@
   "locale_instructions_6": "Replace the contents of \"packages/locales/lib/human/{{lng}}.json\" with the file you downloaded",
   "locale_instructions_7": "Create a pull request",
   "locale_instructions_8": "Wait for the pull request to be reviewed and merged",
-  "enter_translation": "Enter Translation"
+  "enter_translation": "Enter Translation",
+  "individual_filters": "Partially Filtered"
 }

src/assets/css/main.css

@@ -521,6 +521,15 @@ input[type='time']::-webkit-calendar-picker-indicator {
   align-self: start;
 }
 
+.vgrid-color-blind-icon {
+  margin: 3px;
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: start;
+  align-self: start;
+  z-index: 500;
+}
+
 .vgrid-image {
   grid-column: 1 / 4;
   grid-row: 1 / 3;

src/components/StatusIcon.jsx

@@ -2,19 +2,33 @@
 import * as React from 'react'
 import CheckIcon from '@mui/icons-material/Check'
 import ClearIcon from '@mui/icons-material/Clear'
+import RuleIcon from '@mui/icons-material/Rule'
 
 /**
  * @typedef {{
- *  status: boolean,
+ *  status: boolean | null,
+ *  partialColor?: import('@mui/material').SvgIconProps['color']
  *  checkColor?: import('@mui/material').SvgIconProps['color']
  *  clearColor?: import('@mui/material').SvgIconProps['color']
- * }} StatusIconProps
+ * } & import('@mui/material').SvgIconProps} StatusIconProps
  */
 
 /** @type {React.ForwardRefExoticComponent<StatusIconProps>} */
 export const StatusIcon = React.forwardRef(
-  ({ status, checkColor = 'success', clearColor = 'error', ...props }, ref) =>
-    status ? (
+  (
+    {
+      status,
+      color,
+      partialColor = color || 'info',
+      checkColor = color || 'success',
+      clearColor = color || 'error',
+      ...props
+    },
+    ref,
+  ) =>
+    status === null ? (
+      <RuleIcon color={partialColor} ref={ref} {...props} />
+    ) : status ? (
       <CheckIcon color={checkColor} ref={ref} {...props} />
     ) : (
       <ClearIcon color={clearColor} ref={ref} {...props} />

src/components/virtual/SelectorItem.jsx

@@ -10,6 +10,8 @@ import { useMemory } from '@store/useMemory'
 import { ColoredTile } from '@components/virtual/ColoredTile'
 import { ToggleTypography } from '@components/ToggleTypography'
 import { SQUARE_ITEM } from '@components/virtual/VirtualGrid'
+import { StatusIcon } from '@components/StatusIcon'
+import { useTranslation } from 'react-i18next'
 
 /**
  * @template {string} T
@@ -75,6 +77,15 @@ export function SelectorItem({
     [onClick],
   )
 
+  const status =
+    hasAll && !easyMode
+      ? filter?.all || filter.enabled
+        ? filter?.all && filter?.enabled
+          ? true
+          : null
+        : false
+      : filter?.enabled
+
   return (
     <Box
       className="vgrid-item"
@@ -103,6 +114,7 @@ export function SelectorItem({
       <IconButton className="vgrid-icon" size="small" onClick={handleIconClick}>
         <TuneIcon fontSize="small" />
       </IconButton>
+      <Status status={status} />
       <ToggleTypography
         className="vgrid-caption"
         variant="caption"
@@ -116,3 +128,26 @@ export function SelectorItem({
     </Box>
   )
 }
+
+/** @param {{ status: null | boolean }} props */
+function Status({ status }) {
+  const { t } = useTranslation()
+  return (
+    <Tooltip
+      title={
+        status === null
+          ? t('individual_filters')
+          : status
+          ? t('enabled')
+          : t('disabled')
+      }
+    >
+      <StatusIcon
+        className="vgrid-color-blind-icon"
+        fontSize="small"
+        color="action"
+        status={status}
+      />
+    </Tooltip>
+  )
+}