chore: run prettier

resources/scripts/api/admin/databases/createDatabase.ts

@@ -1,11 +1,26 @@
 import http from '@/api/http';
 import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
 
-export default (name: string, host: string, port: number, username: string, password: string, include: string[] = []): Promise<Database> => {
+export default (
+    name: string,
+    host: string,
+    port: number,
+    username: string,
+    password: string,
+    include: string[] = [],
+): Promise<Database> => {
     return new Promise((resolve, reject) => {
-        http.post('/api/application/databases', {
+        http.post(
-            name, host, port, username, password,
+            '/api/application/databases',
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                host,
+                port,
+                username,
+                password,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToDatabase(data)))
             .catch(reject);
     });

resources/scripts/api/admin/databases/getDatabases.ts

@@ -13,7 +13,7 @@ export interface Database {
     createdAt: Date;
     updatedAt: Date;
 
-    getAddress (): string;
+    getAddress(): string;
 }
 
 export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database => ({
@@ -53,12 +53,14 @@ export default (include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Database>>([ 'databases', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Database>>(['databases', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get('/api/application/databases', { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get('/api/application/databases', {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToDatabase),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/databases/searchDatabases.ts

@@ -17,9 +17,7 @@ export default (filters?: Filters): Promise<Database[]> => {
 
     return new Promise((resolve, reject) => {
         http.get('/api/application/databases', { params })
-            .then(response => resolve(
+            .then(response => resolve((response.data.data || []).map(rawDataToDatabase)))
-                (response.data.data || []).map(rawDataToDatabase)
-            ))
             .catch(reject);
     });
 };

resources/scripts/api/admin/databases/updateDatabase.ts

@@ -1,11 +1,27 @@
 import http from '@/api/http';
 import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
 
-export default (id: number, name: string, host: string, port: number, username: string, password: string | undefined, include: string[] = []): Promise<Database> => {
+export default (
+    id: number,
+    name: string,
+    host: string,
+    port: number,
+    username: string,
+    password: string | undefined,
+    include: string[] = [],
+): Promise<Database> => {
     return new Promise((resolve, reject) => {
-        http.patch(`/api/application/databases/${id}`, {
+        http.patch(
-            name, host, port, username, password,
+            `/api/application/databases/${id}`,
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                host,
+                port,
+                username,
+                password,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToDatabase(data)))
             .catch(reject);
     });

resources/scripts/api/admin/eggs/createEgg.ts

@@ -1,13 +1,11 @@
 import http from '@/api/http';
 import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 
-type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles: string, configStartup: string };
+type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles: string; configStartup: string };
 
 export default (egg: Partial<Egg2>): Promise<Egg> => {
     return new Promise((resolve, reject) => {
-        http.post(
+        http.post('/api/application/eggs', {
-            '/api/application/eggs',
-            {
             nest_id: egg.nestId,
             name: egg.name,
             description: egg.description,
@@ -23,8 +21,7 @@ export default (egg: Partial<Egg2>): Promise<Egg> => {
             script_entry: egg.scriptEntry,
             script_is_privileged: egg.scriptIsPrivileged,
             script_install: egg.scriptInstall,
-            },
+        })
-        )
             .then(({ data }) => resolve(rawDataToEgg(data)))
             .catch(reject);
     });

resources/scripts/api/admin/eggs/createEggVariable.ts

@@ -5,9 +5,7 @@ import { Transformers } from '@definitions/admin';
 export type CreateEggVariable = Omit<EggVariable, 'id' | 'eggId' | 'createdAt' | 'updatedAt' | 'relationships'>;
 
 export default async (eggId: number, variable: CreateEggVariable): Promise<EggVariable> => {
-    const { data } = await http.post(
+    const { data } = await http.post(`/api/application/eggs/${eggId}/variables`, {
-        `/api/application/eggs/${eggId}/variables`,
-        {
         name: variable.name,
         description: variable.description,
         env_variable: variable.environmentVariable,
@@ -15,8 +13,7 @@ export default async (eggId: number, variable: CreateEggVariable): Promise<EggVa
         user_viewable: variable.isUserViewable,
         user_editable: variable.isUserEditable,
         rules: variable.rules,
-        },
+    });
-    );
 
     return Transformers.toEggVariable(data);
 };

resources/scripts/api/admin/eggs/updateEgg.ts

@@ -1,13 +1,11 @@
 import http from '@/api/http';
 import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
 
-type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles?: string, configStartup?: string };
+type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles?: string; configStartup?: string };
 
 export default (id: number, egg: Partial<Egg2>): Promise<Egg> => {
     return new Promise((resolve, reject) => {
-        http.patch(
+        http.patch(`/api/application/eggs/${id}`, {
-            `/api/application/eggs/${id}`,
-            {
             nest_id: egg.nestId,
             name: egg.name,
             description: egg.description,
@@ -23,8 +21,7 @@ export default (id: number, egg: Partial<Egg2>): Promise<Egg> => {
             script_entry: egg.scriptEntry,
             script_is_privileged: egg.scriptIsPrivileged,
             script_install: egg.scriptInstall,
-            },
+        })
-        )
             .then(({ data }) => resolve(rawDataToEgg(data)))
             .catch(reject);
     });

resources/scripts/api/admin/eggs/updateEggVariables.ts

@@ -2,7 +2,10 @@ import http from '@/api/http';
 import { EggVariable } from '@/api/admin/egg';
 import { Transformers } from '@definitions/admin';
 
-export default async (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[]): Promise<EggVariable[]> => {
+export default async (
+    eggId: number,
+    variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[],
+): Promise<EggVariable[]> => {
     const { data } = await http.patch(
         `/api/application/eggs/${eggId}/variables`,
         variables.map(variable => ({

resources/scripts/api/admin/getVersion.ts

@@ -4,11 +4,11 @@ export interface VersionData {
     panel: {
         current: string;
         latest: string;
-    }
+    };
 
     wings: {
         latest: string;
-    }
+    };
 
     git: string | null;
 }

resources/scripts/api/admin/index.ts

@@ -13,8 +13,8 @@ export type UUID = string;
 export type WithRelationships<M extends Model, R extends string> = Omit<M, 'relationships'> & {
     relationships: Omit<M['relationships'], keyof R> & {
         [K in R]: NonNullable<M['relationships'][K]>;
-    }
+    };
-}
+};
 
 /**
  * Helper type that allows you to infer the type of an object by giving
@@ -29,7 +29,7 @@ export type InferModel<T extends (...args: any) => any> = ReturnType<T> extends
  * such that TypeScript understands the relationships on it. This is just to help
  * reduce the amount of duplicated type casting all over the codebase.
  */
-export const withRelationships = <M extends Model, R extends string> (model: M, ..._keys: R[]) => {
+export const withRelationships = <M extends Model, R extends string>(model: M, ..._keys: R[]) => {
     return model as unknown as WithRelationships<M, R>;
 };
 
@@ -47,7 +47,7 @@ export interface ListContext<T> {
     setSortDirection: (direction: ((p: boolean) => boolean) | boolean) => void;
 }
 
-function create<T> () {
+function create<T>() {
     return createContext<ListContext<T>>({
         page: 1,
         setPage: () => 1,

resources/scripts/api/admin/locations/createLocation.ts

@@ -3,9 +3,14 @@ import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
 
 export default (short: string, long: string | null, include: string[] = []): Promise<Location> => {
     return new Promise((resolve, reject) => {
-        http.post('/api/application/locations', {
+        http.post(
-            short, long,
+            '/api/application/locations',
-        }, { params: { include: include.join(',') } })
+            {
+                short,
+                long,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToLocation(data)))
             .catch(reject);
     });

resources/scripts/api/admin/locations/getLocations.ts

@@ -43,12 +43,14 @@ export default (include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Location>>([ 'locations', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Location>>(['locations', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get('/api/application/locations', { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get('/api/application/locations', {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToLocation),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/locations/searchLocations.ts

@@ -17,9 +17,7 @@ export default (filters?: Filters): Promise<Location[]> => {
 
     return new Promise((resolve, reject) => {
         http.get('/api/application/locations', { params })
-            .then(response => resolve(
+            .then(response => resolve((response.data.data || []).map(rawDataToLocation)))
-                (response.data.data || []).map(rawDataToLocation)
-            ))
             .catch(reject);
     });
 };

resources/scripts/api/admin/locations/updateLocation.ts

@@ -3,9 +3,14 @@ import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
 
 export default (id: number, short: string, long: string | null, include: string[] = []): Promise<Location> => {
     return new Promise((resolve, reject) => {
-        http.patch(`/api/application/locations/${id}`, {
+        http.patch(
-            short, long,
+            `/api/application/locations/${id}`,
-        }, { params: { include: include.join(',') } })
+            {
+                short,
+                long,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToLocation(data)))
             .catch(reject);
     });

resources/scripts/api/admin/mounts/createMount.ts

@@ -1,11 +1,28 @@
 import http from '@/api/http';
 import { Mount, rawDataToMount } from '@/api/admin/mounts/getMounts';
 
-export default (name: string, description: string, source: string, target: string, readOnly: boolean, userMountable: boolean, include: string[] = []): Promise<Mount> => {
+export default (
+    name: string,
+    description: string,
+    source: string,
+    target: string,
+    readOnly: boolean,
+    userMountable: boolean,
+    include: string[] = [],
+): Promise<Mount> => {
     return new Promise((resolve, reject) => {
-        http.post('/api/application/mounts', {
+        http.post(
-            name, description, source, target, read_only: readOnly, user_mountable: userMountable,
+            '/api/application/mounts',
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                description,
+                source,
+                target,
+                read_only: readOnly,
+                user_mountable: userMountable,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToMount(data)))
             .catch(reject);
     });

resources/scripts/api/admin/mounts/getMounts.ts

@@ -40,7 +40,9 @@ export const rawDataToMount = ({ attributes }: FractalResponseData): Mount => ({
     relations: {
         eggs: ((attributes.relationships?.eggs as FractalResponseList | undefined)?.data || []).map(rawDataToEgg),
         nodes: ((attributes.relationships?.nodes as FractalResponseList | undefined)?.data || []).map(rawDataToNode),
-        servers: ((attributes.relationships?.servers as FractalResponseList | undefined)?.data || []).map(rawDataToServer),
+        servers: ((attributes.relationships?.servers as FractalResponseList | undefined)?.data || []).map(
+            rawDataToServer,
+        ),
     },
 });
 
@@ -69,12 +71,14 @@ export default (include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Mount>>([ 'mounts', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Mount>>(['mounts', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get('/api/application/mounts', { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get('/api/application/mounts', {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToMount),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/mounts/updateMount.ts

@@ -1,11 +1,29 @@
 import http from '@/api/http';
 import { Mount, rawDataToMount } from '@/api/admin/mounts/getMounts';
 
-export default (id: number, name: string, description: string | null, source: string, target: string, readOnly: boolean, userMountable: boolean, include: string[] = []): Promise<Mount> => {
+export default (
+    id: number,
+    name: string,
+    description: string | null,
+    source: string,
+    target: string,
+    readOnly: boolean,
+    userMountable: boolean,
+    include: string[] = [],
+): Promise<Mount> => {
     return new Promise((resolve, reject) => {
-        http.patch(`/api/application/mounts/${id}`, {
+        http.patch(
-            name, description, source, target, read_only: readOnly, user_mountable: userMountable,
+            `/api/application/mounts/${id}`,
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                description,
+                source,
+                target,
+                read_only: readOnly,
+                user_mountable: userMountable,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToMount(data)))
             .catch(reject);
     });

resources/scripts/api/admin/nests/createNest.ts

@@ -3,9 +3,14 @@ import { Nest, rawDataToNest } from '@/api/admin/nests/getNests';
 
 export default (name: string, description: string | null, include: string[] = []): Promise<Nest> => {
     return new Promise((resolve, reject) => {
-        http.post('/api/application/nests', {
+        http.post(
-            name, description,
+            '/api/application/nests',
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                description,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToNest(data)))
             .catch(reject);
     });

resources/scripts/api/admin/nests/getEggs.ts

@@ -27,12 +27,14 @@ export default (nestId: number, include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Egg>>([ nestId, 'eggs', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Egg>>([nestId, 'eggs', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get(`/api/application/nests/${nestId}/eggs`, { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get(`/api/application/nests/${nestId}/eggs`, {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToEgg),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/nests/getNests.ts

@@ -15,7 +15,7 @@ export interface Nest {
 
     relations: {
         eggs: Egg[] | undefined;
-    },
+    };
 }
 
 export const rawDataToNest = ({ attributes }: FractalResponseData): Nest => ({
@@ -55,12 +55,14 @@ export default (include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Nest>>([ 'nests', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Nest>>(['nests', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get('/api/application/nests', { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get('/api/application/nests', {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToNest),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/nests/updateNest.ts

@@ -3,9 +3,14 @@ import { Nest, rawDataToNest } from '@/api/admin/nests/getNests';
 
 export default (id: number, name: string, description: string | null, include: string[] = []): Promise<Nest> => {
     return new Promise((resolve, reject) => {
-        http.patch(`/api/application/nests/${id}`, {
+        http.patch(
-            name, description,
+            `/api/application/nests/${id}`,
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                description,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToNest(data)))
             .catch(reject);
     });

resources/scripts/api/admin/node.ts

@@ -60,7 +60,7 @@ export interface Node extends Model {
 export const getNode = async (id: string | number): Promise<WithRelationships<Node, 'location'>> => {
     const { data } = await http.get(`/api/application/nodes/${id}`, {
         params: {
-            include: [ 'location' ],
+            include: ['location'],
         },
     });
 
@@ -75,7 +75,10 @@ export const searchNodes = async (params: QueryBuilderParams<'name'>): Promise<N
     return data.data.map(Transformers.toNode);
 };
 
-export const getAllocations = async (id: string | number, params?: QueryBuilderParams<'ip' | 'server_id'>): Promise<Allocation[]> => {
+export const getAllocations = async (
+    id: string | number,
+    params?: QueryBuilderParams<'ip' | 'server_id'>,
+): Promise<Allocation[]> => {
     const { data } = await http.get(`/api/application/nodes/${id}/allocations`, {
         params: withQueryBuilderParams(params),
     });

resources/scripts/api/admin/nodes/allocations/getAllocations.ts

@@ -28,12 +28,14 @@ export default (id: number, include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Allocation>>([ 'allocations', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Allocation>>(['allocations', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get(`/api/application/nodes/${id}/allocations`, { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get(`/api/application/nodes/${id}/allocations`, {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToAllocation),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/nodes/createNode.ts

@@ -25,7 +25,7 @@ export interface Values {
 export default (values: Values, include: string[] = []): Promise<Node> => {
     const data = {};
 
-    Object.keys(values).forEach((key) => {
+    Object.keys(values).forEach(key => {
         const key2 = key
             .replace('HTTP', 'Http')
             .replace('SFTP', 'Sftp')

resources/scripts/api/admin/nodes/getAllocations.ts

@@ -11,9 +11,9 @@ export interface Allocation {
 
     relations: {
         server?: Server;
-    }
+    };
 
-    getDisplayText (): string;
+    getDisplayText(): string;
 }
 
 export const rawDataToAllocation = ({ attributes }: FractalResponseData): Allocation => ({
@@ -25,11 +25,14 @@ export const rawDataToAllocation = ({ attributes }: FractalResponseData): Alloca
     assigned: attributes.assigned,
 
     relations: {
-        server: attributes.relationships?.server?.object === 'server' ? rawDataToServer(attributes.relationships.server as FractalResponseData) : undefined,
+        server:
+            attributes.relationships?.server?.object === 'server'
+                ? rawDataToServer(attributes.relationships.server as FractalResponseData)
+                : undefined,
     },
 
     // TODO: If IP is an IPv6, wrap IP in [].
-    getDisplayText (): string {
+    getDisplayText(): string {
         if (attributes.alias !== null) {
             return `${attributes.ip}:${attributes.port} (${attributes.alias})`;
         }
@@ -38,7 +41,7 @@ export const rawDataToAllocation = ({ attributes }: FractalResponseData): Alloca
 });
 
 export interface Filters {
-    ip?: string
+    ip?: string;
     /* eslint-disable camelcase */
     server_id?: string;
     /* eslint-enable camelcase */

resources/scripts/api/admin/nodes/getNodes.ts

@@ -33,7 +33,7 @@ export interface Node {
     relations: {
         databaseHost: Database | undefined;
         location: Location | undefined;
-    }
+    };
 }
 
 export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
@@ -63,8 +63,15 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
 
     relations: {
         // eslint-disable-next-line camelcase
-        databaseHost: attributes.relationships?.database_host !== undefined && attributes.relationships?.database_host.object !== 'null_resource' ? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData) : undefined,
+        databaseHost:
-        location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
+            attributes.relationships?.database_host !== undefined &&
+            attributes.relationships?.database_host.object !== 'null_resource'
+                ? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData)
+                : undefined,
+        location:
+            attributes.relationships?.location !== undefined
+                ? rawDataToLocation(attributes.relationships.location as FractalResponseData)
+                : undefined,
     },
 });
 
@@ -96,12 +103,14 @@ export default (include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Node>>([ 'nodes', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Node>>(['nodes', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get('/api/application/nodes', { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get('/api/application/nodes', {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToNode),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/nodes/updateNode.ts

@@ -4,7 +4,7 @@ import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
 export default (id: number, node: Partial<Node>, include: string[] = []): Promise<Node> => {
     const data = {};
 
-    Object.keys(node).forEach((key) => {
+    Object.keys(node).forEach(key => {
         const key2 = key
             .replace('HTTP', 'Http')
             .replace('SFTP', 'Sftp')

resources/scripts/api/admin/roles.ts

@@ -13,9 +13,14 @@ export const Context = createContext<Filters>();
 
 const createRole = (name: string, description: string | null, include: string[] = []): Promise<UserRole> => {
     return new Promise((resolve, reject) => {
-        http.post('/api/application/roles', {
+        http.post(
-            name, description,
+            '/api/application/roles',
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                description,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(Transformers.toUserRole(data)))
             .catch(reject);
     });
@@ -48,18 +53,26 @@ const searchRoles = (filters?: { name?: string }): Promise<UserRole[]> => {
 
     return new Promise((resolve, reject) => {
         http.get('/api/application/roles', { params })
-            .then(response => resolve(
+            .then(response => resolve((response.data.data || []).map(Transformers.toUserRole)))
-                (response.data.data || []).map(Transformers.toUserRole)
-            ))
             .catch(reject);
     });
 };
 
-const updateRole = (id: number, name: string, description: string | null, include: string[] = []): Promise<UserRole> => {
+const updateRole = (
+    id: number,
+    name: string,
+    description: string | null,
+    include: string[] = [],
+): Promise<UserRole> => {
     return new Promise((resolve, reject) => {
-        http.patch(`/api/application/roles/${id}`, {
+        http.patch(
-            name, description,
+            `/api/application/roles/${id}`,
-        }, { params: { include: include.join(',') } })
+            {
+                name,
+                description,
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(Transformers.toUserRole(data)))
             .catch(reject);
     });
@@ -83,21 +96,16 @@ const getRoles = (include: string[] = []) => {
     }
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useSWR<PaginatedResult<UserRole>>([ 'roles', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<UserRole>>(['roles', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get('/api/application/roles', { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get('/api/application/roles', {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(Transformers.toUserRole),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };
 
-export {
+export { createRole, deleteRole, getRole, searchRoles, updateRole, getRoles };
-    createRole,
-    deleteRole,
-    getRole,
-    searchRoles,
-    updateRole,
-    getRoles,
-};

resources/scripts/api/admin/servers/createServer.ts

@@ -16,7 +16,7 @@ export interface CreateServerRequest {
         cpu: number;
         threads: string;
         oomDisabled: boolean;
-    }
+    };
 
     featureLimits: {
         allocations: number;
@@ -39,7 +39,9 @@ export interface CreateServerRequest {
 
 export default (r: CreateServerRequest, include: string[] = []): Promise<Server> => {
     return new Promise((resolve, reject) => {
-        http.post('/api/application/servers', {
+        http.post(
+            '/api/application/servers',
+            {
                 externalId: r.externalId,
                 name: r.name,
                 description: r.description,
@@ -73,7 +75,9 @@ export default (r: CreateServerRequest, include: string[] = []): Promise<Server>
                 image: r.image,
                 skip_scripts: r.skipScripts,
                 start_on_completion: r.startOnCompletion,
-        }, { params: { include: include.join(',') } })
+            },
+            { params: { include: include.join(',') } },
+        )
             .then(({ data }) => resolve(rawDataToServer(data)))
             .catch(reject);
     });

resources/scripts/api/admin/servers/getServers.ts

@@ -41,7 +41,7 @@ export const rawDataToServerVariable = ({ attributes }: FractalResponseData): Se
 
 export interface Server {
     id: number;
-    externalId: string | null
+    externalId: string | null;
     uuid: string;
     identifier: string;
     name: string;
@@ -56,13 +56,13 @@ export interface Server {
         cpu: number;
         threads: string | null;
         oomDisabled: boolean;
-    }
+    };
 
     featureLimits: {
         databases: number;
         allocations: number;
         backups: number;
-    }
+    };
 
     ownerId: number;
     nodeId: number;
@@ -74,7 +74,7 @@ export interface Server {
         startup: string;
         image: string;
         environment: Map<string, string>;
-    }
+    };
 
     createdAt: Date;
     updatedAt: Date;
@@ -85,10 +85,11 @@ export interface Server {
         node?: Node;
         user?: User;
         variables: ServerVariable[];
-    }
+    };
 }
 
-export const rawDataToServer = ({ attributes }: FractalResponseData): Server => ({
+export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
+    ({
         id: attributes.id,
         externalId: attributes.external_id,
         uuid: attributes.uuid,
@@ -129,13 +130,26 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
         updatedAt: new Date(attributes.updated_at),
 
         relations: {
-        allocations: ((attributes.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(rawDataToAllocation),
+            allocations: ((attributes.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(
-        egg: attributes.relationships?.egg?.object === 'egg' ? rawDataToEgg(attributes.relationships.egg as FractalResponseData) : undefined,
+                rawDataToAllocation,
-        node: attributes.relationships?.node?.object === 'node' ? rawDataToNode(attributes.relationships.node as FractalResponseData) : undefined,
+            ),
-        user: attributes.relationships?.user?.object === 'user' ? Transformers.toUser(attributes.relationships.user as FractalResponseData) : undefined,
+            egg:
-        variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(rawDataToServerVariable),
+                attributes.relationships?.egg?.object === 'egg'
+                    ? rawDataToEgg(attributes.relationships.egg as FractalResponseData)
+                    : undefined,
+            node:
+                attributes.relationships?.node?.object === 'node'
+                    ? rawDataToNode(attributes.relationships.node as FractalResponseData)
+                    : undefined,
+            user:
+                attributes.relationships?.user?.object === 'user'
+                    ? Transformers.toUser(attributes.relationships.user as FractalResponseData)
+                    : undefined,
+            variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(
+                rawDataToServerVariable,
+            ),
         },
-}) as Server;
+    } as Server);
 
 export interface Filters {
     id?: string;
@@ -166,12 +180,14 @@ export default (include: string[] = []) => {
         params.sort = (sortDirection ? '-' : '') + sort;
     }
 
-    return useSWR<PaginatedResult<Server>>([ 'servers', page, filters, sort, sortDirection ], async () => {
+    return useSWR<PaginatedResult<Server>>(['servers', page, filters, sort, sortDirection], async () => {
-        const { data } = await http.get('/api/application/servers', { params: { include: include.join(','), page, ...params } });
+        const { data } = await http.get('/api/application/servers', {
+            params: { include: include.join(','), page, ...params },
+        });
 
-        return ({
+        return {
             items: (data.data || []).map(rawDataToServer),
             pagination: getPaginationSet(data.meta.pagination),
-        });
+        };
     });
 };

resources/scripts/api/admin/servers/updateServer.ts

@@ -14,13 +14,13 @@ export interface Values {
         cpu: number;
         threads: string;
         oomDisabled: boolean;
-    }
+    };
 
     featureLimits: {
         allocations: number;
         backups: number;
         databases: number;
-    }
+    };
 
     allocationId: number;
     addAllocations: number[];
@@ -56,7 +56,7 @@ export default (id: number, server: Partial<Values>, include: string[] = []): Pr
                 add_allocations: server.addAllocations,
                 remove_allocations: server.removeAllocations,
             },
-            { params: { include: include.join(',') } }
+            { params: { include: include.join(',') } },
         )
             .then(({ data }) => resolve(rawDataToServer(data)))
             .catch(reject);

resources/scripts/api/admin/servers/updateServerStartup.ts

@@ -20,7 +20,7 @@ export default (id: number, values: Partial<Values>, include: string[] = []): Pr
                 image: values.image,
                 skip_scripts: values.skipScripts,
             },
-            { params: { include: include.join(',') } }
+            { params: { include: include.join(',') } },
         )
             .then(({ data }) => resolve(rawDataToServer(data)))
             .catch(reject);

resources/scripts/components/NavigationBar.tsx

@@ -46,13 +46,13 @@ export default () => {
     };
 
     return (
-        <div className="w-full bg-neutral-900 shadow-md overflow-x-auto">
+        <div className="w-full overflow-x-auto bg-neutral-900 shadow-md">
             <SpinnerOverlay visible={isLoggingOut} />
-            <div className="mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]">
+            <div className="mx-auto flex h-[3.5rem] w-full max-w-[1200px] items-center">
                 <div id="logo" className="flex-1">
                     <Link
                         to="/"
-                        className="text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150"
+                        className="px-4 font-header text-2xl text-neutral-200 no-underline transition-colors duration-150 hover:text-neutral-100"
                     >
                         {name}
                     </Link>
@@ -69,7 +69,7 @@ export default () => {
 
                     <Tooltip placement="bottom" content="Account Settings">
                         <NavLink to="/account">
-                            <span className="flex items-center w-5 h-5">
+                            <span className="flex h-5 w-5 items-center">
                                 <Avatar.User />
                             </span>
                         </NavLink>

resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx

@@ -197,8 +197,6 @@ export default function EggSettingsContainer() {
             dockerImages[alias] = image;
         }
 
-        console.log(dockerImages);
-
         updateEgg(egg.id, {
             ...values,
             dockerImages,

resources/scripts/components/admin/servers/OwnerSelect.tsx

@@ -16,7 +16,6 @@ export default ({ selected }: { selected?: User }) => {
     };
 
     const onSelect = (user: User | null) => {
-        console.log(user);
         setUser(user);
         setFieldValue('ownerId', user?.id || null);
     };

resources/scripts/components/admin/servers/ServerSettingsContainer.tsx

@@ -27,8 +27,6 @@ export default () => {
         // OOM Killer is enabled, rather than when disabled.
         values.limits.oomDisabled = !values.limits.oomDisabled;
 
-        console.log(values);
-
         updateServer(server.id, values)
             .then(() => {
                 // setServer({ ...server, ...s });

resources/scripts/components/admin/servers/ServerStartupContainer.tsx

@@ -33,7 +33,6 @@ function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server:
         }
 
         if (server.eggId === egg.id) {
-            console.log(server.container);
             setFieldValue('image', server.container.image);
             setFieldValue('startup', server.container.startup || '');
             return;

resources/scripts/components/admin/users/UserTableRow.tsx

@@ -30,14 +30,14 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
 
             <tr>
                 <td className={'whitespace-nowrap'}>
-                    <div className={'flex justify-end items-center w-8'}>
+                    <div className={'flex w-8 items-center justify-end'}>
                         <Checkbox checked={selected} onChange={e => onRowChange(user, e.currentTarget.checked)} />
                     </div>
                 </td>
-                <td className={'pl-6 py-4 whitespace-nowrap'}>
+                <td className={'whitespace-nowrap py-4 pl-6'}>
                     <div className={'flex items-center'}>
-                        <div className={'w-10 h-10'}>
+                        <div className={'h-10 w-10'}>
-                            <img src={user.avatarUrl} className={'w-10 h-10 rounded-full'} alt={'User avatar'} />
+                            <img src={user.avatarUrl} className={'h-10 w-10 rounded-full'} alt={'User avatar'} />
                         </div>
                         <div className={'ml-4'}>
                             <p className={'font-medium'}>{user.email}</p>
@@ -45,18 +45,18 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
                         </div>
                     </div>
                 </td>
-                <td className={'pl-2 py-4 whitespace-nowrap'}>
+                <td className={'whitespace-nowrap py-4 pl-2'}>
                     {user.isUsingTwoFactor && (
                         <span
                             className={
-                                'bg-green-100 uppercase text-green-700 font-semibold text-xs px-2 py-0.5 rounded'
+                                'rounded bg-green-100 px-2 py-0.5 text-xs font-semibold uppercase text-green-700'
                             }
                         >
                             2-FA Enabled
                         </span>
                     )}
                 </td>
-                <td className={'px-6 py-4 whitespace-nowrap'}>
+                <td className={'whitespace-nowrap px-6 py-4'}>
                     <Dropdown>
                         <Dropdown.Button className={'px-2'}>
                             <DotsVerticalIcon />

resources/scripts/components/admin/users/UsersContainer.tsx

@@ -42,9 +42,9 @@ const UsersContainer = () => {
 
     return (
         <div>
-            <div className={'flex justify-end mb-4'}>
+            <div className={'mb-4 flex justify-end'}>
                 <Button className={'shadow focus:ring-offset-2 focus:ring-offset-neutral-800'}>
-                    Add User <PlusIcon className={'ml-2 w-5 h-5'} />
+                    Add User <PlusIcon className={'ml-2 h-5 w-5'} />
                 </Button>
             </div>
             <div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
@@ -68,7 +68,7 @@ const UsersContainer = () => {
                 <Transition.Fade as={Fragment} show={selected.length > 0} duration={'duration-75'}>
                     <div
                         className={
-                            'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'
+                            'absolute top-0 left-0 flex h-full w-full items-center justify-end space-x-4 rounded-t bg-neutral-700 px-4'
                         }
                     >
                         <div className={'flex-1'}>
@@ -79,13 +79,13 @@ const UsersContainer = () => {
                             />
                         </div>
                         <Button.Text shape={Shape.IconSquare}>
-                            <SupportIcon className={'w-4 h-4'} />
+                            <SupportIcon className={'h-4 w-4'} />
                         </Button.Text>
                         <Button.Text shape={Shape.IconSquare}>
-                            <LockOpenIcon className={'w-4 h-4'} />
+                            <LockOpenIcon className={'h-4 w-4'} />
                         </Button.Text>
                         <Button.Text shape={Shape.IconSquare}>
-                            <TrashIcon className={'w-4 h-4'} />
+                            <TrashIcon className={'h-4 w-4'} />
                         </Button.Text>
                     </div>
                 </Transition.Fade>
@@ -94,7 +94,7 @@ const UsersContainer = () => {
                 <thead className={'bg-neutral-900'}>
                     <tr>
                         <th scope={'col'} className={'w-8'} />
-                        <th scope={'col'} className={'text-left px-6 py-2 w-full'}>
+                        <th scope={'col'} className={'w-full px-6 py-2 text-left'}>
                             Email
                         </th>
                         <th scope={'col'} />

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -34,13 +34,13 @@ export default () => {
         <PageContentBlock title={'Account Activity Log'}>
             <FlashMessageRender byKey={'account'} />
             {(filters.filters?.event || filters.filters?.ip) && (
-                <div className={'flex justify-end mb-2'}>
+                <div className={'mb-2 flex justify-end'}>
                     <Link
                         to={'#'}
                         className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
                         onClick={() => setFilters(value => ({ ...value, filters: {} }))}
                     >
-                        Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
+                        Clear Filters <XCircleIcon className={'ml-2 h-4 w-4'} />
                     </Link>
                 </div>
             )}

resources/scripts/components/dashboard/forms/RecoveryTokensDialog.tsx

@@ -28,7 +28,7 @@ export default ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
         >
             <Dialog.Icon position={'container'} type={'success'} />
             <CopyOnClick text={tokens.join('\n')} showInNotification={false}>
-                <pre className={'bg-slate-800 rounded p-2 mt-6'}>
+                <pre className={'mt-6 rounded bg-slate-800 p-2'}>
                     {grouped.map(value => (
                         <span key={value.join('_')} className={'block'}>
                             {value[0]}

resources/scripts/components/dashboard/forms/SetupTOTPDialog.tsx

@@ -62,7 +62,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
     return (
         <form id={'enable-totp-form'} onSubmit={submit}>
             <FlashMessageRender byKey={'account:two-step'} className={'mt-4'} />
-            <div className={'flex items-center justify-center w-56 h-56 p-2 bg-slate-50 shadow mx-auto mt-6'}>
+            <div className={'mx-auto mt-6 flex h-56 w-56 items-center justify-center bg-slate-50 p-2 shadow'}>
                 {!token ? (
                     <Spinner />
                 ) : (
@@ -70,7 +70,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
                 )}
             </div>
             <CopyOnClick text={token?.secret}>
-                <p className={'font-mono text-sm text-slate-100 text-center mt-2'}>
+                <p className={'mt-2 text-center font-mono text-sm text-slate-100'}>
                     {token?.secret.match(/.{1,4}/g)!.join(' ') || 'Loading...'}
                 </p>
             </CopyOnClick>
@@ -90,7 +90,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
                 autoComplete={'one-time-code'}
                 pattern={'\\d{6}'}
             />
-            <label htmlFor={'totp-password'} className={'block mt-3'}>
+            <label htmlFor={'totp-password'} className={'mt-3 block'}>
                 Account Password
             </label>
             <Input.Text

resources/scripts/components/elements/Code.tsx

@@ -9,7 +9,7 @@ interface CodeProps {
 
 export default ({ dark, className, children }: CodeProps) => (
     <code
-        className={classNames('font-mono text-sm px-2 py-1 inline-block rounded', className, {
+        className={classNames('inline-block rounded px-2 py-1 font-mono text-sm', className, {
             'bg-neutral-700': !dark,
             'bg-neutral-900 text-slate-100': dark,
         })}

resources/scripts/components/elements/CopyOnClick.tsx

@@ -50,8 +50,8 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
             {copied && (
                 <Portal>
                     <FadeTransition show duration="duration-250" key={copied ? 'visible' : 'invisible'}>
-                        <div className="fixed z-50 bottom-0 right-0 m-4">
+                        <div className="fixed bottom-0 right-0 z-50 m-4">
-                            <div className="rounded-md py-3 px-4 text-slate-200 bg-neutral-600/95 shadow">
+                            <div className="rounded-md bg-neutral-600/95 py-3 px-4 text-slate-200 shadow">
                                 <p>
                                     {showInNotification
                                         ? `Copied "${String(text)}" to clipboard.`

resources/scripts/components/elements/SearchableSelect.tsx

@@ -26,7 +26,15 @@ interface IdObj {
     id: number;
 }
 
-export const Option = <T extends IdObj>({ selectId, id, item, active, isHighlighted, onClick, children }: OptionProps<T>) => {
+export const Option = <T extends IdObj>({
+    selectId,
+    id,
+    item,
+    active,
+    isHighlighted,
+    onClick,
+    children,
+}: OptionProps<T>) => {
     if (isHighlighted === undefined) {
         isHighlighted = false;
     }
@@ -39,16 +47,32 @@ export const Option = <T extends IdObj>({ selectId, id, item, active, isHighligh
 
     if (active) {
         return (
-            <li id={selectId + '-select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
+            <li
+                id={selectId + '-select-item-' + id}
+                role="option"
+                css={[
+                    tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`,
+                    isHighlighted ? tw`bg-neutral-700` : null,
+                ]}
+                onClick={onClick(item)}
+            >
                 <div css={tw`flex items-center`}>
-                    <span css={tw`block font-medium truncate`}>
+                    <span css={tw`block font-medium truncate`}>{children}</span>
-                        {children}
-                    </span>
                 </div>
 
                 <span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
-                    <svg css={tw`w-5 h-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <svg
-                        <path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
+                        css={tw`w-5 h-5 text-primary-400`}
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden="true"
+                    >
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        />
                     </svg>
                 </span>
             </li>
@@ -56,11 +80,17 @@ export const Option = <T extends IdObj>({ selectId, id, item, active, isHighligh
     }
 
     return (
-        <li id={selectId + 'select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
+        <li
+            id={selectId + 'select-item-' + id}
+            role="option"
+            css={[
+                tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`,
+                isHighlighted ? tw`bg-neutral-700` : null,
+            ]}
+            onClick={onClick(item)}
+        >
             <div css={tw`flex items-center`}>
-                <span css={tw`block font-normal truncate`}>
+                <span css={tw`block font-normal truncate`}>{children}</span>
-                    {children}
-                </span>
             </div>
         </li>
     );
@@ -88,13 +118,27 @@ interface SearchableSelectProps<T> {
     className?: string;
 }
 
-export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder, selected, setSelected, items, setItems, onSearch, onSelect, getSelectedText, children, className }: SearchableSelectProps<T>) => {
+export const SearchableSelect = <T extends IdObj>({
-    const [ loading, setLoading ] = useState(false);
+    id,
-    const [ expanded, setExpanded ] = useState(false);
+    name,
+    label,
+    placeholder,
+    selected,
+    setSelected,
+    items,
+    setItems,
+    onSearch,
+    onSelect,
+    getSelectedText,
+    children,
+    className,
+}: SearchableSelectProps<T>) => {
+    const [loading, setLoading] = useState(false);
+    const [expanded, setExpanded] = useState(false);
 
-    const [ inputText, setInputText ] = useState('');
+    const [inputText, setInputText] = useState('');
 
-    const [ highlighted, setHighlighted ] = useState<number | null>(null);
+    const [highlighted, setHighlighted] = useState<number | null>(null);
 
     const searchInput = createRef<HTMLInputElement>();
     const itemsList = createRef<HTMLDivElement>();
@@ -220,7 +264,7 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
             window.removeEventListener('mousedown', clickHandler);
             window.removeEventListener('contextmenu', contextmenuHandler);
         };
-    }, [ expanded ]);
+    }, [expanded]);
 
     const onClick = (item: T) => () => {
         onSelect(item);
@@ -235,13 +279,15 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
         }
 
         setInputText(getSelectedText(selected) || '');
-    }, [ selected ]);
+    }, [selected]);
 
     // This shit is really stupid but works, so is it really stupid?
-    const c = React.Children.map(children, child => React.cloneElement(child as ReactElement, {
+    const c = React.Children.map(children, child =>
+        React.cloneElement(child as ReactElement, {
             isHighlighted: ((child as ReactElement).props as OptionProps<T>).id === highlighted,
             onClick: onClick.bind(child),
-    }));
+        }),
+    );
 
     return (
         <div className={className}>
@@ -269,33 +315,57 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
                     />
                 </InputSpinner>
 
-                <div css={[ tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3`, !expanded && tw`pointer-events-none` ]}>
+                <div
-                    {inputText !== '' && expanded &&
+                    css={[
-                    <svg css={tw`w-5 h-5 text-neutral-400 cursor-pointer`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                        tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3`,
+                        !expanded && tw`pointer-events-none`,
+                    ]}
+                >
+                    {inputText !== '' && expanded && (
+                        <svg
+                            css={tw`w-5 h-5 text-neutral-400 cursor-pointer`}
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
                             onMouseDown={e => {
                                 e.preventDefault();
                                 setInputText('');
                             }}
                         >
-                        <path clipRule="evenodd" fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
+                            <path
+                                clipRule="evenodd"
+                                fillRule="evenodd"
+                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                            />
                         </svg>
-                    }
+                    )}
-                    <svg css={tw`w-5 h-5 text-neutral-400 pointer-events-none`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <svg
-                        <path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
+                        css={tw`w-5 h-5 text-neutral-400 pointer-events-none`}
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                        aria-hidden="true"
+                    >
+                        <path
+                            clipRule="evenodd"
+                            fillRule="evenodd"
+                            d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+                        />
                     </svg>
                 </div>
 
                 <Dropdown ref={itemsList} expanded={expanded}>
-                    {items === null || items.length < 1 ?
+                    {items === null || items.length < 1 ? (
-                        items === null || inputText.length < 2 ?
+                        items === null || inputText.length < 2 ? (
                             <div css={tw`flex flex-row items-center h-10 px-3`}>
                                 <p css={tw`text-sm`}>Please type 2 or more characters.</p>
                             </div>
-                            :
+                        ) : (
                             <div css={tw`flex flex-row items-center h-10 px-3`}>
                                 <p css={tw`text-sm`}>No results found.</p>
                             </div>
-                        :
+                        )
+                    ) : (
                         <ul
                             tabIndex={-1}
                             role={id + '-select'}
@@ -305,7 +375,7 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
                         >
                             {c}
                         </ul>
-                    }
+                    )}
                 </Dropdown>
             </div>
         </div>

resources/scripts/components/elements/SelectField.tsx

@@ -1,7 +1,22 @@
 import { CSSObject } from '@emotion/serialize';
 import { Field as FormikField, FieldProps } from 'formik';
 import React, { forwardRef } from 'react';
-import Select, { ContainerProps, ControlProps, GroupProps, IndicatorContainerProps, IndicatorProps, InputProps, MenuListComponentProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
+import Select, {
+    ContainerProps,
+    ControlProps,
+    GroupProps,
+    IndicatorContainerProps,
+    IndicatorProps,
+    InputProps,
+    MenuListComponentProps,
+    MenuProps,
+    MultiValueProps,
+    OptionProps,
+    PlaceholderProps,
+    SingleValueProps,
+    StylesConfig,
+    ValueContainerProps,
+} from 'react-select';
 import Async from 'react-select/async';
 import Creatable from 'react-select/creatable';
 import tw, { theme } from 'twin.macro';
@@ -42,10 +57,9 @@ export const SelectStyle: StylesConfig<T, any, any> = {
             borderWidth: '2px',
             color: theme`colors.neutral.200`,
             cursor: 'pointer',
-            boxShadow: props.isFocused ?
+            boxShadow: props.isFocused
-                'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
+                ? 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
-                :
+                : undefined,
-                undefined,
 
             ':hover': {
                 borderColor: !props.isFocused ? theme`colors.neutral.400` : theme`colors.primary.300`,
@@ -228,22 +242,29 @@ interface SelectFieldProps {
     isSearchable?: boolean;
 
     isCreatable?: boolean;
-    isValidNewOption?: ((
+    isValidNewOption?:
-        inputValue: string,
+        | ((inputValue: string, value: ValueType<any, boolean>, options: ReadonlyArray<any>) => boolean)
-        value: ValueType<any, boolean>,
+        | undefined;
-        options: ReadonlyArray<any>,
-    ) => boolean) | undefined;
 
     className?: string;
 }
 
-const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
+const SelectField = forwardRef<HTMLElement, SelectFieldProps>(function Select2(
-    function Select2 ({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) {
+    { id, name, label, description, validate, className, isMulti, isCreatable, ...props },
+    ref,
+) {
     const { options } = props;
 
-        const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
+    const onChange = (
+        options: Option | Option[],
+        name: string,
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void,
+    ) => {
         if (isMulti) {
-                setFieldValue(name, (options as Option[]).map(o => o.value));
+            setFieldValue(
+                name,
+                (options as Option[]).map(o => o.value),
+            );
             return;
         }
 
@@ -255,7 +276,7 @@ const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
             {({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
                 <div className={className}>
                     {label && <Label htmlFor={id}>{label}</Label>}
-                        {isCreatable ?
+                    {isCreatable ? (
                         <Creatable
                             {...field}
                             {...props}
@@ -265,7 +286,7 @@ const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
                             onChange={o => onChange(o, name, setFieldValue)}
                             isMulti={isMulti}
                         />
-                            :
+                    ) : (
                         <Select
                             {...field}
                             {...props}
@@ -275,20 +296,20 @@ const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
                             onChange={o => onChange(o, name, setFieldValue)}
                             isMulti={isMulti}
                         />
-                        }
+                    )}
-                        {touched[field.name] && errors[field.name] ?
+                    {touched[field.name] && errors[field.name] ? (
                         <p css={tw`text-red-200 text-xs mt-1`}>
-                                {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
+                            {(errors[field.name] as string).charAt(0).toUpperCase() +
+                                (errors[field.name] as string).slice(1)}
                         </p>
-                            :
+                    ) : description ? (
-                            description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
+                        <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p>
-                        }
+                    ) : null}
                 </div>
             )}
         </FormikField>
     );
-    }
+});
-);
 
 interface AsyncSelectFieldProps {
     id?: string;
@@ -305,11 +326,20 @@ interface AsyncSelectFieldProps {
     loadOptions(inputValue: string, callback: (options: Array<Option>) => void): void;
 }
 
-const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(
+const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(function AsyncSelect2(
-    function AsyncSelect2 ({ id, name, label, description, validate, className, isMulti, ...props }, ref) {
+    { id, name, label, description, validate, className, isMulti, ...props },
-        const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
+    ref,
+) {
+    const onChange = (
+        options: Option | Option[],
+        name: string,
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void,
+    ) => {
         if (isMulti) {
-                setFieldValue(name, (options as Option[]).map(o => Number(o.value)));
+            setFieldValue(
+                name,
+                (options as Option[]).map(o => Number(o.value)),
+            );
             return;
         }
 
@@ -329,19 +359,19 @@ const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(
                         onChange={o => onChange(o, name, setFieldValue)}
                         isMulti={isMulti}
                     />
-                        {touched[field.name] && errors[field.name] ?
+                    {touched[field.name] && errors[field.name] ? (
                         <p css={tw`text-red-200 text-xs mt-1`}>
-                                {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
+                            {(errors[field.name] as string).charAt(0).toUpperCase() +
+                                (errors[field.name] as string).slice(1)}
                         </p>
-                            :
+                    ) : description ? (
-                            description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
+                        <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p>
-                        }
+                    ) : null}
                 </div>
             )}
         </FormikField>
     );
-    }
+});
-);
 
 export default SelectField;
 export { AsyncSelectField };

resources/scripts/components/elements/activity/ActivityLogEntry.tsx

@@ -44,13 +44,13 @@ export default ({ activity, children }: Props) => {
     const properties = wrapProperties(activity.properties);
 
     return (
-        <div className={'grid grid-cols-10 py-4 border-b-2 border-slate-800 last:rounded-b last:border-0 group'}>
+        <div className={'group grid grid-cols-10 border-b-2 border-slate-800 py-4 last:rounded-b last:border-0'}>
-            <div className={'hidden sm:flex sm:col-span-1 items-center justify-center select-none'}>
+            <div className={'hidden select-none items-center justify-center sm:col-span-1 sm:flex'}>
-                <div className={'flex items-center w-10 h-10 rounded-full bg-slate-600 overflow-hidden'}>
+                <div className={'flex h-10 w-10 items-center overflow-hidden rounded-full bg-slate-600'}>
                     <Avatar name={actor?.uuid || 'system'} />
                 </div>
             </div>
-            <div className={'col-span-10 sm:col-span-9 flex'}>
+            <div className={'col-span-10 flex sm:col-span-9'}>
                 <div className={'flex-1 px-4 sm:px-0'}>
                     <div className={'flex items-center text-slate-50'}>
                         <Tooltip placement={'top'} content={actor?.email || 'System User'}>
@@ -59,7 +59,7 @@ export default ({ activity, children }: Props) => {
                         <span className={'text-slate-400'}>&nbsp;&mdash;&nbsp;</span>
                         <Link
                             to={`#${pathTo({ event: activity.event })}`}
-                            className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
+                            className={'transition-colors duration-75 hover:text-cyan-400 active:text-cyan-400'}
                         >
                             {activity.event}
                         </Link>

resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx

@@ -11,7 +11,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
             <Dialog open={open} onClose={() => setOpen(false)} hideCloseIcon title={'Metadata'}>
                 <pre
                     className={
-                        'bg-slate-900 rounded p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
+                        'overflow-x-scroll whitespace-pre-wrap rounded bg-slate-900 p-2 font-mono text-sm leading-relaxed'
                     }
                 >
                     {JSON.stringify(meta, null, 2)}
@@ -23,11 +23,11 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
             <button
                 aria-describedby={'View additional event metadata'}
                 className={
-                    'p-2 transition-colors duration-100 text-slate-400 group-hover:text-slate-300 group-hover:hover:text-slate-50'
+                    'p-2 text-slate-400 transition-colors duration-100 group-hover:text-slate-300 group-hover:hover:text-slate-50'
                 }
                 onClick={() => setOpen(true)}
             >
-                <ClipboardListIcon className={'w-5 h-5'} />
+                <ClipboardListIcon className={'h-5 w-5'} />
             </button>
         </div>
     );

resources/scripts/components/elements/alert/Alert.tsx

@@ -12,7 +12,7 @@ export default ({ type, className, children }: AlertProps) => {
     return (
         <div
             className={classNames(
-                'flex items-center border-l-8 text-slate-50 rounded-md shadow px-4 py-3',
+                'flex items-center rounded-md border-l-8 px-4 py-3 text-slate-50 shadow',
                 {
                     ['border-red-500 bg-red-500/25']: type === 'danger',
                     ['border-yellow-500 bg-yellow-500/25']: type === 'warning',
@@ -21,9 +21,9 @@ export default ({ type, className, children }: AlertProps) => {
             )}
         >
             {type === 'danger' ? (
-                <ShieldExclamationIcon className={'w-6 h-6 text-red-400 mr-2'} />
+                <ShieldExclamationIcon className={'mr-2 h-6 w-6 text-red-400'} />
             ) : (
-                <ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
+                <ExclamationIcon className={'mr-2 h-6 w-6 text-yellow-500'} />
             )}
             {children}
         </div>

resources/scripts/components/elements/dialog/Dialog.tsx

@@ -73,8 +73,8 @@ export default ({
                         open={open}
                         onClose={onDialogClose}
                     >
-                        <div className={'fixed inset-0 bg-slate-900/50 z-40'} />
+                        <div className={'fixed inset-0 z-40 bg-slate-900/50'} />
-                        <div className={'fixed inset-0 overflow-y-auto z-50'}>
+                        <div className={'fixed inset-0 z-50 overflow-y-auto'}>
                             <div
                                 ref={container}
                                 className={styles.container}
@@ -89,9 +89,9 @@ export default ({
                                     variants={variants}
                                     className={styles.panel}
                                 >
-                                    <div className={'flex p-6 pb-0 overflow-y-auto'}>
+                                    <div className={'flex overflow-y-auto p-6 pb-0'}>
                                         {iconPosition === 'container' && icon}
-                                        <div className={'flex-1 max-h-[70vh] min-w-0'}>
+                                        <div className={'max-h-[70vh] min-w-0 flex-1'}>
                                             <div className={'flex items-center'}>
                                                 {iconPosition !== 'container' && icon}
                                                 <div>

resources/scripts/components/elements/dialog/DialogFooter.tsx

@@ -8,7 +8,7 @@ export default ({ children }: { children: React.ReactNode }) => {
 
     useDeepCompareEffect(() => {
         setFooter(
-            <div className={'px-6 py-3 bg-slate-700 flex items-center justify-end space-x-3 rounded-b'}>
+            <div className={'flex items-center justify-end space-x-3 rounded-b bg-slate-700 px-6 py-3'}>
                 {children}
             </div>,
         );

resources/scripts/components/elements/dialog/DialogIcon.tsx

@@ -18,7 +18,7 @@ export default ({ type, position, className }: DialogIconProps) => {
 
         setIcon(
             <div className={classNames(styles.dialog_icon, styles[type], className)}>
-                <Icon className={'w-6 h-6'} />
+                <Icon className={'h-6 w-6'} />
             </div>,
         );
     }, [type, className]);

resources/scripts/components/elements/dropdown/Dropdown.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const DropdownGap = ({ invisible }: { invisible?: boolean }) => (
-    <div className={classNames('border m-2', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
+    <div className={classNames('m-2 border', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
 );
 
 type TypedChild = (React.ReactChild | React.ReactFragment | React.ReactPortal) & {

resources/scripts/components/elements/table/PaginationFooter.tsx

@@ -37,7 +37,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
     });
 
     return (
-        <div className={classNames('flex items-center justify-between my-2', className)}>
+        <div className={classNames('my-2 flex items-center justify-between', className)}>
             <p className={'text-sm text-neutral-500'}>
                 Showing&nbsp;
                 <span className={'font-semibold text-neutral-400'}>
@@ -50,7 +50,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
             {pagination.totalPages > 1 && (
                 <div className={'flex space-x-1'}>
                     <Button.Text {...buttonProps(1)} disabled={pages.previous.length !== 2}>
-                        <ChevronDoubleLeftIcon className={'w-3 h-3'} />
+                        <ChevronDoubleLeftIcon className={'h-3 w-3'} />
                     </Button.Text>
                     {pages.previous.reverse().map(value => (
                         <Button.Text key={`previous-${value}`} {...buttonProps(value)}>
@@ -66,7 +66,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
                         </Button.Text>
                     ))}
                     <Button.Text {...buttonProps(total)} disabled={pages.next.length !== 2}>
-                        <ChevronDoubleRightIcon className={'w-3 h-3'} />
+                        <ChevronDoubleRightIcon className={'h-3 w-3'} />
                     </Button.Text>
                 </div>
             )}

resources/scripts/components/elements/table/TFootPaginated.tsx

@@ -3,14 +3,18 @@ import { PaginationDataSet } from '@/api/http';
 
 const TFootPaginated = ({ pagination, span }: { span: number; pagination: PaginationDataSet }) => {
     const start = (pagination.currentPage - 1) * pagination.perPage;
-    const end = ((pagination.currentPage - 1) * pagination.perPage) + pagination.count;
+    const end = (pagination.currentPage - 1) * pagination.perPage + pagination.count;
 
     return (
         <tfoot>
             <tr className={'bg-neutral-800'}>
                 <td scope={'col'} colSpan={span} className={'px-4 py-2'}>
                     <p className={'text-sm text-neutral-500'}>
-                        Showing <span className={'font-semibold text-neutral-400'}>{Math.max(start, Math.min(pagination.total, 1))}</span> to&nbsp;
+                        Showing{' '}
+                        <span className={'font-semibold text-neutral-400'}>
+                            {Math.max(start, Math.min(pagination.total, 1))}
+                        </span>{' '}
+                        to&nbsp;
                         <span className={'font-semibold text-neutral-400'}>{end}</span> of&nbsp;
                         <span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
                     </p>

resources/scripts/components/elements/tooltip/Tooltip.tsx

@@ -108,7 +108,7 @@ export default ({ children, ...props }: Props) => {
                                         ay || 0,
                                     )}px) rotate(45deg)`,
                                 }}
-                                className={classNames('absolute bg-slate-900 w-3 h-3', side)}
+                                className={classNames('absolute h-3 w-3 bg-slate-900', side)}
                             />
                         )}
                     </motion.div>

resources/scripts/components/server/ServerActivityLogContainer.tsx

@@ -35,20 +35,20 @@ export default () => {
         <ServerContentBlock title={'Activity Log'}>
             <FlashMessageRender byKey={'server:activity'} />
             {(filters.filters?.event || filters.filters?.ip) && (
-                <div className={'flex justify-end mb-2'}>
+                <div className={'mb-2 flex justify-end'}>
                     <Link
                         to={'#'}
                         className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
                         onClick={() => setFilters(value => ({ ...value, filters: {} }))}
                     >
-                        Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
+                        Clear Filters <XCircleIcon className={'ml-2 h-4 w-4'} />
                     </Link>
                 </div>
             )}
             {!data && isValidating ? (
                 <Spinner centered />
             ) : !data?.items.length ? (
-                <p className={'text-sm text-center text-slate-400'}>No activity logs available for this server.</p>
+                <p className={'text-center text-sm text-slate-400'}>No activity logs available for this server.</p>
             ) : (
                 <div className={'bg-slate-700'}>
                     {data?.items.map(activity => (

resources/scripts/components/server/console/ChartBlock.tsx

@@ -12,7 +12,7 @@ export default ({ title, legend, children }: ChartBlockProps) => (
     <div className={classNames(styles.chart_container, 'group')}>
         <div className={'flex items-center justify-between px-4 py-2'}>
             <h3 className={'font-header transition-colors duration-100 group-hover:text-slate-50'}>{title}</h3>
-            {legend && <p className={'text-sm flex items-center'}>{legend}</p>}
+            {legend && <p className={'flex items-center text-sm'}>{legend}</p>}
         </div>
         <div className={'z-10 ml-2'}>{children}</div>
     </div>

resources/scripts/components/server/console/Console.tsx

@@ -232,11 +232,11 @@ export default () => {
                     />
                     <div
                         className={classNames(
-                            'text-slate-100 peer-focus:text-slate-50 peer-focus:animate-pulse',
+                            'text-slate-100 peer-focus:animate-pulse peer-focus:text-slate-50',
                             styles.command_icon,
                         )}
                     >
-                        <ChevronDoubleRightIcon className={'w-4 h-4'} />
+                        <ChevronDoubleRightIcon className={'h-4 w-4'} />
                     </div>
                 </div>
             )}

resources/scripts/components/server/console/ServerConsoleContainer.tsx

@@ -33,26 +33,26 @@ function ServerConsoleContainer() {
                         : 'This server is currently being transferred to another node and all actions are unavailable.'}
                 </Alert>
             )}
-            <div className={'grid grid-cols-4 gap-4 mb-4'}>
+            <div className={'mb-4 grid grid-cols-4 gap-4'}>
-                <div className={'hidden sm:block sm:col-span-2 lg:col-span-3 pr-4'}>
+                <div className={'hidden pr-4 sm:col-span-2 sm:block lg:col-span-3'}>
-                    <h1 className={'font-header text-2xl text-slate-50 leading-relaxed line-clamp-1'}>{name}</h1>
+                    <h1 className={'font-header text-2xl leading-relaxed text-slate-50 line-clamp-1'}>{name}</h1>
                     <p className={'text-sm line-clamp-2'}>{description}</p>
                 </div>
-                <div className={'col-span-4 sm:col-span-2 lg:col-span-1 self-end'}>
+                <div className={'col-span-4 self-end sm:col-span-2 lg:col-span-1'}>
                     <Can action={['control.start', 'control.stop', 'control.restart']} matchAny>
-                        <PowerButtons className={'flex sm:justify-end space-x-2'} />
+                        <PowerButtons className={'flex space-x-2 sm:justify-end'} />
                     </Can>
                 </div>
             </div>
-            <div className={'grid grid-cols-4 gap-2 sm:gap-4 mb-4'}>
+            <div className={'mb-4 grid grid-cols-4 gap-2 sm:gap-4'}>
-                <div className={'flex col-span-4 lg:col-span-3'}>
+                <div className={'col-span-4 flex lg:col-span-3'}>
                     <Spinner.Suspense>
                         <Console />
                     </Spinner.Suspense>
                 </div>
-                <ServerDetailsBlock className={'col-span-4 lg:col-span-1 order-last lg:order-none'} />
+                <ServerDetailsBlock className={'order-last col-span-4 lg:order-none lg:col-span-1'} />
             </div>
-            <div className={'grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-4'}>
+            <div className={'grid grid-cols-1 gap-2 sm:gap-4 md:grid-cols-3'}>
                 <Spinner.Suspense>
                     <StatGraphs />
                 </Spinner.Suspense>

resources/scripts/components/server/console/ServerDetailsBlock.tsx

@@ -38,7 +38,7 @@ function Limit({ limit, children }: { limit: string | null; children: ReactNode
     return (
         <>
             {children}
-            <span className={'ml-1 text-slate-300 text-[70%] select-none'}>/ {limit || <>&infin;</>}</span>
+            <span className={'ml-1 select-none text-[70%] text-slate-300'}>/ {limit || <>&infin;</>}</span>
         </>
     );
 }

resources/scripts/components/server/console/StatBlock.tsx

@@ -33,11 +33,11 @@ function StatBlock({ title, copyOnClick, icon, color, className, children }: Sta
                         })}
                     />
                 </div>
-                <div className={'flex flex-col justify-center overflow-hidden w-full'}>
+                <div className={'flex w-full flex-col justify-center overflow-hidden'}>
-                    <p className={'font-header leading-tight text-xs md:text-sm text-slate-200'}>{title}</p>
+                    <p className={'font-header text-xs leading-tight text-slate-200 md:text-sm'}>{title}</p>
                     <div
                         ref={ref}
-                        className={'h-[1.75rem] w-full font-semibold text-slate-50 truncate'}
+                        className={'h-[1.75rem] w-full truncate font-semibold text-slate-50'}
                         style={{ fontSize }}
                     >
                         {children}

resources/scripts/components/server/console/StatGraphs.tsx

@@ -79,10 +79,10 @@ export default () => {
                 legend={
                     <>
                         <Tooltip arrow content={'Inbound'}>
-                            <CloudDownloadIcon className={'mr-2 w-4 h-4 text-yellow-400'} />
+                            <CloudDownloadIcon className={'mr-2 h-4 w-4 text-yellow-400'} />
                         </Tooltip>
                         <Tooltip arrow content={'Outbound'}>
-                            <CloudUploadIcon className={'w-4 h-4 text-cyan-400'} />
+                            <CloudUploadIcon className={'h-4 w-4 text-cyan-400'} />
                         </Tooltip>
                     </>
                 }

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -64,7 +64,7 @@ export default () => {
     return (
         <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
             <ErrorBoundary>
-                <div className={'flex flex-wrap-reverse md:flex-nowrap mb-4'}>
+                <div className={'mb-4 flex flex-wrap-reverse md:flex-nowrap'}>
                     <FileManagerBreadcrumbs
                         renderLeft={
                             <FileActionCheckbox

resources/scripts/components/server/files/FileManagerStatus.tsx

@@ -25,7 +25,7 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
             {...svgProps}
             stroke={'white'}
             strokeDasharray={28 * Math.PI}
-            className={'rotate-[-90deg] origin-[50%_50%] transition-[stroke-dashoffset] duration-300'}
+            className={'origin-[50%_50%] rotate-[-90deg] transition-[stroke-dashoffset] duration-300'}
             style={{ strokeDashoffset: ((100 - progress) / 100) * 28 * Math.PI }}
         />
     </svg>
@@ -40,20 +40,20 @@ const FileUploadList = () => {
     );
 
     return (
-        <div className={'space-y-2 mt-6'}>
+        <div className={'mt-6 space-y-2'}>
             {uploads.map(([name, file]) => (
-                <div key={name} className={'flex items-center space-x-3 bg-slate-700 p-3 rounded'}>
+                <div key={name} className={'flex items-center space-x-3 rounded bg-slate-700 p-3'}>
                     <Tooltip content={`${Math.floor((file.loaded / file.total) * 100)}%`} placement={'left'}>
                         <div className={'flex-shrink-0'}>
-                            <Spinner progress={(file.loaded / file.total) * 100} className={'w-6 h-6'} />
+                            <Spinner progress={(file.loaded / file.total) * 100} className={'h-6 w-6'} />
                         </div>
                     </Tooltip>
                     <Code className={'flex-1 truncate'}>{name}</Code>
                     <button
                         onClick={cancelFileUpload.bind(this, name)}
-                        className={'text-slate-500 hover:text-slate-200 transition-colors duration-75'}
+                        className={'text-slate-500 transition-colors duration-75 hover:text-slate-200'}
                     >
-                        <XIcon className={'w-5 h-5'} />
+                        <XIcon className={'h-5 w-5'} />
                     </button>
                 </div>
             ))}
@@ -92,11 +92,11 @@ export default () => {
             {count > 0 && (
                 <Tooltip content={`${count} files are uploading, click to view`}>
                     <button
-                        className={'flex items-center justify-center w-10 h-10'}
+                        className={'flex h-10 w-10 items-center justify-center'}
                         onClick={() => (open.value = true)}
                     >
-                        <Spinner progress={(progress.uploaded / progress.total) * 100} className={'w-8 h-8'} />
+                        <Spinner progress={(progress.uploaded / progress.total) * 100} className={'h-8 w-8'} />
-                        <CloudUploadIcon className={'h-3 absolute mx-auto animate-pulse'} />
+                        <CloudUploadIcon className={'absolute mx-auto h-3 animate-pulse'} />
                     </button>
                 </Tooltip>
             )}

resources/scripts/components/server/files/MassActionsBar.tsx

@@ -62,7 +62,7 @@ const MassActionsBar = () => {
 
     return (
         <>
-            <div className="pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center">
+            <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-20 flex justify-center">
                 <SpinnerOverlay visible={loading} size={'large'} fixed>
                     {loadingMessage}
                 </SpinnerOverlay>
@@ -93,9 +93,9 @@ const MassActionsBar = () => {
                     />
                 )}
                 <Portal>
-                    <div className="fixed bottom-0 mb-6 flex justify-center w-full z-50">
+                    <div className="fixed bottom-0 z-50 mb-6 flex w-full justify-center">
                         <FadeTransition duration="duration-75" show={selectedFiles.length > 0} appear unmount>
-                            <div className="flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50">
+                            <div className="pointer-events-auto flex items-center space-x-4 rounded bg-black/50 p-4">
                                 <Button onClick={() => setShowMove(true)}>Move</Button>
                                 <Button onClick={onClickCompress}>Archive</Button>
                                 <Button.Danger variant={Button.Variants.Secondary} onClick={() => setShowConfirm(true)}>

resources/scripts/components/server/files/UploadButton.tsx

@@ -120,14 +120,14 @@ export default ({ className }: WithClassname) => {
                             onFileSubmission(e.dataTransfer.files);
                         }}
                     >
-                        <div className={'w-full flex items-center justify-center pointer-events-none'}>
+                        <div className={'pointer-events-none flex w-full items-center justify-center'}>
                             <div
                                 className={
-                                    'flex items-center space-x-4 bg-black w-full ring-4 ring-blue-200 ring-opacity-60 rounded p-6 mx-10 max-w-sm'
+                                    'mx-10 flex w-full max-w-sm items-center space-x-4 rounded bg-black p-6 ring-4 ring-blue-200 ring-opacity-60'
                                 }
                             >
-                                <CloudUploadIcon className={'w-10 h-10 flex-shrink-0'} />
+                                <CloudUploadIcon className={'h-10 w-10 flex-shrink-0'} />
-                                <p className={'font-header flex-1 text-lg text-neutral-100 text-center'}>
+                                <p className={'flex-1 text-center font-header text-lg text-neutral-100'}>
                                     Drag and drop files to upload.
                                 </p>
                             </div>

resources/scripts/components/server/network/AllocationRow.tsx

@@ -60,8 +60,8 @@ const AllocationRow = ({ allocation }: Props) => {
     };
 
     return (
-        <GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
+        <GreyRowBox $hoverable={false} className={'mt-2 flex-wrap md:flex-nowrap'}>
-            <div className={'flex items-center w-full md:w-auto'}>
+            <div className={'flex w-full items-center md:w-auto'}>
                 <div className={'pl-4 pr-6 text-neutral-400'}>
                     <FontAwesomeIcon icon={faNetworkWired} />
                 </div>
@@ -79,24 +79,24 @@ const AllocationRow = ({ allocation }: Props) => {
                     )}
                     <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
                 </div>
-                <div className={'w-16 md:w-24 overflow-hidden'}>
+                <div className={'w-16 overflow-hidden md:w-24'}>
                     <Code dark>{allocation.port}</Code>
                     <Label>Port</Label>
                 </div>
             </div>
-            <div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
+            <div className={'mt-4 w-full md:mt-0 md:w-auto md:flex-1'}>
                 <InputSpinner visible={loading}>
                     <Textarea
-                        className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
+                        className={'border-transparent bg-neutral-800 hover:border-neutral-600'}
                         placeholder={'Notes'}
                         defaultValue={allocation.notes || undefined}
                         onChange={e => setAllocationNotes(e.currentTarget.value)}
                     />
                 </InputSpinner>
             </div>
-            <div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
+            <div className={'mt-4 flex w-full justify-end space-x-4 md:mt-0 md:w-48'}>
                 {allocation.isDefault ? (
-                    <Button size={Button.Sizes.Small} className={'!text-slate-50 !bg-blue-600'} disabled>
+                    <Button size={Button.Sizes.Small} className={'!bg-blue-600 !text-slate-50'} disabled>
                         Primary
                     </Button>
                 ) : (

resources/scripts/components/server/schedules/DeleteScheduleButton.tsx

@@ -50,7 +50,7 @@ export default ({ scheduleId, onDeleted }: Props) => {
             </Dialog.Confirm>
             <Button.Danger
                 variant={Button.Variants.Secondary}
-                className={'flex-1 sm:flex-none mr-4 border-transparent'}
+                className={'mr-4 flex-1 border-transparent sm:flex-none'}
                 onClick={() => setVisible(true)}
             >
                 Delete

resources/scripts/components/server/schedules/ScheduleCronRow.tsx

@@ -8,25 +8,25 @@ interface Props {
 
 const ScheduleCronRow = ({ cron, className }: Props) => (
     <div className={classNames('flex', className)}>
-        <div className={'w-1/5 sm:w-auto text-center'}>
+        <div className={'w-1/5 text-center sm:w-auto'}>
             <p className={'font-medium'}>{cron.minute}</p>
-            <p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
+            <p className={'text-2xs uppercase text-neutral-500'}>Minute</p>
         </div>
-        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+        <div className={'ml-4 w-1/5 text-center sm:w-auto'}>
             <p className={'font-medium'}>{cron.hour}</p>
-            <p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
+            <p className={'text-2xs uppercase text-neutral-500'}>Hour</p>
         </div>
-        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+        <div className={'ml-4 w-1/5 text-center sm:w-auto'}>
             <p className={'font-medium'}>{cron.dayOfMonth}</p>
-            <p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
+            <p className={'text-2xs uppercase text-neutral-500'}>Day (Month)</p>
         </div>
-        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+        <div className={'ml-4 w-1/5 text-center sm:w-auto'}>
             <p className={'font-medium'}>{cron.month}</p>
-            <p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
+            <p className={'text-2xs uppercase text-neutral-500'}>Month</p>
         </div>
-        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+        <div className={'ml-4 w-1/5 text-center sm:w-auto'}>
             <p className={'font-medium'}>{cron.dayOfWeek}</p>
-            <p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
+            <p className={'text-2xs uppercase text-neutral-500'}>Day (Week)</p>
         </div>
     </div>
 );

resources/scripts/components/server/schedules/ScheduleEditContainer.tsx

@@ -118,7 +118,7 @@ export default () => {
                             </div>
                             <div css={tw`flex sm:block mt-3 sm:mt-0`}>
                                 <Can action={'schedule.update'}>
-                                    <Button.Text className={'flex-1 mr-4'} onClick={toggleEditModal}>
+                                    <Button.Text className={'mr-4 flex-1'} onClick={toggleEditModal}>
                                         Edit
                                     </Button.Text>
                                     <NewTaskButton schedule={schedule} />

resources/scripts/helpers/extractSearchFilters.spec.ts

@@ -1,79 +1,86 @@
 import extractSearchFilters from '@/helpers/extractSearchFilters';
 
-type TestCase = [ string, 0 | Record<string, string[]> ];
+type TestCase = [string, 0 | Record<string, string[]>];
 
 describe('@/helpers/extractSearchFilters.ts', function () {
     const cases: TestCase[] = [
-        [ '', {} ],
+        ['', {}],
-        [ 'hello world', {} ],
+        ['hello world', {}],
-        [ 'bar:xyz foo:abc', { bar: [ 'xyz' ], foo: [ 'abc' ] } ],
+        ['bar:xyz foo:abc', { bar: ['xyz'], foo: ['abc'] }],
-        [ 'hello foo:abc', { foo: [ 'abc' ] } ],
+        ['hello foo:abc', { foo: ['abc'] }],
-        [ 'hello foo:abc world another bar:xyz hodor', { foo: [ 'abc' ], bar: [ 'xyz' ] } ],
+        ['hello foo:abc world another bar:xyz hodor', { foo: ['abc'], bar: ['xyz'] }],
-        [ 'foo:1 foo:2 foo: 3 foo:4', { foo: [ '1', '2', '4' ] } ],
+        ['foo:1 foo:2 foo: 3 foo:4', { foo: ['1', '2', '4'] }],
-        [ ' foo:123 foo:bar:123 foo: foo:string', { foo: [ '123', 'bar:123', 'string' ] } ],
+        [' foo:123 foo:bar:123 foo: foo:string', { foo: ['123', 'bar:123', 'string'] }],
-        [ 'foo:1 bar:2 baz:3', { foo: [ '1' ], bar: [ '2' ] } ],
+        ['foo:1 bar:2 baz:3', { foo: ['1'], bar: ['2'] }],
-        [ 'hello "world this" is quoted', {} ],
+        ['hello "world this" is quoted', {}],
-        [ 'hello "world foo:123 is" quoted', {} ],
+        ['hello "world foo:123 is" quoted', {}],
-        [ 'hello foo:"this is quoted" bar:"this \\"is deeply\\" quoted" world foo:another', {
+        [
-            foo: [ 'this is quoted', 'another' ],
+            'hello foo:"this is quoted" bar:"this \\"is deeply\\" quoted" world foo:another',
-            bar: [ 'this "is deeply" quoted' ],
+            {
-        } ],
+                foo: ['this is quoted', 'another'],
+                bar: ['this "is deeply" quoted'],
+            },
+        ],
     ];
 
     it.each(cases)('should return expected filters: [%s]', function (input, output) {
-        expect(extractSearchFilters(input, [ 'foo', 'bar' ])).toStrictEqual({
+        expect(extractSearchFilters(input, ['foo', 'bar'])).toStrictEqual({
             filters: output,
         });
     });
 
     it('should allow modification of the default parameter', function () {
-        expect(extractSearchFilters('hello world', [ 'foo' ], { defaultFilter: 'default_param', returnUnmatched: true })).toStrictEqual({
+        expect(
+            extractSearchFilters('hello world', ['foo'], { defaultFilter: 'default_param', returnUnmatched: true }),
+        ).toStrictEqual({
             filters: {
-                default_param: [ 'hello world' ],
+                default_param: ['hello world'],
             },
         });
 
-        expect(extractSearchFilters('foo:123 bar', [ 'foo' ], { defaultFilter: 'default_param' })).toStrictEqual({
+        expect(extractSearchFilters('foo:123 bar', ['foo'], { defaultFilter: 'default_param' })).toStrictEqual({
             filters: {
-                foo: [ '123' ],
+                foo: ['123'],
             },
         });
     });
 
     it.each([
-        [ '', {} ],
+        ['', {}],
-        [ 'hello world', { '*': [ 'hello world' ] } ],
+        ['hello world', { '*': ['hello world'] }],
-        [ 'hello world foo:123 bar:456', { foo: [ '123' ], bar: [ '456' ], '*': [ 'hello world' ] } ],
+        ['hello world foo:123 bar:456', { foo: ['123'], bar: ['456'], '*': ['hello world'] }],
-        [ 'hello world foo:123 another string', { foo: [ '123' ], '*': [ 'hello world another string' ] } ],
+        ['hello world foo:123 another string', { foo: ['123'], '*': ['hello world another string'] }],
     ])('should return unmatched parameters: %s', function (input, output) {
-        expect(extractSearchFilters(input, [ 'foo', 'bar' ], { returnUnmatched: true })).toStrictEqual({
+        expect(extractSearchFilters(input, ['foo', 'bar'], { returnUnmatched: true })).toStrictEqual({
             filters: output,
         });
     });
 
     it.each([
-        [ '', {} ],
+        ['', {}],
-        [ 'hello world', { '*': [ 'hello', 'world' ] } ],
+        ['hello world', { '*': ['hello', 'world'] }],
-        [ 'hello world foo:123 bar:456', { foo: [ '123' ], bar: [ '456' ], '*': [ 'hello', 'world' ] } ],
+        ['hello world foo:123 bar:456', { foo: ['123'], bar: ['456'], '*': ['hello', 'world'] }],
-        [ 'hello world foo:123 another string', { foo: [ '123' ], '*': [ 'hello', 'world', 'another', 'string' ] } ],
+        ['hello world foo:123 another string', { foo: ['123'], '*': ['hello', 'world', 'another', 'string'] }],
     ])('should split unmatched parameters: %s', function (input, output) {
-        expect(extractSearchFilters(input, [ 'foo', 'bar' ], {
+        expect(
+            extractSearchFilters(input, ['foo', 'bar'], {
                 returnUnmatched: true,
                 splitUnmatched: true,
-        })).toStrictEqual({
+            }),
+        ).toStrictEqual({
             filters: output,
         });
     });
 
-    it.each([ true, false ])('should return the unsplit value (splitting: %s)', function (split) {
+    it.each([true, false])('should return the unsplit value (splitting: %s)', function (split) {
-        const extracted = extractSearchFilters('hello foo:123 bar:123 world', [ 'foo' ], {
+        const extracted = extractSearchFilters('hello foo:123 bar:123 world', ['foo'], {
             returnUnmatched: true,
             splitUnmatched: split,
         });
         expect(extracted).toStrictEqual({
             filters: {
-                foo: [ '123' ],
+                foo: ['123'],
-                '*': split ? [ 'hello', 'bar:123', 'world' ] : [ 'hello bar:123 world' ],
+                '*': split ? ['hello', 'bar:123', 'world'] : ['hello bar:123 world'],
             },
         });
     });

resources/scripts/helpers/extractSearchFilters.ts

@@ -7,13 +7,13 @@ interface Options<D extends string = string> {
     returnUnmatched?: boolean;
 }
 
-const extractSearchFilters = <T extends string, D extends string = '*'> (
+const extractSearchFilters = <T extends string, D extends string = '*'>(
     str: string,
     params: Readonly<T[]>,
     options?: Options<D>,
 ): QueryBuilderParams<T> | QueryBuilderParams<D> | QueryBuilderParams<T & D> => {
     const opts: Required<Options<D>> = {
-        defaultFilter: options?.defaultFilter || '*' as D,
+        defaultFilter: options?.defaultFilter || ('*' as D),
         splitUnmatched: options?.splitUnmatched || false,
         returnUnmatched: options?.returnUnmatched || false,
     };
@@ -30,12 +30,12 @@ const extractSearchFilters = <T extends string, D extends string = '*'> (
         } else if (!params.includes(filter)) {
             unmatched.push(segment);
         } else {
-            filters.set(filter, [ ...(filters.get(filter) || []), value ]);
+            filters.set(filter, [...(filters.get(filter) || []), value]);
         }
     }
 
     if (opts.returnUnmatched && str.trim().length > 0) {
-        filters.set(opts.defaultFilter as any, opts.splitUnmatched ? unmatched : [ unmatched.join(' ') ]);
+        filters.set(opts.defaultFilter as any, opts.splitUnmatched ? unmatched : [unmatched.join(' ')]);
     }
 
     if (filters.size === 0) {

resources/scripts/helpers/splitStringWhitespace.spec.ts

@@ -2,14 +2,14 @@ import splitStringWhitespace from '@/helpers/splitStringWhitespace';
 
 describe('@/helpers/splitStringWhitespace.ts', function () {
     it.each([
-        [ '', [] ],
+        ['', []],
-        [ 'hello world', [ 'hello', 'world' ] ],
+        ['hello world', ['hello', 'world']],
-        [ '   hello world ', [ 'hello', 'world' ] ],
+        ['   hello world ', ['hello', 'world']],
-        [ 'hello123 world 123 $$ s ', [ 'hello123', 'world', '123', '$$', 's' ] ],
+        ['hello123 world 123 $$ s ', ['hello123', 'world', '123', '$$', 's']],
-        [ 'hello world! how are you?', [ 'hello', 'world!', 'how', 'are', 'you?' ] ],
+        ['hello world! how are you?', ['hello', 'world!', 'how', 'are', 'you?']],
-        [ 'hello "foo bar baz" world', [ 'hello', 'foo bar baz', 'world' ] ],
+        ['hello "foo bar baz" world', ['hello', 'foo bar baz', 'world']],
-        [ 'hello "foo \\"bar bar \\" baz" world', [ 'hello', 'foo "bar bar " baz', 'world' ] ],
+        ['hello "foo \\"bar bar \\" baz" world', ['hello', 'foo "bar bar " baz', 'world']],
-        [ 'hello "foo "bar baz" baz" world', [ 'hello', 'foo bar', 'baz baz', 'world' ] ],
+        ['hello "foo "bar baz" baz" world', ['hello', 'foo bar', 'baz baz', 'world']],
     ])('should handle string: %s', function (input, output) {
         expect(splitStringWhitespace(input)).toStrictEqual(output);
     });

resources/scripts/helpers/splitStringWhitespace.ts

@@ -7,9 +7,9 @@
  */
 export default (str: string): string[] => {
     let quoted = false;
-    const parts = [ '' ] as string[];
+    const parts = [''] as string[];
 
-    for (const char of (str.trim().match(/\\?.|^$/g) || [])) {
+    for (const char of str.trim().match(/\\?.|^$/g) || []) {
         if (char === '"') {
             quoted = !quoted;
         } else if (!quoted && char === ' ') {

resources/scripts/plugins/useDebouncedState.ts

@@ -3,10 +3,10 @@ import { debounce } from 'debounce';
 
 type DebounceFn<V> = ((value: V) => void) & { clear: () => void };
 
-export default <S> (initial: S, interval?: number, immediate?: boolean): [ S, DebounceFn<S> ] => {
+export default <S>(initial: S, interval?: number, immediate?: boolean): [S, DebounceFn<S>] => {
-    const [ state, setState ] = useState<S>(initial);
+    const [state, setState] = useState<S>(initial);
 
     const debouncedSetState = debounce((v: S) => setState(v), interval, immediate);
 
-    return [ state, debouncedSetState ];
+    return [state, debouncedSetState];
 };