Add build selection and build progress

src/renderer/components/CompactItem.tsx

@@ -16,13 +16,17 @@ interface Props {
 export const CompactItem: FC<Props> = ({ id, noTooltip, onClick }) => {
   const { items } = useItemContext();
   const navigate = useNavigate();
-  const handleClick = useCallback(() => {
-    if (onClick) {
-      onClick();
-    } else {
-      navigate(`/item/${id}`);
-    }
-  }, [onClick]);
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      if (onClick) {
+        onClick();
+      } else {
+        navigate(`/item/${id}`);
+      }
+    },
+    [onClick],
+  );
   if (!id) {
     return (
       <Avatar src={iconFromId('EmptySlotIcon')} variant="rounded">

src/renderer/feature/builds/components/BuildDropdownElement.tsx

@@ -0,0 +1,34 @@
+import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { TBuild } from '../../../contexts/buildsContext';
+import { EvoStash } from '../../../components/Stash';
+
+interface BuildCardProps {
+  build: TBuild;
+}
+export function BuildDropdownElement({ build }: BuildCardProps) {
+  return (
+    <Box sx={{ padding: '1px', margin: '3px' }}>
+      <Card sx={{ paddingY: '5px', paddingX: '15px', cursor: 'pointer' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingBottom: '1px',
+          }}
+        >
+          <Typography variant="body1">{build.name}</Typography>
+        </Box>
+        <Box sx={{ paddingBottom: '2px' }}>
+          <EvoStash
+            sx={{ display: 'flex', flexDirection: 'row', gap: '2px' }}
+            itemIds={build.items}
+          />
+        </Box>
+      </Card>
+    </Box>
+  );
+}

src/renderer/feature/builds/components/BuildProgress.tsx

@@ -30,10 +30,12 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
 }));
 
 export const BuildProgress = ({
+  title,
   itemIdsList,
   buildItems,
   defaultExpanded = false,
 }: {
+  title: string;
   itemIdsList: Array<string>;
   buildItems: string[];
   defaultExpanded?: boolean;
@@ -74,7 +76,7 @@ export const BuildProgress = ({
           alignItems: 'center',
         }}
       >
-        <Typography>Build progress</Typography>
+        <Typography>{title}</Typography>
         <ExpandMore
           expand={expanded}
           onClick={handleExpandClick}

src/renderer/feature/builds/components/CharacterBuildComponent.tsx

@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import { TBuild } from '../../../contexts/buildsContext';
+import { Autocomplete, Box, TextField } from '@mui/material';
+import { BuildDropdownElement } from './BuildDropdownElement';
+import theme from '../../../theme';
+import { BuildCard } from './BuildCard';
+
+interface CharacterBuildComponentProps {
+  builds: { [id: number]: TBuild };
+  selectedBuild: number | null;
+  items: string[] | null;
+  handleSelectBuild: (buildId: number) => void;
+}
+
+export const CharacterBuildComponent: FC<CharacterBuildComponentProps> = ({
+  builds,
+  selectedBuild,
+  items,
+  handleSelectBuild,
+}) => {
+  return (
+    <>
+      {builds && (
+        <Box sx={{ paddingLeft: '36px', justifyContent: 'start' }}>
+          <Autocomplete
+            value={selectedBuild}
+            options={Object.keys(builds).map((key) => Number(key))}
+            getOptionLabel={(option) => builds[option].name}
+            style={{ width: 300 }}
+            renderInput={(params) => (
+              <TextField {...params} label="Select Build" />
+            )}
+            renderOption={(props, option) => (
+              <li {...props} key={option} style={{ padding: 0 }}>
+                <BuildDropdownElement build={builds[option]} />
+              </li>
+            )}
+            PaperComponent={({ children }) => (
+              <Box
+                sx={{
+                  width: 'fit-content',
+                  background: theme.palette.grey[800],
+                }}
+              >
+                {children}
+              </Box>
+            )}
+            onChange={(_, value) => {
+              if (value) {
+                const build = builds[value];
+                if (build && build.id) {
+                  handleSelectBuild(build.id);
+                }
+              }
+            }}
+          />
+          {selectedBuild && (
+            <BuildCard build={builds[selectedBuild]} playerItems={items} />
+          )}
+        </Box>
+      )}
+    </>
+  );
+};

src/renderer/feature/item/components/CraftsInto.tsx

@@ -10,52 +10,76 @@ import { ItemIconAndTitle } from './ItemIconAndTitle';
 interface CraftsIntoProps {
   item: TItem;
   onItemSelect?: (id: string) => void;
+  playerItems?: string[] | null;
 }
 
 export const CraftsInto: FC<CraftsIntoProps> = (props) => {
-  const { item, onItemSelect } = props;
+  const { item, onItemSelect, playerItems } = props;
   const { items } = useItemContext();
+  const navigate = useNavigate();
 
   const usedForItemsArr = item.partOf.map((id) => items[id]);
 
+  const handleItemClick = useCallback(
+    (id: string) => {
+      if (onItemSelect) {
+        onItemSelect(id);
+      } else if (playerItems) {
+        navigate(`/item/${id}`, {
+          state: { playerItems: [...(playerItems || null)] },
+        });
+      }
+    },
+    [playerItems, onItemSelect],
+  );
+
+  const getOnClickHandler = useCallback(
+    (id: string) => {
+      if (playerItems || onItemSelect) {
+        return () => handleItemClick(id);
+      }
+      return undefined;
+    },
+    [handleItemClick, playerItems, onItemSelect],
+  );
+
   if (usedForItemsArr.length === 0) return null;
 
   return (
     <Box sx={{ width: '500px', paddingTop: '5px' }}>
       <Typography variant="h6">Used for</Typography>
       {usedForItemsArr.length > 4 ? (
-        <TiledItems items={usedForItemsArr} onItemSelect={onItemSelect} />
+        <TiledItems
+          items={usedForItemsArr}
+          getOnClickHandler={getOnClickHandler}
+        />
       ) : (
-        <ListedItems items={usedForItemsArr} />
+        <ListedItems
+          items={usedForItemsArr}
+          onItemSelect={onItemSelect}
+          playerItems={playerItems}
+        />
       )}
     </Box>
   );
 };
 
 function TiledItems({
   items,
-  onItemSelect,
+  getOnClickHandler,
 }: {
   items: TItem[];
-  onItemSelect?: (id: string) => void;
+  getOnClickHandler: (id: string) => (() => void) | undefined;
 }) {
   if (!items || items.length === 0) return null;
 
-  const handleClick = useCallback(
-    (item: TItem) => {
-      if (onItemSelect) {
-        onItemSelect(item.id);
-      }
-    },
-    [onItemSelect],
-  );
   return (
     <Box sx={{ display: 'flex', flexWrap: 'wrap', paddingTop: '5px' }}>
       {items.map((item) => (
         <CompactItem
           key={`used_for_${item.id}`}
           id={item.id}
-          onClick={onItemSelect ? () => handleClick(item) : undefined}
+          onClick={getOnClickHandler(item.id)}
         />
       ))}
     </Box>
@@ -65,37 +89,51 @@ function TiledItems({
 function ListedItems({
   items,
   onItemSelect,
+  playerItems,
 }: {
   items: TItem[];
   onItemSelect?: (id: string) => void;
+  playerItems?: string[] | null;
 }) {
-  if (items.length === 0) return null;
   const navigate = useNavigate();
+  if (items.length === 0) return null;
 
-  const handleClick = useCallback(
-    (item: TItem) => {
+  const handleItemClick = useCallback(
+    (id: string) => {
       if (onItemSelect) {
-        onItemSelect(item.id);
-      } else {
-        navigate(`/item/${item.id}`);
+        onItemSelect(id);
+      } else if (playerItems) {
+        navigate(`/item/${id}`, {
+          state: { playerItems: [...(playerItems || [])] },
+        });
+      }
+    },
+    [playerItems, onItemSelect],
+  );
+
+  const getOnClickHandler = useCallback(
+    (id: string) => {
+      if (playerItems || onItemSelect) {
+        return () => handleItemClick(id);
       }
+      return () => navigate(`/item/${id}`);
     },
-    [onItemSelect],
+    [handleItemClick, playerItems, onItemSelect],
   );
 
   return (
     <Box sx={{ paddingTop: '5px' }}>
       {items.map((item) => (
         <ItemIconAndTitle
-          key={item.id}
+          key={`used_for_${item.id}`}
           sx={{
             paddingLeft: '30px',
             cursor: 'pointer',
             '&:hover': {
               background: '#2b2b2b',
             },
           }}
-          onClick={() => handleClick(item)}
+          onClick={getOnClickHandler(item.id)}
           item={item}
         />
       ))}