Finish flight information display

web/app/ui/display/collapsible-fieldset.tsx

@@ -0,0 +1,35 @@
+import { ActionIcon, Collapse, Fieldset, Group, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconMinus, IconPlus } from "@tabler/icons-react";
+import { ReactNode } from "react";
+
+export default function CollapsibleFieldset({
+  children,
+  legend,
+  w = "",
+  mt = "",
+}: {
+  children: ReactNode;
+  legend?: string;
+  w?: string;
+  mt?: string;
+}) {
+  const [open, { toggle }] = useDisclosure(true);
+
+  return (
+    <Fieldset
+      legend={
+        <Group gap="xs">
+          {legend ? <Text>{legend}</Text> : null}
+          <ActionIcon variant="transparent" onClick={toggle} color="gray">
+            {open ? <IconMinus /> : <IconPlus />}
+          </ActionIcon>
+        </Group>
+      }
+      w={w}
+      mt={mt}
+    >
+      <Collapse in={open}>{children}</Collapse>
+    </Fieldset>
+  );
+}

web/app/ui/display/log-item.tsx

@@ -1,4 +1,5 @@
-import { Card, Group, Stack, Text } from "@mantine/core";
+import { Badge, Card, Group, Stack, Text } from "@mantine/core";
+import { randomId } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 
 export function LogItem({
@@ -25,36 +26,48 @@ export function VerticalLogItem({
   hours = false,
   time = false,
   date = false,
+  list = false,
 }: {
   label: string;
-  content: string | null;
+  content: string | string[] | null;
   decimal?: number;
   hours?: boolean;
   time?: boolean;
   date?: boolean;
+  list?: boolean;
 }) {
   if (content === null) content = "";
   if (decimal > 0) content = Number(content).toFixed(decimal);
   if (hours) content = Number(content).toFixed(1);
   if (time) {
-    const time = content.split("T")[1].split(":");
+    const time = (content as string).split("T")[1].split(":");
     content = `${time[0]}:${time[1]}`;
   }
-  if (date) content = content.split("T")[0];
+  if (date) content = (content as string).split("T")[0];
 
   return (
-    <Card>
+    <Card shadow="sm" withBorder>
       <Stack gap="xs" align="center" h="100%">
         <Text c="dimmed" style={{ textalign: "center" }}>
           {label}
         </Text>
-        <Text
-          size="lg"
-          style={{ textalign: "center" }}
-          c={content === "" ? "dimmed" : ""}
-        >
-          {content === "" ? <IconX /> : content}
-        </Text>
+        {list ? (
+          <Group>
+            {(content as string[]).map((item) => (
+              <Badge key={randomId()} size="lg">
+                {item}
+              </Badge>
+            ))}
+          </Group>
+        ) : (
+          <Text
+            size="lg"
+            style={{ textalign: "center" }}
+            c={content === "" ? "dimmed" : ""}
+          >
+            {content === "" ? <IconX /> : content}
+          </Text>
+        )}
       </Stack>
     </Card>
   );