Fix dumb problem

src/components/Asset.tsx

@@ -1,5 +1,5 @@
 import { FiArrowDown, FiArrowUp, FiImage, FiMap, FiMic, FiTrash, FiUpload } from "solid-icons/fi";
-import { type Component, createSignal, createUniqueId, For, type JSX, Show } from "solid-js";
+import { type Component, createSignal, createUniqueId, For, type JSX, Show, createEffect } from "solid-js";
 
 import { useDB } from "../db";
 import { useProject } from "../hooks/Project";
@@ -11,6 +11,7 @@ import styles from "./Asset.module.css";
 export const Asset: Component<{
   id?: string,
   type: AssetType,
+  assetIdentity?: string,
   asset: string | undefined,
   onIdChange: (newId: string) => void,
   onDeleteClick?: () => void,
@@ -28,23 +29,26 @@ export const Asset: Component<{
 
   const assets = () => Object.keys(project()?.assets ?? {}).filter(a => project()?.assets[a]?.type === props.type);
 
-  let initialQuery: string;
-  if (project() != null && props.asset != null) {
-    // If the project is accessible when the component is constructed,
-    // we can make sure the initial query only contains props.asset if
-    // props.asset is actually a valid asset. This is useful behavior
-    // in the case that an asset is deleted, because it makes the asset
-    // field blank when it references an invalid (deleted) asset.
-    if (assets().includes(props.asset)) {
-      initialQuery = props.asset;
+  const [query, setQuery] = createSignal("");
+
+  createEffect(() => {
+    ((_) => {})(props.assetIdentity);
+
+    if (project() != null && props.asset != null) {
+      // If the project is accessible when the component is constructed,
+      // we can make sure the initial query only contains props.asset if
+      // props.asset is actually a valid asset. This is useful behavior
+      // in the case that an asset is deleted, because it makes the asset
+      // field blank when it references an invalid (deleted) asset.
+      if (assets().includes(props.asset)) {
+        setQuery(props.asset);
+      } else {
+        setQuery("");
+      }
     } else {
-      initialQuery = "";
+      setQuery(props.asset ?? "");
     }
-  } else {
-    initialQuery = props.asset ?? "";
-  }
-
-  const [query, setQuery] = createSignal(initialQuery);
+  });
 
   const handleQueryInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = async (event) => {
     const newQuery = event.currentTarget.value;

src/components/Gallery.tsx

@@ -6,7 +6,8 @@ import { Asset } from "./Asset";
 import styles from "./Gallery.module.css";
 
 export const Gallery: Component<{
-  id?: string | undefined,
+  id?: string,
+  valueIdentity?: string,
   value: GalleryModel,
   onChange: (newValue: GalleryModel) => void,
 }> = (props) => {
@@ -41,6 +42,7 @@ export const Gallery: Component<{
       <Index each={props.value}>
         {(asset, i) => (
           <Asset
+            assetIdentity={props.valueIdentity}
             asset={asset()}
             type="image"
             onIdChange={handleAssetIdChange(i)}

src/pages/project/TourEditorPanel.tsx

@@ -224,7 +224,7 @@ const MainPanel: Component<{ show: boolean, setPanel: Setter<Panel> }> = (props)
         </Field>
         <Field label="Gallery">
           {(id) => (
-            <Gallery id={id} value={tour()!.gallery} onChange={handleTourGalleryChange} />
+            <Gallery id={id} valueIdentity={tour()?.id} value={tour()!.gallery} onChange={handleTourGalleryChange} />
           )}
         </Field>
         <header classList={{ [styles.PointsHeader]: true, [styles.Pois]: currentTab() === "pois" }}>