Rename Movie to Group in UI (#4963)

* Replace movies with groups in the UI
* Massage menu items
* Change view names
* Rename Movie components to Group
* Refactor movie to group variable names
* Rename movie class names to group

ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Button, Form } from "react-bootstrap";
 import { FormattedMessage, useIntl } from "react-intl";
 import { DurationInput } from "src/components/Shared/DurationInput";
@@ -47,7 +47,7 @@ import { defaultMaxOptionsShown } from "src/core/config";
 const allMenuItems = [
   { id: "scenes", headingID: "scenes" },
   { id: "images", headingID: "images" },
-  { id: "movies", headingID: "movies" },
+  { id: "groups", headingID: "groups" },
   { id: "markers", headingID: "markers" },
   { id: "galleries", headingID: "galleries" },
   { id: "performers", headingID: "performers" },
@@ -67,6 +67,22 @@ export const SettingsInterfacePanel: React.FC = () => {
     error,
   } = useSettings();
 
+  // convert old movies menu item to groups
+  const massageMenuItems = useCallback((menuItems: string[]) => {
+    return menuItems.map((item) => {
+      if (item === "movies") {
+        return "groups";
+      }
+      return item;
+    });
+  }, []);
+
+  const massagedMenuItems = useMemo(() => {
+    if (!iface.menuItems) return iface.menuItems;
+
+    return massageMenuItems(iface.menuItems);
+  }, [iface.menuItems, massageMenuItems]);
+
   const {
     interactive,
     state: interactiveState,
@@ -231,8 +247,8 @@ export const SettingsInterfacePanel: React.FC = () => {
           <CheckboxGroup
             groupId="menu-items"
             items={allMenuItems}
-            checkedIds={iface.menuItems ?? undefined}
-            onChange={(v) => saveInterface({ menuItems: v })}
+            checkedIds={massagedMenuItems ?? undefined}
+            onChange={(v) => saveInterface({ menuItems: massageMenuItems(v) })}
           />
         </div>
 
@@ -563,7 +579,7 @@ export const SettingsInterfacePanel: React.FC = () => {
           </div>
           <BooleanSetting
             id="enableMovieBackgroundImage"
-            headingID="movie"
+            headingID="group"
             checked={ui.enableMovieBackgroundImage ?? undefined}
             onChange={(v) => saveUI({ enableMovieBackgroundImage: v })}
           />
@@ -659,8 +675,8 @@ export const SettingsInterfacePanel: React.FC = () => {
             }
           />
           <BooleanSetting
-            id="disableDropdownCreate_movie"
-            headingID="movie"
+            id="disableDropdownCreate_group"
+            headingID="group"
             checked={iface.disableDropdownCreate?.movie ?? undefined}
             onChange={(v) =>
               saveInterface({