Refactor ItemList code and re-enable viewing sub-tag/studio content (#5080)

* Refactor list filter to use contexts
* Refactor FilteredListToolbar
* Move components into separate files
* Convert ItemList hook into components
* Fix criteria clone functions
* Add toggle for sub-studio content
* Add toggle for sub-tag content
* Make LoadingIndicator height smaller and fade in.

ui/v2.5/src/components/Groups/GroupList.tsx

@@ -11,23 +11,20 @@ import {
   useFindGroups,
   useGroupsDestroy,
 } from "src/core/StashService";
-import { makeItemList, showWhenSelected } from "../List/ItemList";
+import { ItemList, ItemListContext, showWhenSelected } from "../List/ItemList";
 import { ExportDialog } from "../Shared/ExportDialog";
 import { DeleteEntityDialog } from "../Shared/DeleteEntityDialog";
 import { GroupCardGrid } from "./GroupCardGrid";
 import { EditGroupsDialog } from "./EditGroupsDialog";
 import { View } from "../List/views";
 
-const GroupItemList = makeItemList({
-  filterMode: GQL.FilterMode.Groups,
-  useResult: useFindGroups,
-  getItems(result: GQL.FindGroupsQueryResult) {
-    return result?.data?.findGroups?.groups ?? [];
-  },
-  getCount(result: GQL.FindGroupsQueryResult) {
-    return result?.data?.findGroups?.count ?? 0;
-  },
-});
+function getItems(result: GQL.FindGroupsQueryResult) {
+  return result?.data?.findGroups?.groups ?? [];
+}
+
+function getCount(result: GQL.FindGroupsQueryResult) {
+  return result?.data?.findGroups?.count ?? 0;
+}
 
 interface IGroupList {
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
@@ -45,6 +42,8 @@ export const GroupList: React.FC<IGroupList> = ({
   const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
   const [isExportAll, setIsExportAll] = useState(false);
 
+  const filterMode = GQL.FilterMode.Groups;
+
   const otherOperations = [
     {
       text: intl.formatMessage({ id: "actions.view_random" }),
@@ -174,16 +173,24 @@ export const GroupList: React.FC<IGroupList> = ({
   }
 
   return (
-    <GroupItemList
-      selectable
+    <ItemListContext
+      filterMode={filterMode}
+      useResult={useFindGroups}
+      getItems={getItems}
+      getCount={getCount}
+      alterQuery={alterQuery}
       filterHook={filterHook}
       view={view}
-      alterQuery={alterQuery}
-      otherOperations={otherOperations}
-      addKeybinds={addKeybinds}
-      renderContent={renderContent}
-      renderEditDialog={renderEditDialog}
-      renderDeleteDialog={renderDeleteDialog}
-    />
+      selectable
+    >
+      <ItemList
+        view={view}
+        otherOperations={otherOperations}
+        addKeybinds={addKeybinds}
+        renderContent={renderContent}
+        renderEditDialog={renderEditDialog}
+        renderDeleteDialog={renderDeleteDialog}
+      />
+    </ItemListContext>
   );
 };