cycle

src/pages/Discover/DiscoverPage.tsx

@@ -29,6 +29,7 @@ export function DiscoverPage() {
       (keyEvent: any) => {
         const isDown = keybind.match("down", keyEvent);
         const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
         const isSelect = keybind.match("select", keyEvent);
 
         if (isSelect) {
@@ -42,10 +43,12 @@ export function DiscoverPage() {
         const filteredPodcasts = discoverStore.filteredPodcasts();
         if (filteredPodcasts.length === 0) return;
 
-        if (isDown && showIndex() < filteredPodcasts.length - 1) {
+        if (isDown) {
-          setShowIndex(showIndex() + 1);
+          setShowIndex((i) => (i + 1) % filteredPodcasts.length);
-        } else if (isUp && showIndex() > 0) {
+        } else if (isUp) {
-          setShowIndex(showIndex() - 1);
+          setShowIndex((i) => (i - 1 + filteredPodcasts.length) % filteredPodcasts.length);
+        } else if (isCycle) {
+          setShowIndex((i) => (i + 1) % filteredPodcasts.length);
         }
       },
       { release: false },

src/pages/Feed/FeedPage.tsx

@@ -39,6 +39,7 @@ export function FeedPage() {
       (keyEvent: any) => {
         const isDown = keybind.match("down", keyEvent);
         const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
         const isSelect = keybind.match("select", keyEvent);
 
         if (isSelect) {
@@ -52,10 +53,12 @@ export function FeedPage() {
         const episodes = allEpisodes();
         if (episodes.length === 0) return;
 
-        if (isDown && focusedIndex() < episodes.length - 1) {
+        if (isDown) {
-          setFocusedIndex(focusedIndex() + 1);
+          setFocusedIndex((i) => (i + 1) % episodes.length);
-        } else if (isUp && focusedIndex() > 0) {
+        } else if (isUp) {
-          setFocusedIndex(focusedIndex() - 1);
+          setFocusedIndex((i) => (i - 1 + episodes.length) % episodes.length);
+        } else if (isCycle) {
+          setFocusedIndex((i) => (i + 1) % episodes.length);
         }
       },
       { release: false },

src/pages/MyShows/MyShowsPage.tsx

@@ -40,6 +40,7 @@ export function MyShowsPage() {
       (keyEvent: any) => {
         const isDown = keybind.match("down", keyEvent);
         const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
         const isSelect = keybind.match("select", keyEvent);
 
         const shows = feedStore.getFilteredFeeds();
@@ -57,18 +58,22 @@ export function MyShowsPage() {
         }
 
         if (shows.length > 0) {
-          if (isDown && showIndex() < shows.length - 1) {
+          if (isDown) {
-            setShowIndex(showIndex() + 1);
+            setShowIndex((i) => (i + 1) % shows.length);
-          } else if (isUp && showIndex() > 0) {
+          } else if (isUp) {
-            setShowIndex(showIndex() - 1);
+            setShowIndex((i) => (i - 1 + shows.length) % shows.length);
+          } else if (isCycle) {
+            setShowIndex((i) => (i + 1) % shows.length);
           }
         }
 
         if (episodesList.length > 0) {
-          if (isDown && episodeIndex() < episodesList.length - 1) {
+          if (isDown) {
-            setEpisodeIndex(episodeIndex() + 1);
+            setEpisodeIndex((i) => (i + 1) % episodesList.length);
-          } else if (isUp && episodeIndex() > 0) {
+          } else if (isUp) {
-            setEpisodeIndex(episodeIndex() - 1);
+            setEpisodeIndex((i) => (i - 1 + episodesList.length) % episodesList.length);
+          } else if (isCycle) {
+            setEpisodeIndex((i) => (i + 1) % episodesList.length);
           }
         }
       },

src/pages/Search/SearchPage.tsx

@@ -34,6 +34,7 @@ export function SearchPage() {
       (keyEvent: any) => {
         const isDown = keybind.match("down", keyEvent);
         const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
         const isSelect = keybind.match("select", keyEvent);
 
         if (isSelect) {
@@ -47,10 +48,12 @@ export function SearchPage() {
         const results = searchStore.results();
         if (results.length === 0) return;
 
-        if (isDown && resultIndex() < results.length - 1) {
+        if (isDown) {
-          setResultIndex(resultIndex() + 1);
+          setResultIndex((i) => (i + 1) % results.length);
-        } else if (isUp && resultIndex() > 0) {
+        } else if (isUp) {
-          setResultIndex(resultIndex() - 1);
+          setResultIndex((i) => (i - 1 + results.length) % results.length);
+        } else if (isCycle) {
+          setResultIndex((i) => (i + 1) % results.length);
         }
       },
       { release: false },

src/pages/Settings/SettingsPage.tsx

@@ -35,11 +35,15 @@ export function SettingsPage() {
     return nav.activeDepth() === depth;
   };
 
+  // Helper function to get the current depth as a number
+  const currentDepth = () => nav.activeDepth() as number;
+
   onMount(() => {
     useKeyboard(
       (keyEvent: any) => {
         const isDown = keybind.match("down", keyEvent);
         const isUp = keybind.match("up", keyEvent);
+        const isCycle = keybind.match("cycle", keyEvent);
         const isSelect = keybind.match("select", keyEvent);
 
         if (isSelect) {
@@ -51,7 +55,11 @@ export function SettingsPage() {
           ? (nav.activeDepth() % SettingsPaneCount) + 1
           : (nav.activeDepth() - 2 + SettingsPaneCount) % SettingsPaneCount + 1;
 
+        if (isCycle) {
+          nav.setActiveDepth((nav.activeDepth() % SettingsPaneCount) + 1);
+        } else {
           nav.setActiveDepth(nextDepth);
+        }
       },
       { release: false },
     );
@@ -67,13 +75,13 @@ export function SettingsPage() {
               borderColor={theme.border}
               padding={0}
               backgroundColor={
-                nav.activeDepth === section.id ? theme.primary : undefined
+                currentDepth() === section.id ? theme.primary : undefined
               }
               onMouseDown={() => nav.setActiveDepth(section.id)}
             >
               <text
                 fg={
-                  nav.activeDepth === section.id ? theme.text : theme.textMuted
+                  currentDepth() === section.id ? theme.text : theme.textMuted
                 }
               >
                 [{index() + 1}] {section.label}