Add a token tile hidden badge

src/components/token/TokenEditBar.js

@@ -16,7 +16,7 @@ import { useKeyboard } from "../../contexts/KeyboardContext";
 import shortcuts from "../../shortcuts";
 
 function TokenEditBar({ disabled, onLoad }) {
-  const { tokens, removeTokens, updateTokens } = useTokenData();
+  const { tokens, removeTokens, updateTokensHidden } = useTokenData();
 
   const {
     groups: allGroups,
@@ -58,11 +58,9 @@ function TokenEditBar({ disabled, onLoad }) {
   }
 
   async function handleTokensHide(hideInSidebar) {
-    onLoad(true);
     const selectedTokens = getSelectedTokens();
     const selectedTokenIds = selectedTokens.map((token) => token.id);
-    await updateTokens(selectedTokenIds, { hideInSidebar });
-    onLoad(false);
+    updateTokensHidden(selectedTokenIds, hideInSidebar);
   }
 
   /**

src/components/token/TokenHiddenBadge.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Flex } from "theme-ui";
+
+import TokenShowIcon from "../../icons/TokenShowIcon";
+import TokenHideIcon from "../../icons/TokenHideIcon";
+
+function TokenHiddenBadge({ hidden }) {
+  return (
+    <Flex
+      sx={{
+        height: "15px",
+        width: "15px",
+        alignItems: "center",
+      }}
+    >
+      {hidden ? <TokenHideIcon /> : <TokenShowIcon />}
+    </Flex>
+  );
+}
+
+export default TokenHiddenBadge;

src/components/token/TokenTiles.js

@@ -2,6 +2,7 @@ import React from "react";
 
 import TokenTile from "./TokenTile";
 import TokenTileGroup from "./TokenTileGroup";
+import TokenHiddenBadge from "./TokenHiddenBadge";
 
 import SortableTiles from "../tile/SortableTiles";
 
@@ -35,7 +36,10 @@ function TokenTiles({ tokens, onTokenEdit, subgroup }) {
           onSelect={onGroupSelect}
           onTokenEdit={onTokenEdit}
           canEdit={canEdit}
-          badges={[`${token.defaultSize}x`]}
+          badges={[
+            `${token.defaultSize}x`,
+            <TokenHiddenBadge hidden={token.hideInSidebar} />,
+          ]}
         />
       );
     } else {