feat(ui): ux improvements & redesign

This is a squash merge of a bajillion messy small commits created while iterating on the UI component library and redesign.

invokeai/frontend/web/src/services/api/endpoints/appInfo.ts

@@ -1,6 +1,7 @@
+import type { paths } from 'services/api/schema';
+import type { AppConfig, AppVersion } from 'services/api/types';
+
 import { api } from '..';
-import { paths } from 'services/api/schema';
-import { AppConfig, AppVersion } from 'services/api/types';
 
 export const appInfoApi = api.injectEndpoints({
   endpoints: (build) => ({

invokeai/frontend/web/src/services/api/endpoints/boards.ts

@@ -2,16 +2,18 @@ import {
   ASSETS_CATEGORIES,
   IMAGE_CATEGORIES,
 } from 'features/gallery/store/types';
-import {
+import type {
   BoardDTO,
   ListBoardsArg,
   OffsetPaginatedResults_BoardDTO_,
   OffsetPaginatedResults_ImageDTO_,
   UpdateBoardArg,
 } from 'services/api/types';
-import { ApiTagDescription, LIST_TAG, api } from '..';
 import { getListImagesUrl } from 'services/api/util';
 
+import type { ApiTagDescription } from '..';
+import { api, LIST_TAG } from '..';
+
 export const boardsApi = api.injectEndpoints({
   endpoints: (build) => ({
     /**

invokeai/frontend/web/src/services/api/endpoints/images.ts

@@ -1,18 +1,19 @@
-import { EntityState, Update } from '@reduxjs/toolkit';
-import { PatchCollection } from '@reduxjs/toolkit/dist/query/core/buildThunks';
+import type { EntityState, Update } from '@reduxjs/toolkit';
+import type { PatchCollection } from '@reduxjs/toolkit/dist/query/core/buildThunks';
 import { logger } from 'app/logging/logger';
+import type { BoardId } from 'features/gallery/store/types';
 import {
   ASSETS_CATEGORIES,
-  BoardId,
   IMAGE_CATEGORIES,
   IMAGE_LIMIT,
 } from 'features/gallery/store/types';
-import { CoreMetadata, zCoreMetadata } from 'features/nodes/types/metadata';
+import type { CoreMetadata } from 'features/nodes/types/metadata';
+import { zCoreMetadata } from 'features/nodes/types/metadata';
 import { addToast } from 'features/system/store/systemSlice';
 import { t } from 'i18next';
 import { keyBy } from 'lodash-es';
-import { components, paths } from 'services/api/schema';
-import {
+import type { components, paths } from 'services/api/schema';
+import type {
   DeleteBoardResult,
   ImageCategory,
   ImageDTO,
@@ -27,7 +28,9 @@ import {
   imagesAdapter,
   imagesSelectors,
 } from 'services/api/util';
-import { ApiTagDescription, LIST_TAG, api } from '..';
+
+import type { ApiTagDescription } from '..';
+import { api, LIST_TAG } from '..';
 import { boardsApi } from './boards';
 
 export const imagesApi = api.injectEndpoints({

invokeai/frontend/web/src/services/api/endpoints/models.ts

@@ -1,25 +1,28 @@
-import { EntityState, createEntityAdapter } from '@reduxjs/toolkit';
+import type { EntityState } from '@reduxjs/toolkit';
+import { createEntityAdapter } from '@reduxjs/toolkit';
 import { cloneDeep } from 'lodash-es';
-import {
+import queryString from 'query-string';
+import type { operations, paths } from 'services/api/schema';
+import type {
   AnyModelConfig,
   BaseModelType,
   CheckpointModelConfig,
   ControlNetModelConfig,
-  IPAdapterModelConfig,
-  T2IAdapterModelConfig,
   DiffusersModelConfig,
   ImportModelConfig,
+  IPAdapterModelConfig,
   LoRAModelConfig,
   MainModelConfig,
-  OnnxModelConfig,
   MergeModelConfig,
+  ModelType,
+  OnnxModelConfig,
+  T2IAdapterModelConfig,
   TextualInversionModelConfig,
   VaeModelConfig,
-  ModelType,
 } from 'services/api/types';
-import queryString from 'query-string';
-import { ApiTagDescription, LIST_TAG, api } from '..';
-import { operations, paths } from 'services/api/schema';
+
+import type { ApiTagDescription } from '..';
+import { api, LIST_TAG } from '..';
 
 export type DiffusersModelConfigEntity = DiffusersModelConfig & { id: string };
 export type CheckpointModelConfigEntity = CheckpointModelConfig & {
@@ -51,7 +54,7 @@ export type TextualInversionModelConfigEntity = TextualInversionModelConfig & {
 
 export type VaeModelConfigEntity = VaeModelConfig & { id: string };
 
-type AnyModelConfigEntity =
+export type AnyModelConfigEntity =
   | MainModelConfigEntity
   | OnnxModelConfigEntity
   | LoRAModelConfigEntity
@@ -135,7 +138,6 @@ type SearchFolderArg = operations['search_for_models']['parameters']['query'];
 export const mainModelsAdapter = createEntityAdapter<MainModelConfigEntity>({
   sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
-
 const onnxModelsAdapter = createEntityAdapter<OnnxModelConfigEntity>({
   sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
@@ -166,7 +168,8 @@ export const getModelId = ({
   base_model,
   model_type,
   model_name,
-}: AnyModelConfig) => `${base_model}/${model_type}/${model_name}`;
+}: Pick<AnyModelConfig, 'base_model' | 'model_name' | 'model_type'>) =>
+  `${base_model}/${model_type}/${model_name}`;
 
 const createModelEntities = <T extends AnyModelConfigEntity>(
   models: AnyModelConfig[]

invokeai/frontend/web/src/services/api/endpoints/queue.ts

@@ -1,14 +1,16 @@
-import {
-  UnknownAction,
+import type {
   EntityState,
   ThunkDispatch,
-  createEntityAdapter,
+  UnknownAction,
 } from '@reduxjs/toolkit';
+import { createEntityAdapter } from '@reduxjs/toolkit';
 import { $queueId } from 'app/store/nanostores/queueId';
 import { listParamsReset } from 'features/queue/store/queueSlice';
 import queryString from 'query-string';
-import { ApiTagDescription, api } from '..';
-import { components, paths } from 'services/api/schema';
+import type { components, paths } from 'services/api/schema';
+
+import type { ApiTagDescription } from '..';
+import { api } from '..';
 
 const getListQueueItemsUrl = (
   queryArgs?: paths['/api/v1/queue/{queue_id}/list']['get']['parameters']['query']

invokeai/frontend/web/src/services/api/endpoints/utilities.ts

@@ -1,5 +1,6 @@
+import type { components } from 'services/api/schema';
+
 import { api } from '..';
-import { components } from 'services/api/schema';
 
 export const utilitiesApi = api.injectEndpoints({
   endpoints: (build) => ({

invokeai/frontend/web/src/services/api/endpoints/workflows.ts

@@ -1,5 +1,6 @@
-import { paths } from 'services/api/schema';
-import { LIST_TAG, api } from '..';
+import type { paths } from 'services/api/schema';
+
+import { api, LIST_TAG } from '..';
 
 export const workflowsApi = api.injectEndpoints({
   endpoints: (build) => ({