From 00f668852b28b2c74767db1258093796197858d2 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 18 Feb 2025 16:17:50 -0700
Subject: [PATCH] Update useDropzonesInternal.ts

---
 .../SelectAxisDragContainer/useDropzonesInternal.ts    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts
index 8ed32aaef..ef906857f 100644
--- a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts
+++ b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/useDropzonesInternal.ts
@@ -44,6 +44,12 @@ export const useDropzonesInternal = ({
 
   const { errorZone, setErrorZone, onDragOverCheckErrorZone } = useErrorZones();
 
+  const availableDropZone: DropZoneInternal = {
+    id: SelectAxisContainerId.Available,
+    title: 'Available',
+    items: [] //empty array because we don't need to show items in the available zone
+  };
+
   const setDropZones = useMemo(() => {
     return (
       newDropZones: (prev: DropZoneInternal[]) => DropZoneInternal[],
@@ -242,8 +248,8 @@ export const useDropzonesInternal = ({
     return null;
   });
 
-  const findZoneById = useMemoizedFn((zoneId: string): DropZoneInternal | null => {
-    return dropZones.find((zone) => zone.id === zoneId) || null;
+  const findZoneById = useMemoizedFn((zoneId: string): DropZoneInternal => {
+    return dropZones.find((zone) => zone.id === zoneId) || availableDropZone;
   });
 
   const findZoneByOver = useMemoizedFn((over: Over): SelectAxisContainerId | null => {