From fe30c8e2817115e33299fc334114041a719e786a Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Wed, 21 May 2025 02:27:56 +0200
Subject: [PATCH] Update "search all" source header styling

- reduce height
- reduce source name font size
- use source "name" instead of "display name"
 display name only adds language, which is shown in the second line of the header
- add button to indicate that the search can be opened on the source itself
---
 .../global-search/screens/SearchAll.tsx       | 32 ++++++++++++++-----
 src/modules/source/Source.types.ts            |  1 +
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/modules/global-search/screens/SearchAll.tsx b/src/modules/global-search/screens/SearchAll.tsx
index a518564e..cc689ff3 100644
--- a/src/modules/global-search/screens/SearchAll.tsx
+++ b/src/modules/global-search/screens/SearchAll.tsx
@@ -20,6 +20,8 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { useElementSize } from '@mantine/hooks';
+import IconButton from '@mui/material/IconButton'; // ms
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { useLocalStorage, useSessionStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { getDefaultLanguages } from '@/modules/core/utils/Languages.ts';
@@ -30,14 +32,19 @@ import { MangaCardProps } from '@/modules/manga/Manga.types.ts';
 import { EmptyView } from '@/modules/core/components/feedback/EmptyView.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
-import { SourceType } from '@/lib/graphql/generated/graphql.ts';
 import { BaseMangaGrid } from '@/modules/manga/components/BaseMangaGrid.tsx';
 import { EmptyViewAbsoluteCentered } from '@/modules/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { Sources } from '@/modules/source/services/Sources.ts';
-import { SourceDisplayNameInfo, SourceIdInfo, SourceMetaInfo } from '@/modules/source/Source.types.ts';
+import {
+    SourceDisplayNameInfo,
+    SourceIdInfo,
+    SourceLanguageInfo,
+    SourceMetaInfo,
+    SourceNameInfo,
+} from '@/modules/source/Source.types.ts';
 import {
     createUpdateMetadataServerSettings,
     useMetadataServerSettings,
@@ -45,6 +52,8 @@ import {
 import { useAppTitleAndAction } from '@/modules/navigation-bar/hooks/useAppTitleAndAction.ts';
 import { getSourceMetadata } from '@/modules/source/services/SourceMetadata.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 
 type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean; error: any };
 type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -111,14 +120,14 @@ const SourceSearchPreview = React.memo(
         emptyQuery,
         mode,
     }: {
-        source: Pick<SourceType, 'id' | 'displayName' | 'lang'>;
+        source: SourceIdInfo & SourceDisplayNameInfo & SourceNameInfo & SourceLanguageInfo;
         onSearchRequestFinished: (source: SourceIdInfo, state: SourceLoadingState) => void;
         searchString: string | null | undefined;
         emptyQuery: boolean;
     } & Pick<MangaCardProps, 'mode'>) => {
         const { t } = useTranslation();
 
-        const { id, displayName, lang } = source;
+        const { id, name, lang } = source;
 
         const currentSearchString = useRef(searchString);
         const currentAbortRequest = useRef<(reason: any) => void>(() => {});
@@ -126,7 +135,7 @@ const SourceSearchPreview = React.memo(
         const didSearchChange = currentSearchString.current !== searchString;
         if (didSearchChange) {
             currentSearchString.current = searchString;
-            currentAbortRequest.current(new Error(`SourceSearchPreview(${id}, ${displayName}): search string changed`));
+            currentAbortRequest.current(new Error(`SourceSearchPreview(${id}, ${name}): search string changed`));
         }
 
         const [refetch, results] = requestManager.useSourceSearch(id, searchString ?? '', undefined, 1, {
@@ -166,10 +175,17 @@ const SourceSearchPreview = React.memo(
                     <CardActionArea
                         component={Link}
                         to={AppRoutes.sources.childRoutes.browse.path(id, searchString)}
-                        sx={{ p: 3 }}
+                        sx={{ p: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                     >
-                        <Typography variant="h5">{displayName}</Typography>
-                        <Typography variant="caption">{translateExtensionLanguage(lang)}</Typography>
+                        <Box>
+                            <Typography variant="h5">{name}</Typography>
+                            <Typography variant="caption">{translateExtensionLanguage(lang)}</Typography>
+                        </Box>
+                        <CustomTooltip title={t('global.button.show_more')}>
+                            <IconButton {...MUIUtil.preventRippleProp()}>
+                                <ArrowForwardIcon />
+                            </IconButton>
+                        </CustomTooltip>
                     </CardActionArea>
                 </Card>
                 {errorMessage ? (
diff --git a/src/modules/source/Source.types.ts b/src/modules/source/Source.types.ts
index 69cba6c2..ffb637cc 100644
--- a/src/modules/source/Source.types.ts
+++ b/src/modules/source/Source.types.ts
@@ -64,6 +64,7 @@ export type EditTextPreferenceProps = PreferenceProps &
 
 export type SourceIdInfo = Pick<SourceType, 'id'>;
 export type SourceLanguageInfo = Pick<SourceType, 'lang'>;
+export type SourceNameInfo = Pick<SourceType, 'name'>;
 export type SourceDisplayNameInfo = Pick<SourceType, 'displayName'>;
 export type SourceNsfwInfo = Pick<SourceType, 'isNsfw'>;
 export type SourceRepoInfo = { extension: Pick<ExtensionType, 'repo'> };