From d0d54b09ba54e63e64c7c7523538c5b6277c7985 Mon Sep 17 00:00:00 2001
From: 409 <409dev@protonmail.com>
Date: Wed, 16 Jul 2025 10:18:57 +0200
Subject: [PATCH] prettier tailwind class sorting

---
 frontend/.prettierrc                            |  3 ++-
 frontend/bun.lock                               |  3 +++
 frontend/components/DirectoryEntry.vue          |  4 ++--
 frontend/components/DirectoryList.vue           |  2 +-
 frontend/components/actions/UploadDialog.vue    |  4 ++--
 frontend/components/actions/UploadListEntry.vue | 14 +++++++-------
 frontend/layouts/default.vue                    |  8 ++++----
 frontend/package.json                           |  3 ++-
 frontend/pages/warrens/index.vue                |  4 ++--
 9 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 9c62dee..07add0b 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -3,5 +3,6 @@
     "tabWidth": 4,
     "trailingComma": "es5",
     "semi": true,
-    "singleQuote": true
+    "singleQuote": true,
+    "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/frontend/bun.lock b/frontend/bun.lock
index 77915f8..a73d497 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -34,6 +34,7 @@
         "@types/byte-size": "^8.1.2",
         "eslint-config-prettier": "^10.1.5",
         "prettier": "^3.6.2",
+        "prettier-plugin-tailwindcss": "^0.6.14",
       },
     },
   },
@@ -1532,6 +1533,8 @@
 
     "prettier": ["prettier@3.6.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ=="],
 
+    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.6.14", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-import-sort": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-style-order": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-import-sort", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-style-order", "prettier-plugin-svelte"] }, "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg=="],
+
     "pretty-bytes": ["pretty-bytes@6.1.1", "", {}, "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ=="],
 
     "process": ["process@0.11.10", "", {}, "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="],
