feat: crew in compare

src/app/tools/compare/components/CompareTable.tsx

@@ -1,6 +1,6 @@
 import { ComponentPlaceholderIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Popover, Table } from '@radix-ui/themes';
-import { times } from 'lodash';
+import { Button, Flex, Popover, Slider, Table, Text } from '@radix-ui/themes';
+import { debounce, times } from 'lodash';
 import { use } from 'react';
 import { ConsumablesManager } from '../../../../components/ConsumablesManager';
 import { CrewSkillManager } from '../../../../components/CrewSkillManager';
@@ -167,6 +167,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                 engine,
                 track,
                 consumables,
+                crewMastery,
               },
               index,
             ) => {
@@ -532,6 +533,23 @@ export function CompareTable({ stats }: CompareTableProps) {
                         </Popover.Content>
                       </Popover.Root>
                     </Flex>
+
+                    <Flex gap="2" width="100%" align="center">
+                      <Text>{Math.round(crewMastery * 100)}%</Text>
+                      <Flex flexGrow="1">
+                        <Slider
+                          defaultValue={[crewMastery]}
+                          min={0.5}
+                          max={1}
+                          step={1 / 100}
+                          onValueChange={debounce(([value]: number[]) => {
+                            mutateCompareEphemeral((draft) => {
+                              draft.members[index].crewMastery = value;
+                            });
+                          }, 500)}
+                        />
+                      </Flex>
+                    </Flex>
                   </Flex>
                 </Table.Cell>
               );