From 37f64d4e188fc26ac436d335289c3d380bf616c2 Mon Sep 17 00:00:00 2001
From: Scott Benton <scott@scottbenton.dev>
Date: Wed, 24 Apr 2024 00:53:35 -0400
Subject: [PATCH] feat(homebrew): Assets, moves, and oracles can now be moved
 between collections and categories

---
 .../assets/NewAssetCard/AssetHeader.tsx       |  12 +-
 .../AssetsSection/AssetPreviewCard.tsx        | 183 ++++++++++++++++++
 .../AssetsSection/Assets/MoveAssetDialog.tsx  |  83 ++++++++
 .../AssetsSection/AssetsSection.tsx           |  76 ++++----
 .../MovesSection/MoveCard.tsx                 |  66 +++++++
 .../MovesSection/MoveMoveDialog.tsx           |  77 ++++++++
 .../MovesSection/MovesEditorPane.tsx          |  40 ++--
 .../OracleSection/OracleEditorPane.tsx        |   2 +
 .../MoveOracleCollectionDialog.tsx            | 126 ++++++++++++
 .../OracleCollectionsSection.tsx              |   4 +-
 .../Sections/OracleInfoSection.tsx            |  19 ++
 .../MoveOracleTableDialog.tsx                 |  78 ++++++++
 .../OracleTablesSection/OracleTableCard.tsx   |  87 ++++++---
 .../OracleTablesSection.tsx                   |   9 +-
 src/stores/homebrew/homebrew.slice.type.ts    |  16 +-
 15 files changed, 772 insertions(+), 106 deletions(-)
 create mode 100644 src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetPreviewCard.tsx
 create mode 100644 src/pages/Homebrew/HomebrewEditorPage/AssetsSection/Assets/MoveAssetDialog.tsx
 create mode 100644 src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveCard.tsx
 create mode 100644 src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveMoveDialog.tsx
 create mode 100644 src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/MoveOracleCollectionDialog.tsx
 create mode 100644 src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/MoveOracleTableDialog.tsx

diff --git a/src/components/features/assets/NewAssetCard/AssetHeader.tsx b/src/components/features/assets/NewAssetCard/AssetHeader.tsx
index 3e280ad4..eacf1623 100644
--- a/src/components/features/assets/NewAssetCard/AssetHeader.tsx
+++ b/src/components/features/assets/NewAssetCard/AssetHeader.tsx
@@ -7,10 +7,11 @@ import DeleteIcon from "@mui/icons-material/Delete";
 export interface AssetHeaderProps {
   asset: Datasworn.Asset;
   onAssetRemove?: () => void;
+  actions?: React.ReactNode;
 }
 
 export function AssetHeader(props: AssetHeaderProps) {
-  const { asset, onAssetRemove } = props;
+  const { asset, onAssetRemove, actions } = props;
 
   const isLocal = getIsLocalEnvironment();
 
@@ -36,10 +37,13 @@ export function AssetHeader(props: AssetHeaderProps) {
             <LinkIcon color={"inherit"} />
           </Tooltip>
         )}
+        {actions}
         {onAssetRemove && (
-          <IconButton color={"inherit"} onClick={onAssetRemove}>
-            <DeleteIcon />
-          </IconButton>
+          <Tooltip title={"Remove Asset"}>
+            <IconButton color={"inherit"} onClick={onAssetRemove}>
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
         )}
       </Box>
     </Box>
