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

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

@@ -140,7 +140,7 @@
 {#if $isShowContextMenu}
   <ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu}>
     <MenuOption on:click={() => setAlbumToDelete()}>
-      <span class="flex place-items-center place-content-center gap-2">
+      <span class="flex place-content-center place-items-center gap-2">
         <DeleteOutline size="18" />
         <p>Delete album</p>
       </span>

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

@@ -34,10 +34,10 @@
   {#if hasPeople}
     <div class="mb-6 mt-2">
       <div class="flex justify-between">
-        <p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">People</p>
         <a
           href={AppRoute.PEOPLE}
-          class="font-medium text-sm pr-4 hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
+          class="pr-4 text-sm font-medium hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
           draggable="false">View All</a
         >
       </div>
@@ -51,7 +51,7 @@
               altText={person.name}
               widthStyle="100%"
             />
-            <p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
+            <p class="mt-2 text-ellipsis text-sm font-medium dark:text-white">{person.name}</p>
           </a>
         {/each}
       </div>
@@ -61,18 +61,18 @@
   {#if places.length > 0}
     <div class="mb-6 mt-2">
       <div>
-        <p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">Places</p>
       </div>
       <div class="flex flex-row flex-wrap gap-4">
         {#each places as item}
           <a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
             <div
-              class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
+              class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
             >
               <Thumbnail thumbnailSize={156} asset={item.data} readonly />
             </div>
             <span
-              class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+              class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
             >
               {item.value}
             </span>
@@ -85,18 +85,18 @@
   {#if things.length > 0}
     <div class="mb-6 mt-2">
       <div>
-        <p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">Things</p>
       </div>
       <div class="flex flex-row flex-wrap gap-4">
         {#each things as item}
           <a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
             <div
-              class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
+              class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
             >
               <Thumbnail thumbnailSize={156} asset={item.data} readonly />
             </div>
             <span
-              class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+              class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
             >
               {item.value}
             </span>
@@ -106,15 +106,15 @@
     </div>
   {/if}
 
-  <hr class="dark:border-immich-dark-gray mb-4" />
+  <hr class="mb-4 dark:border-immich-dark-gray" />
 
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
+  <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
     <div class="flex flex-col gap-6 dark:text-immich-dark-fg">
       <p class="text-sm">YOUR ACTIVITY</p>
       <div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
         <a
           href={AppRoute.FAVORITES}
-          class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+          class="flex w-full content-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
           draggable="false"
         >
           <HeartMultipleOutline size={24} />
@@ -122,7 +122,7 @@
         </a>
         <a
           href="/search?recent=true"
-          class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+          class="flex w-full content-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
           draggable="false"
         >
           <ClockOutline size={24} />
@@ -135,7 +135,7 @@
       <div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
         <a
           href="/search?type={AssetTypeEnum.Video}"
-          class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+          class="flex w-full items-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
         >
           <PlayCircleOutline size={24} />
           <span>Videos</span>
@@ -143,7 +143,7 @@
         <div>
           <a
             href="/search?motion=true"
-            class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+            class="flex w-full items-center gap-2 text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary"
           >
             <MotionPlayOutline size={24} />
             <span>Motion photos</span>

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

@@ -102,7 +102,7 @@
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-  <div class="h-full w-full isolate">
+  <div class="isolate h-full w-full">
     {#if leaflet}
       {@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
       <Map
@@ -129,7 +129,7 @@
         />
         <Control>
           <button
-            class="flex justify-center items-center bg-white text-black/70 w-8 h-8 font-bold rounded-sm border-2 border-black/20 hover:bg-gray-50 focus:bg-gray-50"
+            class="flex h-8 w-8 items-center justify-center rounded-sm border-2 border-black/20 bg-white font-bold text-black/70 hover:bg-gray-50 focus:bg-gray-50"
             title="Open map settings"
             on:click={() => (showSettingsModal = true)}
           >

web/src/routes/(user)/partners/[userId]/+page.svelte

@@ -21,7 +21,7 @@
   });
 </script>
 
-<main class="grid h-screen pt-18 bg-immich-bg dark:bg-immich-dark-bg">
+<main class="grid h-screen bg-immich-bg pt-18 dark:bg-immich-dark-bg">
   {#if $isMultiSelectStoreState}
     <AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
       <DownloadAction />

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

@@ -153,12 +153,12 @@
   {#if showChangeNameModal}
     <FullScreenModal on:clickOutside={() => (showChangeNameModal = false)}>
       <div
-        class="bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray dark:text-immich-dark-fg w-[500px] max-w-[95vw] rounded-3xl border p-4 py-8 shadow-sm"
+        class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
       >
         <div
-          class="text-immich-primary dark:text-immich-dark-primary flex flex-col place-content-center place-items-center gap-4 px-4"
+          class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
         >
-          <h1 class="text-immich-primary dark:text-immich-dark-primary text-2xl font-medium">Change name</h1>
+          <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Change name</h1>
         </div>
 
         <form on:submit|preventDefault={submitNameChange} autocomplete="off">

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

@@ -120,7 +120,7 @@
 {/if}
 
 <!-- Face information block -->
-<section class="pt-24 px-4 sm:px-6 flex place-items-center">
+<section class="flex place-items-center px-4 pt-24 sm:px-6">
   {#if isEditingName}
     <EditNameInput
       person={data.person}
@@ -145,9 +145,9 @@
       on:click={() => (isEditingName = true)}
     >
       {#if data.person.name}
-        <p class="font-medium py-2">{data.person.name}</p>
+        <p class="py-2 font-medium">{data.person.name}</p>
       {:else}
-        <p class="font-medium w-fit">Add a name</p>
+        <p class="w-fit font-medium">Add a name</p>
         <p class="text-sm text-gray-500 dark:text-immich-gray">Find them fast by name with search</p>
       {/if}
     </button>
@@ -156,8 +156,8 @@
 
 <!-- Gallery Block -->
 {#if showAssets}
-  <section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-    <section class="overflow-y-scroll relative immich-scrollbar">
+  <section class="relative mb-12 bg-immich-bg pt-8 dark:bg-immich-dark-bg sm:px-4">
+    <section class="immich-scrollbar relative overflow-y-scroll">
       <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
         <GalleryViewer assets={data.assets} viewFrom="search-page" showArchiveIcon={true} bind:selectedAssets />
       </section>

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

@@ -92,11 +92,11 @@
   {/if}
 </section>
 
-<section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-  <section class="overflow-y-auto relative immich-scrollbar">
+<section class="relative mb-12 bg-immich-bg pt-32 dark:bg-immich-dark-bg">
+  <section class="immich-scrollbar relative overflow-y-auto">
     {#if albums.length}
       <section>
-        <div class="text-4xl font-medium text-black/70 dark:text-white/80 ml-6">ALBUMS</div>
+        <div class="ml-6 text-4xl font-medium text-black/70 dark:text-white/80">ALBUMS</div>
         <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
           {#each albums as album (album.id)}
             <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
@@ -119,10 +119,10 @@
           />
         </div>
       {:else}
-        <div class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white">
+        <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
           <div class="flex flex-col content-center items-center text-center">
             <ImageOffOutline size="3.5em" />
-            <p class="font-medium text-3xl mt-5">No results</p>
+            <p class="mt-5 text-3xl font-medium">No results</p>
             <p class="text-base font-normal">Try a synonym or more general keyword</p>
           </div>
         </div>

web/src/routes/(user)/share/[key]/+error.svelte

@@ -2,6 +2,6 @@
   <title>Opps! Error - Immich</title>
 </svelte:head>
 
-<section class="w-screen h-screen flex place-items-center place-content-center">
-  <div class="p-20 text-4xl dark:text-immich-dark-primary text-immich-primary">Page not found :/</div>
+<section class="flex h-screen w-screen place-content-center place-items-center">
+  <div class="p-20 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</div>
 </section>

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

@@ -41,16 +41,16 @@
 <UserPageLayout user={data.user} title={data.meta.title}>
   <div class="flex" slot="buttons">
     <LinkButton on:click={createSharedAlbum}>
-      <div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
+      <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
         <PlusBoxOutline size="18" class="shrink-0" />
-        <span class="max-sm:text-xs leading-none">Create shared album</span>
+        <span class="leading-none max-sm:text-xs">Create shared album</span>
       </div>
     </LinkButton>
 
     <LinkButton on:click={() => goto(AppRoute.SHARED_LINKS)}>
-      <div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
+      <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
         <Link size="18" class="shrink-0" />
-        <span class="max-sm:text-xs leading-none">Shared links</span>
+        <span class="leading-none max-sm:text-xs">Shared links</span>
       </div>
     </LinkButton>
   </div>
@@ -59,14 +59,14 @@
     {#if data.partners.length > 0}
       <div class="mb-6 mt-2">
         <div>
-          <p class="mb-4 dark:text-immich-dark-fg font-medium">Partners</p>
+          <p class="mb-4 font-medium dark:text-immich-dark-fg">Partners</p>
         </div>
 
         <div class="flex flex-row flex-wrap gap-4">
           {#each data.partners as partner (partner.id)}
             <a
               href="/partners/{partner.id}"
-              class="flex rounded-lg gap-4 py-4 px-5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all"
+              class="flex gap-4 rounded-lg px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <UserAvatar user={partner} size="md" autoColor />
               <div class="text-left">
@@ -83,12 +83,12 @@
         </div>
       </div>
 
-      <hr class="dark:border-immich-dark-gray mb-4" />
+      <hr class="mb-4 dark:border-immich-dark-gray" />
     {/if}
 
     <div class="mb-6 mt-2">
       <div>
-        <p class="mb-4 dark:text-immich-dark-fg font-medium">Albums</p>
+        <p class="mb-4 font-medium dark:text-immich-dark-fg">Albums</p>
       </div>
 
       <div>
@@ -104,10 +104,10 @@
         <!-- Empty List -->
         {#if data.sharedAlbums.length === 0}
           <div
-            class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
+            class="m-auto mt-10 flex w-2/3 flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[500px]"
           >
             <img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
-            <p class="text-center text-immich-text-gray-500">
+            <p class="text-immich-text-gray-500 text-center">
               Create a shared album to share photos and videos with people in your network
             </p>
           </div>

web/src/routes/(user)/sharing/sharedlinks/+page.svelte

@@ -62,16 +62,16 @@
   <svelte:fragment slot="leading">Shared links</svelte:fragment>
 </ControlAppBar>
 
-<section class="flex flex-col pb-[120px] mt-[120px]">
-  <div class="w-[50%] m-auto mb-4 dark:text-immich-gray">
+<section class="mt-[120px] flex flex-col pb-[120px]">
+  <div class="m-auto mb-4 w-[50%] dark:text-immich-gray">
     <p>Manage shared links</p>
   </div>
   {#if sharedLinks.length === 0}
-    <div class="w-[50%] m-auto bg-gray-100 flex place-items-center place-content-center rounded-lg p-12">
+    <div class="m-auto flex w-[50%] place-content-center place-items-center rounded-lg bg-gray-100 p-12">
       <p>You don't have any shared links</p>
     </div>
   {:else}
-    <div class="flex flex-col w-[50%] m-auto">
+    <div class="m-auto flex w-[50%] flex-col">
       {#each sharedLinks as link (link.id)}
         <SharedLinkCard
           {link}

web/src/routes/(user)/user-settings/+page.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-  <section class="flex place-content-center mx-4">
+  <section class="mx-4 flex place-content-center">
     <div class="w-full max-w-3xl">
       <UserSettingsList user={data.user} />
     </div>