chore: migrate away from event dispatcher (#12820)

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -674,8 +674,8 @@
               disabled={!album.isActivityEnabled}
               {isLiked}
               numberOfComments={$numberOfComments}
-              on:favorite={handleFavorite}
-              on:openActivityTab={handleOpenAndCloseActivityTab}
+              onFavorite={handleFavorite}
+              onOpenActivityTab={handleOpenAndCloseActivityTab}
             />
           </div>
         {/if}
@@ -697,10 +697,10 @@
           albumId={album.id}
           {isLiked}
           bind:reactions
-          on:addComment={() => updateNumberOfComments(1)}
-          on:deleteComment={() => updateNumberOfComments(-1)}
-          on:deleteLike={() => (isLiked = null)}
-          on:close={handleOpenAndCloseActivityTab}
+          onAddComment={() => updateNumberOfComments(1)}
+          onDeleteComment={() => updateNumberOfComments(-1)}
+          onDeleteLike={() => (isLiked = null)}
+          onClose={handleOpenAndCloseActivityTab}
         />
       </div>
     </div>
@@ -709,8 +709,8 @@
 {#if viewMode === ViewMode.SELECT_USERS}
   <UserSelectionModal
     {album}
-    on:select={({ detail: users }) => handleAddUsers(users)}
-    on:share={() => (viewMode = ViewMode.LINK_SHARING)}
+    onSelect={handleAddUsers}
+    onShare={() => (viewMode = ViewMode.LINK_SHARING)}
     onClose={() => (viewMode = ViewMode.VIEW)}
   />
 {/if}
@@ -723,8 +723,8 @@
   <ShareInfoModal
     onClose={() => (viewMode = ViewMode.VIEW)}
     {album}
-    on:remove={({ detail: userId }) => handleRemoveUser(userId)}
-    on:refreshAlbum={refreshAlbum}
+    onRemove={handleRemoveUser}
+    onRefreshAlbum={refreshAlbum}
   />
 {/if}
 
@@ -737,9 +737,9 @@
       albumOrder = order;
       await setModeToView();
     }}
-    on:close={() => (viewMode = ViewMode.VIEW)}
-    on:toggleEnableActivity={handleToggleEnableActivity}
-    on:showSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}
+    onClose={() => (viewMode = ViewMode.VIEW)}
+    onToggleEnabledActivity={handleToggleEnableActivity}
+    onShowSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}
   />
 {/if}
 

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -122,9 +122,9 @@
         <AssetViewer
           asset={$viewingAsset}
           showNavigation={viewingAssets.length > 1}
-          on:next={navigateNext}
-          on:previous={navigatePrevious}
-          on:close={() => {
+          onNext={navigateNext}
+          onPrevious={navigatePrevious}
+          onClose={() => {
             assetViewingStore.showAssetViewer(false);
             handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
           }}
@@ -137,11 +137,11 @@
   {#if showSettingsModal}
     <MapSettingsModal
       settings={{ ...$mapSettings }}
-      on:close={() => (showSettingsModal = false)}
-      on:save={async ({ detail }) => {
-        const shouldUpdate = !isEqual(omit(detail, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
+      onClose={() => (showSettingsModal = false)}
+      onSave={async (settings) => {
+        const shouldUpdate = !isEqual(omit(settings, 'allowDarkMode'), omit($mapSettings, 'allowDarkMode'));
         showSettingsModal = false;
-        $mapSettings = detail;
+        $mapSettings = settings;
 
         if (shouldUpdate) {
           mapMarkers = await loadMapMarkers();

web/src/routes/(user)/people/+page.svelte

@@ -302,9 +302,9 @@
     {personMerge1}
     {personMerge2}
     {potentialMergePeople}
-    on:close={() => (showMergeModal = false)}
-    on:reject={() => changeName()}
-    on:confirm={(event) => handleMergeSamePerson(event.detail)}
+    onClose={() => (showMergeModal = false)}
+    onReject={changeName}
+    onConfirm={handleMergeSamePerson}
   />
 {/if}
 
@@ -349,10 +349,10 @@
       <PeopleCard
         {person}
         preload={index < 20}
-        on:change-name={() => handleChangeName(person)}
-        on:set-birth-date={() => handleSetBirthDate(person)}
-        on:merge-people={() => handleMergePeople(person)}
-        on:hide-person={() => handleHidePerson(person)}
+        onChangeName={() => handleChangeName(person)}
+        onSetBirthDate={() => handleSetBirthDate(person)}
+        onMergePeople={() => handleMergePeople(person)}
+        onHidePerson={() => handleHidePerson(person)}
       />
     </PeopleInfiniteScroll>
   {:else}
@@ -397,8 +397,8 @@
   {#if showSetBirthDateModal}
     <SetBirthDateModal
       birthDate={edittingPerson?.birthDate ?? ''}
-      on:close={() => (showSetBirthDateModal = false)}
-      on:updated={(event) => submitBirthDateChange(event.detail)}
+      onClose={() => (showSetBirthDateModal = false)}
+      onUpdate={submitBirthDateChange}
     />
   {/if}
 </UserPageLayout>

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -347,8 +347,8 @@
   <UnMergeFaceSelector
     assetIds={[...$selectedAssets].map((a) => a.id)}
     personAssets={person}
-    on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
-    on:confirm={handleUnmerge}
+    onClose={() => (viewMode = ViewMode.VIEW_ASSETS)}
+    onConfirm={handleUnmerge}
   />
 {/if}
 
@@ -357,22 +357,22 @@
     {personMerge1}
     {personMerge2}
     {potentialMergePeople}
-    on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
-    on:reject={() => changeName()}
-    on:confirm={(event) => handleMergeSamePerson(event.detail)}
+    onClose={() => (viewMode = ViewMode.VIEW_ASSETS)}
+    onReject={changeName}
+    onConfirm={handleMergeSamePerson}
   />
 {/if}
 
 {#if viewMode === ViewMode.BIRTH_DATE}
   <SetBirthDateModal
     birthDate={person.birthDate ?? ''}
-    on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
-    on:updated={(event) => handleSetBirthDate(event.detail)}
+    onClose={() => (viewMode = ViewMode.VIEW_ASSETS)}
+    onUpdate={handleSetBirthDate}
   />
 {/if}
 
 {#if viewMode === ViewMode.MERGE_PEOPLE}
-  <MergeFaceSelector {person} on:back={handleGoBack} on:merge={({ detail }) => handleMerge(detail)} />
+  <MergeFaceSelector {person} onBack={handleGoBack} onMerge={handleMerge} />
 {/if}
 
 <header>
@@ -464,7 +464,7 @@
                 bind:suggestedPeople
                 name={person.name}
                 bind:isSearchingPeople
-                on:change={(event) => handleNameChange(event.detail)}
+                onChange={handleNameChange}
                 {thumbnailData}
               />
             {:else}