feat(team-rotation): dim rotations that have no change this week

apps/team-rotation/src/components/Rotation.style.tsx

@@ -3,13 +3,35 @@ import {
   styled,
 } from '@mui/material';
 
-export const RotationCard = styled(Card)(({ theme }) => ({
-  display: 'flex',
-  flexFlow: 'row nowrap',
-  justifyContent: 'space-between',
-  overflow: 'visible',
-  [theme.breakpoints.down('lg')]: {
-    flexFlow: 'column nowrap',
+export type RotationCardProperties = {
+  isActive?: boolean;
+};
+export const RotationCard = styled(Card)<RotationCardProperties>(
+  ({
+    theme,
+  }) => ({
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    justifyContent: 'space-between',
+    overflow: 'visible',
+    [theme.breakpoints.down('lg')]: {
+      flexFlow: 'column nowrap',
+    },
+    position: 'relative',
+  }),
+  ({
+    isActive,
+    theme,
+  }) => {
+    if (isActive) {
+      return {};
+    }
+    return {
+      opacity: 0.4,
+      transition: theme.transitions.create('opacity'),
+      '&:hover': {
+        opacity: 1,
+      },
+    };
   },
-  position: 'relative',
-}));
+);

apps/team-rotation/src/components/Rotation.tsx

@@ -1,9 +1,15 @@
-import { useState } from 'react';
+import {
+  useMemo,
+  useState,
+} from 'react';
+import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
 import { RotationDisplay } from './Rotation.display.tsx';
 import { RotationCard } from './Rotation.style.tsx';
 import type { RotationEditProperties } from './Rotation.edit.tsx';
 import { RotationEdit } from './Rotation.edit.tsx';
 import { useDndSortable } from '../hooks/useDndSortable.ts';
+import { parseDate } from '../utils/date.ts';
 
 export type RotationComponentProperties = Omit<RotationEditProperties, 'onToggle' | 'dndProps'>;
 export function Rotation({
@@ -19,8 +25,24 @@ export function Rotation({
     dragHandleProps,
     rootProps,
   } = useDndSortable(atom);
+  const {
+    startDate, every,
+  } = useAtomValue(atom);
+  const weeksUntilChange = useMemo(
+    () => {
+      const weekSinceStart = dayjs(Date.now()).diff(parseDate(startDate), 'week');
+      const rotationsSinceStart = Math.floor(weekSinceStart % every);
+      return rotationsSinceStart;
+    },
+    [
+      startDate,
+      every,
+    ],
+  );
+  const isActiveThisWeek = weeksUntilChange === 0;
   return (
     <RotationCard
+      isActive={isActiveThisWeek}
       {...rootProps}
     >
       {editing
@@ -41,4 +63,4 @@ export function Rotation({
         )}
     </RotationCard>
   );
-}
+}