Ensure that all our components have display names

This turns on a lint rule to require display names for all of our components, which makes it a lot easier to find your way around the component tree in React's dev tools.

src/video-grid/BigGrid.tsx

@@ -1010,6 +1010,8 @@ const Slots: FC<{ s: Grid }> = memo(({ s: g }) => {
   );
 });
 
+Slots.displayName = "Slots";
+
 /**
  * Given a tile and numbers in the range [0, 1) describing a position within the
  * tile, this returns the index of the specific cell in which that position

src/video-grid/TileWrapper.tsx

@@ -43,12 +43,8 @@ interface Props<T> {
   children: (props: ChildrenProperties<T>) => ReactNode;
 }
 
-/**
- * A wrapper around a tile in a video grid. This component exists to decouple
- * child components from the grid.
- */
-export const TileWrapper = memo(
-  ({
+const TileWrapper_ = memo(
+  <T,>({
     id,
     onDragRef,
     targetWidth,
@@ -64,7 +60,7 @@ export const TileWrapper = memo(
     width,
     height,
     children,
-  }) => {
+  }: Props<T>) => {
     const ref = useRef<HTMLElement | null>(null);
 
     useDrag((state) => onDragRef?.current!(id, state), {
@@ -97,7 +93,15 @@ export const TileWrapper = memo(
       </>
     );
   },
-  // We pretend this component is a simple function rather than a
-  // NamedExoticComponent, because that's the only way we can fit in a type
-  // parameter
-) as <T>(props: Props<T>) => JSX.Element;
+);
+
+TileWrapper_.displayName = "TileWrapper";
+
+/**
+ * A wrapper around a tile in a video grid. This component exists to decouple
+ * child components from the grid.
+ */
+// We pretend this component is a simple function rather than a
+// NamedExoticComponent, because that's the only way we can fit in a type
+// parameter
+export const TileWrapper = TileWrapper_ as <T>(props: Props<T>) => JSX.Element;

src/video-grid/VideoTile.tsx

@@ -281,3 +281,5 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
     );
   },
 );
+
+VideoTile.displayName = "VideoTile";