fixing issues

site/src/components/EditDrawer.svelte

@@ -5,7 +5,7 @@
   export let activityId: string;
   export let editUrl: string;
 
-  const dispatch = createEventDispatcher<{ saved: { title: string; description: string } }>();
+  const dispatch = createEventDispatcher<{ saved: { title: string; description: string }; close: void }>();
 
   const SPORTS: Sport[] = ['cycling', 'running', 'hiking', 'walking', 'swimming', 'skiing', 'other'];
   const STAT_PANELS = [
@@ -102,8 +102,9 @@
   async function deleteImage(filename: string) {
     await fetch(`${api}/images/${encodeURIComponent(filename)}`, { method: 'DELETE' });
     images = images.filter(f => f !== filename);
-    // Remove the markdown reference too
-    description = description.replace(new RegExp(`!\\[[^\\]]*\\]\\(${filename}\\)`, 'g'), '').trim();
+    // Remove the markdown reference — escape filename before using in regex
+    const escaped = filename.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    description = description.replace(new RegExp(`!\\[[^\\]]*\\]\\(${escaped}\\)`, 'g'), '').trim();
   }
 
   function toggleStat(key: string) {
@@ -118,7 +119,7 @@
 <!-- Backdrop -->
 <div
   class="fixed inset-0 bg-black/60 z-40 backdrop-blur-sm"
-  on:click={() => dispatch('saved', { title, description })}
+  on:click={() => dispatch('close')}
   role="presentation"
 ></div>
 
@@ -129,7 +130,7 @@
     <h2 class="font-semibold text-white text-sm">Edit activity</h2>
     <button
       class="text-zinc-500 hover:text-white transition-colors text-xl leading-none"
-      on:click={() => dispatch('saved', { title, description })}
+      on:click={() => dispatch('close')}
       aria-label="Close"
     >×</button>
   </div>