ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve global search

Browse Source 
Add options to show only searches for
- pinned sources
- all sources
- sources with results
This commit is contained in:
schroda
2025-05-18 00:59:01 +02:00
parent 1e1489df75
commit 7885bcda98
6 changed files with 117 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/locales/en.json
View File

@@ -1045,6 +1045,9 @@
"source_search_failed": "Could not search source"
}
},
"filter": {
"has_results": "Has results"
},
"title": {
"global_search": "Global Search",
"search": "Search"

1
src/modules/browse/Browse.types.ts
View File

@@ -13,4 +13,5 @@ export type MetadataBrowseSettings = {
extensionLanguages: string[];
showNsfw: boolean;
lastUsedSourceId: SourceIdInfo['id'] | null;
shouldShowOnlySourcesWithResults: boolean;
};

100
src/modules/global-search/screens/SearchAll.tsx
View File

@@ -14,8 +14,14 @@ import { Link, useLocation } from 'react-router-dom';
import { StringParam, useQueryParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
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 { requestManager } from '@/lib/requests/RequestManager.ts';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { useLocalStorage, useSessionStorage } from '@/modules/core/hooks/useStorage.tsx';
import { getDefaultLanguages } from '@/modules/core/utils/Languages.ts';
import { AppbarSearch } from '@/modules/core/components/AppbarSearch.tsx';
import { LanguageSelect } from '@/modules/core/components/inputs/LanguageSelect.tsx';
@@ -32,9 +38,13 @@ 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 { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
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';
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean; error: any };
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -200,31 +210,56 @@ const SourceSearchPreview = React.memo(
export const SearchAll: React.FC = () => {
const { t } = useTranslation();
const { pathname, state } = useLocation<{ mangaTitle?: string }>();
const { ref: filterHeaderRef, height: filterHeaderHeight } = useElementSize();
const isMigrateMode = pathname.startsWith('/migrate/source');
const [query] = useQueryParam('query', StringParam);
const searchString = useDebounce(query, TRIGGER_SEARCH_THRESHOLD);
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', getDefaultLanguages());
const [shouldShowOnlyPinnedSources, setShouldShowOnlyPinnedSources] = useSessionStorage(
'SearchAll::shouldShowOnlyPinnedSources',
true,
);
const {
settings: { showNsfw },
settings: { showNsfw, shouldShowOnlySourcesWithResults },
} = useMetadataServerSettings();
const { data, loading, error, refetch } = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
const sources = useMemo(() => data?.sources.nodes ?? [], [data?.sources.nodes]);
const filteredSources = useMemo(
() => Sources.filter(sources, { showNsfw, languages: shownLangs, keepLocalSource: true }),
[sources, shownLangs],
);
const sourcesSortedByName = useMemo(() => [...filteredSources].toSorted(compareSourceByName), [filteredSources]);
const [sourceToLoadingStateMap, setSourceToLoadingStateMap] = useState<SourceToLoadingStateMap>(new Map());
const debouncedSourceToLoadingStateMap = useDebounce(sourceToLoadingStateMap, 500);
const sourceLanguages = useMemo(() => Sources.getLanguages(sources), [sources]);
const filteredSources = useMemo(
() =>
Sources.filter(sources, {
showNsfw,
languages: shownLangs,
keepLocalSource: true,
pinned: shouldShowOnlyPinnedSources,
}),
[sources, shownLangs, shouldShowOnlyPinnedSources],
);
const filteredSourcesByHasResult = useMemo(() => {
if (!shouldShowOnlySourcesWithResults) {
return filteredSources;
}
return filteredSources.filter((source) => {
const sourceState = debouncedSourceToLoadingStateMap.get(source.id);
return !sourceState || sourceState?.isLoading || (sourceState?.hasResults && !sourceState?.error);
});
}, [filteredSources, shouldShowOnlySourcesWithResults, debouncedSourceToLoadingStateMap]);
const sourcesSortedByName = useMemo(
() => [...filteredSourcesByHasResult].toSorted(compareSourceByName),
[filteredSourcesByHasResult],
);
const sourcesSortedByResult = useMemo(
() =>
[...sourcesSortedByName].sort((sourceA, sourceB) =>
@@ -244,6 +279,10 @@ export const SearchAll: React.FC = () => {
[setSourceToLoadingStateMap],
);
const updateMetadataSettings = createUpdateMetadataServerSettings<'shouldShowOnlySourcesWithResults'>((e) =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
);
useAppTitleAndAction(
t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: state?.mangaTitle }),
<>
@@ -272,7 +311,47 @@ export const SearchAll: React.FC = () => {
}
return (
<Box sx={{ p: 1 }}>
<Box sx={{ position: 'relative', px: 1, pb: 1 }}>
<Stack
ref={filterHeaderRef}
sx={{
width: '100%',
position: 'fixed',
zIndex: 1,
flexDirection: 'row',
gap: 2,
pt: 1,
pb: 2,
background: (theme) => theme.palette.background.default,
}}
>
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
<Button
startIcon={<PushPinIcon />}
variant={shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
onClick={() => setShouldShowOnlyPinnedSources(true)}
>
{t('global.label.pinned')}
</Button>
<Button
startIcon={<DoneAllIcon />}
variant={!shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
onClick={() => setShouldShowOnlyPinnedSources(false)}
>
{t('extension.language.all')}
</Button>
</Stack>
<Button
startIcon={<FilterListIcon />}
variant={shouldShowOnlySourcesWithResults ? 'contained' : 'outlined'}
onClick={() =>
updateMetadataSettings('shouldShowOnlySourcesWithResults', !shouldShowOnlySourcesWithResults)
}
>
{t('search.filter.has_results')}
</Button>
</Stack>
<Box sx={{ pt: `${filterHeaderHeight}px` }}>
{sourcesSortedByResult.map((source, index) => (
<Box key={source.id} sx={{ pb: index + 1 !== sourcesSortedByResult.length ? 2 : 0 }}>
<SourceSearchPreview
@@ -285,5 +364,6 @@ export const SearchAll: React.FC = () => {
</Box>
))}
</Box>
</Box>
);
};

2
src/modules/metadata/Metadata.constants.ts
View File

@@ -97,6 +97,7 @@ export const APP_METADATA_KEY_TO_TYPE = {
mangaGridItemWidth: 'number',
isPinned: 'boolean',
lastUsedSourceId: 'string',
shouldShowOnlySourcesWithResults: 'boolean',
} as const satisfies Record<AppMetadataKeys, 'auto' | 'string' | 'number' | 'boolean'>;
export const VALID_APP_METADATA_KEYS = Object.keys(APP_METADATA_KEY_TO_TYPE);
@@ -149,6 +150,7 @@ export const GLOBAL_METADATA_KEYS: AppMetadataKeys[] = [
'extensionLanguages',
'showNsfw',
'lastUsedSourceId',
'shouldShowOnlySourcesWithResults',
// history
'hideHistory',

1
src/modules/settings/Settings.constants.ts
View File

@@ -45,6 +45,7 @@ export const SERVER_SETTINGS_METADATA_DEFAULT: MetadataServerSettings = {
extensionLanguages: getDefaultLanguages(),
showNsfw: true,
lastUsedSourceId: null,
shouldShowOnlySourcesWithResults: true,
// history
hideHistory: false,

10
src/modules/source/services/Sources.ts
View File

@@ -80,7 +80,8 @@ export class Sources {
showNsfw,
languages,
keepLocalSource,
}: { showNsfw?: boolean; languages?: string[]; keepLocalSource?: boolean } = {},
pinned,
}: { showNsfw?: boolean; languages?: string[]; keepLocalSource?: boolean; pinned?: boolean } = {},
): Source[] {
const normalizedLanguages = toComparableLanguages(toUniqueLanguageCodes(languages ?? []));
@@ -97,6 +98,13 @@ export class Sources {
!languages ||
normalizedLanguages.includes(toComparableLanguage(Sources.getLanguage(source))) ||
(keepLocalSource && Sources.isLocalSource(source)),
)
.filter(
(source) =>
pinned === undefined ||
!pinned ||
getSourceMetadata(source).isPinned ||
(keepLocalSource && Sources.isLocalSource(source)),
);
}