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/components/overlay/ExportDialog.tsx

@@ -103,7 +103,7 @@ export default function ExportDialog({
   return (
     <>
       <SaveExportOverlay
-        className="absolute top-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none"
+        className="pointer-events-none absolute left-1/2 top-8 z-50 -translate-x-1/2"
         show={mode == "timeline"}
         onSave={() => onStartExport()}
         onCancel={() => setMode("none")}
@@ -132,7 +132,7 @@ export default function ExportDialog({
               setMode("select");
             }}
           >
-            <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
+            <FaArrowDown className="rounded-md bg-secondary-foreground fill-secondary p-1" />
             {isDesktop && <div className="text-primary">Export</div>}
           </Button>
         </Trigger>
@@ -140,7 +140,7 @@ export default function ExportDialog({
           className={
             isDesktop
               ? "sm:rounded-lg md:rounded-2xl"
-              : "px-4 pb-4 mx-4 rounded-lg md:rounded-2xl"
+              : "mx-4 rounded-lg px-4 pb-4 md:rounded-2xl"
           }
         >
           <ExportContent
@@ -241,8 +241,8 @@ export function ExportContent({
               <RadioGroupItem
                 className={
                   opt == selectedOption
-                    ? "from-selected/50 to-selected/90 text-selected bg-selected"
-                    : "from-secondary/50 to-secondary/90 text-secondary bg-secondary"
+                    ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                    : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
                 }
                 id={opt}
                 value={opt}
@@ -277,7 +277,7 @@ export function ExportContent({
         className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
       >
         <div
-          className={`p-2 cursor-pointer text-center ${isDesktop ? "" : "w-full"}`}
+          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
           onClick={onCancel}
         >
           Cancel
@@ -383,7 +383,7 @@ function CustomTimeSelector({
 
   return (
     <div
-      className={`mt-3 flex items-center bg-secondary text-secondary-foreground rounded-lg ${isDesktop ? "mx-8 px-2 gap-2" : "pl-2"}`}
+      className={`mt-3 flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "mx-8 gap-2 px-2" : "pl-2"}`}
     >
       <FaCalendarAlt />
       <Popover
@@ -424,7 +424,7 @@ function CustomTimeSelector({
           />
           <SelectSeparator className="bg-secondary" />
           <input
-            className="w-full mx-4 p-1 border border-input bg-background text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
             id="startTime"
             type="time"
             value={startClock}
@@ -486,7 +486,7 @@ function CustomTimeSelector({
           />
           <SelectSeparator className="bg-secondary" />
           <input
-            className="w-full mx-4 p-1 border border-input bg-background text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
             id="startTime"
             type="time"
             value={endClock}

web/src/components/overlay/LogInfoDialog.tsx

@@ -29,11 +29,11 @@ export default function LogInfoDialog({
       }}
     >
       <Content
-        className={isDesktop ? "" : "max-h-[75dvh] p-2 pb-4 overflow-hidden"}
+        className={isDesktop ? "" : "max-h-[75dvh] overflow-hidden p-2 pb-4"}
       >
         {logLine && (
-          <div className="size-full flex flex-col gap-5">
-            <div className="w-min flex flex-col gap-1.5">
+          <div className="flex size-full flex-col gap-5">
+            <div className="flex w-min flex-col gap-1.5">
               <div className="text-sm text-primary/40">Type</div>
               <LogChip severity={logLine.severity} />
             </div>

web/src/components/overlay/MobileCameraDrawer.tsx

@@ -27,12 +27,12 @@ export default function MobileCameraDrawer({
           <FaVideo className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>
-      <DrawerContent className="max-h-[75dvh] px-4 mx-1 rounded-t-2xl overflow-hidden">
-        <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
+      <DrawerContent className="mx-1 max-h-[75dvh] overflow-hidden rounded-t-2xl px-4">
+        <div className="flex h-auto w-full flex-col items-center gap-2 overflow-y-auto overflow-x-hidden py-4">
           {allCameras.map((cam) => (
             <div
               key={cam}
-              className={`w-full mx-4 py-2 text-center capitalize ${cam == selected ? "bg-secondary rounded-lg" : ""}`}
+              className={`mx-4 w-full py-2 text-center capitalize ${cam == selected ? "rounded-lg bg-secondary" : ""}`}
               onClick={() => {
                 onSelectCamera(cam);
                 setCameraDrawer(false);

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -112,22 +112,22 @@ export default function MobileReviewSettingsDrawer({
   let content;
   if (drawerMode == "select") {
     content = (
-      <div className="w-full p-4 flex flex-col gap-2">
+      <div className="flex w-full flex-col gap-2 p-4">
         {features.includes("export") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className="flex w-full items-center justify-center gap-2"
             onClick={() => {
               setDrawerMode("export");
               setMode("select");
             }}
           >
-            <FaArrowDown className="p-1 fill-secondary bg-secondary-foreground rounded-md" />
+            <FaArrowDown className="rounded-md bg-secondary-foreground fill-secondary p-1" />
             Export
           </Button>
         )}
         {features.includes("calendar") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className="flex w-full items-center justify-center gap-2"
             variant={filter?.after ? "select" : "default"}
             onClick={() => setDrawerMode("calendar")}
           >
@@ -139,7 +139,7 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("filter") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className="flex w-full items-center justify-center gap-2"
             variant={filter?.labels ? "select" : "default"}
             onClick={() => setDrawerMode("filter")}
           >
@@ -177,8 +177,8 @@ export default function MobileReviewSettingsDrawer({
     );
   } else if (drawerMode == "calendar") {
     content = (
-      <div className="w-full flex flex-col">
-        <div className="w-full h-8 relative">
+      <div className="flex w-full flex-col">
+        <div className="relative h-8 w-full">
           <div
             className="absolute left-0 text-selected"
             onClick={() => setDrawerMode("select")}
@@ -205,7 +205,7 @@ export default function MobileReviewSettingsDrawer({
           }}
         />
         <SelectSeparator />
-        <div className="p-2 flex justify-center items-center">
+        <div className="flex items-center justify-center p-2">
           <Button
             onClick={() => {
               onUpdateFilter({
@@ -222,8 +222,8 @@ export default function MobileReviewSettingsDrawer({
     );
   } else if (drawerMode == "filter") {
     content = (
-      <div className="w-full h-auto overflow-y-auto flex flex-col">
-        <div className="w-full h-8 mb-2 relative">
+      <div className="flex h-auto w-full flex-col overflow-y-auto">
+        <div className="relative mb-2 h-8 w-full">
           <div
             className="absolute left-0 text-selected"
             onClick={() => setDrawerMode("select")}
@@ -256,7 +256,7 @@ export default function MobileReviewSettingsDrawer({
   return (
     <>
       <SaveExportOverlay
-        className="absolute top-8 left-1/2 -translate-x-1/2 z-50 pointer-events-none"
+        className="pointer-events-none absolute left-1/2 top-8 z-50 -translate-x-1/2"
         show={mode == "timeline"}
         onSave={() => onStartExport()}
         onCancel={() => setMode("none")}
@@ -281,7 +281,7 @@ export default function MobileReviewSettingsDrawer({
             />
           </Button>
         </DrawerTrigger>
-        <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
+        <DrawerContent className="mx-1 flex max-h-[80dvh] flex-col items-center gap-2 overflow-hidden rounded-t-2xl px-4 pb-4">
           {content}
         </DrawerContent>
       </Drawer>

web/src/components/overlay/MobileTimelineDrawer.tsx

@@ -26,9 +26,9 @@ export default function MobileTimelineDrawer({
           <FaFlag className="text-secondary-foreground" />
         </Button>
       </DrawerTrigger>
-      <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
+      <DrawerContent className="mx-1 flex max-h-[75dvh] flex-col items-center gap-2 overflow-hidden rounded-t-2xl px-4 pb-4">
         <div
-          className={`w-full mx-4 py-2 text-center capitalize ${selected == "timeline" ? "bg-secondary rounded-lg" : ""}`}
+          className={`mx-4 w-full py-2 text-center capitalize ${selected == "timeline" ? "rounded-lg bg-secondary" : ""}`}
           onClick={() => {
             onSelect("timeline");
             setDrawer(false);
@@ -37,7 +37,7 @@ export default function MobileTimelineDrawer({
           Timeline
         </div>
         <div
-          className={`w-full mx-4 py-2 text-center capitalize ${selected == "events" ? "bg-secondary rounded-lg" : ""}`}
+          className={`mx-4 w-full py-2 text-center capitalize ${selected == "events" ? "rounded-lg bg-secondary" : ""}`}
           onClick={() => {
             onSelect("events");
             setDrawer(false);

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -67,7 +67,7 @@ function ReviewActivityDay({ reviewSummary, day }: ReviewActivityDayProps) {
   }, [reviewSummary, day]);
 
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div className="flex flex-col items-center justify-center">
       {day.getDate()}
       {dayActivity != "none" && (
         <FaCircle

web/src/components/overlay/SaveExportOverlay.tsx

@@ -17,9 +17,9 @@ export default function SaveExportOverlay({
   return (
     <div className={className}>
       <div
-        className={`flex justify-center px-2 gap-2 items-center pointer-events-auto rounded-lg ${
-          show ? "animate-in slide-in-from-top duration-500" : "invisible"
-        }  text-center mt-5 mx-auto`}
+        className={`pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2 ${
+          show ? "duration-500 animate-in slide-in-from-top" : "invisible"
+        }  mx-auto mt-5 text-center`}
       >
         <Button
           className="flex items-center gap-1"

web/src/components/overlay/TimelineDataOverlay.tsx

@@ -84,12 +84,12 @@ export default function TimelineEventOverlay({
         }}
       >
         {timeline.class_type == "entered_zone" ? (
-          <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
+          <div className="absolute bottom-0 left-[50%] h-2 w-2 -translate-x-1/2 translate-y-3/4 bg-yellow-500" />
         ) : null}
       </div>
       {isHovering && (
         <div
-          className="absolute bg-white dark:bg-slate-800 p-4 block text-black dark:text-white text-lg"
+          className="absolute block bg-white p-4 text-lg text-black dark:bg-slate-800 dark:text-white"
           style={getHoverStyle()}
         >
           <div>{`Area: ${getObjectArea()} px`}</div>

web/src/components/overlay/VainfoDialog.tsx

@@ -33,7 +33,7 @@ export default function VainfoDialog({
           <DialogTitle>Vainfo Output</DialogTitle>
         </DialogHeader>
         {vainfo ? (
-          <div className="mb-2 max-h-96 whitespace-pre-line overflow-y-scroll">
+          <div className="mb-2 max-h-96 overflow-y-scroll whitespace-pre-line">
             <div>Return Code: {vainfo.return_code}</div>
             <br />
             <div>Process {vainfo.return_code == 0 ? "Output" : "Error"}:</div>