changed to Svelte 5 syntax

src/lib/components/CommentBox.svelte

@@ -364,12 +364,12 @@
 <div class="w-full space-y-4">
   <div class="flex flex-wrap gap-2">
     {#each markupButtons as button}
-      <Button size="xs" on:click={button.action}>{button.label}</Button>
+      <Button size="xs" onclick={button.action}>{button.label}</Button>
     {/each}
-    <Button size="xs" color="alternative" on:click={removeFormatting}
+    <Button size="xs" color="alternative" onclick={removeFormatting}
       >Remove Formatting</Button
     >
-    <Button size="xs" color="alternative" on:click={clearForm}>Clear</Button>
+    <Button size="xs" color="alternative" onclick={clearForm}>Clear</Button>
   </div>
 
   <!-- Mention Modal -->
@@ -519,12 +519,12 @@
       class="mb-4"
     />
     <div class="flex justify-end gap-2">
-      <Button size="xs" color="primary" on:click={insertWikilink}>Insert</Button
+      <Button size="xs" color="primary" onclick={insertWikilink}>Insert</Button
       >
       <Button
         size="xs"
         color="alternative"
-        on:click={() => {
+        onclick={() => {
           showWikilinkModal = false;
         }}>Cancel</Button
       >
@@ -552,7 +552,7 @@
     <Alert color="red" dismissable>
       {error}
       {#if showOtherRelays}
-        <Button size="xs" class="mt-2" on:click={() => handleSubmit(true)}
+        <Button size="xs" class="mt-2" onclick={() => handleSubmit(true)}
           >Try Other Relays</Button
         >
       {/if}
@@ -560,7 +560,7 @@
         <Button
           size="xs"
           class="mt-2"
-          on:click={() => handleSubmit(false, true)}>Try Fallback Relays</Button
+          onclick={() => handleSubmit(false, true)}>Try Fallback Relays</Button
         >
       {/if}
     </Alert>
@@ -604,7 +604,7 @@
       </div>
     {/if}
     <Button
-      on:click={() => handleSubmit()}
+      onclick={() => handleSubmit()}
       disabled={isSubmitting || !content.trim() || !$userPubkey}
       class="w-full md:w-auto"
     >

src/lib/components/RelayActions.svelte

@@ -73,7 +73,7 @@
 </script>
 
 <div class="mt-4 flex flex-wrap gap-2">
-  <Button on:click={openRelayModal} class="flex items-center">
+  <Button onclick={openRelayModal} class="flex items-center">
     {@html searchIcon}
     Where can I find this event?
   </Button>

src/lib/components/ZettelEditor.svelte

@@ -187,7 +187,7 @@ Note content here...
     <Button
       color="light"
       size="sm"
-      on:click={togglePreview}
+      onclick={togglePreview}
       class="flex items-center space-x-1"
       disabled={hasPublicationHeader}
     >

src/lib/components/publications/Publication.svelte

@@ -249,7 +249,7 @@
       {#if isLoading}
         <Button disabled color="primary">Loading...</Button>
       {:else if !isDone}
-        <Button color="primary" on:click={() => loadMore(1)}>Show More</Button>
+        <Button color="primary" onclick={() => loadMore(1)}>Show More</Button>
       {:else}
         <p class="text-gray-500 dark:text-gray-400">
           You've reached the end of the publication.

src/routes/[...catchall]/+page.svelte

@@ -11,13 +11,13 @@
     >The page you are looking for does not exist or has been moved.</P
   >
   <div class="flex space-x-4">
-    <Button class="btn-leather !w-fit" on:click={() => goto("/")}
+    <Button class="btn-leather !w-fit" onclick={() => goto("/")}
       >Return to Home</Button
     >
     <Button
       class="btn-leather !w-fit"
       outline
-      on:click={() => window.history.back()}>Go Back</Button
+      onclick={() => window.history.back()}>Go Back</Button
     >
   </div>
 </div>

src/routes/my-notes/+page.svelte

@@ -183,7 +183,7 @@
             {selectedTagTypes.has(type)
             ? 'border-2 border-amber-800'
             : 'border border-amber-200'}"
-          on:click={() => toggleTagType(type)}
+          onclick={() => toggleTagType(type)}
         >
           {#if type.length === 1}
             <span class="text-amber-400 font-mono">{type}</span>
@@ -200,7 +200,7 @@
       {#if tagsToShow.length > 0}
         <button
           class="ml-2 px-3 py-1 rounded-full text-xs font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
-          on:click={clearTagFilter}
+          onclick={clearTagFilter}
           disabled={tagFilter.size === 0}
         >
           Clear Tag Filter
@@ -215,7 +215,7 @@
             {tagFilter.has(tag)
             ? 'border-2 border-amber-800'
             : 'border border-amber-200'}"
-          on:click={() => toggleTag(tag)}
+          onclick={() => toggleTag(tag)}
         >
           <span>{tag}</span>
         </button>
@@ -240,7 +240,7 @@
               <div class="font-semibold text-lg truncate flex-1 mr-2">{getTitle(event)}</div>
               <button
                 class="flex-shrink-0 px-2 py-1 text-xs rounded bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
-                on:click={() => toggleTags(event.id)}
+                onclick={() => toggleTags(event.id)}
                 aria-label="Show tags"
               >
                 {showTags[event.id] ? "Hide Tags" : "Show Tags"}

src/routes/new/compose/+page.svelte

@@ -146,7 +146,7 @@
 
     <!-- Publish Button -->
     <Button
-      on:click={handlePublish}
+      onclick={handlePublish}
       disabled={isPublishing || !content.trim()}
       class="w-full"
     >

src/routes/new/edit/+page.svelte

@@ -71,10 +71,10 @@
           bind:value={editorText}
         >
           <Toolbar slot="header" embedded>
-            <ToolbarButton name="Preview" on:click={showPreview}>
+            <ToolbarButton name="Preview" onclick={showPreview}>
               <EyeSolid class="w-6 h-6" />
             </ToolbarButton>
-            <ToolbarButton name="Review" slot="end" on:click={prepareReview}>
+            <ToolbarButton name="Review" slot="end" onclick={prepareReview}>
               <PaperPlaneOutline class="w=6 h-6 rotate-90" />
             </ToolbarButton>
           </Toolbar>
@@ -87,10 +87,10 @@
         <Toolbar
           class="toolbar-leather rounded-b-none bg-gray-200 dark:bg-gray-800"
         >
-          <ToolbarButton name="Edit" on:click={hidePreview}>
+          <ToolbarButton name="Edit" onclick={hidePreview}>
             <CodeOutline class="w-6 h-6" />
           </ToolbarButton>
-          <ToolbarButton name="Review" slot="end" on:click={prepareReview}>
+          <ToolbarButton name="Review" slot="end" onclick={prepareReview}>
             <PaperPlaneOutline class="w=6 h-6 rotate-90" />
           </ToolbarButton>
         </Toolbar>