Hide global search "pinned" source filter without pinned sources

closes #1095

CHANGELOG.md

@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Theme**) Change "pure black mode" paper background color to true black
 - (**Library**) Improve library manga sorting
 - (**Browse**) Merge languages filter of the sources and extensions into one
+- (**Search**) Hide "pinned" sources button in global search in case no sources are pinned
 
 ### Fixed
 

src/features/global-search/screens/SearchAll.tsx

@@ -253,7 +253,6 @@ export const SearchAll = ({
     const { pathname, state } = useLocation<{ mangaTitle?: string; shouldShowOnlyPinnedSources?: boolean }>();
     const { ref: filterHeaderRef, height: filterHeaderHeight } = useElementSize();
 
-    const shouldShowOnlyPinnedSources = state?.shouldShowOnlyPinnedSources ?? true;
     const isMigrateMode = pathname.startsWith('/migrate/source') || pathname.startsWith('/migrate/manual-search');
 
     const { mangaId } = useParams<{ mangaId?: string }>() ?? STABLE_EMPTY_OBJECT;
@@ -280,6 +279,9 @@ export const SearchAll = ({
 
     const sourceLanguages = useMemo(() => Sources.getLanguages(sources), [sources]);
 
+    const hasPinnedSources = useMemo(() => !!Sources.filter(sources, { pinned: true }).length, [sources]);
+    const shouldShowOnlyPinnedSources = state?.shouldShowOnlyPinnedSources ?? hasPinnedSources;
+
     const filteredSources = useMemo(
         () =>
             Sources.filter(sources, {
@@ -358,44 +360,48 @@ export const SearchAll = ({
                     background: (theme) => theme.palette.background.default,
                 }}
             >
-                <Stack sx={{ flexDirection: 'row', gap: 1 }}>
+                {hasPinnedSources && (
-                    <Button
+                    <>
-                        startIcon={<PushPinIcon />}
+                        (
-                        variant={shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
+                        <Button
-                        onClick={() =>
+                            startIcon={<PushPinIcon />}
-                            navigate(
+                            variant={shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
-                                {
+                            onClick={() =>
-                                    pathname: '',
+                                navigate(
-                                    search: query ? `query=${query}` : '',
+                                    {
-                                },
+                                        pathname: '',
-                                {
+                                        search: query ? `query=${query}` : '',
-                                    replace: true,
+                                    },
-                                    state: { ...state, shouldShowOnlyPinnedSources: true },
+                                    {
-                                },
+                                        replace: true,
-                            )
+                                        state: { ...state, shouldShowOnlyPinnedSources: true },
-                        }
+                                    },
-                    >
+                                )
-                        {t`Pinned`}
+                            }
-                    </Button>
+                        >
-                    <Button
+                            {t`Pinned`}
-                        startIcon={<DoneAllIcon />}
+                        </Button>
-                        variant={!shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
+                        <Button
-                        onClick={() =>
+                            startIcon={<DoneAllIcon />}
-                            navigate(
+                            variant={!shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
-                                {
+                            onClick={() =>
-                                    pathname: '',
+                                navigate(
-                                    search: query ? `query=${query}` : '',
+                                    {
-                                },
+                                        pathname: '',
-                                {
+                                        search: query ? `query=${query}` : '',
-                                    replace: true,
+                                    },
-                                    state: { ...state, shouldShowOnlyPinnedSources: false },
+                                    {
-                                },
+                                        replace: true,
-                            )
+                                        state: { ...state, shouldShowOnlyPinnedSources: false },
-                        }
+                                    },
-                    >
+                                )
-                        {t`All`}
+                            }
-                    </Button>
+                        >
-                </Stack>
+                            {t`All`}
+                        </Button>
+                        )
+                    </>
+                )}
                 <Button
                     startIcon={<FilterListIcon />}
                     variant={shouldShowOnlySourcesWithResults ? 'contained' : 'outlined'}