From 2120390e933c889848510375a6046bf59e72a60c Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 24 Mar 2025 23:43:07 +0100
Subject: [PATCH] Align card list styling with rest of lists

---
 .../extension/components/ExtensionCard.tsx    |  8 +-
 .../extension/components/ExtensionOptions.tsx | 86 ++++++++++---------
 src/modules/extension/screens/Extensions.tsx  | 12 ++-
 3 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/src/modules/extension/components/ExtensionCard.tsx b/src/modules/extension/components/ExtensionCard.tsx
index 972d4c23..27901b09 100644
--- a/src/modules/extension/components/ExtensionCard.tsx
+++ b/src/modules/extension/components/ExtensionCard.tsx
@@ -192,13 +192,7 @@ export function ExtensionCard(props: IProps) {
                 </Box>
                 {isInstalled && (
                     <CustomTooltip title={t('settings.title')}>
-                        <IconButton
-                            onClick={showOptions}
-                            aria-label="display more actions"
-                            edge="end"
-                            color="inherit"
-                            size="large"
-                        >
+                        <IconButton onClick={showOptions} color="inherit">
                             <SettingsIcon />
                         </IconButton>
                     </CustomTooltip>
diff --git a/src/modules/extension/components/ExtensionOptions.tsx b/src/modules/extension/components/ExtensionOptions.tsx
index f33df306..3bde2a53 100644
--- a/src/modules/extension/components/ExtensionOptions.tsx
+++ b/src/modules/extension/components/ExtensionOptions.tsx
@@ -17,6 +17,7 @@ import { useNavigate } from 'react-router-dom';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
+import { useMemo } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
@@ -25,9 +26,11 @@ import { getErrorMessage } from '@/lib/HelperFunctions';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
 import { AppRoutes } from '@/modules/core/AppRoute.constants';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils';
+import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { TExtension } from '@/modules/extension/Extensions.types.ts';
 
 interface IExtensionOptions {
-    extensionId: string | undefined;
+    extensionId: TExtension['pkgName'] | undefined;
     closeDialog: () => void;
 }
 
@@ -46,10 +49,14 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
         return <Dialog open={!!extensionId} onClose={closeDialog} />;
     }
 
-    const relevantSources = data?.sources.nodes.filter((s) => s.extension.pkgName === extensionId);
+    const relevantSources = useMemo(() => {
+        if (!extensionId) return [];
 
+        return data?.sources.nodes.filter((source) => source.extension.pkgName === extensionId);
+    }, [data?.sources.nodes, extensionId]);
+    console.log('@asdf', extensionId, relevantSources);
     return (
-        <Dialog open={!!extensionId} onClose={closeDialog}>
+        <Dialog open={!!extensionId} onClose={closeDialog} maxWidth="md" fullWidth>
             <DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle>
             <DialogContent>
                 {isLoading && <LoadingPlaceholder />}
@@ -61,46 +68,41 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
                     />
                 )}
                 {!isLoading && !error && (
-                    <Box
-                        sx={{
-                            pb: 2,
-                            pt: 2,
-                            mx: 2,
-                        }}
-                    >
+                    <Box>
                         {relevantSources?.map((source) => (
-                            <Card key={source.id}>
-                                <CardContent
-                                    sx={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 1,
-                                        p: 1.5,
-                                        '&:last-child': {
-                                            paddingBottom: 1.5,
-                                        },
-                                    }}
-                                >
-                                    <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
-                                        {translateExtensionLanguage(source.lang)}
-                                    </Typography>
-                                    {source.isConfigurable && (
-                                        <CustomTooltip title={t('settings.title')}>
-                                            <IconButton
-                                                onClick={() =>
-                                                    navigate(AppRoutes.sources.childRoutes.configure.path(source.id))
-                                                }
-                                                aria-label="display more actions"
-                                                edge="end"
-                                                color="inherit"
-                                                size="large"
-                                            >
-                                                <SettingsIcon />
-                                            </IconButton>
-                                        </CustomTooltip>
-                                    )}
-                                </CardContent>
-                            </Card>
+                            <StyledGroupItemWrapper key={source.id} sx={{ px: 0 }}>
+                                <Card>
+                                    <CardContent
+                                        sx={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 1,
+                                            p: 1.5,
+                                            '&:last-child': {
+                                                paddingBottom: 1.5,
+                                            },
+                                        }}
+                                    >
+                                        <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
+                                            {translateExtensionLanguage(source.lang)}
+                                        </Typography>
+                                        {source.isConfigurable && (
+                                            <CustomTooltip title={t('settings.title')}>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        navigate(
+                                                            AppRoutes.sources.childRoutes.configure.path(source.id),
+                                                        )
+                                                    }
+                                                    color="inherit"
+                                                >
+                                                    <SettingsIcon />
+                                                </IconButton>
+                                            </CustomTooltip>
+                                        )}
+                                    </CardContent>
+                                </Card>
+                            </StyledGroupItemWrapper>
                         ))}
                     </Box>
                 )}
diff --git a/src/modules/extension/screens/Extensions.tsx b/src/modules/extension/screens/Extensions.tsx
index 07d7389f..0186a2e8 100644
--- a/src/modules/extension/screens/Extensions.tsx
+++ b/src/modules/extension/screens/Extensions.tsx
@@ -36,7 +36,12 @@ import {
     isExtensionStateOrLanguage,
     translateExtensionLanguage,
 } from '@/modules/extension/Extensions.utils.ts';
-import { ExtensionAction, ExtensionGroupState, ExtensionState } from '@/modules/extension/Extensions.types.ts';
+import {
+    ExtensionAction,
+    ExtensionGroupState,
+    ExtensionState,
+    TExtension,
+} from '@/modules/extension/Extensions.types.ts';
 import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/extension/Extensions.constants.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
@@ -50,9 +55,10 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const { t } = useTranslation();
     const { setAction } = useNavBarContext();
     const navigate = useNavigate();
-    const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: string }>();
+    const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: TExtension['pkgName'] }>();
     const selectedExtensionPkg = state?.selectedExtensionPkg;
-    const setSelectedExtensionPkg = (newPkg: string | undefined) => {
+
+    const setSelectedExtensionPkg = (newPkg: TExtension['pkgName'] | undefined) => {
         navigate(pathname + search, {
             replace: true,
             state: {