docs(ui): add STATE_MGMT.md

Supersedes the mini nanostores doc.

invokeai/frontend/web/docs/STATE_MGMT.md

@@ -0,0 +1,38 @@
+# State Management
+
+The app makes heavy use of Redux Toolkit, its Query library, and `nanostores`.
+
+## Redux
+
+TODO
+
+## `nanostores`
+
+[nanostores] is a tiny state management library. It provides both imperative and declarative APIs.
+
+### Example
+
+```ts
+export const $myStringOption = atom<string | null>(null);
+
+// Outside a component, or within a callback for performance-critical logic
+$myStringOption.get();
+$myStringOption.set('new value');
+
+// Inside a component
+const myStringOption = useStore($myStringOption);
+```
+
+### Where to put nanostores
+
+- For global application state, export your stores from `invokeai/frontend/web/src/app/store/nanostores/`.
+- For feature state, create a file for the stores next to the redux slice definition (e.g. `invokeai/frontend/web/src/features/myFeature/myFeatureNanostores.ts`).
+- For hooks with global state, export the store from the same file the hook is in, or put it next to the hook.
+
+### When to use nanostores
+
+- For non-serializable data that needs to be available throughout the app, use `nanostores` instead of a global.
+- For ephemeral global state (i.e. state that does not need to be persisted), use `nanostores` instead of redux.
+- For performance-critical code and in callbacks, redux selectors can be problematic due to the declarative reactivity system. Consider refactoring to use `nanostores` if there's a **measurable** performance issue.
+
+[nanostores]: https://github.com/nanostores/nanostores/

invokeai/frontend/web/src/app/store/nanostores/README.md

@@ -1,3 +0,0 @@
-# nanostores
-
-For non-serializable data that needs to be available throughout the app, or when redux is not appropriate, use nanostores.