- Finish adjusting the Board Settings component.

- Extract some components out of Lane.jsx into their own files
- Fix misc bugs around preserving lane height in Vertical mode
- Add missing non english translation strings

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/production-board-kanban/trello-board/components/Lane/ItemComponent.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ItemComponent = ({ children, maxCardHeight, maxCardWidth, ...props }) => (
+  <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
+    {children}
+  </div>
+);
+
+export default ItemComponent;

client/src/components/production-board-kanban/trello-board/components/Lane/ItemWrapper.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const ItemWrapper = React.memo(({ children, ...props }) => (
+  <div {...props} className="item-wrapper">
+    {children}
+  </div>
+));
+
+export default ItemWrapper;

client/src/components/production-board-kanban/trello-board/components/Lane/ListComponent.jsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+
+const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
+  <div ref={ref} {...props} style={{ ...style }}>
+    {children}
+  </div>
+));
+
+export default ListComponent;

client/src/components/production-board-kanban/trello-board/controllers/Lane.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
@@ -15,24 +15,9 @@ import { selectTechnician } from "../../../../redux/tech/tech.selectors.js";
 import ProductionBoardCard from "../../../production-board-kanban-card/production-board-kanban-card.component.jsx";
 import HeightMemoryWrapper from "../components/Lane/HeightMemoryWrapper.jsx";
 import SizeMemoryWrapper from "../components/Lane/SizeMemoryWrapper.jsx";
-
-const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
-  <div ref={ref} {...props} style={{ ...style }}>
-    {children}
-  </div>
-));
-
-const ItemComponent = ({ children, maxCardHeight, maxCardWidth, ...props }) => (
-  <div style={{ minWidth: maxCardWidth, minHeight: maxCardHeight }} {...props}>
-    {children}
-  </div>
-);
-
-const ItemWrapper = React.memo(({ children, ...props }) => (
-  <div {...props} className="item-wrapper">
-    {children}
-  </div>
-));
+import ListComponent from "../components/Lane/ListComponent.jsx";
+import ItemComponent from "../components/Lane/ItemComponent.jsx";
+import ItemWrapper from "../components/Lane/ItemWrapper.jsx";
 
 /**
  * Lane is a React component that represents a lane in a Trello-like board.
@@ -170,6 +155,8 @@ const Lane = ({
 
       const componentProps = orientation === "vertical" ? verticalProps : horizontalProps;
 
+      // If the lane is collapsed, we want to render a div instead of the virtualized list, and we want to set the height to the max height of the lane so that
+      // the lane doesn't shrink when collapsed (in horizontal mode)
       const finalComponentProps = collapsed
         ? orientation === "horizontal"
           ? {
@@ -180,19 +167,19 @@ const Lane = ({
           : {}
         : componentProps;
 
+      // If the lane is horizontal and collapsed, we want to override the minHeight style so that the lane doesn't shrink to 0 height
       const shouldOverride = orientation !== "horizontal" && (collapsed || !renderedCards.length);
+
+      // If the lane is horizontal and collapsed, we want to render a placeholder so that the lane doesn't shrink to 0 height and grows when
+      // a card is dragged over it
       const shouldRenderPlaceholder = orientation !== "horizontal" && (collapsed || renderedCards.length === 0);
 
-      const hasKey =
-        orientation === "vertical"
-          ? {
-              key: id
-            }
-          : {};
+      // Super magic key to maintain max height on the lane when cards are added / removed / resized / etc
+      const itemKey = `${id}-${orientation}-${cardSettings?.compact}-${renderedCards.length}-${cardSettings?.cardSize}`;
 
       return (
         <HeightMemoryWrapper
-          {...hasKey}
+          itemKey={itemKey}
           maxHeight={maxLaneHeight}
           setMaxHeight={setMaxLaneHeight}
           override={shouldOverride}
@@ -209,7 +196,17 @@ const Lane = ({
         </HeightMemoryWrapper>
       );
     },
-    [orientation, collapsed, isVisible, renderDraggable, maxLaneHeight, setMaxLaneHeight, maxCardWidth, id]
+    [
+      orientation,
+      collapsed,
+      isVisible,
+      renderDraggable,
+      maxLaneHeight,
+      setMaxLaneHeight,
+      maxCardWidth,
+      id,
+      cardSettings
+    ]
   );
 
   const renderDragContainer = useCallback(