[feature-107] can now list maps of playlist + lot of other things

src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-panel.component.tsx

@@ -18,11 +18,11 @@ export function BsContentTabPanel({className, tabIndex, tabs, onTabChange, child
         <div className={className ?? "w-full h-full flex flex-row bg-light-main-color-1 dark:bg-main-color-1 rounded-md shadow-black shadow-md overflow-hidden"}>
             <nav className="h-full grid grid-flow-row !rounded-none shadow-sm flex-shrink-0">
                 {tabs.map((tab, i) => (
-                    <BsContentTabItem 
-                        key={`${tab.text}${tab.icon}`} 
+                    <BsContentTabItem
+                        key={`${tab.text}${tab.icon}`}
                         {...tab}
-                        active={tab.active ?? tabIndex === i} 
-                        onClick={value => {onTabChange(i, tab); tab.onClick(value);}} 
+                        active={tab.active ?? tabIndex === i}
+                        onClick={value => {onTabChange(i, tab); tab.onClick(value);}}
                     />
                 ))}
             </nav>

src/renderer/components/shared/theme-color-gradient-spliter.component.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+
+export function ThemeColorGradientSpliter(props: ComponentProps<"div">) {
+
+    const colors = useThemeColor();
+
+    return (
+        <div {...props} style={{ backgroundImage: `linear-gradient(to right, ${colors.firstColor}, ${colors.secondColor})`}}/>
+    )
+}