diff --git a/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetPreviewCard.tsx b/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetPreviewCard.tsx
new file mode 100644
index 00000000..d9b19b91
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetPreviewCard.tsx
@@ -0,0 +1,183 @@
+import { Datasworn } from "@datasworn/core";
+import { Box, Card, IconButton, Tooltip } from "@mui/material";
+import { AssetAbilities } from "components/features/assets/NewAssetCard/AssetAbilities";
+import { AssetControls } from "components/features/assets/NewAssetCard/AssetControls";
+import { AssetHeader } from "components/features/assets/NewAssetCard/AssetHeader";
+import { AssetNameAndDescription } from "components/features/assets/NewAssetCard/AssetNameAndDescription";
+import { AssetOptions } from "components/features/assets/NewAssetCard/AssetOptions";
+import { convertIdPart } from "functions/dataswornIdEncoder";
+import { StoredHomebrewAsset } from "types/homebrew/HomebrewAssets.type";
+import EditIcon from "@mui/icons-material/Edit";
+import MoveIcon from "@mui/icons-material/DriveFileMove";
+
+export interface AssetPreviewCardProps {
+  storedAsset: StoredHomebrewAsset;
+  collectionName: string;
+  handleDeleteAsset: () => void;
+  handleEditAsset: () => void;
+  handleMoveAsset: () => void;
+}
+
+export function AssetPreviewCard(props: AssetPreviewCardProps) {
+  const {
+    storedAsset,
+    collectionName,
+    handleDeleteAsset,
+    handleEditAsset,
+    handleMoveAsset,
+  } = props;
+
+  const { label, requirement, abilities, options, controls } = storedAsset;
+
+  const dataswornAbilities: Datasworn.AssetAbility[] = abilities.map(
+    (ability, index) => ({
+      _id: index + "",
+      text: ability.text,
+      name: ability.name,
+      enabled: ability.defaultEnabled ?? false,
+    })
+  );
+
+  const dataswornOptions: Record<string, Datasworn.AssetOptionField> = {};
+  options?.forEach((option) => {
+    let optionId: string;
+
+    try {
+      optionId = convertIdPart(option.label);
+    } catch (e) {
+      return;
+    }
+    if (option.type === "text") {
+      dataswornOptions[optionId] = {
+        label: option.label,
+        field_type: "text",
+        value: "",
+      };
+    } else {
+      const choices: Record<string, Datasworn.SelectEnhancementFieldChoice> =
+        {};
+
+      (option.options ?? []).forEach((optionChoice) => {
+        choices[optionChoice] = {
+          label: optionChoice,
+          choice_type: "choice",
+        };
+      });
+
+      dataswornOptions[optionId] = {
+        label: option.label,
+        field_type: "select_enhancement",
+        value: "",
+        choices,
+      };
+    }
+  });
+
+  const dataswornControls: Record<string, Datasworn.AssetControlField> = {};
+  controls?.forEach((control) => {
+    let controlId: string;
+
+    try {
+      controlId = convertIdPart(control.label);
+    } catch (e) {
+      return;
+    }
+    if (control.type === "checkbox") {
+      dataswornControls[controlId] = {
+        field_type: "checkbox",
+        label: control.label,
+        value: false,
+        is_impact: false,
+        disables_asset: false,
+      };
+    } else if (control.type === "select") {
+      const choices: Record<string, Datasworn.SelectEnhancementFieldChoice> =
+        {};
+
+      (control.options ?? []).forEach((optionChoice) => {
+        choices[optionChoice] = {
+          label: optionChoice,
+          choice_type: "choice",
+        };
+      });
+
+      dataswornControls[controlId] = {
+        label: control.label,
+        field_type: "select_enhancement",
+        value: "",
+        choices,
+      };
+    } else if (control.type === "conditionMeter") {
+      dataswornControls[controlId] = {
+        label: control.label,
+        field_type: "condition_meter",
+        value: control.max,
+        max: control.max,
+        min: control.min,
+        rollable: true,
+      };
+    }
+  });
+
+  const asset: Datasworn.Asset = {
+    _id: "",
+    name: label,
+    count_as_impact: false,
+    shared: false,
+    _source: { title: "", authors: [], date: "", url: "", license: "" },
+
+    requirement: requirement,
+    category: collectionName,
+    abilities: dataswornAbilities,
+    options: dataswornOptions,
+    controls: dataswornControls,
+  };
+
+  return (
+    <Card
+      variant={"outlined"}
+      sx={{
+        position: "relative",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        borderWidth: 0,
+      }}
+    >
+      <AssetHeader
+        asset={asset}
+        onAssetRemove={handleDeleteAsset}
+        actions={
+          <>
+            <Tooltip title={"Move asset to another collection"}>
+              <IconButton onClick={handleMoveAsset} color={"inherit"}>
+                <MoveIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={"Edit Asset"}>
+              <IconButton onClick={handleEditAsset} color={"inherit"}>
+                <EditIcon />
+              </IconButton>
+            </Tooltip>
+          </>
+        }
+      />
+      <Box
+        flexGrow={1}
+        display={"flex"}
+        flexDirection={"column"}
+        p={1}
+        border={(theme) => `1px solid ${theme.palette.divider}`}
+        sx={(theme) => ({
+          borderBottomLeftRadius: theme.shape.borderRadius,
+          borderBottomRightRadius: theme.shape.borderRadius,
+        })}
+      >
+        <AssetNameAndDescription asset={asset} />
+        <AssetOptions asset={asset} onAssetOptionChange={() => {}} />
+        <AssetAbilities asset={asset} />
+        <AssetControls controls={asset.controls} onControlChange={() => {}} />
+      </Box>
+    </Card>
+  );
+}
diff --git a/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/Assets/MoveAssetDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/Assets/MoveAssetDialog.tsx
new file mode 100644
index 00000000..5b14219b
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/Assets/MoveAssetDialog.tsx
@@ -0,0 +1,83 @@
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  ListItemText,
+  TextField,
+} from "@mui/material";
+import { DialogTitleWithCloseButton } from "components/shared/DialogTitleWithCloseButton";
+import { useEffect, useState } from "react";
+import { useStore } from "stores/store";
+import { StoredHomebrewAssetCollection } from "types/homebrew/HomebrewAssets.type";
+
+export interface MoveAssetDialogProps {
+  onClose: () => void;
+  state?: {
+    assetId: string;
+    assetCollectionId: string;
+  };
+  collections: Record<string, StoredHomebrewAssetCollection>;
+}
+
+export function MoveAssetDialog(props: MoveAssetDialogProps) {
+  const { state, onClose, collections } = props;
+  const { assetId, assetCollectionId } = state ?? {};
+
+  const [selectedAssetCollection, setSelectedAssetCollection] =
+    useState(assetCollectionId);
+
+  useEffect(() => {
+    setSelectedAssetCollection(assetCollectionId);
+  }, [assetCollectionId]);
+
+  const updateAsset = useStore((store) => store.homebrew.updateAsset);
+
+  const handleSave = () => {
+    if (assetId && selectedAssetCollection) {
+      updateAsset(assetId, { categoryKey: selectedAssetCollection })
+        .then(() => {
+          onClose();
+        })
+        .catch(() => {});
+    }
+  };
+
+  return (
+    <Dialog open={!!assetId} onClose={onClose} maxWidth={"xs"} fullWidth>
+      <DialogTitleWithCloseButton onClose={onClose}>
+        Move Asset
+      </DialogTitleWithCloseButton>
+      <DialogContent>
+        <Autocomplete
+          sx={{ mt: 1 }}
+          options={Object.keys(collections)}
+          getOptionKey={(option) => option}
+          getOptionLabel={(key) => collections[key]?.label}
+          renderInput={(params) => (
+            <TextField {...params} label={"Asset Collections"} />
+          )}
+          renderOption={(props, option) => (
+            <Box component={"li"} {...props}>
+              <ListItemText primary={collections[option].label} />
+            </Box>
+          )}
+          value={selectedAssetCollection ?? null}
+          onChange={(evt, value) => {
+            setSelectedAssetCollection(value ?? undefined);
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button color={"inherit"} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant={"contained"} onClick={handleSave}>
+          Move Asset
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetsSection.tsx b/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetsSection.tsx
index e38ec9ce..dba1c92c 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetsSection.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/AssetsSection/AssetsSection.tsx
@@ -2,8 +2,6 @@ import {
   Box,
   Breadcrumbs,
   Button,
-  Card,
-  IconButton,
   Link,
   Stack,
   Typography,
@@ -16,8 +14,8 @@ import { useStore } from "stores/store";
 import { MarkdownRenderer } from "components/shared/MarkdownRenderer";
 import { AssetDialog } from "./Assets/AssetDialog";
 import { useConfirm } from "material-ui-confirm";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { AssetPreviewCard } from "./AssetPreviewCard";
+import { MoveAssetDialog } from "./Assets/MoveAssetDialog";
 
 export interface AssetsSectionProps {
   homebrewId: string;
@@ -34,6 +32,10 @@ export function AssetsSection(props: AssetsSectionProps) {
     open: boolean;
     assetId?: string;
   }>({ open: false });
+  const [moveAssetDialogState, setMoveAssetDialogState] = useState<{
+    assetId: string;
+    assetCollectionId: string;
+  }>();
 
   const assetCollections = useStore(
     (store) =>
@@ -162,37 +164,36 @@ export function AssetsSection(props: AssetsSectionProps) {
               </Button>
             }
           />
-          {filteredAssetIds.map((assetKey) => (
-            <Card
-              variant={"outlined"}
-              key={assetKey}
-              sx={{
-                px: 2,
-                py: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-              }}
-            >
-              <Typography>{assets[assetKey].label}</Typography>
-              <Box>
-                <IconButton
-                  onClick={() =>
-                    setAssetDialogState({ open: true, assetId: assetKey })
-                  }
-                >
-                  <EditIcon />
-                </IconButton>
-                <IconButton
-                  onClick={() =>
-                    handleDeleteAsset(assets[assetKey].label, assetKey)
-                  }
-                >
-                  <DeleteIcon />
-                </IconButton>
-              </Box>
-            </Card>
-          ))}
+          <Box
+            display={"grid"}
+            gridTemplateColumns={{
+              xs: "repeat(1, 1fr)",
+              sm: "repeat(2, 1fr)",
+              lg: "repeat(3, 1fr)",
+              xl: "repeat(4, 1fr)",
+            }}
+            gap={2}
+          >
+            {filteredAssetIds.map((assetKey) => (
+              <AssetPreviewCard
+                key={assetKey}
+                storedAsset={assets[assetKey]}
+                collectionName={assetCollections[openCollectionKey].label}
+                handleDeleteAsset={() =>
+                  handleDeleteAsset(assets[assetKey].label, assetKey)
+                }
+                handleEditAsset={() =>
+                  setAssetDialogState({ open: true, assetId: assetKey })
+                }
+                handleMoveAsset={() =>
+                  setMoveAssetDialogState({
+                    assetId: assetKey,
+                    assetCollectionId: assets[assetKey].categoryKey,
+                  })
+                }
+              />
+            ))}
+          </Box>
         </>
       ) : (
         <>
@@ -233,6 +234,11 @@ export function AssetsSection(props: AssetsSectionProps) {
           existingAssetId={assetDialogState.assetId}
         />
       )}
+      <MoveAssetDialog
+        state={moveAssetDialogState}
+        onClose={() => setMoveAssetDialogState(undefined)}
+        collections={assetCollections}
+      />
     </Stack>
   );
 }
diff --git a/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveCard.tsx b/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveCard.tsx
new file mode 100644
index 00000000..8eac051c
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveCard.tsx
@@ -0,0 +1,66 @@
+import { Box, Card, IconButton, Tooltip, Typography } from "@mui/material";
+import {
+  StoredMove,
+  StoredMoveCategory,
+} from "types/homebrew/HomebrewMoves.type";
+import MoveIcon from "@mui/icons-material/DriveFileMove";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useState } from "react";
+import { MoveMoveDialog } from "./MoveMoveDialog";
+
+export interface MoveCardProps {
+  moveId: string;
+  move: StoredMove;
+  moveCategories: Record<string, StoredMoveCategory>;
+  handleEdit: () => void;
+  handleDelete: () => void;
+}
+
+export function MoveCard(props: MoveCardProps) {
+  const { moveId, move, moveCategories, handleEdit, handleDelete } = props;
+
+  const [moveMoveDialogOpen, setMoveMoveDialogOpen] = useState(false);
+
+  return (
+    <>
+      <Card
+        variant={"outlined"}
+        key={moveId}
+        sx={{
+          px: 2,
+          py: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <Typography>{move.label}</Typography>
+        <Box>
+          <Tooltip title={"Move Move"}>
+            <IconButton onClick={() => setMoveMoveDialogOpen(true)}>
+              <MoveIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={"Edit Move"}>
+            <IconButton onClick={() => handleEdit()}>
+              <EditIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={"Delete Move"}>
+            <IconButton onClick={() => handleDelete()}>
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Card>
+      <MoveMoveDialog
+        open={moveMoveDialogOpen}
+        onClose={() => setMoveMoveDialogOpen(false)}
+        moveId={moveId}
+        moveCategoryId={move.categoryId}
+        categories={moveCategories}
+      />
+    </>
+  );
+}
diff --git a/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveMoveDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveMoveDialog.tsx
new file mode 100644
index 00000000..4417b52b
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MoveMoveDialog.tsx
@@ -0,0 +1,77 @@
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  ListItemText,
+  TextField,
+} from "@mui/material";
+import { DialogTitleWithCloseButton } from "components/shared/DialogTitleWithCloseButton";
+import { useState } from "react";
+import { useStore } from "stores/store";
+import { StoredMoveCategory } from "types/homebrew/HomebrewMoves.type";
+
+export interface MoveMoveDialogProps {
+  open: boolean;
+  moveId: string;
+  moveCategoryId: string;
+  categories: Record<string, StoredMoveCategory>;
+  onClose: () => void;
+}
+
+export function MoveMoveDialog(props: MoveMoveDialogProps) {
+  const { open, moveId, moveCategoryId, categories, onClose } = props;
+
+  const [categoryId, setCategoryId] = useState<string | undefined>(
+    moveCategoryId
+  );
+
+  const updateMove = useStore((store) => store.homebrew.updateMove);
+  const handleMove = () => {
+    if (categoryId) {
+      updateMove(moveId, { categoryId })
+        .then(() => {
+          onClose();
+        })
+        .catch(() => {});
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth={"xs"} fullWidth>
+      <DialogTitleWithCloseButton onClose={onClose}>
+        Move Move
+      </DialogTitleWithCloseButton>
+      <DialogContent>
+        <Autocomplete
+          sx={{ mt: 1 }}
+          options={Object.keys(categories)}
+          getOptionKey={(option) => option}
+          getOptionLabel={(key) => categories[key]?.label}
+          renderInput={(params) => (
+            <TextField {...params} label={"Move Categories"} />
+          )}
+          renderOption={(props, option) => (
+            <Box component={"li"} {...props}>
+              <ListItemText primary={categories[option].label} />
+            </Box>
+          )}
+          value={categoryId ?? null}
+          onChange={(evt, value) => {
+            setCategoryId(value ?? undefined);
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button color={"inherit"} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant={"contained"} onClick={handleMove}>
+          Move Move
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MovesEditorPane.tsx b/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MovesEditorPane.tsx
index dd7bc6eb..d2a2663b 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MovesEditorPane.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/MovesSection/MovesEditorPane.tsx
@@ -23,6 +23,7 @@ import { useStore } from "stores/store";
 import { useConfirm } from "material-ui-confirm";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { MoveCard } from "./MoveCard";
 
 export interface MovesEditorPaneProps {
   homebrewId: string;
@@ -171,35 +172,18 @@ export function MovesEditorPane(props: MovesEditorPaneProps) {
             {sortedMoveIds.length > 0 ? (
               <>
                 {sortedMoveIds.map((moveId) => (
-                  <Card
-                    variant={"outlined"}
+                  <MoveCard
                     key={moveId}
-                    sx={{
-                      px: 2,
-                      py: 1,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                    }}
-                  >
-                    <Typography>{moves[moveId].label}</Typography>
-                    <Box>
-                      <IconButton
-                        onClick={() =>
-                          setMoveDialogState({ open: true, openMoveId: moveId })
-                        }
-                      >
-                        <EditIcon />
-                      </IconButton>
-                      <IconButton
-                        onClick={() =>
-                          handleDeleteMove(moves[moveId].label, moveId)
-                        }
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    </Box>
-                  </Card>
+                    moveId={moveId}
+                    move={moves[moveId]}
+                    moveCategories={categories}
+                    handleEdit={() =>
+                      setMoveDialogState({ open: true, openMoveId: moveId })
+                    }
+                    handleDelete={() =>
+                      handleDeleteMove(moves[moveId].label, moveId)
+                    }
+                  />
                 ))}
               </>
             ) : (
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/OracleEditorPane.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/OracleEditorPane.tsx
index 4d604131..edf4d0ca 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/OracleEditorPane.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/OracleEditorPane.tsx
@@ -101,6 +101,7 @@ export function OracleEditorPane(props: OracleEditorPaneProps) {
           closeCurrentOracleCollection={() =>
             setOpenCollectionId(breadcrumbs[breadcrumbs.length - 1].id)
           }
+          oracleCollections={oracleCollections}
         />
       )}
       <OracleCollectionsSection
@@ -116,6 +117,7 @@ export function OracleEditorPane(props: OracleEditorPaneProps) {
           homebrewId={homebrewId}
           tables={oracleTables}
           parentCollectionKey={openCollectionId}
+          collections={oracleCollections}
         />
       )}
       <OracleTablesCollectionDialog
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/MoveOracleCollectionDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/MoveOracleCollectionDialog.tsx
new file mode 100644
index 00000000..85e18a2d
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/MoveOracleCollectionDialog.tsx
@@ -0,0 +1,126 @@
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  ListItemText,
+  TextField,
+} from "@mui/material";
+import { DialogTitleWithCloseButton } from "components/shared/DialogTitleWithCloseButton";
+import { deleteField } from "firebase/firestore";
+import { useEffect, useState } from "react";
+import { useStore } from "stores/store";
+import { StoredOracleCollection } from "types/homebrew/HomebrewOracles.type";
+
+export interface MoveOracleCollectionDialogProps {
+  open: boolean;
+  parentOracleCollectionId?: string;
+  oracleCollectionId: string;
+  oracleCollections: Record<string, StoredOracleCollection>;
+  onClose: () => void;
+}
+
+export function MoveOracleCollectionDialog(
+  props: MoveOracleCollectionDialogProps
+) {
+  const {
+    open,
+    oracleCollectionId,
+    parentOracleCollectionId,
+    onClose,
+    oracleCollections,
+  } = props;
+
+  const [collectionId, setCollectionId] = useState<string | undefined>(
+    parentOracleCollectionId
+  );
+
+  useEffect(() => {
+    setCollectionId(parentOracleCollectionId);
+  }, [parentOracleCollectionId]);
+
+  console.debug(parentOracleCollectionId, collectionId, oracleCollections);
+
+  const updateOracleCollection = useStore(
+    (store) => store.homebrew.updateOracleCollection
+  );
+  const handleMove = () => {
+    updateOracleCollection(
+      oracleCollectionId,
+      collectionId
+        ? { parentOracleCollectionId: collectionId }
+        : { parentOracleCollectionId: deleteField() }
+    )
+      .then(() => {
+        onClose();
+      })
+      .catch(() => {});
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth={"xs"} fullWidth>
+      <DialogTitleWithCloseButton onClose={onClose}>
+        Move Oracle Collection
+      </DialogTitleWithCloseButton>
+      <DialogContent>
+        <Autocomplete
+          sx={{ mt: 1 }}
+          options={Object.keys(oracleCollections).filter(
+            (collectionKey) =>
+              !isDescendantOf(
+                oracleCollectionId,
+                collectionKey,
+                oracleCollections
+              )
+          )}
+          getOptionKey={(option) => option}
+          getOptionLabel={(key) => oracleCollections[key]?.label}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label={"Oracle Collections"}
+              helperText={"Leave blank to move this to the top level"}
+            />
+          )}
+          renderOption={(props, option) => (
+            <Box component={"li"} {...props}>
+              <ListItemText primary={oracleCollections[option].label} />
+            </Box>
+          )}
+          value={collectionId ?? null}
+          onChange={(evt, value) => {
+            setCollectionId(value ?? undefined);
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button color={"inherit"} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant={"contained"} onClick={handleMove}>
+          Move Collection
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function isDescendantOf(
+  currentCollectionId: string,
+  collectionToCheckId: string,
+  collections: Record<string, StoredOracleCollection>
+) {
+  if (currentCollectionId === collectionToCheckId) {
+    return true;
+  }
+  let parentId = collections[collectionToCheckId].parentOracleCollectionId;
+  while (parentId) {
+    if (parentId === currentCollectionId) {
+      return true;
+    }
+    parentId = collections[parentId].parentOracleCollectionId;
+  }
+  return false;
+}
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/OracleCollectionsSection.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/OracleCollectionsSection.tsx
index 70770d48..3edca33c 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/OracleCollectionsSection.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleCollectionsSection/OracleCollectionsSection.tsx
@@ -42,10 +42,10 @@ export function OracleCollectionsSection(props: OracleCollectionsSectionProps) {
       />
       {sortedCollectionIds.length === 0 && (
         <EmptyState
-          message='Add an oracle collection to group your tables together'
+          message="Add an oracle collection to group your tables together"
           callToAction={
             <Button
-              variant='outlined'
+              variant="outlined"
               color={"inherit"}
               onClick={openCreateCollectionDialog}
             >
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleInfoSection.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleInfoSection.tsx
index 0d1db724..293ad895 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleInfoSection.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleInfoSection.tsx
@@ -6,11 +6,13 @@ import { useConfirm } from "material-ui-confirm";
 import { useState } from "react";
 import { useStore } from "stores/store";
 import { StoredOracleCollection } from "types/homebrew/HomebrewOracles.type";
+import { MoveOracleCollectionDialog } from "./OracleCollectionsSection/MoveOracleCollectionDialog";
 
 export interface OracleInfoSectionProps {
   homebrewId: string;
   oracleCollectionId: string;
   oracleCollection: StoredOracleCollection;
+  oracleCollections: Record<string, StoredOracleCollection>;
   openCollectionDialog: () => void;
   closeCurrentOracleCollection: () => void;
 }
@@ -20,6 +22,7 @@ export function OracleInfoSection(props: OracleInfoSectionProps) {
     homebrewId,
     oracleCollectionId,
     oracleCollection,
+    oracleCollections,
     openCollectionDialog,
     closeCurrentOracleCollection,
   } = props;
@@ -56,6 +59,9 @@ export function OracleInfoSection(props: OracleInfoSectionProps) {
       .catch(() => {});
   };
 
+  const [moveCollectionDialogOpen, setMoveCollectionDialogOpen] =
+    useState(false);
+
   return (
     <>
       <SectionHeading
@@ -69,6 +75,12 @@ export function OracleInfoSection(props: OracleInfoSectionProps) {
             >
               Delete Collection
             </LoadingButton>
+            <Button
+              color={"inherit"}
+              onClick={() => setMoveCollectionDialogOpen(true)}
+            >
+              Move Collection
+            </Button>
             <Button
               color={"inherit"}
               variant={"outlined"}
@@ -85,6 +97,13 @@ export function OracleInfoSection(props: OracleInfoSectionProps) {
           <MarkdownRenderer markdown={oracleCollection.description} />
         </Box>
       ) : null}
+      <MoveOracleCollectionDialog
+        open={moveCollectionDialogOpen}
+        onClose={() => setMoveCollectionDialogOpen(false)}
+        oracleCollectionId={oracleCollectionId}
+        oracleCollections={oracleCollections}
+        parentOracleCollectionId={oracleCollection.parentOracleCollectionId}
+      />
     </>
   );
 }
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/MoveOracleTableDialog.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/MoveOracleTableDialog.tsx
new file mode 100644
index 00000000..7e37a1d6
--- /dev/null
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/MoveOracleTableDialog.tsx
@@ -0,0 +1,78 @@
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  ListItemText,
+  TextField,
+} from "@mui/material";
+import { DialogTitleWithCloseButton } from "components/shared/DialogTitleWithCloseButton";
+import { useState } from "react";
+import { useStore } from "stores/store";
+import { StoredOracleCollection } from "types/homebrew/HomebrewOracles.type";
+
+export interface MoveOracleTableDialogProps {
+  open: boolean;
+  oracleId: string;
+  oracleCollectionId: string;
+  oracleCollections: Record<string, StoredOracleCollection>;
+  onClose: () => void;
+}
+
+export function MoveOracleTableDialog(props: MoveOracleTableDialogProps) {
+  const { open, oracleId, oracleCollectionId, onClose, oracleCollections } =
+    props;
+
+  const [collectionId, setCollectionId] = useState<string | undefined>(
+    oracleCollectionId
+  );
+
+  const updateOracle = useStore((store) => store.homebrew.updateOracleTable);
+  const handleMove = () => {
+    if (collectionId) {
+      updateOracle(oracleId, { oracleCollectionId: collectionId })
+        .then(() => {
+          onClose();
+        })
+        .catch(() => {});
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth={"xs"} fullWidth>
+      <DialogTitleWithCloseButton onClose={onClose}>
+        Move Oracle Table
+      </DialogTitleWithCloseButton>
+      <DialogContent>
+        <Autocomplete
+          sx={{ mt: 1 }}
+          options={Object.keys(oracleCollections)}
+          getOptionKey={(option) => option}
+          getOptionLabel={(key) => oracleCollections[key]?.label}
+          renderInput={(params) => (
+            <TextField {...params} label={"Oracle Collections"} />
+          )}
+          renderOption={(props, option) => (
+            <Box component={"li"} {...props}>
+              <ListItemText primary={oracleCollections[option].label} />
+            </Box>
+          )}
+          value={collectionId ?? null}
+          onChange={(evt, value) => {
+            setCollectionId(value ?? undefined);
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button color={"inherit"} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button variant={"contained"} onClick={handleMove}>
+          Move Oracle
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTableCard.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTableCard.tsx
index 8d321cb4..7b2222ba 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTableCard.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTableCard.tsx
@@ -1,18 +1,25 @@
-import { Box, Card, IconButton, Typography } from "@mui/material";
+import { Box, Card, IconButton, Tooltip, Typography } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
-import { StoredOracleTable } from "types/homebrew/HomebrewOracles.type";
+import {
+  StoredOracleCollection,
+  StoredOracleTable,
+} from "types/homebrew/HomebrewOracles.type";
 import { useStore } from "stores/store";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { useConfirm } from "material-ui-confirm";
+import { useState } from "react";
+import MoveIcon from "@mui/icons-material/DriveFileMove";
+import { MoveOracleTableDialog } from "./MoveOracleTableDialog";
 
 export interface OracleTableCardProps {
   oracleId: string;
   oracle: StoredOracleTable;
   onClick: () => void;
+  collections: Record<string, StoredOracleCollection>;
 }
 
 export function OracleTableCard(props: OracleTableCardProps) {
-  const { oracleId, oracle, onClick } = props;
+  const { oracleId, oracle, onClick, collections } = props;
   const confirm = useConfirm();
 
   const deleteOracle = useStore((store) => store.homebrew.deleteOracleTable);
@@ -33,33 +40,53 @@ export function OracleTableCard(props: OracleTableCardProps) {
       .catch(() => {});
   };
 
+  const [moveOracleDialogOpen, setMoveOracleDialogOpen] = useState(false);
+
   return (
-    <Card
-      variant={"outlined"}
-      component={"li"}
-      sx={{
-        px: 2,
-        py: 1,
-        mb: 1,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-      }}
-    >
-      <Box>
-        <Typography variant={"overline"} color={"textSecondary"}>
-          Table
-        </Typography>
-        <Typography variant={"h6"}>{oracle.label}</Typography>
-      </Box>
-      <Box>
-        <IconButton onClick={onClick}>
-          <EditIcon />
-        </IconButton>
-        <IconButton onClick={handleDeleteOracle}>
-          <DeleteIcon />
-        </IconButton>
-      </Box>
-    </Card>
+    <>
+      <Card
+        variant={"outlined"}
+        component={"li"}
+        sx={{
+          px: 2,
+          py: 1,
+          mb: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <Box>
+          <Typography variant={"overline"} color={"textSecondary"}>
+            Table
+          </Typography>
+          <Typography variant={"h6"}>{oracle.label}</Typography>
+        </Box>
+        <Box>
+          <Tooltip title={"Move Oracle"}>
+            <IconButton onClick={() => setMoveOracleDialogOpen(true)}>
+              <MoveIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={"Edit Oracle"}>
+            <IconButton onClick={onClick}>
+              <EditIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title={"Delete Oracle"}>
+            <IconButton onClick={handleDeleteOracle}>
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Card>
+      <MoveOracleTableDialog
+        open={moveOracleDialogOpen}
+        onClose={() => setMoveOracleDialogOpen(false)}
+        oracleCollectionId={oracle.oracleCollectionId}
+        oracleId={oracleId}
+        oracleCollections={collections}
+      />
+    </>
   );
 }
diff --git a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTablesSection.tsx b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTablesSection.tsx
index de0ebe4e..b5fd4a80 100644
--- a/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTablesSection.tsx
+++ b/src/pages/Homebrew/HomebrewEditorPage/OracleSection/Sections/OracleTablesSection/OracleTablesSection.tsx
@@ -2,18 +2,22 @@ import { Button, List } from "@mui/material";
 import { EmptyState } from "components/shared/EmptyState";
 import { SectionHeading } from "components/shared/SectionHeading";
 import { useState } from "react";
-import { StoredOracleTable } from "types/homebrew/HomebrewOracles.type";
+import {
+  StoredOracleCollection,
+  StoredOracleTable,
+} from "types/homebrew/HomebrewOracles.type";
 import { OracleTableDialog } from "./OracleTableDialog";
 import { OracleTableCard } from "./OracleTableCard";
 
 export interface OracleTablesSectionProps {
   homebrewId: string;
   tables: Record<string, StoredOracleTable>;
+  collections: Record<string, StoredOracleCollection>;
   parentCollectionKey: string;
 }
 
 export function OracleTablesSection(props: OracleTablesSectionProps) {
-  const { homebrewId, tables, parentCollectionKey } = props;
+  const { homebrewId, tables, collections, parentCollectionKey } = props;
 
   const [oracleTableDialogState, setOracleTableDialogState] = useState<{
     open: boolean;
@@ -52,6 +56,7 @@ export function OracleTablesSection(props: OracleTablesSectionProps) {
                   editingOracleTableId: key,
                 })
               }
+              collections={collections}
             />
           ))}
         </List>
diff --git a/src/stores/homebrew/homebrew.slice.type.ts b/src/stores/homebrew/homebrew.slice.type.ts
index 01524887..d5c8125b 100644
--- a/src/stores/homebrew/homebrew.slice.type.ts
+++ b/src/stores/homebrew/homebrew.slice.type.ts
@@ -1,5 +1,5 @@
 import { Datasworn } from "@datasworn/core";
-import { Unsubscribe } from "firebase/firestore";
+import { PartialWithFieldValue, Unsubscribe } from "firebase/firestore";
 import {
   StoredHomebrewAsset,
   StoredHomebrewAssetCollection,
@@ -112,7 +112,7 @@ export interface HomebrewSliceActions {
   ) => Promise<void>;
   updateOracleCollection: (
     oracleCollectionId: string,
-    oracleCollection: StoredOracleCollection
+    oracleCollection: PartialWithFieldValue<StoredOracleCollection>
   ) => Promise<void>;
   deleteOracleCollection: (
     homebrewId: string,
@@ -122,7 +122,7 @@ export interface HomebrewSliceActions {
   createOracleTable: (oracleTable: StoredOracleTable) => Promise<void>;
   updateOracleTable: (
     oracleTableId: string,
-    oracleTable: StoredOracleTable
+    oracleTable: PartialWithFieldValue<StoredOracleTable>
   ) => Promise<void>;
   deleteOracleTable: (oracleTableId: string) => Promise<void>;
 
@@ -139,7 +139,10 @@ export interface HomebrewSliceActions {
   ) => Promise<void>;
 
   createMove: (move: StoredMove) => Promise<void>;
-  updateMove: (moveId: string, move: StoredMove) => Promise<void>;
+  updateMove: (
+    moveId: string,
+    move: PartialWithFieldValue<StoredMove>
+  ) => Promise<void>;
   deleteMove: (moveId: string) => Promise<void>;
 
   updateDataswornMoves: (homebrewId: string) => void;
@@ -157,7 +160,10 @@ export interface HomebrewSliceActions {
   ) => Promise<void>;
 
   createAsset: (asset: StoredHomebrewAsset) => Promise<void>;
-  updateAsset: (assetId: string, asset: StoredHomebrewAsset) => Promise<void>;
+  updateAsset: (
+    assetId: string,
+    asset: PartialWithFieldValue<StoredHomebrewAsset>
+  ) => Promise<void>;
   deleteAsset: (assetId: string) => Promise<void>;
 
   updateDataswornAssets: (homebrewId: string) => void;