Use prettier-plugin-tailwindcss (#11373)

* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss

web/src/views/system/CameraMetrics.tsx

@@ -204,11 +204,11 @@ export default function CameraMetrics({
   }, [statsHistory]);
 
   return (
-    <div className="size-full mt-4 flex flex-col gap-3 overflow-y-auto">
-      <div className="text-muted-foreground text-sm font-medium">Overview</div>
+    <div className="mt-4 flex size-full flex-col gap-3 overflow-y-auto">
+      <div className="text-sm font-medium text-muted-foreground">Overview</div>
       <div className="grid grid-cols-1 md:grid-cols-3">
         {statsHistory.length != 0 ? (
-          <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+          <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
             <div className="mb-5">Frames / Detections</div>
             <CameraLineGraph
               graphId="overall-stats"
@@ -219,21 +219,21 @@ export default function CameraMetrics({
             />
           </div>
         ) : (
-          <Skeleton className="w-full rounded-lg md:rounded-2xl h-32" />
+          <Skeleton className="h-32 w-full rounded-lg md:rounded-2xl" />
         )}
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         {config &&
           Object.values(config.cameras).map((camera) => {
             if (camera.enabled) {
               return (
-                <div className="w-full flex flex-col gap-3">
-                  <div className="capitalize text-muted-foreground text-sm font-medium">
+                <div className="flex w-full flex-col gap-3">
+                  <div className="text-sm font-medium capitalize text-muted-foreground">
                     {camera.name.replaceAll("_", " ")}
                   </div>
-                  <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
+                  <div key={camera.name} className="grid gap-2 sm:grid-cols-2">
                     {Object.keys(cameraCpuSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+                      <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
                         <div className="mb-5">CPU</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-cpu`}
@@ -246,10 +246,10 @@ export default function CameraMetrics({
                         />
                       </div>
                     ) : (
-                      <Skeleton className="size-full aspect-video" />
+                      <Skeleton className="aspect-video size-full" />
                     )}
                     {Object.keys(cameraFpsSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+                      <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
                         <div className="mb-5">Frames / Detections</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-dps`}
@@ -262,7 +262,7 @@ export default function CameraMetrics({
                         />
                       </div>
                     ) : (
-                      <Skeleton className="size-full aspect-video" />
+                      <Skeleton className="aspect-video size-full" />
                     )}
                   </div>
                 </div>

web/src/views/system/GeneralMetrics.tsx

@@ -344,15 +344,15 @@ export default function GeneralMetrics({
     <>
       <VainfoDialog showVainfo={showVainfo} setShowVainfo={setShowVainfo} />
 
-      <div className="size-full mt-4 flex flex-col overflow-y-auto">
-        <div className="text-muted-foreground text-sm font-medium">
+      <div className="mt-4 flex size-full flex-col overflow-y-auto">
+        <div className="text-sm font-medium text-muted-foreground">
           Detectors
         </div>
         <div
-          className={`w-full mt-4 grid grid-cols-1 gap-2 ${detTempSeries == undefined ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}
+          className={`mt-4 grid w-full grid-cols-1 gap-2 ${detTempSeries == undefined ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}
         >
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+            <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
                 <ThresholdBarGraph
@@ -367,12 +367,12 @@ export default function GeneralMetrics({
               ))}
             </div>
           ) : (
-            <Skeleton className="w-full rounded-lg md:rounded-2xl aspect-video" />
+            <Skeleton className="aspect-video w-full rounded-lg md:rounded-2xl" />
           )}
           {statsHistory.length != 0 ? (
             <>
               {detTempSeries && (
-                <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+                <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
                   <div className="mb-5">Detector Temperature</div>
                   {detTempSeries.map((series) => (
                     <ThresholdBarGraph
@@ -389,10 +389,10 @@ export default function GeneralMetrics({
               )}
             </>
           ) : (
-            <Skeleton className="w-full aspect-video" />
+            <Skeleton className="aspect-video w-full" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+            <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
               <div className="mb-5">Detector CPU Usage</div>
               {detCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -407,10 +407,10 @@ export default function GeneralMetrics({
               ))}
             </div>
           ) : (
-            <Skeleton className="w-full aspect-video" />
+            <Skeleton className="aspect-video w-full" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+            <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
               <div className="mb-5">Detector Memory Usage</div>
               {detMemSeries.map((series) => (
                 <ThresholdBarGraph
@@ -425,14 +425,14 @@ export default function GeneralMetrics({
               ))}
             </div>
           ) : (
-            <Skeleton className="w-full aspect-video" />
+            <Skeleton className="aspect-video w-full" />
           )}
         </div>
 
         {(statsHistory.length == 0 || statsHistory[0].gpu_usages) && (
           <>
             <div className="mt-4 flex items-center justify-between">
-              <div className="text-muted-foreground text-sm font-medium">
+              <div className="text-sm font-medium text-muted-foreground">
                 GPUs
               </div>
               {canGetGpuInfo && (
@@ -445,9 +445,9 @@ export default function GeneralMetrics({
                 </Button>
               )}
             </div>
-            <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
+            <div className=" mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+                <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
                   <div className="mb-5">GPU Usage</div>
                   {gpuSeries.map((series) => (
                     <ThresholdBarGraph
@@ -462,12 +462,12 @@ export default function GeneralMetrics({
                   ))}
                 </div>
               ) : (
-                <Skeleton className="w-full aspect-video" />
+                <Skeleton className="aspect-video w-full" />
               )}
               {statsHistory.length != 0 ? (
                 <>
                   {gpuMemSeries && (
-                    <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+                    <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
                       <div className="mb-5">GPU Memory</div>
                       {gpuMemSeries.map((series) => (
                         <ThresholdBarGraph
@@ -484,18 +484,18 @@ export default function GeneralMetrics({
                   )}
                 </>
               ) : (
-                <Skeleton className="w-full aspect-video" />
+                <Skeleton className="aspect-video w-full" />
               )}
             </div>
           </>
         )}
 
-        <div className="mt-4 text-muted-foreground text-sm font-medium">
+        <div className="mt-4 text-sm font-medium text-muted-foreground">
           Other Processes
         </div>
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
+        <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+            <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
               <div className="mb-5">Process CPU Usage</div>
               {otherProcessCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -510,10 +510,10 @@ export default function GeneralMetrics({
               ))}
             </div>
           ) : (
-            <Skeleton className="w-full aspect-tall" />
+            <Skeleton className="aspect-tall w-full" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
+            <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
               <div className="mb-5">Process Memory Usage</div>
               {otherProcessMemSeries.map((series) => (
                 <ThresholdBarGraph
@@ -528,7 +528,7 @@ export default function GeneralMetrics({
               ))}
             </div>
           ) : (
-            <Skeleton className="w-full aspect-tall" />
+            <Skeleton className="aspect-tall w-full" />
           )}
         </div>
       </div>

web/src/views/system/StorageMetrics.tsx

@@ -42,10 +42,10 @@ export default function StorageMetrics({
   }
 
   return (
-    <div className="size-full mt-4 flex flex-col overflow-y-auto">
-      <div className="text-muted-foreground text-sm font-medium">Overview</div>
-      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-        <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
+    <div className="mt-4 flex size-full flex-col overflow-y-auto">
+      <div className="text-sm font-medium text-muted-foreground">Overview</div>
+      <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
+        <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
           <div className="mb-5">Recordings</div>
           <StorageGraph
             graphId="general-recordings"
@@ -53,7 +53,7 @@ export default function StorageMetrics({
             total={totalStorage.total}
           />
         </div>
-        <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
+        <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
           <div className="mb-5">/tmp/cache</div>
           <StorageGraph
             graphId="general-cache"
@@ -61,7 +61,7 @@ export default function StorageMetrics({
             total={stats.service.storage["/tmp/cache"]["total"]}
           />
         </div>
-        <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
+        <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
           <div className="mb-5">/dev/shm</div>
           <StorageGraph
             graphId="general-shared-memory"
@@ -70,12 +70,12 @@ export default function StorageMetrics({
           />
         </div>
       </div>
-      <div className="mt-4 text-muted-foreground text-sm font-medium">
+      <div className="mt-4 text-sm font-medium text-muted-foreground">
         Camera Storage
       </div>
-      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+      <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
         {Object.keys(cameraStorage).map((camera) => (
-          <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
+          <div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
             <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
             <StorageGraph
               graphId={`${camera}-storage`}