diff --git a/frontend/components/DirectoryEntry.vue b/frontend/components/DirectoryEntry.vue
index c813989..42da8ef 100644
--- a/frontend/components/DirectoryEntry.vue
+++ b/frontend/components/DirectoryEntry.vue
@@ -43,7 +43,7 @@ async function openRenameDialog() {
             <NuxtLink
                 :to="joinPaths(route.path, entry.name)"
                 :class="[
-                    'flex flex-row gap-4 bg-accent/30 border-1 border-border px-4 py-2 rounded-md select-none w-52',
+                    'bg-accent/30 border-border flex w-52 flex-row gap-4 rounded-md border-1 px-4 py-2 select-none',
                     {
                         'pointer-events-none':
                             disabled || entry.fileType === 'file',
@@ -55,7 +55,7 @@ async function openRenameDialog() {
                 </div>
 
                 <div
-                    class="flex flex-col gap-0 leading-6 overflow-hidden truncate"
+                    class="flex flex-col gap-0 truncate overflow-hidden leading-6"
                 >
                     <span>{{ entry.name }}</span>
                     <NuxtTime
diff --git a/frontend/components/DirectoryList.vue b/frontend/components/DirectoryList.vue
index b1df74d..9a81b8c 100644
--- a/frontend/components/DirectoryList.vue
+++ b/frontend/components/DirectoryList.vue
@@ -13,7 +13,7 @@ const sortedEntries = computed(() =>
 </script>
 
 <template>
-    <ScrollArea class="w-full h-full">
+    <ScrollArea class="h-full w-full">
         <div class="flex flex-row flex-wrap gap-2">
             <DirectoryEntry
                 v-for="entry in sortedEntries"
diff --git a/frontend/components/actions/UploadDialog.vue b/frontend/components/actions/UploadDialog.vue
index dfe2eb2..4c66b2c 100644
--- a/frontend/components/actions/UploadDialog.vue
+++ b/frontend/components/actions/UploadDialog.vue
@@ -209,14 +209,14 @@ async function submit() {
             />
 
             <div
-                class="flex min-h-[280px] sm:min-h-[unset] sm:aspect-video w-full items-center justify-center rounded-xl border overflow-hidden"
+                class="flex min-h-[280px] w-full items-center justify-center overflow-hidden rounded-xl border sm:aspect-video sm:min-h-[unset]"
             >
                 <ScrollArea
                     v-if="uploadStore.files.length > 0"
                     class="h-full w-full"
                 >
                     <div
-                        class="flex h-full w-full flex-col items-stretch gap-2 text-left p-4"
+                        class="flex h-full w-full flex-col items-stretch gap-2 p-4 text-left"
                     >
                         <UploadListEntry
                             v-for="(file, i) in uploadStore.files"
diff --git a/frontend/components/actions/UploadListEntry.vue b/frontend/components/actions/UploadListEntry.vue
index 098c329..3f12c76 100644
--- a/frontend/components/actions/UploadListEntry.vue
+++ b/frontend/components/actions/UploadListEntry.vue
@@ -16,15 +16,15 @@ function createObjectUrl(file: File): string {
 
 <template>
     <div
-        class="flex border rounded-lg flex-row items-center justify-between gap-4 px-3 py-3"
+        class="flex flex-row items-center justify-between gap-4 rounded-lg border px-3 py-3"
     >
         <div
             :class="[
-                'rounded-md border overflow-hidden w-12 h-12 min-w-12 min-h-12 items-center justify-center flex',
+                'flex h-12 min-h-12 w-12 min-w-12 items-center justify-center overflow-hidden rounded-md border',
                 { 'p-2': !file.data.type.startsWith('image/') },
             ]"
         >
-            <div v-if="file.status === 'not_uploaded'" class="w-full h-full">
+            <div v-if="file.status === 'not_uploaded'" class="h-full w-full">
                 <img
                     v-if="file.data.type.startsWith('image/')"
                     :src="createObjectUrl(file.data)"
@@ -48,17 +48,17 @@ function createObjectUrl(file: File): string {
             />
             <Icon
                 v-else-if="file.status === 'failed'"
-                class="h-5 w-5 text-destructive-foreground"
+                class="text-destructive-foreground h-5 w-5"
                 name="lucide:circle-alert"
             />
         </div>
-        <div class="flex flex-col grow overflow-hidden">
-            <span class="font-medium truncate">{{ file.data.name }}</span>
+        <div class="flex grow flex-col overflow-hidden">
+            <span class="truncate font-medium">{{ file.data.name }}</span>
             <span class="text-muted-foreground"
                 >{{ byteSize(file.data.size) }}
             </span>
         </div>
-        <div class="flex flex-row gap-2 items-center">
+        <div class="flex flex-row items-center gap-2">
             <Button
                 variant="ghost"
                 size="icon"
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index dab97bd..47e9116 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -20,11 +20,11 @@ const breadcrumbs = computed(() => getBreadcrumbs(route.path));
 <template>
     <SidebarProvider>
         <AppSidebar />
-        <main class="w-full grow overflow-hidden flex flex-col">
+        <main class="flex w-full grow flex-col overflow-hidden">
             <header
-                class="h-16 flex items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+                class="flex h-16 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
             >
-                <div class="items-center flex gap-2 px-4 w-full">
+                <div class="flex w-full items-center gap-2 px-4">
                     <SidebarTrigger class="[&_svg]:size-4" />
                     <Separator orientation="vertical" class="mr-2 !h-4" />
                     <Breadcrumb>
@@ -76,7 +76,7 @@ const breadcrumbs = computed(() => getBreadcrumbs(route.path));
                                 <Icon name="lucide:upload" />
                                 <div
                                     v-if="uploadStore.progress != null"
-                                    class="w-1.5 h-1.5 rounded-full bg-primary absolute top-1 right-1 animate-pulse"
+                                    class="bg-primary absolute top-1 right-1 h-1.5 w-1.5 animate-pulse rounded-full"
                                 ></div>
                             </Button>
                         </UploadDialog>
diff --git a/frontend/package.json b/frontend/package.json
index 370cdf5..9189300 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,6 +40,7 @@
         "@nuxtjs/color-mode": "^3.5.2",
         "@types/byte-size": "^8.1.2",
         "eslint-config-prettier": "^10.1.5",
-        "prettier": "^3.6.2"
+        "prettier": "^3.6.2",
+        "prettier-plugin-tailwindcss": "^0.6.14"
     }
 }
diff --git a/frontend/pages/warrens/index.vue b/frontend/pages/warrens/index.vue
index 1954145..8d095c8 100644
--- a/frontend/pages/warrens/index.vue
+++ b/frontend/pages/warrens/index.vue
@@ -5,14 +5,14 @@ const store = useWarrenStore();
 </script>
 
 <template>
-    <ScrollArea class="w-full h-full">
+    <ScrollArea class="h-full w-full">
         <div class="flex flex-row gap-2">
             <NuxtLink
                 v-for="(warren, uuid) in store.warrens"
                 :key="uuid"
                 :to="`/warrens/${uuid}`"
             >
-                <Button class="w-44 h-12" variant="outline" size="lg">
+                <Button class="h-12 w-44" variant="outline" size="lg">
                     <Icon name="lucide:folder-root" />
                     <span clas="truncate">{{ warren.name }}</span>
                 </Button>