chore(lint): lint

.prettierrc.json

@@ -1,8 +1,9 @@
 {
-	"printWidth": 120,
-	"tabWidth": 4,
-	"useTabs": false,
-	"semi": true,
-	"singleQuote": true,
-	"jsxSingleQuote": true
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"]
 }

package-lock.json

@@ -67,6 +67,7 @@
             },
             "devDependencies": {
                 "@swc/plugin-styled-components": "^1.5.122",
+                "@trivago/prettier-plugin-sort-imports": "^4.3.0",
                 "@types/codemirror": "^5.60.15",
                 "@types/debounce": "^1.2.4",
                 "@types/events": "^3.0.3",
@@ -4225,6 +4226,106 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
+        "node_modules/@trivago/prettier-plugin-sort-imports": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz",
+            "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/generator": "7.17.7",
+                "@babel/parser": "^7.20.5",
+                "@babel/traverse": "7.23.2",
+                "@babel/types": "7.17.0",
+                "javascript-natural-sort": "0.7.1",
+                "lodash": "^4.17.21"
+            },
+            "peerDependencies": {
+                "@vue/compiler-sfc": "3.x",
+                "prettier": "2.x - 3.x"
+            },
+            "peerDependenciesMeta": {
+                "@vue/compiler-sfc": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/generator": {
+            "version": "7.17.7",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz",
+            "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.17.0",
+                "jsesc": "^2.5.1",
+                "source-map": "^0.5.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse": {
+            "version": "7.23.2",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+            "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/code-frame": "^7.22.13",
+                "@babel/generator": "^7.23.0",
+                "@babel/helper-environment-visitor": "^7.22.20",
+                "@babel/helper-function-name": "^7.23.0",
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.6",
+                "@babel/parser": "^7.23.0",
+                "@babel/types": "^7.23.0",
+                "debug": "^4.1.0",
+                "globals": "^11.1.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/generator": {
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
+            "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.24.0",
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.25",
+                "jsesc": "^2.5.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/types": {
+            "version": "7.24.0",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+            "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.23.4",
+                "@babel/helper-validator-identifier": "^7.22.20",
+                "to-fast-properties": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/types": {
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+            "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.16.7",
+                "to-fast-properties": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@types/codemirror": {
             "version": "5.60.15",
             "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
@@ -7218,6 +7319,12 @@
                 "@pkgjs/parseargs": "^0.11.0"
             }
         },
+        "node_modules/javascript-natural-sort": {
+            "version": "0.7.1",
+            "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+            "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+            "dev": true
+        },
         "node_modules/jiti": {
             "version": "1.21.0",
             "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
@@ -9390,6 +9497,15 @@
                 "react-dom": "^18.0.0"
             }
         },
+        "node_modules/source-map": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/source-map-js": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",

package.json

@@ -66,6 +66,7 @@
     },
     "devDependencies": {
         "@swc/plugin-styled-components": "^1.5.122",
+        "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/codemirror": "^5.60.15",
         "@types/debounce": "^1.2.4",
         "@types/events": "^3.0.3",

resources/scripts/api/account/activity.ts

@@ -1,13 +1,12 @@
+import http, { PaginatedResult, QueryBuilderParams, withQueryBuilderParams } from '@/api/http';
+import useFilteredObject from '@/plugins/useFilteredObject';
+import { useUserSWRKey } from '@/plugins/useSWRKey';
+import { toPaginatedSet } from '@definitions/helpers';
+import { ActivityLog, Transformers } from '@definitions/user';
 import type { AxiosError } from 'axios';
 import type { SWRConfiguration } from 'swr';
 import useSWR from 'swr';
 
-import http, { PaginatedResult, QueryBuilderParams, withQueryBuilderParams } from '@/api/http';
-import { toPaginatedSet } from '@definitions/helpers';
-import { ActivityLog, Transformers } from '@definitions/user';
-import useFilteredObject from '@/plugins/useFilteredObject';
-import { useUserSWRKey } from '@/plugins/useSWRKey';
-
 export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
 
 const useActivityLogs = (

resources/scripts/api/account/createApiKey.ts

@@ -1,5 +1,5 @@
-import http from '@/api/http';
 import { ApiKey, rawDataToApiKey } from '@/api/account/getApiKeys';
+import http from '@/api/http';
 
 export default (description: string, allowedIps: string): Promise<ApiKey & { secretToken: string }> => {
     return new Promise((resolve, reject) => {

resources/scripts/api/account/ssh-keys.ts

@@ -1,11 +1,10 @@
+import http, { FractalResponseList } from '@/api/http';
+import { useUserSWRKey } from '@/plugins/useSWRKey';
+import { SSHKey, Transformers } from '@definitions/user';
 import type { AxiosError } from 'axios';
 import type { SWRConfiguration } from 'swr';
 import useSWR from 'swr';
 
-import http, { FractalResponseList } from '@/api/http';
-import { SSHKey, Transformers } from '@definitions/user';
-import { useUserSWRKey } from '@/plugins/useSWRKey';
-
 const useSSHKeys = (config?: SWRConfiguration<SSHKey[], AxiosError>) => {
     const key = useUserSWRKey(['account', 'ssh-keys']);
 

resources/scripts/api/auth/loginCheckpoint.ts

@@ -1,5 +1,5 @@
-import http from '@/api/http';
 import { LoginResponse } from '@/api/auth/login';
+import http from '@/api/http';
 
 export default (token: string, code: string, recoveryToken?: string): Promise<LoginResponse> => {
     return new Promise((resolve, reject) => {

resources/scripts/api/definitions/index.d.ts

@@ -1,5 +1,5 @@
-import { MarkRequired } from 'ts-essentials';
 import { FractalResponseData, FractalResponseList } from '../http';
+import { MarkRequired } from 'ts-essentials';
 
 export type UUID = string;
 

resources/scripts/api/definitions/user/transformers.ts

@@ -1,6 +1,6 @@
-import * as Models from '@definitions/user/models';
 import { FractalResponseData } from '@/api/http';
 import { transform } from '@definitions/helpers';
+import * as Models from '@definitions/user/models';
 
 export default class Transformers {
     static toSSHKey = (data: Record<any, any>): Models.SSHKey => {

resources/scripts/api/getServers.ts

@@ -1,5 +1,5 @@
-import { rawDataToServerObject, Server } from '@/api/server/getServer';
 import http, { getPaginationSet, PaginatedResult } from '@/api/http';
+import { rawDataToServerObject, Server } from '@/api/server/getServer';
 
 interface QueryParams {
     query?: string;

resources/scripts/api/getSystemPermissions.ts

@@ -1,5 +1,5 @@
-import { PanelPermissions } from '@/state/permissions';
 import http from '@/api/http';
+import { PanelPermissions } from '@/state/permissions';
 
 export default (): Promise<PanelPermissions> => {
     return new Promise((resolve, reject) => {

resources/scripts/api/http.ts

@@ -1,5 +1,5 @@
-import axios, { AxiosInstance } from 'axios';
 import { store } from '@/state';
+import axios, { AxiosInstance } from 'axios';
 
 const http: AxiosInstance = axios.create({
     withCredentials: true,

resources/scripts/api/interceptors.ts

@@ -1,8 +1,7 @@
+import http from '@/api/http';
 import type { AxiosError } from 'axios';
 import type { NavigateFunction } from 'react-router-dom';
 
-import http from '@/api/http';
-
 export const setupInterceptors = (navigate: NavigateFunction) => {
     http.interceptors.response.use(
         (resp) => resp,

resources/scripts/api/server/activity.ts

@@ -1,15 +1,14 @@
-import type { AxiosError } from 'axios';
-import type { SWRConfiguration } from 'swr';
-import useSWR from 'swr';
-
 import type { PaginatedResult, QueryBuilderParams } from '@/api/http';
 import http, { withQueryBuilderParams } from '@/api/http';
-import { toPaginatedSet } from '@definitions/helpers';
-import type { ActivityLog } from '@definitions/user';
-import { Transformers } from '@definitions/user';
 import useFilteredObject from '@/plugins/useFilteredObject';
 import { useServerSWRKey } from '@/plugins/useSWRKey';
 import { ServerContext } from '@/state/server';
+import { toPaginatedSet } from '@definitions/helpers';
+import type { ActivityLog } from '@definitions/user';
+import { Transformers } from '@definitions/user';
+import type { AxiosError } from 'axios';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
 
 export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
 

resources/scripts/api/server/databases/createServerDatabase.ts

@@ -1,5 +1,5 @@
-import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import http from '@/api/http';
+import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 
 export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {
     return new Promise((resolve, reject) => {

resources/scripts/api/server/databases/rotateDatabasePassword.ts

@@ -1,5 +1,5 @@
-import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import http from '@/api/http';
+import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 
 export default (uuid: string, database: string): Promise<ServerDatabase> => {
     return new Promise((resolve, reject) => {

resources/scripts/api/server/files/compressFiles.ts

@@ -1,5 +1,5 @@
-import { FileObject } from '@/api/server/files/loadDirectory';
 import http from '@/api/http';
+import { FileObject } from '@/api/server/files/loadDirectory';
 import { rawDataToFileObject } from '@/api/transformers';
 
 export default async (uuid: string, directory: string, files: string[]): Promise<FileObject> => {

resources/scripts/api/server/getServer.ts

@@ -1,6 +1,6 @@
 import http, { FractalResponseData, FractalResponseList } from '@/api/http';
-import { rawDataToServerAllocation, rawDataToServerEggVariable } from '@/api/transformers';
 import { ServerEggVariable, ServerStatus } from '@/api/server/types';
+import { rawDataToServerAllocation, rawDataToServerEggVariable } from '@/api/transformers';
 
 export interface Allocation {
     id: number;

resources/scripts/api/server/network/createServerAllocation.ts

@@ -1,5 +1,5 @@
-import { Allocation } from '@/api/server/getServer';
 import http from '@/api/http';
+import { Allocation } from '@/api/server/getServer';
 import { rawDataToServerAllocation } from '@/api/transformers';
 
 export default async (uuid: string): Promise<Allocation> => {

resources/scripts/api/server/network/deleteServerAllocation.ts

@@ -1,5 +1,5 @@
-import { Allocation } from '@/api/server/getServer';
 import http from '@/api/http';
+import { Allocation } from '@/api/server/getServer';
 
 export default async (uuid: string, id: number): Promise<Allocation> =>
     await http.delete(`/api/client/servers/${uuid}/network/allocations/${id}`);

resources/scripts/api/server/network/setPrimaryServerAllocation.ts

@@ -1,5 +1,5 @@
-import { Allocation } from '@/api/server/getServer';
 import http from '@/api/http';
+import { Allocation } from '@/api/server/getServer';
 import { rawDataToServerAllocation } from '@/api/transformers';
 
 export default async (uuid: string, id: number): Promise<Allocation> => {

resources/scripts/api/server/network/setServerAllocationNotes.ts

@@ -1,5 +1,5 @@
-import { Allocation } from '@/api/server/getServer';
 import http from '@/api/http';
+import { Allocation } from '@/api/server/getServer';
 import { rawDataToServerAllocation } from '@/api/transformers';
 
 export default async (uuid: string, id: number, notes: string | null): Promise<Allocation> => {

resources/scripts/api/server/schedules/createOrUpdateSchedule.ts

@@ -1,5 +1,5 @@
-import { rawDataToServerSchedule, Schedule } from '@/api/server/schedules/getServerSchedules';
 import http from '@/api/http';
+import { rawDataToServerSchedule, Schedule } from '@/api/server/schedules/getServerSchedules';
 
 type Data = Pick<Schedule, 'cron' | 'name' | 'onlyWhenOnline' | 'isActive'> & { id?: number };
 

resources/scripts/api/server/schedules/createOrUpdateScheduleTask.ts

@@ -1,5 +1,5 @@
-import { rawDataToServerTask, Task } from '@/api/server/schedules/getServerSchedules';
 import http from '@/api/http';
+import { rawDataToServerTask, Task } from '@/api/server/schedules/getServerSchedules';
 
 interface Data {
     action: string;

resources/scripts/api/swr/getServerAllocations.ts

@@ -1,9 +1,8 @@
-import useSWR from 'swr';
-
 import http from '@/api/http';
 import { Allocation } from '@/api/server/getServer';
 import { rawDataToServerAllocation } from '@/api/transformers';
 import { ServerContext } from '@/state/server';
+import useSWR from 'swr';
 
 export default () => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);

resources/scripts/api/swr/getServerBackups.ts

@@ -1,11 +1,10 @@
-import { createContext, useContext } from 'react';
-import useSWR from 'swr';
-
 import type { PaginatedResult } from '@/api/http';
 import http, { getPaginationSet } from '@/api/http';
 import type { ServerBackup } from '@/api/server/types';
 import { rawDataToServerBackup } from '@/api/transformers';
 import { ServerContext } from '@/state/server';
+import { createContext, useContext } from 'react';
+import useSWR from 'swr';
 
 interface ctx {
     page: number;

resources/scripts/api/swr/getServerStartup.ts

@@ -1,10 +1,9 @@
-import type { AxiosError } from 'axios';
-import type { SWRConfiguration } from 'swr';
-import useSWR from 'swr';
-
 import http, { FractalResponseList } from '@/api/http';
 import type { ServerEggVariable } from '@/api/server/types';
 import { rawDataToServerEggVariable } from '@/api/transformers';
+import type { AxiosError } from 'axios';
+import type { SWRConfiguration } from 'swr';
+import useSWR from 'swr';
 
 interface Response {
     invocation: string;

resources/scripts/api/transformers.ts

@@ -1,6 +1,6 @@
-import { Allocation } from '@/api/server/getServer';
 import { FractalResponseData } from '@/api/http';
 import { FileObject } from '@/api/server/files/loadDirectory';
+import { Allocation } from '@/api/server/getServer';
 import { ServerBackup, ServerEggVariable } from '@/api/server/types';
 
 export const rawDataToServerAllocation = (data: FractalResponseData): Allocation => ({

resources/scripts/components/App.tsx

@@ -2,19 +2,18 @@
 // the only way to prevent mismatching and weird errors is to import the lib
 // in the root first. The github issue for this is still open. Stupid.
 // https://github.com/preactjs/signals/issues/414
+import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
+import '@/assets/tailwind.css';
+import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
+import { NotFound } from '@/components/elements/ScreenBlock';
+import Spinner from '@/components/elements/Spinner';
+import { store } from '@/state';
+import { ServerContext } from '@/state/server';
+import { SiteSettings } from '@/state/settings';
 import '@preact/signals-react';
-
+import { StoreProvider } from 'easy-peasy';
 import { lazy } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { StoreProvider } from 'easy-peasy';
-import { store } from '@/state';
-import { SiteSettings } from '@/state/settings';
-import { NotFound } from '@/components/elements/ScreenBlock';
-import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
-import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
-import { ServerContext } from '@/state/server';
-import '@/assets/tailwind.css';
-import Spinner from '@/components/elements/Spinner';
 import { Toaster } from 'sonner';
 
 const DashboardRouter = lazy(() => import('@/routers/DashboardRouter'));

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -1,16 +1,15 @@
-import { useStoreState } from 'easy-peasy';
-import type { FormikHelpers } from 'formik';
-import { Formik } from 'formik';
-import { useEffect, useRef, useState } from 'react';
-import Reaptcha from 'reaptcha';
-import { object, string } from 'yup';
-
 import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
 import useFlash from '@/plugins/useFlash';
+import { useStoreState } from 'easy-peasy';
+import type { FormikHelpers } from 'formik';
+import { Formik } from 'formik';
+import { useEffect, useRef, useState } from 'react';
+import Reaptcha from 'reaptcha';
+import { object, string } from 'yup';
 
 interface Values {
     email: string;

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -1,15 +1,14 @@
-import type { ActionCreator } from 'easy-peasy';
-import { useFormikContext, withFormik } from 'formik';
-import { useState } from 'react';
-import type { Location, RouteProps } from 'react-router-dom';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-
 import loginCheckpoint from '@/api/auth/loginCheckpoint';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
 import useFlash from '@/plugins/useFlash';
 import type { FlashStore } from '@/state/flashes';
+import type { ActionCreator } from 'easy-peasy';
+import { useFormikContext, withFormik } from 'formik';
+import { useState } from 'react';
+import type { Location, RouteProps } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 interface Values {
     code: string;

resources/scripts/components/auth/LoginContainer.tsx

@@ -1,3 +1,8 @@
+import login from '@/api/auth/login';
+import LoginFormContainer from '@/components/auth/LoginFormContainer';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import useFlash from '@/plugins/useFlash';
 import { useStoreState } from 'easy-peasy';
 import type { FormikHelpers } from 'formik';
 import { Formik } from 'formik';
@@ -6,12 +11,6 @@ import { Link, useNavigate } from 'react-router-dom';
 import Reaptcha from 'reaptcha';
 import { object, string } from 'yup';
 
-import login from '@/api/auth/login';
-import LoginFormContainer from '@/components/auth/LoginFormContainer';
-import Field from '@/components/elements/Field';
-import Button from '@/components/elements/Button';
-import useFlash from '@/plugins/useFlash';
-
 interface Values {
     username: string;
     password: string;

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,6 +1,7 @@
-import { forwardRef } from 'react';
-import { Form } from 'formik';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import { Form } from 'formik';
+import { forwardRef } from 'react';
+
 type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
     title?: string;
 };

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -1,15 +1,15 @@
-import { useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
 import performPasswordReset from '@/api/auth/performPasswordReset';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
-import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
-import { Formik, FormikHelpers } from 'formik';
-import { object, ref, string } from 'yup';
+import Button from '@/components/elements/Button';
 import Field from '@/components/elements/Field';
 import Input from '@/components/elements/Input';
-import Button from '@/components/elements/Button';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { Formik, FormikHelpers } from 'formik';
+import { useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { object, ref, string } from 'yup';
 
 interface Values {
     password: string;

resources/scripts/components/dashboard/AccountApiContainer.tsx

@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react';
-import ContentBox from '@/components/elements/ContentBox';
-import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
-import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import deleteApiKey from '@/api/account/deleteApiKey';
+import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { format } from 'date-fns';
-import PageContentBlock from '@/components/elements/PageContentBlock';
+import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
+import Code from '@/components/elements/Code';
+import ContentBox from '@/components/elements/ContentBox';
 import GreyRowBox from '@/components/elements/GreyRowBox';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { Dialog } from '@/components/elements/dialog';
 import { useFlashKey } from '@/plugins/useFlash';
-import Code from '@/components/elements/Code';
+import { format } from 'date-fns';
+import { useEffect, useState } from 'react';
 
 export default () => {
     const [deleteIdentifier, setDeleteIdentifier] = useState('');

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -1,11 +1,11 @@
-import ContentBox from '@/components/elements/ContentBox';
-import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
-import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
-import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
-import PageContentBlock from '@/components/elements/PageContentBlock';
-import MessageBox from '@/components/MessageBox';
-import { useLocation } from 'react-router-dom';
 import Code from '../elements/Code';
+import MessageBox from '@/components/MessageBox';
+import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
+import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
+import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
+import ContentBox from '@/components/elements/ContentBox';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import { useLocation } from 'react-router-dom';
 
 export default () => {
     const { state } = useLocation();

resources/scripts/components/dashboard/ApiKeyModal.tsx

@@ -1,8 +1,8 @@
-import { useContext } from 'react';
 import Button from '@/components/elements/Button';
-import asModal from '@/hoc/asModal';
-import ModalContext from '@/context/ModalContext';
 import CopyOnClick from '@/components/elements/CopyOnClick';
+import ModalContext from '@/context/ModalContext';
+import asModal from '@/hoc/asModal';
+import { useContext } from 'react';
 
 interface Props {
     apiKey: string;

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -1,22 +1,22 @@
-import { useEffect, useState } from 'react';
-import { Server } from '@/api/server/getServer';
 import getServers from '@/api/getServers';
-import ServerRow from '@/components/dashboard/ServerRow';
-import PageContentBlock from '@/components/elements/PageContentBlock';
-import useFlash from '@/plugins/useFlash';
-import { useStoreState } from 'easy-peasy';
-import { usePersistedState } from '@/plugins/usePersistedState';
-import useSWR from 'swr';
 import { PaginatedResult } from '@/api/http';
-import Pagination from '@/components/elements/Pagination';
-import { useLocation } from 'react-router-dom';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/elements/Tabs';
+import { Server } from '@/api/server/getServer';
+import ServerRow from '@/components/dashboard/ServerRow';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/elements/DropdownMenu';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import Pagination from '@/components/elements/Pagination';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/elements/Tabs';
+import useFlash from '@/plugins/useFlash';
+import { usePersistedState } from '@/plugins/usePersistedState';
+import { useStoreState } from 'easy-peasy';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import useSWR from 'swr';
 
 export default () => {
     const { search } = useLocation();

resources/scripts/components/dashboard/ServerRow.tsx

@@ -1,9 +1,10 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { Server } from '@/api/server/getServer';
 import getServerResourceUsage, { ServerPowerState, ServerStats } from '@/api/server/getServerResourceUsage';
 import { bytesToString, ip } from '@/lib/formatters';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+
 // Determines if the current value is in an alarm threshold so we can show it in red rather
 // than the more faded default style.
 const isAlarmState = (current: number, limit: number): boolean => limit > 0 && current / (limit * 1024 * 1024) >= 0.9;

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

@@ -1,18 +1,18 @@
-import { useEffect, useState } from 'react';
 import { ActivityLogFilters, useActivityLogs } from '@/api/account/activity';
-import { useFlashKey } from '@/plugins/useFlash';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { Link } from 'react-router-dom';
-import PaginationFooter from '@/components/elements/table/PaginationFooter';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 // FIXME: add icons back
 import Spinner from '@/components/elements/Spinner';
-import { styles as btnStyles } from '@/components/elements/button/index';
-import clsx from 'clsx';
 import ActivityLogEntry from '@/components/elements/activity/ActivityLogEntry';
+import { styles as btnStyles } from '@/components/elements/button/index';
+import PaginationFooter from '@/components/elements/table/PaginationFooter';
+import { useFlashKey } from '@/plugins/useFlash';
 // FIXME: replace with radix tooltip
 // import Tooltip from '@/components/elements/tooltip/Tooltip';
 import useLocationHash from '@/plugins/useLocationHash';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 export default () => {
     const { hash } = useLocationHash();

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

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
-import { useStoreState } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
-import { Button } from '@/components/elements/button/index';
-import SetupTOTPDialog from '@/components/dashboard/forms/SetupTOTPDialog';
-import RecoveryTokensDialog from '@/components/dashboard/forms/RecoveryTokensDialog';
 import DisableTOTPDialog from '@/components/dashboard/forms/DisableTOTPDialog';
+import RecoveryTokensDialog from '@/components/dashboard/forms/RecoveryTokensDialog';
+import SetupTOTPDialog from '@/components/dashboard/forms/SetupTOTPDialog';
+import { Button } from '@/components/elements/button/index';
 import { useFlashKey } from '@/plugins/useFlash';
+import { ApplicationStore } from '@/state';
+import { useStoreState } from 'easy-peasy';
+import { useEffect, useState } from 'react';
 
 export default () => {
     const [tokens, setTokens] = useState<string[]>([]);

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

@@ -1,16 +1,16 @@
-import { useState } from 'react';
-import { Field, Form, Formik, FormikHelpers } from 'formik';
-import { object, string } from 'yup';
-import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import createApiKey from '@/api/account/createApiKey';
-import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
-import { httpErrorToHuman } from '@/api/http';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ApiKey } from '@/api/account/getApiKeys';
-import Button from '@/components/elements/Button';
-import Input from '@/components/elements/Input';
+import { httpErrorToHuman } from '@/api/http';
 import ApiKeyModal from '@/components/dashboard/ApiKeyModal';
+import Button from '@/components/elements/Button';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import Input from '@/components/elements/Input';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { Field, Form, Formik, FormikHelpers } from 'formik';
+import { useState } from 'react';
+import { object, string } from 'yup';
 
 interface Values {
     description: string;

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

@@ -1,14 +1,14 @@
-import { useContext, useEffect, useState } from 'react';
-import asDialog from '@/hoc/asDialog';
-import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
-import { Input } from '@/components/elements/inputs';
 // FIXME: replace with radix tooltip
 // import Tooltip from '@/components/elements/tooltip/Tooltip';
 import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { Button } from '@/components/elements/button/index';
+import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
+import { Input } from '@/components/elements/inputs';
+import asDialog from '@/hoc/asDialog';
 import { useFlashKey } from '@/plugins/useFlash';
 import { useStoreActions } from '@/state/hooks';
-import FlashMessageRender from '@/components/FlashMessageRender';
+import { useContext, useEffect, useState } from 'react';
 
 const DisableTOTPDialog = () => {
     const [submitting, setSubmitting] = useState(false);

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

@@ -1,7 +1,7 @@
-import { Dialog, DialogProps } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { Alert } from '@/components/elements/alert';
+import { Button } from '@/components/elements/button/index';
+import { Dialog, DialogProps } from '@/components/elements/dialog';
 
 interface RecoveryTokenDialogProps extends DialogProps {
     tokens: string[];

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

@@ -1,19 +1,19 @@
-import { useContext, useEffect, useState } from 'react';
-import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
-import getTwoFactorTokenData, { TwoFactorTokenData } from '@/api/account/getTwoFactorTokenData';
-import { useFlashKey } from '@/plugins/useFlash';
-import QRCode from 'qrcode.react';
-import { Button } from '@/components/elements/button/index';
-import Spinner from '@/components/elements/Spinner';
-import { Input } from '@/components/elements/inputs';
-import CopyOnClick from '@/components/elements/CopyOnClick';
 // FIXME: replace with radix tooltip
 // import Tooltip from '@/components/elements/tooltip/Tooltip';
 import enableAccountTwoFactor from '@/api/account/enableAccountTwoFactor';
+import getTwoFactorTokenData, { TwoFactorTokenData } from '@/api/account/getTwoFactorTokenData';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import Spinner from '@/components/elements/Spinner';
+import { Button } from '@/components/elements/button/index';
+import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
+import { Input } from '@/components/elements/inputs';
 import asDialog from '@/hoc/asDialog';
+import { useFlashKey } from '@/plugins/useFlash';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import QRCode from 'qrcode.react';
+import { useContext, useEffect, useState } from 'react';
 
 interface Props {
     onTokens: (tokens: string[]) => void;

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

@@ -1,12 +1,12 @@
+import { httpErrorToHuman } from '@/api/http';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { Button } from '@/components/elements/button/index';
+import { ApplicationStore } from '@/state';
 import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
 import { Form, Formik, FormikHelpers } from 'formik';
-import * as Yup from 'yup';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import Field from '@/components/elements/Field';
-import { httpErrorToHuman } from '@/api/http';
-import { ApplicationStore } from '@/state';
-import { Button } from '@/components/elements/button/index';
 import { Fragment } from 'react';
+import * as Yup from 'yup';
 
 interface Values {
     email: string;

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

@@ -1,13 +1,13 @@
-import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
-import { Form, Formik, FormikHelpers } from 'formik';
-import Field from '@/components/elements/Field';
-import * as Yup from 'yup';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import updateAccountPassword from '@/api/account/updateAccountPassword';
 import { httpErrorToHuman } from '@/api/http';
-import { ApplicationStore } from '@/state';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { Button } from '@/components/elements/button/index';
+import { ApplicationStore } from '@/state';
+import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
+import { Form, Formik, FormikHelpers } from 'formik';
 import { Fragment } from 'react';
+import * as Yup from 'yup';
 
 interface Values {
     current: string;

resources/scripts/components/dashboard/ssh/AccountSSHContainer.tsx

@@ -1,14 +1,14 @@
-import { useEffect } from 'react';
-import ContentBox from '@/components/elements/ContentBox';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import FlashMessageRender from '@/components/FlashMessageRender';
-import PageContentBlock from '@/components/elements/PageContentBlock';
-import GreyRowBox from '@/components/elements/GreyRowBox';
 import { useSSHKeys } from '@/api/account/ssh-keys';
-import { useFlashKey } from '@/plugins/useFlash';
-import { format } from 'date-fns';
+import FlashMessageRender from '@/components/FlashMessageRender';
 import CreateSSHKeyForm from '@/components/dashboard/ssh/CreateSSHKeyForm';
 import DeleteSSHKeyButton from '@/components/dashboard/ssh/DeleteSSHKeyButton';
+import ContentBox from '@/components/elements/ContentBox';
+import GreyRowBox from '@/components/elements/GreyRowBox';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { useFlashKey } from '@/plugins/useFlash';
+import { format } from 'date-fns';
+import { useEffect } from 'react';
 
 export default () => {
     const { clearAndAddHttpError } = useFlashKey('account');

resources/scripts/components/dashboard/ssh/CreateSSHKeyForm.tsx

@@ -1,11 +1,11 @@
+import { createSSHKey, useSSHKeys } from '@/api/account/ssh-keys';
+import Button from '@/components/elements/Button';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import Input from '@/components/elements/Input';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { useFlashKey } from '@/plugins/useFlash';
 import { Field, Form, Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
-import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import Button from '@/components/elements/Button';
-import Input from '@/components/elements/Input';
-import { useFlashKey } from '@/plugins/useFlash';
-import { createSSHKey, useSSHKeys } from '@/api/account/ssh-keys';
 
 interface Values {
     name: string;

resources/scripts/components/dashboard/ssh/DeleteSSHKeyButton.tsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
-import { useFlashKey } from '@/plugins/useFlash';
 import { deleteSSHKey, useSSHKeys } from '@/api/account/ssh-keys';
-import { Dialog } from '@/components/elements/dialog';
 import Code from '@/components/elements/Code';
+import { Dialog } from '@/components/elements/dialog';
+import { useFlashKey } from '@/plugins/useFlash';
+import { useState } from 'react';
 
 export default ({ name, fingerprint }: { name: string; fingerprint: string }) => {
     const { clearAndAddHttpError } = useFlashKey('account');

resources/scripts/components/elements/AuthenticatedRoute.tsx

@@ -1,8 +1,7 @@
+import { useStoreState } from '@/state/hooks';
 import type { ReactNode } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 
-import { useStoreState } from '@/state/hooks';
-
 function AuthenticatedRoute({ children }: { children?: ReactNode }): JSX.Element {
     const isAuthenticated = useStoreState((state) => !!state.user.data?.uuid);
 

resources/scripts/components/elements/Button.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import Spinner from '@/components/elements/Spinner';
 import clsx from 'clsx';
+import styled from 'styled-components';
 
 interface Props {
     isLoading?: boolean;

resources/scripts/components/elements/Can.tsx

@@ -1,7 +1,7 @@
+import { usePermissions } from '@/plugins/usePermissions';
 import type { ReactNode } from 'react';
 import { memo } from 'react';
 import isEqual from 'react-fast-compare';
-import { usePermissions } from '@/plugins/usePermissions';
 
 interface Props {
     action: string | string[];

resources/scripts/components/elements/Checkbox.tsx

@@ -1,5 +1,5 @@
-import { Field, FieldProps } from 'formik';
 import Input from '@/components/elements/Input';
+import { Field, FieldProps } from 'formik';
 
 interface Props {
     name: string;

resources/scripts/components/elements/CheckboxNew.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const Checkbox = React.forwardRef<
     React.ElementRef<typeof CheckboxPrimitive.Root>,

resources/scripts/components/elements/ConfirmationModal.tsx

@@ -1,7 +1,7 @@
-import { useContext } from 'react';
 import Button from '@/components/elements/Button';
-import asModal from '@/hoc/asModal';
 import ModalContext from '@/context/ModalContext';
+import asModal from '@/hoc/asModal';
+import { useContext } from 'react';
 
 type Props = {
     title: string;

resources/scripts/components/elements/ContextMenu.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const ContextMenu = ContextMenuPrimitive.Root;
 

resources/scripts/components/elements/CopyOnClick.tsx

@@ -1,7 +1,7 @@
+import clsx from 'clsx';
+import copy from 'copy-to-clipboard';
 import { useEffect, useState } from 'react';
 import * as React from 'react';
-import copy from 'copy-to-clipboard';
-import clsx from 'clsx';
 import { toast } from 'sonner';
 
 interface CopyOnClickProps {

resources/scripts/components/elements/DropdownMenu.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { cn } from '@/lib/utils';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

resources/scripts/components/elements/Field.tsx

@@ -1,5 +1,5 @@
-import { forwardRef } from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
+import { forwardRef } from 'react';
 
 interface OwnProps {
     name: string;

resources/scripts/components/elements/FormikFieldWrapper.tsx

@@ -1,6 +1,6 @@
-import { Field, FieldProps } from 'formik';
 import InputError from '@/components/elements/InputError';
 import Label from '@/components/elements/Label';
+import { Field, FieldProps } from 'formik';
 
 interface Props {
     id?: string;

resources/scripts/components/elements/FormikSwitch.tsx

@@ -1,6 +1,6 @@
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
-import { Field, FieldProps } from 'formik';
 import Switch, { SwitchProps } from '@/components/elements/Switch';
+import { Field, FieldProps } from 'formik';
 
 const FormikSwitch = ({ name, label, ...props }: SwitchProps) => {
     return (

resources/scripts/components/elements/InputError.tsx

@@ -1,5 +1,5 @@
-import { FormikErrors, FormikTouched } from 'formik';
 import { capitalize } from '@/lib/strings';
+import { FormikErrors, FormikTouched } from 'formik';
 
 interface Props {
     errors: FormikErrors<any>;

resources/scripts/components/elements/InputSpinner.tsx

@@ -1,7 +1,7 @@
+import FadeTransition from './transitions/FadeTransition';
+import Select from '@/components/elements/Select';
 import Spinner from '@/components/elements/Spinner';
 import styled, { css } from 'styled-components';
-import Select from '@/components/elements/Select';
-import FadeTransition from './transitions/FadeTransition';
 
 const Container = styled.div<{ visible?: boolean }>`
     position: relative

resources/scripts/components/elements/Modal.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useMemo, useRef, useState } from 'react';
+import HugeIconsX from './hugeicons/X';
 import Spinner from '@/components/elements/Spinner';
-import styled from 'styled-components';
+import { DialogContext, IconPosition, styles } from '@/components/elements/dialog';
 import { Dialog as HDialog } from '@headlessui/react';
 // FIXME: add icons back
 import { AnimatePresence, motion } from 'framer-motion';
-import { DialogContext, IconPosition, styles } from '@/components/elements/dialog';
-import HugeIconsX from './hugeicons/X';
+import { useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
 
 const variants = {
     open: {

resources/scripts/components/elements/PageContentBlock.tsx

@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
-import MainPage from '@/components/elements/MainPage';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import MainPage from '@/components/elements/MainPage';
+import { useEffect } from 'react';
 
 export interface PageContentBlockProps {
     title?: string;

resources/scripts/components/elements/Pagination.tsx

@@ -1,6 +1,6 @@
 import { PaginatedResult } from '@/api/http';
-import styled from 'styled-components';
 import Button from '@/components/elements/Button';
+import styled from 'styled-components';
 
 interface RenderFuncProps<T> {
     items: T[];

resources/scripts/components/elements/PermissionRoute.tsx

@@ -1,7 +1,6 @@
-import type { ReactNode } from 'react';
-
 import { ServerError } from '@/components/elements/ScreenBlock';
 import { usePermissions } from '@/plugins/usePermissions';
+import type { ReactNode } from 'react';
 
 interface Props {
     children?: ReactNode;

resources/scripts/components/elements/ServerContentBlock.tsx

@@ -1,5 +1,4 @@
 import PageContentBlock, { PageContentBlockProps } from '@/components/elements/PageContentBlock';
-
 import { ServerContext } from '@/state/server';
 
 interface Props extends PageContentBlockProps {

resources/scripts/components/elements/Spinner.tsx

@@ -1,6 +1,6 @@
+import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import { Suspense } from 'react';
 import styled, { css, keyframes } from 'styled-components';
-import ErrorBoundary from '@/components/elements/ErrorBoundary';
 
 export type SpinnerSize = 'small' | 'base' | 'large';
 

resources/scripts/components/elements/Switch.tsx

@@ -1,8 +1,8 @@
+import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
 import { useMemo } from 'react';
 import styled from 'styled-components';
 import { v4 } from 'uuid';
-import Label from '@/components/elements/Label';
-import Input from '@/components/elements/Input';
 
 const ToggleContainer = styled.div``;
 

resources/scripts/components/elements/Tabs.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-
 import { cn } from '@/lib/utils';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
 
 const Tabs = TabsPrimitive.Root;
 

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

@@ -1,13 +1,14 @@
-import { Link } from 'react-router-dom';
+import style from './style.module.css';
+import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
+import useLocationHash from '@/plugins/useLocationHash';
+import { ActivityLog } from '@definitions/user';
+// FIXME: add icons back
+import clsx from 'clsx';
 // FIXME: replace with radix tooltip
 // import Tooltip from '@/components/elements/tooltip/Tooltip';
 import { formatDistanceToNowStrict } from 'date-fns';
-import { ActivityLog } from '@definitions/user';
-import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
-// FIXME: add icons back
-import clsx from 'clsx';
-import style from './style.module.css';
-import useLocationHash from '@/plugins/useLocationHash';
+import { Link } from 'react-router-dom';
+
 // import { getObjectKeys, isObject } from '@/lib/objects';
 
 interface Props {

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

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { Button } from '@/components/elements/button/index';
 // FIXME: add icons back
 import { Dialog } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
+import { useState } from 'react';
 
 export default ({ meta }: { meta: Record<string, unknown> }) => {
     const [open, setOpen] = useState(false);

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

@@ -1,5 +1,4 @@
 // FIXME: add icons back
-
 import clsx from 'clsx';
 
 interface AlertProps {

resources/scripts/components/elements/button/Button.tsx

@@ -1,7 +1,7 @@
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { ButtonProps, Options } from '@/components/elements/button/types';
 import styles from './style.module.css';
+import { ButtonProps, Options } from '@/components/elements/button/types';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     ({ children, shape, size, variant, className, ...rest }, ref) => {

resources/scripts/components/elements/commandk/CmdK.tsx

@@ -1,16 +1,16 @@
-import { Command } from 'cmdk';
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Can from '@/components/elements/Can';
-import { ServerContext } from '@/state/server';
-import { toast } from 'sonner';
-import HugeIconsHome from '../hugeicons/Home';
-import HugeIconsFolder from '../hugeicons/Folder';
-import HugeIconsDatabase from '../hugeicons/Database';
 import HugeIconsCloudUp from '../hugeicons/CloudUp';
 import HugeIconsConnections from '../hugeicons/Connections';
 import HugeIconsDashboardSettings from '../hugeicons/DashboardSettings';
+import HugeIconsDatabase from '../hugeicons/Database';
+import HugeIconsFolder from '../hugeicons/Folder';
+import HugeIconsHome from '../hugeicons/Home';
 import HugeIconsZap from '../hugeicons/Zap';
+import Can from '@/components/elements/Can';
+import { ServerContext } from '@/state/server';
+import { Command } from 'cmdk';
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 
 const CommandMenu = () => {
     const [open, setOpen] = useState(false);

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

@@ -1,9 +1,9 @@
-import { useRef, useState } from 'react';
+import HugeIconsX from '../hugeicons/X';
+import { DialogContext, IconPosition, RenderDialogProps, styles } from './';
 import { Dialog as HDialog } from '@headlessui/react';
 // FIXME: add icons back
 import { AnimatePresence, motion } from 'framer-motion';
-import { DialogContext, IconPosition, RenderDialogProps, styles } from './';
-import HugeIconsX from '../hugeicons/X';
+import { useRef, useState } from 'react';
 
 const variants = {
     open: {

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

@@ -1,6 +1,6 @@
-import { useContext } from 'react';
 import { DialogContext } from './';
 import { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect';
+import { useContext } from 'react';
 
 export default ({ children }: { children: React.ReactNode }) => {
     const { setFooter } = useContext(DialogContext);

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

@@ -1,7 +1,7 @@
-import { useContext, useEffect } from 'react';
+import { DialogContext, DialogIconProps, styles } from './';
 // FIXME: add icons back
 import clsx from 'clsx';
-import { DialogContext, DialogIconProps, styles } from './';
+import { useContext, useEffect } from 'react';
 
 // const icons = {
 //     danger: ShieldExclamationIcon,

resources/scripts/components/elements/dialog/index.ts

@@ -1,7 +1,7 @@
+import ConfirmationDialog from './ConfirmationDialog';
 import DialogComponent from './Dialog';
 import DialogFooter from './DialogFooter';
 import DialogIcon from './DialogIcon';
-import ConfirmationDialog from './ConfirmationDialog';
 
 const Dialog = Object.assign(DialogComponent, {
     Confirm: ConfirmationDialog,

resources/scripts/components/elements/editor/Editor.tsx

@@ -1,3 +1,4 @@
+import { ayuMirageHighlightStyle, ayuMirageTheme } from './theme';
 import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
 import {
@@ -31,8 +32,6 @@ import {
 import type { CSSProperties } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
-import { ayuMirageHighlightStyle, ayuMirageTheme } from './theme';
-
 function findLanguageByFilename(filename: string): LanguageDescription | undefined {
     const language = LanguageDescription.matchFilename(languages, filename);
     if (language !== null) {

resources/scripts/components/elements/inputs/Checkbox.tsx

@@ -1,6 +1,6 @@
-import { forwardRef } from 'react';
-import clsx from 'clsx';
 import styles from './styles.module.css';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
 type Props = Omit<React.ComponentProps<'input'>, 'type'>;
 

resources/scripts/components/elements/inputs/InputField.tsx

@@ -1,6 +1,6 @@
-import { forwardRef } from 'react';
-import clsx from 'clsx';
 import styles from './styles.module.css';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
 enum Variant {
     Normal,

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

@@ -1,6 +1,7 @@
 import { PaginationDataSet } from '@/api/http';
-import clsx from 'clsx';
 import { Button } from '@/components/elements/button/index';
+import clsx from 'clsx';
+
 // FIXME: add icons back
 
 interface Props {

resources/scripts/components/elements/transitions/index.ts

@@ -1,5 +1,5 @@
-import { Transition as TransitionComponent } from '@headlessui/react';
 import FadeTransition from '@/components/elements/transitions/FadeTransition';
+import { Transition as TransitionComponent } from '@headlessui/react';
 
 const Transition = Object.assign(TransitionComponent, {
     Fade: FadeTransition,

resources/scripts/components/server/ConflictStateRenderer.tsx

@@ -1,5 +1,5 @@
-import { ServerContext } from '@/state/server';
 import ScreenBlock from '@/components/elements/ScreenBlock';
+import { ServerContext } from '@/state/server';
 
 export default () => {
     const status = ServerContext.useStoreState((state) => state.server.data?.status || null);

resources/scripts/components/server/InstallListener.tsx

@@ -1,8 +1,8 @@
+import { SocketEvent } from '@/components/server/events';
+import { getDirectorySwrKey } from '@/plugins/useFileManagerSwr';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
-import { SocketEvent } from '@/components/server/events';
 import { mutate } from 'swr';
-import { getDirectorySwrKey } from '@/plugins/useFileManagerSwr';
 
 const InstallListener = () => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);

resources/scripts/components/server/ServerActivityLogContainer.tsx

@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react';
+import { ActivityLogFilters } from '@/api/account/activity';
 import { useActivityLogs } from '@/api/server/activity';
-import ServerContentBlock from '@/components/elements/ServerContentBlock';
-import { useFlashKey } from '@/plugins/useFlash';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import ActivityLogEntry from '@/components/elements/activity/ActivityLogEntry';
-import PaginationFooter from '@/components/elements/table/PaginationFooter';
-import { ActivityLogFilters } from '@/api/account/activity';
-import { Link } from 'react-router-dom';
-import clsx from 'clsx';
 import { styles as btnStyles } from '@/components/elements/button/index';
+import PaginationFooter from '@/components/elements/table/PaginationFooter';
+import { useFlashKey } from '@/plugins/useFlash';
 // FIXME: add icons back
 import useLocationHash from '@/plugins/useLocationHash';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 export default () => {
     const { hash } = useLocationHash();

resources/scripts/components/server/TransferListener.tsx

@@ -1,6 +1,6 @@
+import { SocketEvent } from '@/components/server/events';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
-import { SocketEvent } from '@/components/server/events';
 
 const TransferListener = () => {
     const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);

resources/scripts/components/server/WebsocketHandler.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'react';
-
 import getWebsocketToken from '@/api/server/getWebsocketToken';
 import Spinner from '@/components/elements/Spinner';
 import FadeTransition from '@/components/elements/transitions/FadeTransition';
 import { Websocket } from '@/plugins/Websocket';
 import { ServerContext } from '@/state/server';
+import { useEffect, useState } from 'react';
 
 const reconnectErrors = ['jwt: exp claim is invalid', 'jwt: created too far in past (denylist)'];
 

resources/scripts/components/server/backups/BackupContainer.tsx

@@ -1,14 +1,14 @@
-import { useContext, useEffect, useState } from 'react';
-import useFlash from '@/plugins/useFlash';
-import Can from '@/components/elements/Can';
-import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
-import FlashMessageRender from '@/components/FlashMessageRender';
-import BackupRow from '@/components/server/backups/BackupRow';
 import getServerBackups, { Context as ServerBackupContext } from '@/api/swr/getServerBackups';
-import { ServerContext } from '@/state/server';
-import ServerContentBlock from '@/components/elements/ServerContentBlock';
-import Pagination from '@/components/elements/Pagination';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Can from '@/components/elements/Can';
 import { MainPageHeader } from '@/components/elements/MainPageHeader';
+import Pagination from '@/components/elements/Pagination';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import BackupRow from '@/components/server/backups/BackupRow';
+import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
+import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
+import { useContext, useEffect, useState } from 'react';
 
 const BackupContainer = () => {
     const { page, setPage } = useContext(ServerBackupContext);

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -1,21 +1,20 @@
-import { useState } from 'react';
-import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
-import useFlash from '@/plugins/useFlash';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import deleteBackup from '@/api/server/backups/deleteBackup';
-import Can from '@/components/elements/Can';
-import getServerBackups from '@/api/swr/getServerBackups';
-import { ServerBackup } from '@/api/server/types';
-import { ServerContext } from '@/state/server';
-import Input from '@/components/elements/Input';
-import { restoreServerBackup } from '@/api/server/backups';
 import http, { httpErrorToHuman } from '@/api/http';
-import { Dialog } from '@/components/elements/dialog';
-
+import { restoreServerBackup } from '@/api/server/backups';
+import deleteBackup from '@/api/server/backups/deleteBackup';
+import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
+import { ServerBackup } from '@/api/server/types';
+import getServerBackups from '@/api/swr/getServerBackups';
+import Can from '@/components/elements/Can';
 import { ContextMenuContent, ContextMenuItem } from '@/components/elements/ContextMenu';
-import HugeIconsFileDownload from '@/components/elements/hugeicons/FileDownload';
+import Input from '@/components/elements/Input';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { Dialog } from '@/components/elements/dialog';
 import HugeIconsDelete from '@/components/elements/hugeicons/Delete';
+import HugeIconsFileDownload from '@/components/elements/hugeicons/FileDownload';
 import HugeIconsFileSecurity from '@/components/elements/hugeicons/FileSecurity';
+import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
+import { useState } from 'react';
 
 interface Props {
     backup: ServerBackup;

resources/scripts/components/server/backups/BackupRow.tsx

@@ -1,15 +1,15 @@
-import { format, formatDistanceToNow } from 'date-fns';
+import BackupContextMenu from './BackupContextMenu';
+import { ServerBackup } from '@/api/server/types';
+// import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
+import getServerBackups from '@/api/swr/getServerBackups';
+import Can from '@/components/elements/Can';
+import { ContextMenu, ContextMenuTrigger } from '@/components/elements/ContextMenu';
 import Spinner from '@/components/elements/Spinner';
+import { SocketEvent } from '@/components/server/events';
 import { bytesToString } from '@/lib/formatters';
 // import Can from '@/components/elements/Can';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
-// import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
-import getServerBackups from '@/api/swr/getServerBackups';
-import { ServerBackup } from '@/api/server/types';
-import { SocketEvent } from '@/components/server/events';
-import { ContextMenu, ContextMenuTrigger } from '@/components/elements/ContextMenu';
-import BackupContextMenu from './BackupContextMenu';
-import Can from '@/components/elements/Can';
+import { format, formatDistanceToNow } from 'date-fns';
 
 interface Props {
     backup: ServerBackup;

resources/scripts/components/server/backups/CreateBackupButton.tsx

@@ -1,18 +1,18 @@
-import { useEffect, useState } from 'react';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
-import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import { boolean, object, string } from 'yup';
-import Field from '@/components/elements/Field';
-import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
-import useFlash from '@/plugins/useFlash';
 import createServerBackup from '@/api/server/backups/createServerBackup';
+import getServerBackups from '@/api/swr/getServerBackups';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import Button from '@/components/elements/Button';
-import { Textarea } from '@/components/elements/Input';
-import getServerBackups from '@/api/swr/getServerBackups';
-import { ServerContext } from '@/state/server';
-import FormikSwitch from '@/components/elements/FormikSwitch';
 import Can from '@/components/elements/Can';
+import Field from '@/components/elements/Field';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import FormikSwitch from '@/components/elements/FormikSwitch';
+import { Textarea } from '@/components/elements/Input';
+import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
+import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
+import { boolean, object, string } from 'yup';
 
 interface Values {
     name: string;

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

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
 import styles from '@/components/server/console/style.module.css';
+import clsx from 'clsx';
 
 interface ChartBlockProps {
     title: string;

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

@@ -1,19 +1,18 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { ITerminalOptions, Terminal } from '@xterm/xterm';
+import styles from './style.module.css';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { SocketEvent, SocketRequest } from '@/components/server/events';
+import useEventListener from '@/plugins/useEventListener';
+import { usePermissions } from '@/plugins/usePermissions';
+import { usePersistedState } from '@/plugins/usePersistedState';
+import { ServerContext } from '@/state/server';
 import { FitAddon } from '@xterm/addon-fit';
 import { SearchAddon } from '@xterm/addon-search';
 import { WebLinksAddon } from '@xterm/addon-web-links';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { ServerContext } from '@/state/server';
-import { usePermissions } from '@/plugins/usePermissions';
-import useEventListener from '@/plugins/useEventListener';
-import debounce from 'debounce';
-import { usePersistedState } from '@/plugins/usePersistedState';
-import { SocketEvent, SocketRequest } from '@/components/server/events';
-import clsx from 'clsx';
-
+import { ITerminalOptions, Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
-import styles from './style.module.css';
+import clsx from 'clsx';
+import debounce from 'debounce';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 const theme = {
     // background: 'rgba(0, 0, 0, 0)',

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

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
 import Can from '@/components/elements/Can';
-import { ServerContext } from '@/state/server';
-import { PowerAction } from '@/components/server/console/ServerConsoleContainer';
 import { Dialog } from '@/components/elements/dialog';
+import { PowerAction } from '@/components/server/console/ServerConsoleContainer';
+import { ServerContext } from '@/state/server';
+import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 interface PowerButtonProps {

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

@@ -1,18 +1,18 @@
-import { memo } from 'react';
-import { ServerContext } from '@/state/server';
-// import Can from '@/components/elements/Can';
-import ServerContentBlock from '@/components/elements/ServerContentBlock';
-import isEqual from 'react-fast-compare';
-import Spinner from '@/components/elements/Spinner';
-import Features from '@feature/Features';
-import Console from '@/components/server/console/Console';
-import StatGraphs from '@/components/server/console/StatGraphs';
-import PowerButtons from '@/components/server/console/PowerButtons';
-import ServerDetailsBlock from '@/components/server/console/ServerDetailsBlock';
-import { Alert } from '@/components/elements/alert';
+import { StatusPill } from './StatusPill';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import { MainPageHeader } from '@/components/elements/MainPageHeader';
-import { StatusPill } from './StatusPill';
+// import Can from '@/components/elements/Can';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import Spinner from '@/components/elements/Spinner';
+import { Alert } from '@/components/elements/alert';
+import Console from '@/components/server/console/Console';
+import PowerButtons from '@/components/server/console/PowerButtons';
+import ServerDetailsBlock from '@/components/server/console/ServerDetailsBlock';
+import StatGraphs from '@/components/server/console/StatGraphs';
+import { ServerContext } from '@/state/server';
+import Features from '@feature/Features';
+import { memo } from 'react';
+import isEqual from 'react-fast-compare';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 

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

@@ -1,10 +1,10 @@
-import { useEffect, useMemo, useState } from 'react';
-import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
-import { ServerContext } from '@/state/server';
-import { SocketEvent, SocketRequest } from '@/components/server/events';
 import StatBlock from '@/components/server/console/StatBlock';
+import { SocketEvent, SocketRequest } from '@/components/server/events';
+import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
+import { ServerContext } from '@/state/server';
 import clsx from 'clsx';
+import { useEffect, useMemo, useState } from 'react';
 
 type Stats = Record<'memory' | 'cpu' | 'disk' | 'uptime' | 'rx' | 'tx', number>;