Added token hide in sidebar to multi select

src/components/token/TokenSettings.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { Flex, Box, Input, IconButton, Label, Checkbox } from "theme-ui";
+import { Flex, Box, Input, Label } from "theme-ui";
 
-import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 import { isEmpty } from "../../helpers/shared";
 
 import Select from "../Select";
@@ -12,12 +11,7 @@ const categorySettings = [
   { value: "vehicle", label: "Vehicle / Mount" },
 ];
 
-function TokenSettings({
-  token,
-  onSettingsChange,
-  showMore,
-  onShowMoreChange,
-}) {
+function TokenSettings({ token, onSettingsChange }) {
   const tokenEmpty = !token || isEmpty(token);
   return (
     <Flex sx={{ flexDirection: "column" }}>
@@ -37,64 +31,29 @@ function TokenSettings({
           />
         </Box>
       </Flex>
-      {showMore && (
-        <>
-          <Box mt={2} sx={{ flexGrow: 1 }}>
-            <Label htmlFor="name">Name</Label>
-            <Input
-              name="name"
-              value={(token && token.name) || ""}
-              onChange={(e) => onSettingsChange("name", e.target.value)}
-              disabled={tokenEmpty || token.type === "default"}
-              my={1}
-            />
-          </Box>
-          <Flex my={2}>
-            <Box mb={1} sx={{ flexGrow: 1 }}>
-              <Label mb={1}>Category</Label>
-              <Select
-                options={categorySettings}
-                value={
-                  !tokenEmpty &&
-                  categorySettings.find((s) => s.value === token.category)
-                }
-                isDisabled={tokenEmpty || token.type === "default"}
-                onChange={(option) =>
-                  onSettingsChange("category", option.value)
-                }
-                isSearchable={false}
-              />
-            </Box>
-            <Flex sx={{ flexGrow: 1, alignItems: "center" }} ml={2}>
-              <Label>
-                <Checkbox
-                  checked={token && token.hideInSidebar}
-                  disabled={tokenEmpty || token.type === "default"}
-                  onChange={(e) =>
-                    onSettingsChange("hideInSidebar", e.target.checked)
-                  }
-                />
-                Hide in Sidebar
-              </Label>
-            </Flex>
-          </Flex>
-        </>
-      )}
-      <IconButton
-        onClick={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          onShowMoreChange(!showMore);
-        }}
-        sx={{
-          transform: `rotate(${showMore ? "180deg" : "0"})`,
-          alignSelf: "center",
-        }}
-        aria-label={showMore ? "Show Less" : "Show More"}
-        title={showMore ? "Show Less" : "Show More"}
-      >
-        <ExpandMoreIcon />
-      </IconButton>
+      <Box mt={2}>
+        <Label mb={1}>Category</Label>
+        <Select
+          options={categorySettings}
+          value={
+            !tokenEmpty &&
+            categorySettings.find((s) => s.value === token.category)
+          }
+          isDisabled={tokenEmpty || token.type === "default"}
+          onChange={(option) => onSettingsChange("category", option.value)}
+          isSearchable={false}
+        />
+      </Box>
+      <Box my={2} sx={{ flexGrow: 1 }}>
+        <Label htmlFor="name">Name</Label>
+        <Input
+          name="name"
+          value={(token && token.name) || ""}
+          onChange={(e) => onSettingsChange("name", e.target.value)}
+          disabled={tokenEmpty || token.type === "default"}
+          my={1}
+        />
+      </Box>
     </Flex>
   );
 }

src/components/token/TokenTiles.js

@@ -6,6 +6,8 @@ import Case from "case";
 
 import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
 import GroupIcon from "../../icons/GroupIcon";
+import TokenHideIcon from "../../icons/TokenHideIcon";
+import TokenShowIcon from "../../icons/TokenShowIcon";
 
 import TokenTile from "./TokenTile";
 import Link from "../Link";
@@ -26,15 +28,19 @@ function TokenTiles({
   search,
   onSearchChange,
   onTokensGroup,
+  onTokensHide,
 }) {
   const { databaseStatus } = useContext(DatabaseContext);
   const isSmallScreen = useMedia({ query: "(max-width: 500px)" });
 
   let hasSelectedDefaultToken = false;
+  let allTokensVisible = true;
   for (let token of selectedTokens) {
     if (token.type === "default") {
       hasSelectedDefaultToken = true;
-      break;
+    }
+    if (token.hideInSidebar) {
+      allTokensVisible = false;
     }
   }
 
@@ -61,6 +67,21 @@ function TokenTiles({
 
   const multipleSelected = selectedTokens.length > 1;
 
+  let hideTitle = "";
+  if (multipleSelected) {
+    if (allTokensVisible) {
+      hideTitle = "Hide Tokens in Sidebar";
+    } else {
+      hideTitle = "Show Tokens in Sidebar";
+    }
+  } else {
+    if (allTokensVisible) {
+      hideTitle = "Hide Token in Sidebar";
+    } else {
+      hideTitle = "Show Token in Sidebar";
+    }
+  }
+
   return (
     <Box sx={{ position: "relative" }}>
       <FilterBar
@@ -130,6 +151,14 @@ function TokenTiles({
             onClick={() => onTokenSelect()}
           />
           <Flex>
+            <IconButton
+              aria-label={hideTitle}
+              title={hideTitle}
+              disabled={hasSelectedDefaultToken}
+              onClick={() => onTokensHide(allTokensVisible)}
+            >
+              {allTokensVisible ? <TokenShowIcon /> : <TokenHideIcon />}
+            </IconButton>
             <IconButton
               aria-label={multipleSelected ? "Group Tokens" : "Group Token"}
               title={multipleSelected ? "Group Tokens" : "Group Token"}

src/modals/EditTokenModal.js

@@ -45,13 +45,14 @@ function EditTokenModal({ isOpen, onDone, token }) {
     ...tokenSettingChanges,
   };
 
-  const [showMoreSettings, setShowMoreSettings] = useState(false);
-
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
-      style={{ maxWidth: "542px", width: "calc(100% - 16px)" }}
+      style={{
+        maxWidth: "542px",
+        width: "calc(100% - 16px)",
+      }}
     >
       <Flex
         sx={{
@@ -63,9 +64,7 @@ function EditTokenModal({ isOpen, onDone, token }) {
         </Label>
         <TokenSettings
           token={selectedTokenWithChanges}
-          showMore={showMoreSettings}
           onSettingsChange={handleTokenSettingsChange}
-          onShowMoreChange={setShowMoreSettings}
         />
         <Button onClick={handleSave}>Save</Button>
       </Flex>

src/modals/SelectTokensModal.js

@@ -136,6 +136,10 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
     setSelectedTokenIds([]);
   }
 
+  async function handleTokensHide(hideInSidebar) {
+    await updateTokens(selectedTokenIds, { hideInSidebar });
+  }
+
   // Either single, multiple or range
   const [selectMode, setSelectMode] = useState("single");
 
@@ -215,6 +219,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
             search={search}
             onSearchChange={handleSearchChange}
             onTokensGroup={() => setIsGroupModalOpen(true)}
+            onTokensHide={handleTokensHide}
           />
           <Button
             variant="primary"