From 001bedde3e20646fca228f2a65968c03a8763ab0 Mon Sep 17 00:00:00 2001
From: zagreer <zachary.a.greer@gmail.com>
Date: Mon, 4 Nov 2024 19:29:03 -0500
Subject: [PATCH 1/2] Add campaign setting to hide oracles

---
 src/api-calls/campaign/_campaign.type.ts      |  1 +
 src/api-calls/campaign/updateHiddenOracles.ts | 33 ++++++++
 .../CollapsibleSectionHeader.tsx              |  5 +-
 .../ListItemButtonWithSecondaryAction.tsx     |  3 +-
 .../OracleSection/OracleCollection.tsx        | 64 ++++++++++++---
 .../OracleSection/OracleListItem.tsx          | 49 ++++++++++--
 .../OracleSection/OracleSection.tsx           | 79 +++++++++++--------
 ...leSelectableRollableCollectionListItem.tsx | 45 +++++++++--
 .../shared/ToggleVisibilityButton.tsx         | 63 +++++++++++++++
 .../CampaignSettingsMenu.tsx                  | 20 +++++
 .../HideOraclesDialog.tsx                     | 43 ++++++++++
 .../currentCampaign/currentCampaign.slice.ts  |  9 +++
 .../currentCampaign.slice.type.ts             |  4 +
 13 files changed, 357 insertions(+), 61 deletions(-)
 create mode 100644 src/api-calls/campaign/updateHiddenOracles.ts
 create mode 100644 src/components/shared/ToggleVisibilityButton.tsx
 create mode 100644 src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/HideOraclesDialog.tsx

