diff --git a/README.md b/README.md
index 151192b..aee7f89 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,7 @@ sudo pm2 start server.cjs
### TODO
- Mobile improvements
-- New Carosel on weather description
+- New Carousel on weather description
- Updates to weather modal
- Add mantine-led for monitoring status (https://gfazioli.github.io/mantine-led)
- Explore https://gfazioli.github.io/mantine-scene/
diff --git a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
index 62f97fe..5f27476 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
@@ -28,6 +28,7 @@ export function ThemePlaylistStack({
const { setThemeName, setCurrentThemePlaylist, handleDelete, currentUser } =
useCommonHooks();
const [indexOffset, setIndexOffset] = useState(0);
+ const [movingIndex, setMovingIndex] = useState(0);
const missingTheme = {
id: undefined,
name: 'default',
@@ -95,7 +96,7 @@ export function ThemePlaylistStack({
zIndex: themeList.length - spot,
}}
>
-
+
@@ -110,17 +111,20 @@ export function ThemePlaylistStack({
) || missingTheme,
);
} else if (indexOffset > 0 && indexOffset < themeList.length) {
+ setMovingIndex(themeList.length - indexOffset);
setTopTheme(
allThemes.find(
(theme: Theme) => theme.id === themeList[themeList.length - indexOffset],
) || missingTheme,
);
} else if (indexOffset < 0 && Math.abs(indexOffset) < themeList.length) {
+ setMovingIndex(Math.abs(indexOffset));
setTopTheme(
allThemes.find((theme: Theme) => theme.id === themeList[Math.abs(indexOffset)]) ||
missingTheme,
);
} else if (indexOffset === 0) {
+ setMovingIndex(0);
setTopTheme(
allThemes.find((theme: Theme) => theme.id === themeList[0]) || missingTheme,
);
@@ -239,7 +243,7 @@ export function ThemePlaylistStack({
>
) : (
- items
+ items.slice(movingIndex, movingIndex + 8)
)}
@@ -251,17 +255,34 @@ export function ThemePlaylistStack({
bottom={0}
style={{ zIndex: 1000 }}
>
-
- {cardPlaylist.name}
-
+
+
+ {cardPlaylist.name}
+
+ {themeList.length > 0 && (
+
+ {themeList.length}
+
+ )}
+
{!defaultLists.includes(cardPlaylist.name) && (