fix: implement page-specific tab depth navigation

- Changed nextPane/prevPane to use current tab's pane count instead of global TabsCount
- Added Page-specific pane counts mapping for accurate depth calculation
- Pages with 1 pane (Feed, Player) now skip depth navigation
- Fixed wrapping logic to respect each page's layout structure

src/context/NavigationContext.tsx

@@ -1,6 +1,16 @@
 import { createEffect, createSignal, on } from "solid-js";
 import { createSimpleContext } from "./helper";
-import { TABS, TabsCount } from "@/utils/navigation";
+import { TABS, TabsCount, LayerDepths } from "@/utils/navigation";
+
+// Page-specific pane counts
+const PANE_COUNTS = {
+  [TABS.FEED]: 1,
+  [TABS.MYSHOWS]: 2,
+  [TABS.DISCOVER]: 2,
+  [TABS.SEARCH]: 3,
+  [TABS.PLAYER]: 1,
+  [TABS.SETTINGS]: 5,
+};
 
 export const { use: useNavigation, provider: NavigationProvider } =
   createSimpleContext({
@@ -17,7 +27,6 @@ export const { use: useNavigation, provider: NavigationProvider } =
         ),
       );
 
-      // unified navigation: left->right, top->bottom across all tabs
       const nextTab = () => {
         if (activeTab() >= TabsCount) {
           setActiveTab(1);
@@ -35,13 +44,17 @@ export const { use: useNavigation, provider: NavigationProvider } =
       };
 
       const nextPane = () => {
-        // move to next pane in same tab, wrap around
-        setActiveDepth((prev) => (prev % TabsCount) + 1);
+        // Move to next pane within the current tab's pane structure
+        const count = PANE_COUNTS[activeTab()];
+        if (count <= 1) return; // No panes to navigate (feed/player)
+        setActiveDepth((prev) => (prev % count) + 1);
       };
 
       const prevPane = () => {
-        // move to previous pane in same tab, wrap around
-        setActiveDepth((prev) => (prev - 2 + TabsCount) % TabsCount + 1);
+        // Move to previous pane within the current tab's pane structure
+        const count = PANE_COUNTS[activeTab()];
+        if (count <= 1) return; // No panes to navigate (feed/player)
+        setActiveDepth((prev) => (prev - 2 + count) % count + 1);
       };
 
       return {