diff --git a/src/api-calls/campaign/_campaign.type.ts b/src/api-calls/campaign/_campaign.type.ts
index 454dec45..c4323004 100644
--- a/src/api-calls/campaign/_campaign.type.ts
+++ b/src/api-calls/campaign/_campaign.type.ts
@@ -15,6 +15,7 @@ export interface CampaignDocument {
   worldId?: string;
   expansionIds?: string[];
   hiddenAssetIds?: string[];
+  hiddenOracleIds?: string[];
   customTracks?: Record<string, number>;
   conditionMeters?: Record<string, number>;
   specialTracks?: Record<string, LegacyTrack>;
diff --git a/src/api-calls/campaign/updateHiddenOracles.ts b/src/api-calls/campaign/updateHiddenOracles.ts
new file mode 100644
index 00000000..81f688a4
--- /dev/null
+++ b/src/api-calls/campaign/updateHiddenOracles.ts
@@ -0,0 +1,33 @@
+import { arrayUnion, arrayRemove, updateDoc } from "firebase/firestore";
+import { getCampaignDoc } from "./_getRef";
+import { createApiFunction } from "api-calls/createApiFunction";
+
+export const updateCampaignHiddenOracles = createApiFunction<
+  {
+    campaignId: string;
+    oracleId: string;
+    hidden: boolean;
+  },
+  void
+>((params) => {
+  const { campaignId, oracleId, hidden } = params;
+
+  return new Promise((resolve, reject) => {
+    updateDoc(
+      getCampaignDoc(campaignId),
+      hidden
+        ? {
+            hiddenOracleIds: arrayUnion(oracleId),
+          }
+        : {
+            hiddenOracleIds: arrayRemove(oracleId),
+          }
+    )
+      .then(() => {
+        resolve();
+      })
+      .catch((e) => {
+        reject(e);
+      });
+  });
+}, "Failed to update hidden oracles.");
diff --git a/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx b/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx
index f93b3a1c..21e11043 100644
--- a/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx
+++ b/src/components/features/charactersAndCampaigns/CollapsibleSectionHeader.tsx
@@ -18,10 +18,11 @@ export interface CollapsibleSectionHeaderProps {
   toggleOpen: () => void;
   disabled?: boolean;
   actions?: React.JSX.Element;
+  hidden?: boolean;
 }
 
 export function CollapsibleSectionHeader(props: CollapsibleSectionHeaderProps) {
-  const { component, text, open, forcedOpen, toggleOpen, disabled, actions } =
+  const { component, text, open, forcedOpen, toggleOpen, disabled, actions, hidden } =
     props;
 
   if (forcedOpen) {
@@ -39,6 +40,7 @@ export function CollapsibleSectionHeader(props: CollapsibleSectionHeaderProps) {
           transition: theme.transitions.create(["margin"], {
             duration: theme.transitions.duration.shorter,
           }),
+          filter: hidden ? "grayscale(30%) opacity(70%)" : undefined
         })}
       >
         {text}
@@ -72,6 +74,7 @@ export function CollapsibleSectionHeader(props: CollapsibleSectionHeaderProps) {
         transition: theme.transitions.create(["margin"], {
           duration: theme.transitions.duration.shorter,
         }),
+        filter: hidden ? "grayscale(30%) opacity(70%)" : undefined
       })}
     >
       {!forcedOpen ? (
diff --git a/src/components/features/charactersAndCampaigns/OracleSection/ListItemButtonWithSecondaryAction.tsx b/src/components/features/charactersAndCampaigns/OracleSection/ListItemButtonWithSecondaryAction.tsx
index af7bda22..56236179 100644
--- a/src/components/features/charactersAndCampaigns/OracleSection/ListItemButtonWithSecondaryAction.tsx
+++ b/src/components/features/charactersAndCampaigns/OracleSection/ListItemButtonWithSecondaryAction.tsx
@@ -65,11 +65,12 @@ export function ListItemButtonWithSecondaryAction(
       {...listItemProps}
     >
       <ListItemButton
-        disabled={disabled}
+        disabled={disabled || !onClick}
         onClick={onClick}
         {...listItemButtonProps}
         sx={(theme) => ({
           pr: `calc(${theme.spacing(2)} + ${actionWidth ?? 0}px) !important`,
+          opacity: !onClick ? "1 !important" : undefined
         })}
       >
         {children}
diff --git a/src/components/features/charactersAndCampaigns/OracleSection/OracleCollection.tsx b/src/components/features/charactersAndCampaigns/OracleSection/OracleCollection.tsx
index 8eded4d6..351cbb7d 100644
--- a/src/components/features/charactersAndCampaigns/OracleSection/OracleCollection.tsx
+++ b/src/components/features/charactersAndCampaigns/OracleSection/OracleCollection.tsx
@@ -8,6 +8,8 @@ import {
   CATEGORY_VISIBILITY,
   CombinedCollectionType,
 } from "./useFilterOracles";
+import { useStore } from "stores/store";
+import { ToggleVisibilityButton } from "../../../shared/ToggleVisibilityButton";
 
 export interface OracleCollectionProps {
   collectionId: string;
@@ -18,6 +20,7 @@ export interface OracleCollectionProps {
   visibleOracles: Record<string, boolean>;
   enhancesCollections: Record<string, string[]>;
   disabled?: boolean;
+  actionIsHide?: boolean;
 }
 
 export function OracleCollection(props: OracleCollectionProps) {
@@ -30,8 +33,28 @@ export function OracleCollection(props: OracleCollectionProps) {
     visibleOracles,
     enhancesCollections,
     disabled,
+    actionIsHide,
   } = props;
 
+  const hiddenOracles = useStore(
+    (store) => store.campaigns.currentCampaign.currentCampaign?.hiddenOracleIds
+  );
+  const updateHiddenOracles = useStore(
+    (store) => store.campaigns.currentCampaign.updateHiddenOracles
+  );
+
+  const [hideIsloading, setHideIsLoading] = useState(false);
+
+  const onToggleVisibility = () => {
+    setHideIsLoading(true);
+    updateHiddenOracles(collectionId, !hidden)
+      .catch(() => {
+      })
+      .finally(() => {
+        setHideIsLoading(false);
+      });
+  };
+
   const [isExpanded, setIsExpanded] = useState(false);
   const isExpandedOrForced = isExpanded || forceOpen;
 
@@ -71,9 +94,12 @@ export function OracleCollection(props: OracleCollectionProps) {
     return { oracleIds, subCollectionIds };
   }, [contents, subCollections, collections, enhancingCollectionIds]);
 
+  const hidden = hiddenOracles?.includes(collectionId);
+
   if (
     visibleCollections[collectionId] === CATEGORY_VISIBILITY.HIDDEN ||
-    !collection
+    !collection ||
+    (!actionIsHide && hidden)
   ) {
     return null;
   } else if (
@@ -85,6 +111,8 @@ export function OracleCollection(props: OracleCollectionProps) {
       <OracleSelectableRollableCollectionListItem
         collection={collection}
         disabled={disabled}
+        actionIsHide={actionIsHide}
+        hidden={hidden}
       />
     );
   }
@@ -97,19 +125,32 @@ export function OracleCollection(props: OracleCollectionProps) {
         toggleOpen={() => !forceOpen && setIsExpanded((prev) => !prev)}
         text={collection.name}
         disabled={disabled}
+        actions={actionIsHide ? (
+          <ToggleVisibilityButton
+              onToggleVisibility={onToggleVisibility}
+              loading={hideIsloading}
+              hidden={hidden}
+            />
+        ) : undefined}
+        hidden={hidden}
       />
       <Collapse in={isExpandedOrForced}>
         <List sx={{ py: 0, mb: isExpandedOrForced ? 0.5 : 0 }}>
-          {oracleIds.map((oracleId) => (
-            <OracleListItem
-              key={collectionId + "-" + oracleId}
-              oracleId={oracleId}
-              oracles={oracles}
-              disabled={!isExpandedOrForced || disabled}
-              visibleOracles={visibleOracles}
-              collectionVisibility={visibleCollections[collection._id]}
-            />
-          ))}
+          {oracleIds.map((oracleId) => {
+            const hidden = hiddenOracles?.includes(oracleId);
+            return (
+              <OracleListItem
+                key={collectionId + "-" + oracleId}
+                oracleId={oracleId}
+                oracles={oracles}
+                disabled={!isExpandedOrForced || disabled}
+                visibleOracles={visibleOracles}
+                collectionVisibility={visibleCollections[collection._id]}
+                actionIsHide={actionIsHide}
+                hidden={hidden}
+              />
+            );
+          })}
           {subCollectionIds.map((subCollectionId) => (
             <OracleCollection
               key={collectionId + "-" + subCollectionId}
@@ -121,6 +162,7 @@ export function OracleCollection(props: OracleCollectionProps) {
               visibleOracles={visibleOracles}
               enhancesCollections={enhancesCollections}
               disabled={disabled || !isExpandedOrForced}
+              actionIsHide={actionIsHide}
             />
           ))}
         </List>
diff --git a/src/components/features/charactersAndCampaigns/OracleSection/OracleListItem.tsx b/src/components/features/charactersAndCampaigns/OracleSection/OracleListItem.tsx
index 0c5701e3..373bb413 100644
--- a/src/components/features/charactersAndCampaigns/OracleSection/OracleListItem.tsx
+++ b/src/components/features/charactersAndCampaigns/OracleSection/OracleListItem.tsx
@@ -4,6 +4,9 @@ import { CATEGORY_VISIBILITY } from "./useFilterOracles";
 import { useRoller } from "stores/appState/useRoller";
 import { OracleListItemActionOpenDialogButton } from "./OracleListItemActionOpenDialogButton";
 import { ListItemButtonWithSecondaryAction } from "./ListItemButtonWithSecondaryAction";
+import { ToggleVisibilityButton } from "components/shared/ToggleVisibilityButton";
+import { useStore } from "stores/store";
+import { useState } from "react";
 
 export interface OracleListItemProps {
   oracleId: string;
@@ -11,14 +14,36 @@ export interface OracleListItemProps {
   visibleOracles: Record<string, boolean>;
   disabled?: boolean;
   collectionVisibility?: CATEGORY_VISIBILITY;
+  actionIsHide?: boolean;
+  hidden?: boolean;
 }
 
 export function OracleListItem(props: OracleListItemProps) {
-  const { oracleId, oracles, visibleOracles, disabled, collectionVisibility } =
+  const { oracleId, oracles, visibleOracles, disabled, collectionVisibility, actionIsHide, hidden } =
     props;
   const oracle = oracles[oracleId];
   const { rollOracleTable } = useRoller();
 
+  const updateHiddenOracles = useStore(
+    (store) => store.campaigns.currentCampaign.updateHiddenOracles
+  );
+
+  const [hideIsloading, setHideIsLoading] = useState(false);
+
+  const onToggleVisibility = () => {
+    setHideIsLoading(true);
+    updateHiddenOracles(oracleId, !hidden)
+      .catch(() => {
+      })
+      .finally(() => {
+        setHideIsLoading(false);
+      });
+  };
+
+  if(!actionIsHide && hidden) {
+    return null;
+  }
+
   if (
     (collectionVisibility !== CATEGORY_VISIBILITY.ALL &&
       !visibleOracles[oracleId]) ||
@@ -30,13 +55,25 @@ export function OracleListItem(props: OracleListItemProps) {
   return (
     <ListItemButtonWithSecondaryAction
       secondaryAction={
-        <OracleListItemActionOpenDialogButton
-          item={oracle}
-          disabled={disabled}
-        />
+        <>
+          <OracleListItemActionOpenDialogButton
+            item={oracle}
+            disabled={disabled}
+          />
+          {actionIsHide && (
+            <ToggleVisibilityButton
+              onToggleVisibility={onToggleVisibility}
+              loading={hideIsloading}
+              hidden={hidden}
+            />
+          )}
+        </>
       }
       disabled={disabled}
-      onClick={() => rollOracleTable(oracle._id, true)}
+      onClick={!actionIsHide ? () => rollOracleTable(oracle._id, true) : undefined}
+      sx={{
+        filter: hidden ? "grayscale(30%) opacity(70%)" : undefined
+      }}
     >
       <ListItemText primary={oracle.name} />
     </ListItemButtonWithSecondaryAction>
diff --git a/src/components/features/charactersAndCampaigns/OracleSection/OracleSection.tsx b/src/components/features/charactersAndCampaigns/OracleSection/OracleSection.tsx
index 37d035b7..e940eb2a 100644
--- a/src/components/features/charactersAndCampaigns/OracleSection/OracleSection.tsx
+++ b/src/components/features/charactersAndCampaigns/OracleSection/OracleSection.tsx
@@ -5,7 +5,13 @@ import { EmptyState } from "components/shared/EmptyState";
 import { OracleCollection } from "./OracleCollection";
 import { AskTheOracleButtons } from "./AskTheOracleButtons";
 
-export function OracleSection() {
+export interface OraclesSectionProps {
+  actionIsHide?: boolean
+}
+
+export function OracleSection(props: OraclesSectionProps) {
+  const { actionIsHide = false } = props;
+
   const {
     oracleCollections,
     setSearch,
@@ -20,47 +26,49 @@ export function OracleSection() {
 
   return (
     <>
-      <Box
-        color={(theme) => theme.palette.darkGrey.contrastText}
-        bgcolor={(theme) => theme.palette.darkGrey.dark}
-        borderBottom={(theme) => `1px solid ${theme.palette.darkGrey.dark}`}
-      >
+      {!actionIsHide && (
         <Box
           color={(theme) => theme.palette.darkGrey.contrastText}
           bgcolor={(theme) => theme.palette.darkGrey.dark}
           borderBottom={(theme) => `1px solid ${theme.palette.darkGrey.dark}`}
         >
-          <Typography
-            variant={"body2"}
-            component={"div"}
-            textAlign={"center"}
-            fontFamily={(theme) => theme.fontFamilyTitle}
+          <Box
+            color={(theme) => theme.palette.darkGrey.contrastText}
+            bgcolor={(theme) => theme.palette.darkGrey.dark}
+            borderBottom={(theme) => `1px solid ${theme.palette.darkGrey.dark}`}
           >
-            Ask the Oracle
-          </Typography>
-          <AskTheOracleButtons />
+            <Typography
+              variant={"body2"}
+              component={"div"}
+              textAlign={"center"}
+              fontFamily={(theme) => theme.fontFamilyTitle}
+            >
+              Ask the Oracle
+            </Typography>
+            <AskTheOracleButtons />
+          </Box>
+          <Input
+            fullWidth
+            startAdornment={
+              <InputAdornment position={"start"}>
+                <SearchIcon
+                  sx={(theme) => ({ color: theme.palette.grey[300] })}
+                />
+              </InputAdornment>
+            }
+            aria-label={"Filter Oracles"}
+            placeholder={"Filter Oracles"}
+            onChange={(evt) => setSearch(evt.currentTarget.value)}
+            color={"primary"}
+            sx={(theme) => ({
+              backgroundColor: theme.palette.darkGrey.main,
+              color: "#fff",
+              px: 2,
+              borderBottomColor: theme.palette.darkGrey.light,
+            })}
+          />
         </Box>
-        <Input
-          fullWidth
-          startAdornment={
-            <InputAdornment position={"start"}>
-              <SearchIcon
-                sx={(theme) => ({ color: theme.palette.grey[300] })}
-              />
-            </InputAdornment>
-          }
-          aria-label={"Filter Oracles"}
-          placeholder={"Filter Oracles"}
-          onChange={(evt) => setSearch(evt.currentTarget.value)}
-          color={"primary"}
-          sx={(theme) => ({
-            backgroundColor: theme.palette.darkGrey.main,
-            color: "#fff",
-            px: 2,
-            borderBottomColor: theme.palette.darkGrey.light,
-          })}
-        />
-      </Box>
+      )}
       {!isEmpty ? (
         <List
           sx={(theme) => ({
@@ -81,6 +89,7 @@ export function OracleSection() {
               visibleCollections={visibleOracleCollectionIds}
               visibleOracles={visibleOracleIds}
               enhancesCollections={enhancesCollections}
+              actionIsHide={actionIsHide}
             />
           ))}
         </List>
diff --git a/src/components/features/charactersAndCampaigns/OracleSection/OracleSelectableRollableCollectionListItem.tsx b/src/components/features/charactersAndCampaigns/OracleSection/OracleSelectableRollableCollectionListItem.tsx
index 4dc6d89b..80dea811 100644
--- a/src/components/features/charactersAndCampaigns/OracleSection/OracleSelectableRollableCollectionListItem.tsx
+++ b/src/components/features/charactersAndCampaigns/OracleSection/OracleSelectableRollableCollectionListItem.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import { useRoller } from "stores/appState/useRoller";
 import { OracleListItemActionOpenDialogButton } from "./OracleListItemActionOpenDialogButton";
 import { ListItemButtonWithSecondaryAction } from "./ListItemButtonWithSecondaryAction";
+import { ToggleVisibilityButton } from "components/shared/ToggleVisibilityButton";
+import { useStore } from "stores/store";
 
 export interface OracleSelectableRollableCollectionListItemProps {
   collection:
@@ -11,12 +13,14 @@ export interface OracleSelectableRollableCollectionListItemProps {
     | Datasworn.OracleTableSharedText2
     | Datasworn.OracleTableSharedText3;
   disabled?: boolean;
+  actionIsHide?: boolean;
+  hidden?: boolean;
 }
 
 export function OracleSelectableRollableCollectionListItem(
   props: OracleSelectableRollableCollectionListItemProps
 ) {
-  const { collection, disabled } = props;
+  const { collection, disabled, actionIsHide, hidden } = props;
   const { rollOracleTable } = useRoller();
 
   const options = collection.contents ?? {};
@@ -25,17 +29,34 @@ export function OracleSelectableRollableCollectionListItem(
   const [selectedOption, setSelectedOption] = useState<string>(keys[0] ?? "");
 
   const selectedOptionId = options[selectedOption]?._id;
+
+  const updateHiddenOracles = useStore(
+    (store) => store.campaigns.currentCampaign.updateHiddenOracles
+  );
+
+  const [hideIsloading, setHideIsLoading] = useState(false);
+
+  const onToggleVisibility = () => {
+    setHideIsLoading(true);
+    updateHiddenOracles(collection._id, !hidden)
+      .catch(() => {
+      })
+      .finally(() => {
+        setHideIsLoading(false);
+      });
+  };
+
+  if(!actionIsHide && hidden) {
+    return null;
+  }
+
   return (
     <ListItemButtonWithSecondaryAction
       disabled={disabled || !selectedOptionId}
-      onClick={
-        selectedOptionId
-          ? () => rollOracleTable(selectedOptionId, true)
-          : undefined
-      }
+      onClick={!actionIsHide ? () => rollOracleTable(selectedOptionId, true) : undefined}
       secondaryAction={
         <Box display={"flex"} alignItems={"center"}>
-          {keys.length > 0 && (
+          {keys.length > 0 && !actionIsHide && (
             <TextField
               aria-label={"Oracle Option"}
               size={"small"}
@@ -58,8 +79,18 @@ export function OracleSelectableRollableCollectionListItem(
             item={collection}
             disabled={disabled}
           />
+          {actionIsHide && (
+            <ToggleVisibilityButton
+              onToggleVisibility={onToggleVisibility}
+              loading={hideIsloading}
+              hidden={hidden}
+            />
+          )}
         </Box>
       }
+      sx={{
+        filter: hidden ? "grayscale(30%) opacity(70%)" : undefined,
+      }}
     >
       <ListItemText primary={collection.name} />
     </ListItemButtonWithSecondaryAction>
diff --git a/src/components/shared/ToggleVisibilityButton.tsx b/src/components/shared/ToggleVisibilityButton.tsx
new file mode 100644
index 00000000..9a4f0256
--- /dev/null
+++ b/src/components/shared/ToggleVisibilityButton.tsx
@@ -0,0 +1,63 @@
+import { ButtonBase, CircularProgress } from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { useEffect, useState } from "react";
+
+export interface HideOracleButtonProps {
+  onToggleVisibility: () => void;
+  loading: boolean;
+  hidden?: boolean;
+}
+
+export function ToggleVisibilityButton(
+  props: HideOracleButtonProps
+) {
+  const { onToggleVisibility, loading, hidden } = props;
+
+  const [buttonLoading, setButtonLoading] = useState(false);
+
+  useEffect(() => {
+    if(!loading && buttonLoading) {
+      setButtonLoading(false);
+    }
+    if(loading && !buttonLoading) {
+      setButtonLoading(true);
+    }
+  }, [buttonLoading, loading]);
+
+  return (
+    <ButtonBase
+      onClick={() => {
+        setButtonLoading(true);
+        onToggleVisibility();
+      }}
+      disabled={loading}
+      disableRipple
+      aria-label={"Toggle visibility"}
+      sx={{
+        borderRadius: "50%",
+        p: 1,
+        ":hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.08)"
+        }
+      }}
+    >
+      {buttonLoading && (
+        <CircularProgress
+          color={"inherit"}
+          size={16}
+          disableShrink
+          sx={{
+            animationDuration: "600ms",
+            m: 0.5
+          }}
+        />
+      )}
+      {!buttonLoading && hidden && (
+        <VisibilityOff />
+      )}
+      {!buttonLoading && !hidden && (
+        <Visibility />
+      )}
+    </ButtonBase>
+  );
+}
diff --git a/src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/CampaignSettingsMenu.tsx b/src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/CampaignSettingsMenu.tsx
index 654d0e8b..f5967df8 100644
--- a/src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/CampaignSettingsMenu.tsx
+++ b/src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/CampaignSettingsMenu.tsx
@@ -29,6 +29,8 @@ import LayoutIcon from "@mui/icons-material/ViewComfy";
 import { LayoutChooserDialog } from "components/shared/Layout/LayoutChooserDialog";
 import { AssetCardDialog } from "components/features/assets/AssetCardDialog";
 import { AssetDocument } from "api-calls/assets/_asset.type";
+import { HideOraclesDialog } from "./HideOraclesDialog";
+import OracleHideIcon from '@mui/icons-material/PlaylistRemove';
 
 export function CampaignSettingsMenu() {
   const confirm = useConfirm();
@@ -44,6 +46,7 @@ export function CampaignSettingsMenu() {
     useState(false);
   const [themeDialogOpen, setThemeDialogOpen] = useState(false);
   const [layoutDialogOpen, setLayoutDialogOpen] = useState(false);
+  const [oraclesDialogOpen, setOraclesDialogOpen] = useState(false);
   const [assetDialogOpen, setAssetDialogOpen] = useState(false);
   const [hideAssetsLoading, setHideAssetsLoading] = useState(false);
   const [isEditCampaignOpen, setIsEditCampaignOpen] = useState(false);
@@ -191,6 +194,19 @@ export function CampaignSettingsMenu() {
             <ListItemText>Edit Assets Deck</ListItemText>
           </MenuItem>
         )}
+        {!showGuidedPlayerView && (
+          <MenuItem
+            onClick={() => {
+              handleClose();
+              setOraclesDialogOpen(true);
+            }}
+          >
+            <ListItemIcon>
+              <OracleHideIcon />
+            </ListItemIcon>
+            <ListItemText>Hide Oracles</ListItemText>
+          </MenuItem>
+        )}
         {!showGuidedPlayerView && (
           <MenuItem
             onClick={() => {
@@ -281,6 +297,10 @@ export function CampaignSettingsMenu() {
         handleAssetSelection={(asset) => handleHideAsset(asset)}
         actionIsHide
       />
+      <HideOraclesDialog
+        open={oraclesDialogOpen}
+        onClose={() => setOraclesDialogOpen(false)}
+      />
     </>
   );
 }
diff --git a/src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/HideOraclesDialog.tsx b/src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/HideOraclesDialog.tsx
new file mode 100644
index 00000000..77aa277c
--- /dev/null
+++ b/src/pages/Campaign/CampaignPage/components/CampaignSettingsMenu/HideOraclesDialog.tsx
@@ -0,0 +1,43 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+} from "@mui/material";
+import { DialogTitleWithCloseButton } from "components/shared/DialogTitleWithCloseButton";
+import { OracleSection } from "components/features/charactersAndCampaigns/OracleSection";
+import React from "react";
+
+export interface HideOraclesDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function HideOraclesDialog(props: HideOraclesDialogProps) {
+  const { open, onClose } = props;
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitleWithCloseButton onClose={onClose}>
+        Hide Oracles
+      </DialogTitleWithCloseButton>
+      <DialogContent
+        sx={(theme) => ({
+          overflowY: "scroll",
+          scrollbarColor: `${theme.palette.divider} rgba(0, 0, 0, 0)`,
+          scrollbarWidth: "thin",
+          p: 0,
+          pl: 1,
+          mb: 1
+        })}
+      >
+        <OracleSection actionIsHide/>
+      </DialogContent>
+      <DialogActions>
+        <Button variant={"contained"} onClick={onClose}>
+          Done
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/stores/campaign/currentCampaign/currentCampaign.slice.ts b/src/stores/campaign/currentCampaign/currentCampaign.slice.ts
index 73189723..58ca2d17 100644
--- a/src/stores/campaign/currentCampaign/currentCampaign.slice.ts
+++ b/src/stores/campaign/currentCampaign/currentCampaign.slice.ts
@@ -12,6 +12,7 @@ import { createCampaignCharactersSlice } from "./characters/campaignCharacters.s
 import { updateCampaignWorld } from "api-calls/campaign/updateCampaignWorld";
 import { createSharedAssetsSlice } from "./sharedAssets/sharedAssets.slice";
 import { updateCampaignHiddenAssets } from "api-calls/campaign/updateHiddenAssets";
+import { updateCampaignHiddenOracles } from "../../../api-calls/campaign/updateHiddenOracles";
 
 export const createCurrentCampaignSlice: CreateSliceType<
   CurrentCampaignSlice
@@ -173,6 +174,14 @@ export const createCurrentCampaignSlice: CreateSliceType<
       }
       return updateCampaignHiddenAssets({ campaignId, assetId, isHidden });
     },
+    updateHiddenOracles: (oracleId, isHidden) => {
+      const state = getState();
+      const campaignId = state.campaigns.currentCampaign.currentCampaignId;
+      if (!campaignId) {
+        return new Promise((res, reject) => reject("No campaign found."));
+      }
+      return updateCampaignHiddenOracles({ campaignId, oracleId, hidden: isHidden });
+    },
 
     resetStore: () => {
       const state = getState();
diff --git a/src/stores/campaign/currentCampaign/currentCampaign.slice.type.ts b/src/stores/campaign/currentCampaign/currentCampaign.slice.type.ts
index 0b6153ef..66b95c66 100644
--- a/src/stores/campaign/currentCampaign/currentCampaign.slice.type.ts
+++ b/src/stores/campaign/currentCampaign/currentCampaign.slice.type.ts
@@ -28,6 +28,10 @@ export interface CurrentCampaignSliceActions {
     assetId: string,
     isHidden: boolean
   ) => Promise<void>;
+  updateHiddenOracles: (
+    oracleId: string,
+    isHidden: boolean
+  ) => Promise<void>;
 
   resetStore: () => void;
 }

From 5c1f2c4c7bb53e27dd57c5e4f3e3035b8902d89e Mon Sep 17 00:00:00 2001
From: AG-Guardian <60836934+AG-Guardian@users.noreply.github.com>
Date: Wed, 6 Nov 2024 06:58:44 -0500
Subject: [PATCH 2/2] update aria-labels for toggle visibility button

---
 src/components/shared/ToggleVisibilityButton.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/shared/ToggleVisibilityButton.tsx b/src/components/shared/ToggleVisibilityButton.tsx
index 9a4f0256..c310ade3 100644
--- a/src/components/shared/ToggleVisibilityButton.tsx
+++ b/src/components/shared/ToggleVisibilityButton.tsx
@@ -2,14 +2,14 @@ import { ButtonBase, CircularProgress } from "@mui/material";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import { useEffect, useState } from "react";
 
-export interface HideOracleButtonProps {
+export interface ToggleVisibilityButtonProps {
   onToggleVisibility: () => void;
   loading: boolean;
   hidden?: boolean;
 }
 
 export function ToggleVisibilityButton(
-  props: HideOracleButtonProps
+  props: ToggleVisibilityButtonProps
 ) {
   const { onToggleVisibility, loading, hidden } = props;
 
@@ -32,7 +32,7 @@ export function ToggleVisibilityButton(
       }}
       disabled={loading}
       disableRipple
-      aria-label={"Toggle visibility"}
+      aria-label={hidden ? "Show Item" : "Hide Item"}
       sx={{
         borderRadius: "50%",
         p: 1,