vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

remove max width from list pages

Browse Source
This commit is contained in:
jeffvli
2025-11-28 20:14:24 -08:00
parent 2101b2e1c7
commit 9e1cdcc93e
16 changed files with 34 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-list-header.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
return (
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<PlayButton />
<PageTitle title={title} />
<LibraryHeaderBar.Badge isLoading={!itemCount}>
src/renderer/features/albums/routes/album-list-route.tsx
+2 -5
View File
@@ -5,7 +5,6 @@ import { ListContext } from '/@/renderer/context/list-context';
import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { AlbumListQuery } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
@@ -48,10 +47,8 @@ const AlbumListRoute = () => {
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<AlbumListHeader />
<AlbumListContent />
</LibraryContainer>
<AlbumListHeader />
<AlbumListContent />
</ListContext.Provider>
</AnimatedPage>
);
src/renderer/features/artists/components/album-artist-list-header.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
return (
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
src/renderer/features/artists/components/artist-list-header.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
return (
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
src/renderer/features/artists/routes/album-artist-list-route.tsx
+2 -5
View File
@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { ItemListKey } from '/@/shared/types/types';
@@ -25,10 +24,8 @@ const AlbumArtistListRoute = () => {
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<AlbumArtistListHeader />
<AlbumArtistListContent />
</LibraryContainer>
<AlbumArtistListHeader />
<AlbumArtistListContent />
</ListContext.Provider>
</AnimatedPage>
);
src/renderer/features/artists/routes/artist-list-route.tsx
+2 -5
View File
@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
import { ArtistListContent } from '/@/renderer/features/artists/components/artist-list-content';
import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { ItemListKey } from '/@/shared/types/types';
@@ -25,10 +24,8 @@ const ArtistListRoute = () => {
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<ArtistListHeader />
<ArtistListContent />
</LibraryContainer>
<ArtistListHeader />
<ArtistListContent />
</ListContext.Provider>
</AnimatedPage>
);
src/renderer/features/genres/components/genre-list-header.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
return (
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
src/renderer/features/genres/routes/genre-list-route.tsx
+2 -5
View File
@@ -4,7 +4,6 @@ import { ListContext } from '/@/renderer/context/list-context';
import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content';
import { GenreListHeader } from '/@/renderer/features/genres/components/genre-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { ItemListKey } from '/@/shared/types/types';
@@ -25,10 +24,8 @@ const GenreListRoute = () => {
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<GenreListHeader />
<GenreListContent />
</LibraryContainer>
<GenreListHeader />
<GenreListContent />
</ListContext.Provider>
</AnimatedPage>
);
src/renderer/features/playlists/components/playlist-list-header.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
return (
<Stack gap={0}>
<PageHeader>
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
src/renderer/features/playlists/routes/playlist-list-route.tsx
+2 -5
View File
@@ -5,7 +5,6 @@ import { ListContext } from '/@/renderer/context/list-context';
import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { ItemListKey } from '/@/shared/types/types';
@@ -27,10 +26,8 @@ const PlaylistListRoute = () => {
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<PlaylistListHeader />
<PlaylistListContent />
</LibraryContainer>
<PlaylistListHeader />
<PlaylistListContent />
</ListContext.Provider>
</AnimatedPage>
);
src/renderer/features/search/components/search-header.tsx
+2 -4
View File
@@ -13,7 +13,6 @@ import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
import { SearchInput } from '/@/renderer/features/shared/components/search-input';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes';
import { Button, ButtonGroup } from '/@/shared/components/button/button';
import { Flex } from '/@/shared/components/flex/flex';
@@ -30,7 +29,6 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
const { t } = useTranslation();
const { itemType } = useParams() as { itemType: LibraryItem };
const [searchParams, setSearchParams] = useSearchParams();
const { ref, ...cq } = useContainerQuery();
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
@@ -52,10 +50,10 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
};
return (
<Stack gap={0} ref={ref}>
<Stack gap={0}>
<PageHeader>
<Flex justify="space-between" w="100%">
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<LibraryHeaderBar.Title>Search</LibraryHeaderBar.Title>
</LibraryHeaderBar>
<Group>
src/renderer/features/search/routes/search-route.tsx
+2 -5
View File
@@ -4,7 +4,6 @@ import { useLocation, useParams } from 'react-router';
import { SearchContent } from '/@/renderer/features/search/components/search-content';
import { SearchHeader } from '/@/renderer/features/search/components/search-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
const SearchRoute = () => {
@@ -15,10 +14,8 @@ const SearchRoute = () => {
return (
<AnimatedPage key={`search-${navigationId}`}>
<LibraryContainer>
<SearchHeader navigationId={navigationId} />
<SearchContent key={`page-${itemType}`} />
</LibraryContainer>
<SearchHeader navigationId={navigationId} />
<SearchContent key={`page-${itemType}`} />
</AnimatedPage>
);
};
src/renderer/features/settings/components/settings-header.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
return (
<Flex ref={ref}>
<PageHeader>
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<Flex align="center" justify="space-between" w="100%">
<Group wrap="nowrap">
<Icon icon="settings" size="5xl" />
src/renderer/features/shared/components/library-header-bar.tsx
+11 -3
View File
@@ -1,5 +1,5 @@
import { closeAllModals, openModal } from '@mantine/modals';
import { memo, ReactNode, useCallback } from 'react';
import { CSSProperties, memo, ReactNode, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './library-header-bar.module.css';
@@ -16,10 +16,18 @@ import { Play } from '/@/shared/types/types';
interface LibraryHeaderBarProps {
children: ReactNode;
ignoreMaxWidth?: boolean;
}
const LibraryHeaderBarComponent = ({ children }: LibraryHeaderBarProps) => {
return <div className={styles.headerContainer}>{children}</div>;
const LibraryHeaderBarComponent = ({ children, ignoreMaxWidth }: LibraryHeaderBarProps) => {
return (
<div
className={styles.headerContainer}
style={ignoreMaxWidth ? ({ maxWidth: 'none' } as CSSProperties) : undefined}
>
{children}
</div>
);
};
interface HeaderPlayButtonProps {
src/renderer/features/songs/components/song-list-header.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
<Stack gap={0}>
<PageHeader>
<Flex justify="space-between" w="100%">
<LibraryHeaderBar>
<LibraryHeaderBar ignoreMaxWidth>
<PlayButton />
<PageTitle title={title} />
<LibraryHeaderBar.Badge
src/renderer/features/songs/routes/song-list-route.tsx
+2 -5
View File
@@ -3,7 +3,6 @@ import { useParams } from 'react-router';
import { ListContext } from '/@/renderer/context/list-context';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
@@ -48,10 +47,8 @@ const SongListRoute = () => {
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<LibraryContainer>
<SongListHeader />
<SongListContent />
</LibraryContainer>
<SongListHeader />
<SongListContent />
</ListContext.Provider>
</AnimatedPage>
);