Add a token tile hidden badge

src/components/tile/Tile.js

@@ -83,13 +83,25 @@ function Tile({
           borderRadius: "4px",
         }}
       />
-      <Box sx={{ position: "absolute", top: 0, left: 0 }}>
+      <Flex
+        sx={{
+          position: "absolute",
+          top: "6px",
+          left: "6px",
+        }}
+      >
         {badges.map((badge, i) => (
-          <Badge m={2} key={i} bg="overlay" color="text">
+          <Badge
+            m="2px"
+            key={i}
+            bg="overlay"
+            color="text"
+            sx={{ width: "fit-content" }}
+          >
             {badge}
           </Badge>
         ))}
-      </Box>
+      </Flex>
       {canEdit && (
         <Box sx={{ position: "absolute", top: 0, right: 0 }}>
           <IconButton

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 {

src/contexts/TokenDataContext.js

@@ -81,17 +81,24 @@ export function TokenDataProvider({ children }) {
 
   const updateToken = useCallback(
     async (id, update) => {
-      const change = { lastModified: Date.now(), ...update };
-      await database.table("tokens").update(id, change);
+      await database.table("tokens").update(id, update);
     },
     [database]
   );
 
-  const updateTokens = useCallback(
-    async (ids, update) => {
-      const change = { lastModified: Date.now(), ...update };
+  const updateTokensHidden = useCallback(
+    async (ids, hideInSidebar) => {
+      // Update immediately to avoid UI delay
+      setTokens((prevTokens) => {
+        let newTokens = [...prevTokens];
+        for (let id of ids) {
+          const tokenIndex = newTokens.findIndex((token) => token.id === id);
+          newTokens[tokenIndex].hideInSidebar = hideInSidebar;
+        }
+        return newTokens;
+      });
       await Promise.all(
-        ids.map((id) => database.table("tokens").update(id, change))
+        ids.map((id) => database.table("tokens").update(id, { hideInSidebar }))
       );
     },
     [database]
@@ -167,11 +174,11 @@ export function TokenDataProvider({ children }) {
     tokenGroups,
     removeTokens,
     updateToken,
-    updateTokens,
     tokensById,
     tokensLoading,
     getToken,
     updateTokenGroups,
+    updateTokensHidden,
   };
 
   return (