GroupSearch: correctly set field touched

pkg/interface/src/views/components/GroupSearch.tsx

@@ -75,7 +75,8 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
     touched: touchedFields,
     errors,
     initialValues,
-    setFieldValue
+    setFieldValue,
+    setFieldTouched,
   } = useFormikContext<V>();
   const [inputIdx, setInputIdx] = useState(initialValues[id].length);
   const name = `${id}[${inputIdx}]`;
@@ -118,10 +119,12 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
       render={(arrayHelpers) => {
         const onSelect = (a: Association) => {
           setFieldValue(name, a.group);
+          setFieldTouched(name, true, false);
           setInputIdx(s => s+1);
         };
 
         const onRemove = (idx: number) => {
+          setFieldTouched(name, true, false);
           setInputIdx(s => s - 1);
           arrayHelpers.remove(idx);
         };
@@ -145,6 +148,7 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
                 }
                 getKey={(a: Association) => a.group}
                 onSelect={onSelect}
+                onBlur={() => {}}
               />
               {value?.length > 0 && (
                 value.map((e, idx: number) => {

pkg/interface/src/views/components/Triangle.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import _ from "lodash";
+import { Box } from "@tlon/indigo-react";
+import { PropFunc } from "~/types";
+
+export type Direction = "East" | "South" | "West" | "North";
+type TriangleProps = PropFunc<typeof Box> & {
+  direction: Direction;
+  color: string;
+  size: number;
+};
+
+const borders = ["Top", "Bottom", "Left", "Right"] as const;
+
+const directionToBorder = (dir: Direction): typeof borders[number] => {
+  switch (dir) {
+    case "East":
+      return "Left";
+    case "West":
+      return "Right";
+    case "North":
+      return "Bottom";
+    case "South":
+      return "Top";
+  }
+};
+
+const getBorders = (dir: Direction, height: number, color: string) => {
+  const solidBorder = directionToBorder(dir);
+  const transparent = borders.filter((x) => x !== solidBorder);
+
+  return {
+    [`border${solidBorder}`]: `${height}px solid`,
+    [`border${solidBorder}Color`]: color,
+    ..._.mapValues(
+      _.keyBy(transparent, (border) => `border${border}`),
+      () => "16px solid transparent"
+    ),
+  };
+};
+
+export function Triangle({ direction, color, size, ...rest }: TriangleProps) {
+  const borders = getBorders(direction, size, color);
+
+  return <Box width="0px" height="0px" {...borders} {...rest} />;
+}