Maintenance: Reactivate Prettier plugin for TailwindCSS.

.prettierrc.json

@@ -2,5 +2,6 @@
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

app/frontend/apps/desktop/components/CollapseButton/CollapseButton.vue

@@ -55,7 +55,7 @@ const parentGroupClass = computed(() => {
   <div>
     <CommonButton
       :class="[
-        { 'transition-opacity opacity-0': !isTouchDevice && parentGroupClass },
+        { 'opacity-0 transition-opacity': !isTouchDevice && parentGroupClass },
         'focus:opacity-100',
         parentGroupClass,
       ]"

app/frontend/apps/desktop/components/CommonBreadcrumb/CommonBreadcrumb.vue

@@ -38,7 +38,7 @@ const locale = useLocaleStore()
             locale.localeData?.dir === 'rtl' ? 'chevron-left' : 'chevron-right'
           "
           size="xs"
-          class="inline-flex mx-1"
+          class="mx-1 inline-flex"
         />
       </li>
     </ul>

app/frontend/apps/desktop/components/CommonButton/CommonButton.vue

@@ -151,7 +151,7 @@ const iconSizeClass = computed(() => {
 
 <template>
   <button
-    class="btn h-min min-h-min border-0 shadow-none font-normal flex-nowrap gap-x-2.5 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 dark:hover:outline-blue-900 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800"
+    class="btn h-min min-h-min flex-nowrap gap-x-2.5 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900"
     :class="[
       ...variantClasses,
       ...sizeClasses,

app/frontend/apps/desktop/components/CommonDivider/CommonDivider.vue

@@ -23,10 +23,10 @@ const props = withDefaults(defineProps<Props>(), {
     }"
   >
     <hr
-      class="bg-neutral-100 dark:bg-gray-900 border-0"
+      class="border-0 bg-neutral-100 dark:bg-gray-900"
       :class="{
-        'w-full h-px': props.orientation === 'horizontal',
-        'w-px h-full': props.orientation === 'vertical',
+        'h-px w-full': props.orientation === 'horizontal',
+        'h-full w-px': props.orientation === 'vertical',
       }"
     />
   </div>

app/frontend/apps/desktop/components/CommonInputSearch/CommonInputSearch.vue

@@ -68,7 +68,7 @@ export default {
 
 <template>
   <div
-    class="grow inline-flex justify-start items-center gap-1"
+    class="inline-flex grow items-center justify-start gap-1"
     :class="wrapperClass"
   >
     <CommonIcon
@@ -77,14 +77,14 @@ export default {
       name="search"
       decorative
     />
-    <div class="relative grow inline-flex overflow-clip">
+    <div class="relative inline-flex grow overflow-clip">
       <div class="grow">
         <input
           ref="filterInput"
           v-model="filter"
           v-bind="$attrs"
           :placeholder="i18n.t(placeholder)"
-          class="w-full min-w-16 text-black dark:text-white outline-none"
+          class="w-full min-w-16 text-black outline-none dark:text-white"
           :class="{
             'bg-blue-200 dark:bg-gray-700': !alternativeBackground,
             'bg-white dark:bg-gray-500': alternativeBackground,
@@ -98,7 +98,7 @@ export default {
       </div>
       <div
         v-if="suggestionVisiblePart?.length"
-        class="absolute top-0 flex whitespace-pre pointer-events-none"
+        class="pointer-events-none absolute top-0 flex whitespace-pre"
         data-test-id="suggestion"
       >
         <span class="invisible">{{ filter }}</span>
@@ -110,7 +110,7 @@ export default {
     <div class="flex shrink-0 items-center gap-1">
       <slot name="controls" />
       <CommonIcon
-        class="fill-stone-200 dark:fill-neutral-500 hover:fill-black dark:hover:fill-white focus-visible:outline focus-visible:rounded-sm focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800"
+        class="fill-stone-200 hover:fill-black focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
         :class="{
           invisible: !filter?.length,
         }"

app/frontend/apps/desktop/components/CommonLoader/CommonLoader.vue

@@ -23,7 +23,7 @@ export default {
   <div
     v-if="loading"
     v-bind="$attrs"
-    class="flex justify-center items-center"
+    class="flex items-center justify-center"
     role="status"
   >
     <CommonIcon

app/frontend/apps/desktop/components/CommonPopover/CommonPopover.vue

@@ -291,14 +291,14 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
         :id="id"
         ref="popoverElement"
         role="region"
-        class="popover fixed z-50 min-h-9 flex antialiased rounded-xl border border-neutral-100 dark:border-gray-900 bg-white dark:bg-gray-500"
+        class="popover fixed z-50 flex min-h-9 rounded-xl border border-neutral-100 bg-white antialiased dark:border-gray-900 dark:bg-gray-500"
         :style="popoverStyle"
         :aria-labelledby="owner?.id"
       >
         <div class="overflow-y-auto"><slot /></div>
         <div
           v-if="!hideArrow"
-          class="absolute -z-10 w-[22px] h-[22px] -rotate-45 bg-white dark:bg-gray-500 transform border border-neutral-100 dark:border-gray-900"
+          class="absolute -z-10 h-[22px] w-[22px] -rotate-45 transform border border-neutral-100 bg-white dark:border-gray-900 dark:bg-gray-500"
           :class="arrowPlacementClasses"
         />
       </div>

app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenu.vue

@@ -54,7 +54,7 @@ const onClickItem = (event: MouseEvent, item: MenuItem) => {
 </script>
 
 <template>
-  <section class="flex flex-col gap-0.5 min-w-58">
+  <section class="min-w-58 flex flex-col gap-0.5">
     <div v-if="showHeaderLabel" role="heading" class="p-2 leading-3">
       <slot name="header"
         ><CommonLabel
@@ -71,7 +71,7 @@ const onClickItem = (event: MouseEvent, item: MenuItem) => {
           <template v-for="item in availableItems" :key="item.key">
             <li
               role="menuitem"
-              class="group flex items-center justify-between hover:bg-blue-600 dark:hover:bg-blue-900 last:rounded-b-[10px] focus-within:bg-blue-800 dark:hover:focus-within:bg-blue-800 hover:focus-within:bg-blue-800 focus-within:text-white"
+              class="group flex items-center justify-between last:rounded-b-[10px] focus-within:bg-blue-800 focus-within:text-white hover:bg-blue-600 hover:focus-within:bg-blue-800 dark:hover:bg-blue-900 dark:hover:focus-within:bg-blue-800"
               :class="{
                 'first:rounded-t-[10px]': !showHeaderLabel,
                 'border-t border-neutral-100 dark:border-gray-900':
@@ -81,7 +81,7 @@ const onClickItem = (event: MouseEvent, item: MenuItem) => {
               <slot :name="`item-${item.key}`" v-bind="item">
                 <component
                   :is="item.component || CommonPopoverMenuItem"
-                  class="grow flex p-2.5"
+                  class="flex grow p-2.5"
                   :label="item.label"
                   :link="item.link"
                   :icon="item.icon"

app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenuItem.vue

@@ -17,11 +17,11 @@ defineProps<Props>()
     :is="link ? 'CommonLink' : 'button'"
     :link="link"
     :external="link && linkExternal"
-    class="block leading-4 hover:no-underline cursor-pointer focus-visible:!outline-none"
+    class="block cursor-pointer leading-4 hover:no-underline focus-visible:!outline-none"
     data-test-id="popover-menu-item"
   >
     <CommonLabel
-      class="gap-2 group-hover:text-black dark:group-hover:text-white group-focus-within:text-white group-hover:group-focus-within:text-white"
+      class="gap-2 group-focus-within:text-white group-hover:text-black group-hover:group-focus-within:text-white dark:group-hover:text-white"
       :prefix-icon="icon"
       icon-color="text-stone-200 dark:text-neutral-500 group-hover:text-black dark:group-hover:text-white group-focus-within:text-white group-hover:group-focus-within:text-white"
     >