fix(web): require button type (#9786)

web/src/lib/components/album-page/album-card-group.svelte

@@ -30,6 +30,7 @@
 {#if group}
   <div class="grid">
     <button
+      type="button"
       on:click={() => toggleAlbumGroupCollapsing(group.id)}
       class="w-fit mt-2 pt-2 pr-2 mb-2 dark:text-immich-dark-fg"
       aria-expanded={!isCollapsed}

web/src/lib/components/album-page/album-options.svelte

@@ -75,7 +75,7 @@
     <div class="py-2">
       <div class="text-gray text-sm mb-3">PEOPLE</div>
       <div class="p-2">
-        <button class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
+        <button type="button" class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
           <div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
             <div><Icon path={mdiPlus} size="25" /></div>
           </div>

web/src/lib/components/album-page/albums-table-header.svelte

@@ -16,6 +16,7 @@
 
 <th class="text-sm font-medium {option.columnStyle}">
   <button
+    type="button"
     class="rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
     on:click={handleSort}
   >

web/src/lib/components/album-page/albums-table.svelte

@@ -41,6 +41,7 @@
       {@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)}
       {@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'}
       <button
+        type="button"
         on:click={() => toggleAlbumGroupCollapsing(albumGroup.id)}
         class="flex w-full mt-4 rounded-md"
         aria-expanded={!isCollapsed}

web/src/lib/components/album-page/share-info-modal.svelte

@@ -141,6 +141,7 @@
               </div>
             {:else if user.id == currentUser?.id}
               <button
+                type="button"
                 on:click={() => (selectedRemoveUser = user)}
                 class="text-sm font-medium text-immich-primary transition-colors hover:text-immich-primary/75 dark:text-immich-dark-primary"
                 >Leave</button

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -122,7 +121,11 @@
         {#each users as user}
           {#if !Object.keys(selectedUsers).includes(user.id)}
             <div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
-              <button on:click={() => handleToggle(user)} class="flex w-full place-items-center gap-4 p-4">
+              <button
+                type="button"
+                on:click={() => handleToggle(user)}
+                class="flex w-full place-items-center gap-4 p-4"
+              >
                 <UserAvatar {user} size="md" />
                 <div class="text-left flex-grow">
                   <p class="text-immich-fg dark:text-immich-dark-fg">
@@ -160,6 +163,7 @@
 
   <div id="shared-buttons" class="mt-4 flex place-content-center place-items-center justify-around">
     <button
+      type="button"
       class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
       on:click={() => dispatch('share')}
     >
@@ -168,13 +172,13 @@
     </button>
 
     {#if sharedLinks.length}
-      <button
+      <a
+        href={AppRoute.SHARED_LINKS}
         class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
-        on:click={() => goto(AppRoute.SHARED_LINKS)}
       >
         <Icon path={mdiShareCircle} size={24} />
         <p class="text-sm">View links</p>
-      </button>
+      </a>
     {/if}
   </div>
 </FullScreenModal>