Improve image editing, allow null times

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

@@ -13,9 +13,9 @@ import {
   Text,
 } from "@mantine/core";
 import { IconPencil } from "@tabler/icons-react";
-import ListInput from "@/ui/input/list-input";
+import ImageListInput from "@/ui/input/image-list-input";
 import ImageUpload from "@/ui/input/image-upload";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useApi } from "@/util/api";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
@@ -66,18 +66,23 @@ export default function ImageLogItem({
         );
 
         if (!img_id) {
+          await queryClient.invalidateQueries({ queryKey: [id] });
           await queryClient.invalidateQueries({ queryKey: ["flights-list"] });
           throw new Error("Image upload failed");
         }
       }
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [id] });
-      queryClient.invalidateQueries({ queryKey: ["flights-list"] });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: [id] });
+      await queryClient.invalidateQueries({ queryKey: ["flights-list"] });
       closeEdit();
     },
   });
 
+  useEffect(() => {
+    setExistingImages(imageIds);
+  }, [imageIds]);
+
   return (
     <>
       <Modal
@@ -87,12 +92,6 @@ export default function ImageLogItem({
         centered
       >
         <Stack>
-          <ListInput
-            label="Existing Images"
-            value={existingImages}
-            setValue={setExistingImages}
-            canAdd={false}
-          />
           <ImageUpload
             value={newImages}
             setValue={setNewImages}
@@ -100,6 +99,13 @@ export default function ImageLogItem({
             mt="md"
             placeholder="Images"
           />
+          <ImageListInput
+            label="Existing Images"
+            imageIds={existingImages}
+            setImageIds={setExistingImages}
+            collapsible
+            startCollapsed
+          />
 
           <Group justify="flex-end">
             {updateValue.isPending ? <Loader /> : null}