add draft declaration

apps/edr-freight-web/backoffice/src/components/trainBuilder/ConsistWagonList.tsx

@@ -15,6 +15,7 @@ import {
   Group,
   Menu,
   Paper,
+  ScrollArea,
   Select,
   Stack,
   Text,
@@ -345,6 +346,11 @@ function WagonYardBadge({
       enabled: Boolean(onChange),
     }),
   );
+  // The yard list is long — filter box + capped scroll keep the dropdown usable.
+  const [yardFilter, setYardFilter] = useState("");
+  const filteredYards = (yardsQuery.data ?? []).filter((y) =>
+    (y.label ?? y.code ?? "").toLowerCase().includes(yardFilter.trim().toLowerCase()),
+  );
   if (!onChange) {
     return wagon.currentYard ? (
       <Badge
@@ -359,7 +365,7 @@ function WagonYardBadge({
     ) : null;
   }
   return (
-    <Menu shadow="md" width={240} withinPortal>
+    <Menu shadow="md" width={240} withinPortal onClose={() => setYardFilter("")}>
       <Menu.Target>
         <Badge
           component="button"
@@ -380,15 +386,33 @@ function WagonYardBadge({
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Label>Move wagon to yard</Menu.Label>
-        {(yardsQuery.data ?? []).map((y) => (
-          <Menu.Item
-            key={y.id}
-            disabled={y.id === wagon.currentYard?.id}
-            onClick={() => onChange(wagon.id, y.id)}
-          >
-            {y.label ?? y.code}
-          </Menu.Item>
-        ))}
+        <Box px={8} pb={6}>
+          <TextInput
+            size="xs"
+            placeholder="Filter yards…"
+            leftSection={<Search size={12} />}
+            value={yardFilter}
+            onChange={(e) => setYardFilter(e.currentTarget.value)}
+            // A keypress inside the menu must type, not jump menu focus.
+            onKeyDown={(e) => e.stopPropagation()}
+          />
+        </Box>
+        <ScrollArea.Autosize mah={350} type="auto">
+          {filteredYards.map((y) => (
+            <Menu.Item
+              key={y.id}
+              disabled={y.id === wagon.currentYard?.id}
+              onClick={() => onChange(wagon.id, y.id)}
+            >
+              {y.label ?? y.code}
+            </Menu.Item>
+          ))}
+          {filteredYards.length === 0 ? (
+            <Text size="xs" c="dimmed" px={12} py={6}>
+              No yard matches
+            </Text>
+          ) : null}
+        </ScrollArea.Autosize>
       </Menu.Dropdown>
     </Menu>
   );