Add group support for token bar

src/components/token/TokenBar.js

@@ -4,8 +4,10 @@ import { Box, Flex } from "theme-ui";
 import SimpleBar from "simplebar-react";
 import { DragOverlay, DndContext } from "@dnd-kit/core";
 
-import ListToken from "./ListToken";
+import TokenBarToken from "./TokenBarToken";
+import TokenBarTokenGroup from "./TokenBarTokenGroup";
 import SelectTokensButton from "./SelectTokensButton";
+
 import Draggable from "../drag/Draggable";
 
 import useSetting from "../../hooks/useSetting";
@@ -36,15 +38,38 @@ function TokenBar({ onMapTokenStateCreate }) {
       onMapTokenStateCreate(tokenState);
     }
   }
-  const tokens = tokenGroups
-    .map((group) => tokensById[group.id])
-    // TODO: Add group support
-    .filter((token) => token && !token.hideInSidebar)
-    .map((token) => (
-      <Draggable id={token.id} key={token.id}>
-        <ListToken token={token} />
-      </Draggable>
-    ));
+
+  function renderTokens() {
+    let tokens = [];
+    for (let group of tokenGroups) {
+      if (group.type === "item") {
+        const token = tokensById[group.id];
+        if (token && !token.hideInSidebar) {
+          tokens.push(
+            <Draggable id={token.id} key={token.id}>
+              <TokenBarToken token={token} />
+            </Draggable>
+          );
+        }
+      } else {
+        const groupTokens = [];
+        for (let item of group.items) {
+          const token = tokensById[item.id];
+          if (token && !token.hideInSidebar) {
+            groupTokens.push(token);
+          }
+        }
+        tokens.push(
+          <TokenBarTokenGroup
+            group={group}
+            tokens={groupTokens}
+            key={group.id}
+          />
+        );
+      }
+    }
+    return tokens;
+  }
 
   return (
     <DndContext
@@ -69,7 +94,7 @@ function TokenBar({ onMapTokenStateCreate }) {
             padding: "0 16px",
           }}
         >
-          {tokens}
+          <Flex sx={{ flexDirection: "column" }}>{renderTokens()}</Flex>
         </SimpleBar>
         <Flex
           bg="muted"
@@ -83,7 +108,7 @@ function TokenBar({ onMapTokenStateCreate }) {
         </Flex>
         {createPortal(
           <DragOverlay>
-            {dragId && <ListToken token={tokensById[dragId]} />}
+            {dragId && <TokenBarToken token={tokensById[dragId]} />}
           </DragOverlay>,
           document.body
         )}

src/components/token/TokenBarToken.js

@@ -5,7 +5,7 @@ import usePreventTouch from "../../hooks/usePreventTouch";
 
 import TokenImage from "./TokenImage";
 
-function ListToken({ token }) {
+function TokenBarToken({ token }) {
   const imageRef = useRef();
   // Stop touch to prevent 3d touch gesutre on iOS
   usePreventTouch(imageRef);
@@ -29,4 +29,4 @@ function ListToken({ token }) {
   );
 }
 
-export default ListToken;
+export default TokenBarToken;

src/components/token/TokenBarTokenGroup.js

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { Grid, Flex } from "theme-ui";
+import { useSpring, animated } from "react-spring";
+
+import TokenImage from "./TokenImage";
+import TokenBarToken from "./TokenBarToken";
+
+import Draggable from "../drag/Draggable";
+
+import GroupIcon from "../../icons/GroupIcon";
+
+function TokenBarTokenGroup({ group, tokens }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { height } = useSpring({
+    height: isOpen ? (tokens.length + 1) * 56 : 56,
+  });
+
+  function renderTokens() {
+    if (isOpen) {
+      return (
+        <>
+          <Flex
+            sx={{
+              width: "48px",
+              height: "48px",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              color: "primary",
+            }}
+            onClick={() => setIsOpen(false)}
+            key="group"
+            alt={group.name}
+            title={group.name}
+          >
+            <GroupIcon />
+          </Flex>
+          {tokens.map((token) => (
+            <Draggable id={token.id} key={token.id}>
+              <TokenBarToken token={token} />
+            </Draggable>
+          ))}
+        </>
+      );
+    } else {
+      return tokens.slice(0, 4).map((token) => (
+        <TokenImage
+          token={token}
+          key={token.id}
+          sx={{
+            userSelect: "none",
+            touchAction: "none",
+          }}
+        />
+      ));
+    }
+  }
+
+  return (
+    <animated.div
+      style={{
+        padding: "4px 0",
+        width: "48px",
+        height,
+        cursor: isOpen ? "default" : "pointer",
+      }}
+      onClick={() => !isOpen && setIsOpen(true)}
+    >
+      <Grid
+        columns={isOpen ? "1fr" : "2fr 2fr"}
+        alt={group.name}
+        title={group.name}
+        bg="muted"
+        sx={{ borderRadius: "8px", gridGap: isOpen ? 0 : "4px" }}
+        p={isOpen ? 0 : "2px"}
+      >
+        {renderTokens()}
+      </Grid>
+    </animated.div>
+  );
+}
+
+export default TokenBarTokenGroup;