feat(ui): clean up picker compact view default state handling

- Name it `pickerCompactViewStates` bc its not exclusive to model
picker, it is used for all pickers
- Rename redux action to model an event
- Move selector to right file
- Use selector to derive state for individual picker

Author: psychedelicious

invokeai/frontend/web/src/common/components/Picker/Picker.tsx

@@ -11,11 +11,13 @@ import {
   Text,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { typedMemo } from 'common/util/typedMemo';
 import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
-import { selectModelPickerCompactViewStates, setModelPickerCompactView } from 'features/ui/store/uiSlice';
+import { selectPickerCompactViewStates } from 'features/ui/store/uiSelectors';
+import { pickerCompactViewStateChanged } from 'features/ui/store/uiSlice';
 import type { AnyStore, ReadableAtom, Task, WritableAtom } from 'nanostores';
 import { atom, computed } from 'nanostores';
 import type { StoreValues } from 'nanostores/computed';
@@ -210,6 +212,14 @@ type PickerProps<T extends object> = {
   initialGroupStates?: GroupStatusMap;
 };
 
+const buildSelectIsCompactView = (pickerId?: string) =>
+  createSelector([selectPickerCompactViewStates], (compactViewStates) => {
+    if (!pickerId) {
+      return true;
+    }
+    return compactViewStates[pickerId] ?? true;
+  });
+
 export type PickerContextState<T extends object> = {
   $optionsOrGroups: WritableAtom<OptionOrGroup<T>[]>;
   $groupStatusMap: WritableAtom<GroupStatusMap>;
@@ -529,7 +539,6 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   } = props;
   const rootRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const compactViewStates = useAppSelector(selectModelPickerCompactViewStates);
 
   const { $groupStatusMap, $areAllGroupsDisabled, toggleGroup } = useTogglableGroups(
     optionsOrGroups,
@@ -547,8 +556,8 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   const $searchTerm = useAtom('');
   const $selectedItemId = useComputed([$selectedItem], (item) => (item ? getOptionId(item) : undefined));
 
-  // Use Redux state for compact view, defaulting to true if no pickerId or no saved state
-  const isCompactView = pickerId ? (compactViewStates[pickerId] ?? true) : true;
+  const selectIsCompactView = useMemo(() => buildSelectIsCompactView(pickerId), [pickerId]);
+  const isCompactView = useAppSelector(selectIsCompactView);
 
   const onSelectById = useCallback(
     (id: string) => {
@@ -888,7 +897,7 @@ const CompactViewToggleButton = typedMemo(<T extends object>() => {
 
   const onClick = useCallback(() => {
     if (pickerId) {
-      dispatch(setModelPickerCompactView({ pickerId, isCompact: !isCompactView }));
+      dispatch(pickerCompactViewStateChanged({ pickerId, isCompact: !isCompactView }));
     }
   }, [dispatch, pickerId, isCompactView]);
 

invokeai/frontend/web/src/features/ui/store/uiSelectors.ts

@@ -4,3 +4,4 @@ import { selectUiSlice } from 'features/ui/store/uiSlice';
 export const selectActiveTab = createSelector(selectUiSlice, (ui) => ui.activeTab);
 export const selectShouldShowImageDetails = createSelector(selectUiSlice, (ui) => ui.shouldShowImageDetails);
 export const selectShouldShowProgressInViewer = createSelector(selectUiSlice, (ui) => ui.shouldShowProgressInViewer);
+export const selectPickerCompactViewStates = createSelector(selectUiSlice, (ui) => ui.pickerCompactViewStates);

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -65,8 +65,8 @@ export const uiSlice = createSlice({
     shouldShowNotificationChanged: (state, action: PayloadAction<UIState['shouldShowNotificationV2']>) => {
       state.shouldShowNotificationV2 = action.payload;
     },
-    setModelPickerCompactView: (state, action: PayloadAction<{ pickerId: string; isCompact: boolean }>) => {
-      state.modelPickerCompactViewStates[action.payload.pickerId] = action.payload.isCompact;
+    pickerCompactViewStateChanged: (state, action: PayloadAction<{ pickerId: string; isCompact: boolean }>) => {
+      state.pickerCompactViewStates[action.payload.pickerId] = action.payload.isCompact;
     },
   },
 });
@@ -80,13 +80,11 @@ export const {
   shouldShowNotificationChanged,
   textAreaSizesStateChanged,
   dockviewStorageKeyChanged,
-  setModelPickerCompactView,
+  pickerCompactViewStateChanged,
 } = uiSlice.actions;
 
 export const selectUiSlice = (state: RootState) => state.ui;
 
-export const selectModelPickerCompactViewStates = (state: RootState) => state.ui.modelPickerCompactViewStates;
-
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const migrateUIState = (state: any): any => {
   if (!('_version' in state)) {

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -23,7 +23,7 @@ const zUIState = z.object({
   textAreaSizes: z.record(z.string(), zPartialDimensions).default({}),
   panels: z.record(z.string(), zSerializable).default({}),
   shouldShowNotificationV2: z.boolean().default(true),
-  modelPickerCompactViewStates: z.record(z.string(), z.boolean()).default(() => ({})),
+  pickerCompactViewStates: z.record(z.string(), z.boolean()).default(() => ({})),
 });
 const INITIAL_STATE = zUIState.parse({});
 export type UIState = z.infer<typeof zUIState>;