fix song list filters

src/renderer/features/shared/components/component-error-boundary.tsx

@@ -17,10 +17,6 @@ interface ComponentErrorFallbackProps {
 const ComponentErrorFallback = ({ resetErrorBoundary }: ComponentErrorFallbackProps) => {
     const { t } = useTranslation();
 
-    const handleRefresh = () => {
-        window.location.reload();
-    };
-
     return (
         <Box h="100%" pos="relative" w="100%">
             <Center h="100%" p="md" w="100%">
@@ -35,9 +31,6 @@ const ComponentErrorFallback = ({ resetErrorBoundary }: ComponentErrorFallbackPr
                         <Button onClick={resetErrorBoundary} size="xs" variant="default">
                             {t('common.reload', { postProcess: 'sentenceCase' })}
                         </Button>
-                        <Button onClick={handleRefresh} size="xs" variant="filled">
-                            {t('common.refresh', { postProcess: 'sentenceCase' })}
-                        </Button>
                     </Group>
                 </Stack>
             </Center>

src/renderer/features/shared/components/list-filters.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
 import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
 import { SubsonicAlbumFilters } from '/@/renderer/features/albums/components/subsonic-album-filters';
+import { ComponentErrorBoundary } from '/@/renderer/features/shared/components/component-error-boundary';
 import { FilterButton } from '/@/renderer/features/shared/components/filter-button';
 import { JellyfinSongFilters } from '/@/renderer/features/songs/components/jellyfin-song-filters';
 import { NavidromeSongFilters } from '/@/renderer/features/songs/components/navidrome-song-filters';
@@ -46,7 +47,11 @@ export const ListFilters = ({ itemType }: ListFiltersProps) => {
     const serverType = server.type;
     const FilterComponent = FILTERS[serverType][itemType];
 
-    return <FilterComponent />;
+    return (
+        <ComponentErrorBoundary>
+            <FilterComponent />
+        </ComponentErrorBoundary>
+    );
 };
 
 const FILTERS = {

src/renderer/features/shared/components/list-with-sidebar-container.module.css

@@ -3,6 +3,7 @@
     display: flex;
     flex-direction: row;
     width: 100%;
+    min-width: 0;
     height: 100%;
     container-type: inline-size;
     overflow: hidden;
@@ -10,6 +11,7 @@
 
 .sidebar-container {
     position: relative;
+    display: none;
     flex-shrink: 0;
     width: 300px;
     min-width: 300px;
@@ -19,6 +21,12 @@
     border-right: 1px solid var(--theme-colors-border);
 }
 
+@container (min-width: $mantine-breakpoint-lg) {
+    .sidebar-container {
+        display: block;
+    }
+}
+
 .content-container {
     position: relative;
     display: flex;

src/renderer/features/shared/components/list-with-sidebar-container.tsx

@@ -3,12 +3,10 @@ import { createContext, ReactNode, useContext, useMemo, useRef } from 'react';
 
 import styles from './list-with-sidebar-container.module.css';
 
-import { useContainerQuery } from '/@/renderer/hooks';
 import { animationProps } from '/@/shared/components/animations/animation-props';
 import { Portal } from '/@/shared/components/portal/portal';
 
 interface ListWithSidebarContainerContextValue {
-    showSidebar: boolean;
     sidebarRef: React.RefObject<HTMLDivElement | null>;
 }
 
@@ -33,10 +31,10 @@ function Sidebar({ children }: SidebarProps) {
     const context = useContext(ListWithSidebarContainerContext);
 
     if (!context) {
-        throw new Error('Sidebar must be used within ResponsiveAnimatedPage');
+        throw new Error('Sidebar must be used within ListWithSidebarContainer');
     }
 
-    if (!context.showSidebar || !context.sidebarRef?.current) {
+    if (!context.sidebarRef?.current) {
         return null;
     }
 
@@ -53,10 +51,10 @@ function SidebarPortal({ children }: SidebarPortalProps) {
     const context = useContext(ListWithSidebarContainerContext);
 
     if (!context) {
-        throw new Error('SidebarPortal must be used within ResponsiveAnimatedPage');
+        throw new Error('SidebarPortal must be used within ListWithSidebarContainer');
     }
 
-    if (!context.showSidebar || !context.sidebarRef?.current) {
+    if (!context.sidebarRef?.current) {
         return null;
     }
 
@@ -65,31 +63,21 @@ function SidebarPortal({ children }: SidebarPortalProps) {
 
 export const ListWithSidebarContainer = ({
     children,
-    sidebarBreakpoint,
+    sidebarBreakpoint = 1200,
 }: ListWithSidebarContainerProps) => {
     const sidebarRef = useRef<HTMLDivElement>(null);
-    const { isLg, ref: containerQueryRef } = useContainerQuery({
-        lg: sidebarBreakpoint,
-    });
-
-    const showSidebar = isLg;
 
     const contextValue = useMemo(
         () => ({
-            showSidebar,
             sidebarRef,
         }),
-        [showSidebar],
+        [],
     );
 
     return (
         <ListWithSidebarContainerContext.Provider value={contextValue}>
-            <div className={styles.container} ref={containerQueryRef}>
-                <div
-                    className={styles.sidebarContainer}
-                    ref={sidebarRef}
-                    style={{ display: showSidebar ? 'block' : 'none' }}
-                />
+            <div className={styles.container} data-sidebar-breakpoint={sidebarBreakpoint}>
+                <div className={styles.sidebarContainer} ref={sidebarRef} />
                 <div className={styles.contentContainer}>{children}</div>
             </div>
         </ListWithSidebarContainerContext.Provider>