Improve image editing, allow null times

web/app/ui/input/image-list-input.tsx

@@ -0,0 +1,65 @@
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Collapse,
+  Group,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import { Dispatch, SetStateAction, useState } from "react";
+import SecureImage from "../display/secure-img";
+import { randomId } from "@mantine/hooks";
+import { IconMinus, IconPlus, IconTrash } from "@tabler/icons-react";
+
+export default function ImageListInput({
+  label,
+  imageIds,
+  setImageIds,
+  collapsible = false,
+  startCollapsed = true,
+}: {
+  label: string;
+  imageIds: string[];
+  setImageIds: Dispatch<SetStateAction<string[]>>;
+  collapsible?: boolean;
+  startCollapsed?: boolean;
+}) {
+  const [collapsed, setCollapsed] = useState(startCollapsed);
+  return (
+    <>
+      <Group gap="0">
+        <Text size="sm" fw={700} span>
+          {label}
+        </Text>
+
+        {collapsible ? (
+          <Tooltip label={collapsed ? "Expand" : "Collapse"}>
+            <ActionIcon
+              variant="transparent"
+              onClick={() => setCollapsed(!collapsed)}
+            >
+              {collapsed ? <IconPlus size="1rem" /> : <IconMinus size="1rem" />}
+            </ActionIcon>
+          </Tooltip>
+        ) : null}
+      </Group>
+      <Collapse in={!collapsed}>
+        <Group variant="column">
+          {imageIds.map((id) => (
+            <Card key={randomId()} padding="md" shadow="md" withBorder>
+              <SecureImage id={id} />
+              <Button
+                mt="md"
+                leftSection={<IconTrash />}
+                onClick={() => setImageIds(imageIds.filter((i) => i !== id))}
+              >
+                Remove
+              </Button>
+            </Card>
+          ))}
+        </Group>
+      </Collapse>
+    </>
+  );
+}