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/.storybook/preview.tsx

@@ -1,16 +1,17 @@
 import { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
 import i18n from 'i18next';
-import React from 'react';
 import { initReactI18next } from 'react-i18next';
 import { Provider } from 'react-redux';
-import GlobalHotkeys from '../src/app/components/GlobalHotkeys';
 import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
+import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
 import { createStore } from '../src/app/store/store';
+import { Container } from '@chakra-ui/react';
 // TODO: Disabled for IDE performance issues with our translation JSON
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import translationEN from '../public/locales/en.json';
+import { ReduxInit } from './ReduxInit';
 
 i18n.use(initReactI18next).init({
   lng: 'en',
@@ -25,17 +26,21 @@ i18n.use(initReactI18next).init({
 });
 
 const store = createStore(undefined, false);
+$baseUrl.set('http://localhost:9090');
 
 const preview: Preview = {
   decorators: [
-    (Story) => (
-      <Provider store={store}>
-        <ThemeLocaleProvider>
-          <GlobalHotkeys />
-          <Story />
-        </ThemeLocaleProvider>
-      </Provider>
-    ),
+    (Story) => {
+      return (
+        <Provider store={store}>
+          <ThemeLocaleProvider>
+            <ReduxInit>
+              <Story />
+            </ReduxInit>
+          </ThemeLocaleProvider>
+        </Provider>
+      );
+    },
   ],
   parameters: {
     docs: {