chore(web): sort tailwindcss class automatically (#3330)

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

@@ -60,7 +60,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="group hover:cursor-pointer mt-4 border-[3px] border-transparent dark:hover:border-immich-dark-primary/75 hover:border-immich-primary/75 rounded-3xl p-5 relative"
+  class="group relative mt-4 rounded-3xl border-[3px] border-transparent p-5 hover:cursor-pointer hover:border-immich-primary/75 dark:hover:border-immich-dark-primary/75"
   on:click={() => dispatchClick('click', album)}
   on:keydown={() => dispatchClick('click', album)}
   data-testid="album-card"
@@ -69,7 +69,7 @@
   {#if showContextMenu}
     <div
       id={`icon-${album.id}`}
-      class="absolute top-6 right-6 z-10"
+      class="absolute right-6 top-6 z-10"
       on:click|stopPropagation|preventDefault={showAlbumContextMenu}
       data-testid="context-button-parent"
     >
@@ -79,16 +79,16 @@
     </div>
   {/if}
 
-  <div class={`aspect-square relative`}>
+  <div class={`relative aspect-square`}>
     <img
       src={imageData}
       alt={album.id}
-      class={`object-cover h-full w-full transition-all z-0 rounded-3xl duration-300 hover:shadow-lg`}
+      class={`z-0 h-full w-full rounded-3xl object-cover transition-all duration-300 hover:shadow-lg`}
       data-testid="album-image"
       draggable="false"
     />
     <div
-      class="w-full h-full absolute top-0 rounded-3xl {isSharingView
+      class="absolute top-0 h-full w-full rounded-3xl {isSharingView
         ? 'group-hover:bg-yellow-800/25'
         : 'group-hover:bg-indigo-800/25'} "
     />
@@ -96,14 +96,14 @@
 
   <div class="mt-4">
     <p
-      class="text-xl font-semibold dark:text-immich-dark-primary text-immich-primary w-full truncate"
+      class="w-full truncate text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
       data-testid="album-name"
       title={album.albumName}
     >
       {album.albumName}
     </p>
 
-    <span class="text-sm flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
+    <span class="flex gap-2 text-sm dark:text-immich-dark-fg" data-testid="album-details">
       {#if showItemCount}
         <p>
           {album.assetCount.toLocaleString($locale)}

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

@@ -298,7 +298,7 @@
         {#if isPublicShared && !isOwned}
           <a
             data-sveltekit-preload-data="hover"
-            class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
+            class="ml-6 flex place-items-center gap-2 hover:cursor-pointer"
             href="https://immich.app"
           >
             <ImmichLogo height={30} width={30} />
@@ -377,7 +377,7 @@
     </ControlAppBar>
   {/if}
 
-  <section class="flex flex-col my-[160px] px-6 sm:px-12 md:px-24 lg:px-40">
+  <section class="my-[160px] flex flex-col px-6 sm:px-12 md:px-24 lg:px-40">
     <input
       on:keydown={(e) => {
         if (e.key == 'Enter') {
@@ -387,9 +387,9 @@
       }}
       on:focus={() => (isEditingTitle = true)}
       on:blur={() => (isEditingTitle = false)}
-      class={`transition-all text-6xl text-immich-primary dark:text-immich-dark-primary w-[99%] border-b-2 border-transparent outline-none ${
+      class={`w-[99%] border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary ${
         isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'
-      } focus:outline-none focus:border-b-2 focus:border-immich-primary dark:focus:border-immich-dark-primary bg-immich-bg dark:bg-immich-dark-bg dark:focus:bg-immich-dark-gray`}
+      } bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray`}
       type="text"
       bind:value={album.albumName}
       disabled={!isOwned}
@@ -397,14 +397,14 @@
     />
 
     {#if album.assetCount > 0}
-      <span class="flex gap-2 my-4 text-sm text-gray-500 font-medium" data-testid="album-details">
+      <span class="my-4 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
         <p class="">{getDateRange()}</p>
         <p>·</p>
         <p>{album.assetCount} items</p>
       </span>
     {/if}
     {#if album.shared}
-      <div class="flex my-6 gap-x-1">
+      <div class="my-6 flex gap-x-1">
         {#each album.sharedUsers as user (user.id)}
           <button on:click={() => (isShowShareInfoModal = true)}>
             <UserAvatar {user} size="md" autoColor />
@@ -415,7 +415,7 @@
           style:display={isOwned ? 'block' : 'none'}
           on:click={() => (isShowShareUserSelection = true)}
           title="Add more users"
-          class="h-12 w-12 border bg-white transition-colors hover:bg-gray-300 text-3xl flex place-items-center place-content-center rounded-full"
+          class="flex h-12 w-12 place-content-center place-items-center rounded-full border bg-white text-3xl transition-colors hover:bg-gray-300"
           >+</button
         >
       </div>
@@ -430,7 +430,7 @@
           <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
           <button
             on:click={() => (isShowAssetSelection = true)}
-            class="w-full py-8 border bg-immich-bg dark:bg-immich-dark-gray text-immich-fg dark:text-immich-dark-fg dark:hover:text-immich-dark-primary rounded-md mt-5 flex place-items-center gap-6 px-8 transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none"
+            class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
           >
             <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
             <span class="text-lg">Select photos</span>

web/src/lib/components/album-page/asset-selection.svelte

@@ -35,7 +35,7 @@
 
 <section
   transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-  class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
+  class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
 >
   <ControlAppBar
     on:close-button-click={() => {
@@ -56,14 +56,14 @@
     <svelte:fragment slot="trailing">
       <button
         on:click={handleSelectFromComputerClicked}
-        class="text-immich-primary dark:text-immich-dark-primary text-sm hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/25 transition-all px-6 py-2 rounded-lg font-medium"
+        class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
       >
         Select from computer
       </button>
       <Button size="sm" rounded="lg" disabled={$selectedAssets.size === 0} on:click={addSelectedAssets}>Done</Button>
     </svelte:fragment>
   </ControlAppBar>
-  <section class="pt-[100px] pl-[70px] grid h-screen bg-immich-bg dark:bg-immich-dark-bg">
+  <section class="grid h-screen bg-immich-bg pl-[70px] pt-[100px] dark:bg-immich-dark-bg">
     <AssetGrid isAlbumSelectionMode={true} />
   </section>
 </section>

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

@@ -73,19 +73,19 @@
 {#if !selectedRemoveUser}
   <BaseModal on:close={() => dispatch('close')}>
     <svelte:fragment slot="title">
-      <span class="flex gap-2 place-items-center">
+      <span class="flex place-items-center gap-2">
         <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Options</p>
       </span>
     </svelte:fragment>
 
-    <section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
+    <section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
       {#each album.sharedUsers as user}
         <div
-          class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
+          class="flex w-full place-items-center justify-between gap-4 p-5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
         >
-          <div class="flex gap-4 place-items-center">
+          <div class="flex place-items-center gap-4">
             <UserAvatar {user} size="md" autoColor />
-            <p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
+            <p class="text-sm font-medium">{user.firstName} {user.lastName}</p>
           </div>
 
           <div id={`icon-${user.id}`} class="flex place-items-center">
@@ -108,7 +108,7 @@
             {:else if user.id == currentUser?.id}
               <button
                 on:click={() => (selectedRemoveUser = user)}
-                class="text-sm text-immich-primary dark:text-immich-dark-primary font-medium transition-colors hover:text-immich-primary/75"
+                class="text-sm font-medium text-immich-primary transition-colors hover:text-immich-primary/75 dark:text-immich-dark-primary"
                 >Leave</button
               >
             {/if}

web/src/lib/components/album-page/thumbnail-selection.svelte

@@ -23,7 +23,7 @@
 
 <section
   transition:fly={{ y: 500, duration: 100, easing: quintOut }}
-  class="absolute top-0 left-0 w-full h-full py-[160px] bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
+  class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg py-[160px] dark:bg-immich-dark-bg"
 >
   <ControlAppBar on:close-button-click={() => dispatch('close')}>
     <svelte:fragment slot="leading">
@@ -42,7 +42,7 @@
     </svelte:fragment>
   </ControlAppBar>
 
-  <section class="flex flex-wrap gap-14 px-20 overflow-y-auto">
+  <section class="flex flex-wrap gap-14 overflow-y-auto px-20">
     <!-- Image grid -->
     <div class="flex flex-wrap gap-[2px]">
       {#each album.assets as asset}

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

@@ -55,22 +55,22 @@
 
 <BaseModal on:close={() => dispatch('close')}>
   <svelte:fragment slot="title">
-    <span class="flex gap-2 place-items-center">
+    <span class="flex place-items-center gap-2">
       <ImmichLogo width={24} />
       <p class="font-medium">Invite to album</p>
     </span>
   </svelte:fragment>
 
-  <div class="max-h-[300px] overflow-y-auto immich-scrollbar">
+  <div class="immich-scrollbar max-h-[300px] overflow-y-auto">
     {#if selectedUsers.length > 0}
-      <div class="flex gap-4 py-2 px-5 overflow-x-auto place-items-center mb-2">
+      <div class="mb-2 flex place-items-center gap-4 overflow-x-auto px-5 py-2">
         <p class="font-medium">To</p>
 
         {#each selectedUsers as user}
           {#key user.id}
             <button
               on:click={() => deselectUser(user)}
-              class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+              class="flex place-items-center gap-1 rounded-full border border-gray-400 p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <UserAvatar {user} size="sm" autoColor />
               <p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
@@ -81,17 +81,17 @@
     {/if}
 
     {#if users.length > 0}
-      <p class="text-xs font-medium px-5">SUGGESTIONS</p>
+      <p class="px-5 text-xs font-medium">SUGGESTIONS</p>
 
       <div class="my-4">
         {#each users as user}
           <button
             on:click={() => selectUser(user)}
-            class="w-full flex place-items-center gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
+            class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
           >
             {#if selectedUsers.includes(user)}
               <span
-                class="bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-bg rounded-full w-12 h-12 border flex place-items-center place-content-center text-3xl dark:border-immich-dark-gray"
+                class="flex h-12 w-12 place-content-center place-items-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
                 >✓</span
               >
             {:else}
@@ -111,7 +111,7 @@
         {/each}
       </div>
     {:else}
-      <p class="text-sm p-5">
+      <p class="p-5 text-sm">
         Looks like you have shared this album with all users or you don't have any user to share with.
       </p>
     {/if}
@@ -124,9 +124,9 @@
   </div>
 
   <hr />
-  <div id="shared-buttons" class="flex my-4 justify-around place-items-center place-content-center">
+  <div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around">
     <button
-      class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
+      class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
       on:click={onSharedLinkClick}
     >
       <Link size={24} />
@@ -135,7 +135,7 @@
 
     {#if sharedLinks.length}
       <button
-        class="flex flex-col gap-2 place-items-center place-content-center hover:cursor-pointer"
+        class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
         on:click={() => goto(AppRoute.SHARED_LINKS)}
       >
         <ShareCircle size={24} />