Add back database disabled banner

src/components/DatabaseDisabledMessage.tsx

@@ -0,0 +1,24 @@
+import { Box, Text } from "theme-ui";
+
+import Link from "./Link";
+
+function DatabaseDisabledMessage({ type }: { type: string }) {
+  return (
+    <Box
+      sx={{
+        textAlign: "center",
+        borderRadius: "2px",
+        gridArea: "1 / 1 / span 1 / span 3",
+      }}
+      bg="highlight"
+      p={1}
+    >
+      <Text as="p" variant="body2">
+        {type} saving is unavailable. See <Link to="/faq#database">FAQ</Link>{" "}
+        for more information.
+      </Text>
+    </Box>
+  );
+}
+
+export default DatabaseDisabledMessage;

src/modals/SelectMapModal.tsx

@@ -8,6 +8,7 @@ import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
+import DatabaseDisabledMessage from "../components/DatabaseDisabledMessage";
 
 import ImageDrop from "../components/image/ImageDrop";
 
@@ -29,6 +30,7 @@ import { useUserId } from "../contexts/UserIdContext";
 import { useAssets } from "../contexts/AssetsContext";
 import { GroupProvider } from "../contexts/GroupContext";
 import { TileDragProvider } from "../contexts/TileDragContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
 import { Map } from "../types/Map";
 import {
@@ -55,6 +57,8 @@ function SelectMapModal({
 }: SelectMapProps) {
   const { addToast } = useToasts();
 
+  const { databaseStatus } = useDatabase();
+
   const userId = useUserId();
   const {
     maps,
@@ -274,6 +278,9 @@ function SelectMapModal({
                   onDragCancel={() => setIsDraggingMap(false)}
                 >
                   <TilesContainer>
+                    {databaseStatus === "disabled" && (
+                      <DatabaseDisabledMessage type="Map" />
+                    )}
                     <MapTiles
                       mapsById={mapsById}
                       onMapEdit={setEditingMapId}

src/modals/SelectTokensModal.tsx

@@ -8,6 +8,7 @@ import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
+import DatabaseDisabledMessage from "../components/DatabaseDisabledMessage";
 
 import ImageDrop from "../components/image/ImageDrop";
 
@@ -34,6 +35,7 @@ import { useAssets } from "../contexts/AssetsContext";
 import { GroupProvider } from "../contexts/GroupContext";
 import { TileDragProvider } from "../contexts/TileDragContext";
 import { useMapStage } from "../contexts/MapStageContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
 import { TokenState } from "../types/TokenState";
 import {
@@ -54,6 +56,8 @@ function SelectTokensModal({
 }: SelectTokensModalProps) {
   const { addToast } = useToasts();
 
+  const { databaseStatus } = useDatabase();
+
   const userId = useUserId();
   const {
     tokens,
@@ -277,6 +281,9 @@ function SelectTokensModal({
                   onDragCancel={() => setIsDraggingToken(false)}
                 >
                   <TilesContainer>
+                    {databaseStatus === "disabled" && (
+                      <DatabaseDisabledMessage type="Token" />
+                    )}
                     <TokenTiles
                       tokensById={tokensById}
                       onTokenEdit={setEditingTokenId}