add folder browsing support (#315)

src/shared/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,10 @@
+import {
+    Breadcrumbs as MantineBreadcrumbs,
+    BreadcrumbsProps as MantineBreadcrumbsProps,
+} from '@mantine/core';
+
+interface BreadcrumbProps extends MantineBreadcrumbsProps {}
+
+export const Breadcrumb = ({ children, ...props }: BreadcrumbProps) => {
+    return <MantineBreadcrumbs {...props}>{children}</MantineBreadcrumbs>;
+};

src/shared/components/context-menu/context-menu-preview.tsx

@@ -67,6 +67,7 @@ export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewP
                                 <Icon icon="playlist" size="md" />
                             )}
                             {itemType === LibraryItem.GENRE && <Icon icon="genre" size="md" />}
+                            {itemType === LibraryItem.FOLDER && <Icon icon="folder" size="md" />}
                             {!itemType && <Icon icon="library" size="md" />}
                         </div>
                     )}

src/shared/components/tooltip/tooltip.tsx

@@ -1,4 +1,5 @@
 import { Tooltip as MantineTooltip, TooltipProps as MantineTooltipProps } from '@mantine/core';
+import clsx from 'clsx';
 
 import styles from './tooltip.module.css';
 
@@ -6,6 +7,7 @@ export interface TooltipProps extends MantineTooltipProps {}
 
 export const Tooltip = ({
     children,
+    classNames,
     openDelay = 500,
     transitionProps = {
         duration: 250,
@@ -18,7 +20,8 @@ export const Tooltip = ({
         <MantineTooltip
             arrowSize={10}
             classNames={{
-                tooltip: styles.tooltip,
+                ...classNames,
+                tooltip: clsx(styles.tooltip, classNames?.['tooltip']),
             }}
             multiline
             openDelay={openDelay}