formatting..

README.md

@@ -26,7 +26,7 @@ In a workspace, the user can create any number of components of each type, and c
 
 When a component is created and focused by the user it displays a form with the parameters of the component, which the user can fill and submit to the server. The server will then create a slurm job in the Sirius cluster with the parameters of the component, and update the state of the component in the interface as the job runs. The user can check the status of the job as the component changes itself. All of these changes are reflected in the database, so that the user can logoff and close the browser, and the jobs will continue to run in the cluster.
 
-When the user logs in again and opens its workspace, the previous state of the 
+When the user logs in again and opens its workspace, the previous state of the
 components will be loaded from the database, compared to the current state of the jobs in the cluster, and then updated in the interface.
 
 > Note: In order to use the app the user must be registered in the CNPEM LDAP server and have access to the Sirius cluster, with permissions to run slurm jobs in the appropriate queue.
@@ -82,7 +82,8 @@ Requirements satisfied, you can start the development environment with:
 Then, open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 ### Documentation
-The documentation for the app can be found in the [docs](./apps/docs) folder. 
+
+The documentation for the app can be found in the [docs](./apps/docs) folder.
 Start the documentation server with:
 
 ```shell

apps/deepsirius-ui/src/components/avatar-dropdown.tsx

@@ -125,7 +125,9 @@ export function AvatarDrop() {
         >
           <MoonIcon className="h-4 w-4 rotate-0 scale-100 transition-all hover:text-slate-900 dark:-rotate-90 dark:scale-0 dark:text-slate-400 dark:hover:text-slate-100" />
           <SunIcon className="absolute h-4 w-4 rotate-90 scale-0 transition-all hover:text-slate-900 dark:rotate-0 dark:scale-100 dark:text-slate-400 dark:hover:text-slate-100" />
-          <span className="ml-2">{resolvedTheme === 'light' ? 'Dark' : 'Light'}</span>
+          <span className="ml-2">
+            {resolvedTheme === 'light' ? 'Dark' : 'Light'}
+          </span>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem

apps/deepsirius-ui/src/components/footer.tsx

@@ -3,7 +3,7 @@ export function Footer() {
     <footer className="m-4 rounded-lg bg-white shadow dark:bg-slate-900">
       <div className="mx-auto w-full max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
         <span className="text-sm text-gray-500 dark:text-gray-400 sm:text-center">
-          © 2023{" "}
+          © 2023{' '}
           <a
             target="_blank"
             rel="noopener noreferrer"

apps/deepsirius-ui/src/components/nautilus.tsx

@@ -59,7 +59,7 @@ const Skeleton = () => {
     <div className="grid grid-cols-5 gap-x-1 gap-y-2 p-2">
       {Array.from({ length: 7 }).map((_, i) => (
         <div key={i}>
-          <div className="h-8 rounded-sm bg-muted animate-pulse" />
+          <div className="h-8 animate-pulse rounded-sm bg-muted" />
         </div>
       ))}
     </div>
@@ -149,8 +149,8 @@ const Nautilus = ({ onSelect }: { onSelect: (p: string) => void }) => {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex flex-row gap-1 items-center justify-between">
-        <ScrollArea className="max-w-sm border rounded-sm p-2">
+      <div className="flex flex-row items-center justify-between gap-1">
+        <ScrollArea className="max-w-sm rounded-sm border p-2">
           <p className="flex flex-row gap-1 text-xs text-muted-foreground">
             <span className="text-purple-500 dark:text-purple-400">
               selected:{' '}
@@ -169,7 +169,7 @@ const Nautilus = ({ onSelect }: { onSelect: (p: string) => void }) => {
           Select
         </Button>
       </div>
-      <div className="relative flex flex-row gap-0.5 items-center">
+      <div className="relative flex flex-row items-center gap-0.5">
         <Button
           className="h-8"
           title="Go back"
@@ -184,7 +184,7 @@ const Nautilus = ({ onSelect }: { onSelect: (p: string) => void }) => {
             setPath(path);
           }}
         >
-          <ArrowLeftIcon className="w-4 h-4" />
+          <ArrowLeftIcon className="h-4 w-4" />
         </Button>
         <span className="text-input">|</span>
         {shortcuts.map((shortcut) => (
@@ -211,15 +211,15 @@ const Nautilus = ({ onSelect }: { onSelect: (p: string) => void }) => {
               <FormItem>
                 <FormLabel className="sr-only">Path</FormLabel>
                 <FormControl>
-                  <div className="flex flex-row gap-0.5 items-center">
+                  <div className="flex flex-row items-center gap-0.5">
                     <Input className="text-ellipsis" {...field} />
                     <Button
                       type="submit"
                       size="icon"
                       variant="outline"
                       disabled={form.formState.isSubmitting}
                     >
-                      <ArrowRightIcon className="w-4 h-4" />
+                      <ArrowRightIcon className="h-4 w-4" />
                     </Button>
                   </div>
                 </FormControl>
@@ -246,9 +246,9 @@ const Nautilus = ({ onSelect }: { onSelect: (p: string) => void }) => {
           onClick={() => setDisplay(display === 'grid' ? 'list' : 'grid')}
         >
           {display === 'grid' ? (
-            <LayoutGridIcon className="w-4 h-4" />
+            <LayoutGridIcon className="h-4 w-4" />
           ) : (
-            <LayoutListIcon className="w-4 h-4" />
+            <LayoutListIcon className="h-4 w-4" />
           )}
         </Button>
       </div>
@@ -275,17 +275,17 @@ const Nautilus = ({ onSelect }: { onSelect: (p: string) => void }) => {
                 }}
                 key={item.name}
                 className={cn(
-                  'flex items-center rounded-lg px-2 py-1 h-fit hover:bg-violet-100 data-[selected=true]:hover:bg-violet-100 data-[selected=true]:bg-violet-200 hover:cursor-pointer dark:hover:bg-violet-800 dark:data-[selected=true]:hover:bg-violet-800 dark:data-[selected=true]:bg-violet-900',
+                  'flex h-fit items-center rounded-lg px-2 py-1 hover:cursor-pointer hover:bg-violet-100 data-[selected=true]:bg-violet-200 data-[selected=true]:hover:bg-violet-100 dark:hover:bg-violet-800 dark:data-[selected=true]:bg-violet-900 dark:data-[selected=true]:hover:bg-violet-800',
                   display === 'grid' ? 'flex-col' : 'flex-row gap-2',
                 )}
               >
                 {item.type === 'directory' && (
-                  <FolderIcon className="w-10 h-10 fill-muted stroke-1 dark:stroke-background" />
+                  <FolderIcon className="h-10 w-10 fill-muted stroke-1 dark:stroke-background" />
                 )}
                 {item.type === 'file' && (
-                  <FileIcon className="w-10 h-10 fill-muted stroke-1 dark:stroke-background" />
+                  <FileIcon className="h-10 w-10 fill-muted stroke-1 dark:stroke-background" />
                 )}
-                <span className="select-none text-xs text-muted-foreground text-center text-balance break-all">
+                <span className="select-none text-balance break-all text-center text-xs text-muted-foreground">
                   {item.name}
                 </span>
               </div>

apps/deepsirius-ui/src/components/theme-toggle.tsx

@@ -13,11 +13,11 @@ export function ControlThemeButton() {
   return (
     <ControlButton
       title="toggle theme"
-      className="[&>svg]:!max-w-[24px] [&>svg]:!max-h-6"
+      className="[&>svg]:!max-h-6 [&>svg]:!max-w-[24px]"
       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
     >
       <SunIcon className="h-4 w-4 rotate-0 scale-100 transition-all hover:text-slate-900 dark:-rotate-90 dark:scale-0 dark:text-slate-400 dark:hover:text-slate-100" />
-      <MoonIcon className="h-4 w-4 absolute rotate-90 scale-0 transition-all hover:text-slate-900 dark:rotate-0 dark:scale-100 dark:text-slate-400 dark:hover:text-slate-100" />
+      <MoonIcon className="absolute h-4 w-4 rotate-90 scale-0 transition-all hover:text-slate-900 dark:rotate-0 dark:scale-100 dark:text-slate-400 dark:hover:text-slate-100" />
       <span className="sr-only">Toggle theme</span>
     </ControlButton>
   );

apps/deepsirius-ui/src/components/ui/accordion.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
 
-import { cn } from "~/lib/utils";
+import { cn } from '~/lib/utils';
 
 const Accordion = AccordionPrimitive.Root;
 
@@ -14,11 +14,11 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn('border-b', className)}
     {...props}
   />
 ));
-AccordionItem.displayName = "AccordionItem";
+AccordionItem.displayName = 'AccordionItem';
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -28,8 +28,8 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
       )}
       {...props}
     >
@@ -47,8 +47,8 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
+      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+      className,
     )}
     {...props}
   >

apps/deepsirius-ui/src/components/ui/avatar.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from "~/lib/utils";
+import { cn } from '~/lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -12,8 +12,8 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className,
     )}
     {...props}
   />
@@ -26,7 +26,7 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
 ));
@@ -39,8 +39,8 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700",
-      className
+      'flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700',
+      className,
     )}
     {...props}
   />

apps/deepsirius-ui/src/components/ui/command.tsx

@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
 
-import { cn } from "~/lib/utils";
-import { Dialog, DialogContent } from "~/components/ui/dialog";
+import { cn } from '~/lib/utils';
+import { Dialog, DialogContent } from '~/components/ui/dialog';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -15,8 +15,8 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-lg bg-white dark:bg-slate-800",
-      className
+      'flex h-full w-full flex-col overflow-hidden rounded-lg bg-white dark:bg-slate-800',
+      className,
     )}
     {...props}
   />
@@ -49,8 +49,8 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50",
-        className
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50',
+        className,
       )}
       {...props}
     />
@@ -65,7 +65,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
     {...props}
   />
 ));
@@ -92,8 +92,8 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden px-2 py-3 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 [&_[cmdk-group-heading]]:dark:text-slate-300",
-      className
+      'overflow-hidden px-2 py-3 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 [&_[cmdk-group-heading]]:dark:text-slate-300',
+      className,
     )}
     {...props}
   />
@@ -107,7 +107,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-slate-100 dark:bg-slate-700", className)}
+    className={cn('-mx-1 h-px bg-slate-100 dark:bg-slate-700', className)}
     {...props}
   />
 ));
@@ -120,8 +120,8 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-700",
-      className
+      'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm font-medium outline-none aria-selected:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-700',
+      className,
     )}
     {...props}
   />
@@ -136,14 +136,14 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-slate-500",
-        className
+        'ml-auto text-xs tracking-widest text-slate-500',
+        className,
       )}
       {...props}
     />
   );
 };
-CommandShortcut.displayName = "CommandShortcut";
+CommandShortcut.displayName = 'CommandShortcut';
 
 export {
   Command,