Use proper state management to handle opening the string list

translate/src/App.tsx

@@ -22,6 +22,7 @@ import { AddonPromotion } from './modules/addonpromotion/components/AddonPromoti
 import { BatchActions } from './modules/batchactions/components/BatchActions';
 import { useBatchactions } from './modules/batchactions/hooks';
 import { EntitiesList } from './modules/entitieslist';
+import { useEntitiesList } from './modules/entitieslist/hooks';
 import { Entity } from './modules/entitydetails/components/Entity';
 import { InteractiveTour } from './modules/interactivetour/components/InteractiveTour';
 import { Navigation } from './modules/navbar/components/Navigation';
@@ -36,6 +37,7 @@ export function App() {
   const dispatch = useAppDispatch();
   const location = useContext(Location);
   const batchactions = useBatchactions();
+  const entitiesList = useEntitiesList();
   const { l10n } = useLocalization();
 
   const [locale, _setLocale] = useState(initLocale((next) => _setLocale(next)));
@@ -73,7 +75,11 @@ export function App() {
                   <NotificationPanel />
                   <UserControls />
                 </header>
-                <section className='main-content'>
+                <section
+                  className={`main-content ${
+                    entitiesList.show ? 'entities-list' : ''
+                  }`}
+                >
                   <section className='panel-list'>
                     <SearchBox />
                     <EntitiesList />

translate/src/modules/entitieslist/actions.ts

@@ -0,0 +1,19 @@
+import type { AppDispatch } from '~/store';
+
+export const TOGGLE = 'entitieslist/TOGGLE';
+
+export type Action = ToggleAction;
+
+type ToggleAction = {
+  readonly type: typeof TOGGLE;
+  readonly show: boolean;
+};
+
+/**
+ * Toggle Entities List (used in mobile view).
+ */
+export const toggleEntitiesList = () => async (dispatch: AppDispatch) => {
+  dispatch({
+    type: TOGGLE,
+  });
+};

translate/src/modules/entitieslist/components/Entity.tsx

@@ -6,7 +6,9 @@ import type { Entity as EntityType } from '~/api/entity';
 import { Locale } from '~/context/Locale';
 import type { Location } from '~/context/Location';
 import { useTranslationStatus } from '~/modules/entities/useTranslationStatus';
+import { toggleEntitiesList } from '~/modules/entitieslist/actions';
 import { Translation } from '~/modules/translation';
+import { useAppDispatch } from '~/hooks';
 import { useTranslator } from '~/hooks/useTranslator';
 
 import './Entity.css';
@@ -50,6 +52,7 @@ export function Entity({
   selectEntity,
   toggleForBatchEditing,
 }: Props): React.ReactElement<'li'> {
+  const dispatch = useAppDispatch();
   const isTranslator = useTranslator();
   const [areSiblingsActive, setSiblingsActive] = useState(false);
 
@@ -62,9 +65,7 @@ export function Entity({
         )
       ) {
         selectEntity(entity);
-        document
-          .querySelector('#app > .main-content')
-          .classList.toggle('entities-list');
+        dispatch(toggleEntitiesList());
       }
     },
     [entity, selectEntity],

translate/src/modules/entitieslist/hooks.ts

@@ -0,0 +1,5 @@
+import { useAppSelector } from '~/hooks';
+import { ENTITIESLIST } from './reducer';
+
+export const useEntitiesList = () =>
+  useAppSelector((state) => state[ENTITIESLIST]);

translate/src/modules/entitieslist/reducer.ts

@@ -0,0 +1,28 @@
+import { Action, TOGGLE } from './actions';
+
+// Name of this module.
+// Used as the key to store this module's reducer.
+export const ENTITIESLIST = 'entitieslist';
+
+export type EntitiesListState = {
+  readonly show: boolean;
+};
+
+const initial: EntitiesListState = {
+  show: false,
+};
+
+export function reducer(
+  state: EntitiesListState = initial,
+  action: Action,
+): EntitiesListState {
+  switch (action.type) {
+    case TOGGLE:
+      return {
+        ...state,
+        show: !state.show,
+      };
+    default:
+      return state;
+  }
+}

translate/src/modules/entitydetails/components/EntityNavigation.tsx

@@ -4,7 +4,9 @@ import React, { useCallback, useContext, useEffect } from 'react';
 import { Location } from '~/context/Location';
 import { ShowNotification } from '~/context/Notification';
 import { UnsavedActions } from '~/context/UnsavedChanges';
+import { useAppDispatch } from '~/hooks';
 import { useNextEntity, usePreviousEntity } from '~/modules/entities/hooks';
+import { toggleEntitiesList } from '~/modules/entitieslist/actions';
 import { STRING_LINK_COPIED } from '~/modules/notification/messages';
 
 import './EntityNavigation.css';
@@ -15,16 +17,15 @@ import './EntityNavigation.css';
  * Shows copy link and next/previous buttons.
  */
 export function EntityNavigation(): React.ReactElement {
+  const dispatch = useAppDispatch();
   const location = useContext(Location);
   const showNotification = useContext(ShowNotification);
   const nextEntity = useNextEntity();
   const previousEntity = usePreviousEntity();
   const { checkUnsavedChanges } = useContext(UnsavedActions);
 
   const goToStringList = () => {
-    document
-      .querySelector('#app > .main-content')
-      .classList.toggle('entities-list');
+    dispatch(toggleEntitiesList());
   };
 
   const copyLinkToClipboard = useCallback(async () => {

translate/src/rootReducer.ts

@@ -1,4 +1,5 @@
 import * as entities from '~/modules/entities/reducer';
+import * as entitieslist from '~/modules/entitieslist/reducer';
 import * as project from '~/modules/project/reducer';
 import * as resource from '~/modules/resource/reducer';
 import * as stats from '~/modules/stats/reducer';
@@ -11,13 +12,12 @@ import * as teamcomments from '~/modules/teamcomments/reducer';
 
 // Combine reducers from all modules, using their NAME constant as key.
 export const reducer = {
-  // Core modules
   [entities.ENTITIES]: entities.reducer,
+  [entitieslist.ENTITIESLIST]: entitieslist.reducer,
   [project.PROJECT]: project.reducer,
   [resource.RESOURCE]: resource.reducer,
   [stats.STATS]: stats.reducer,
   [user.USER]: user.reducer,
-  // Application modules
   [batchactions.BATCHACTIONS]: batchactions.reducer,
   [otherlocales.OTHERLOCALES]: otherlocales.reducer,
   [search.SEARCH]: search.reducer,