Basic modal for switching extension settings (#907)

* Basic modal for switching extension settings

* Improve network usage by including field in query directly

Requesting individually is stupid, when it's a field that is already
available on the server

* Improve extension slider usability

- Always render the element, fixes animations
- Store the selected item in state, allows the back-button to re-open
  dialog

* Update src/modules/extension/components/ExtensionOptions.tsx

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Update src/modules/extension/components/ExtensionOptions.tsx

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Fix suggestions

* Use dialog instead of optionsPanel

* Extension options remove redundant NSFW info

* Apply suggestions from code review

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* Use proper dialog title and content for settings dialog

* Use `string | undefined` instead of `string | null` to satisfy `tsc`

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

src/modules/extension/screens/Extensions.tsx

@@ -15,7 +15,7 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { extensionDefaultLangs } from '@/modules/core/utils/Languages.ts';
@@ -41,6 +41,7 @@ import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/exten
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { ExtensionOptions } from '@/modules/extension/components/ExtensionOptions';
 
 const LANGUAGE = 0;
 const EXTENSIONS = 1;
@@ -48,6 +49,17 @@ const EXTENSIONS = 1;
 export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const { t } = useTranslation();
     const { setAction } = useNavBarContext();
+    const navigate = useNavigate();
+    const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: string }>();
+    const selectedExtensionPkg = state?.selectedExtensionPkg;
+    const setSelectedExtensionPkg = (newPkg: string | undefined) => {
+        navigate(pathname + search, {
+            replace: true,
+            state: {
+                selectedExtensionPkg: newPkg,
+            },
+        });
+    };
 
     const {
         data: serverSettingsData,
@@ -298,11 +310,16 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
                                 forcedState={
                                     updatingExtensionIds.includes(item.pkgName) ? ExtensionState.UPDATING : undefined
                                 }
+                                showOptions={() => setSelectedExtensionPkg(item.pkgName)}
                             />
                         </StyledGroupItemWrapper>
                     );
                 }}
             />
+            <ExtensionOptions
+                extensionId={selectedExtensionPkg}
+                closeDialog={() => setSelectedExtensionPkg(undefined)}
+            />
         </>
     );
 }