fix nav context

src/App.tsx

@@ -86,7 +86,7 @@ export function App() {
       const isInverting = keybind.isInverting(keyEvent);
 
       // only handling top navigation here, cycle through tabs, just to high priority(player) all else to be handled in each tab
-      if (nav.activeDepth == 0) {
+      if (nav.activeDepth() == 0) {
         if (
           (isCycle && !isInverting) ||
           (isDown && !isInverting) ||
@@ -103,11 +103,24 @@ export function App() {
           nav.prevTab();
           return;
         }
-        if ((isRight && !isInverting) || (isLeft && isInverting)) {
+        if (
+          (isDive && !isInverting) ||
+          (isOut && isInverting) ||
+          (isRight && !isInverting) ||
+          (isLeft && isInverting)
+        ) {
           nav.setActiveDepth(1);
         }
       }
-      if (nav.activeDepth == 1) {
+      if (nav.activeDepth() == 1) {
+        if (
+          (isDive && isInverting) ||
+          (isOut && !isInverting) ||
+          (isRight && isInverting) ||
+          (isLeft && !isInverting)
+        ) {
+          nav.setActiveDepth(0);
+        }
       }
     },
     { release: false },
@@ -166,7 +179,7 @@ export function App() {
         )}
         <box flexDirection="row" width="100%" height="100%">
           <TabNavigation />
-          {LayerGraph[nav.activeTab]()}
+          {LayerGraph[nav.activeTab()]()}
         </box>
       </box>
     </ErrorBoundary>

src/components/TabNavigation.tsx

@@ -19,7 +19,7 @@ export function TabNavigation() {
   return (
     <box
       border
-      borderColor={activeDepth !== 0 ? "transparent" : theme.accent}
+      borderColor={activeDepth() !== 0 ? theme.border : theme.accent}
       backgroundColor={"transparent"}
       style={{
         flexDirection: "column",
@@ -32,11 +32,11 @@ export function TabNavigation() {
           <SelectableBox
             border
             height={3}
-            selected={() => tab.id == activeTab}
+            selected={() => tab.id == activeTab()}
             onMouseDown={() => setActiveTab(tab.id)}
           >
             <SelectableText
-              selected={() => tab.id == activeTab}
+              selected={() => tab.id == activeTab()}
               primary
               alignSelf="center"
             >

src/context/NavigationContext.tsx

@@ -29,15 +29,9 @@ export const { use: useNavigation, provider: NavigationProvider } =
       };
 
       return {
-        get activeTab() {
-          return activeTab();
-        },
-        get activeDepth() {
-          return activeDepth();
-        },
-        get inputFocused() {
-          return inputFocused();
-        },
+        activeTab,
+        activeDepth,
+        inputFocused,
         setActiveTab,
         setActiveDepth,
         setInputFocused,

src/pages/Feed/FeedPage.tsx

@@ -19,7 +19,6 @@ enum FeedPaneType {
 }
 export const FeedPaneCount = 1;
 
-/** Episodes to load per batch */
 const ITEMS_PER_BATCH = 50;
 
 export function FeedPage() {
@@ -64,6 +63,10 @@ export function FeedPage() {
 
   return (
     <box
+      border
+      borderColor={
+        nav.activeDepth() !== FeedPaneType.FEED ? theme.border : theme.accent
+      }
       backgroundColor={theme.background}
       flexDirection="column"
       height="100%"
@@ -79,7 +82,10 @@ export function FeedPage() {
           </box>
         }
       >
-        <scrollbox height="100%" focused={nav.activeDepth == FeedPaneType.FEED}>
+        <scrollbox
+          height="100%"
+          focused={nav.activeDepth() == FeedPaneType.FEED}
+        >
           <For each={groupEpisodesByDate()}>
             {([date, items]) => (
               <box flexDirection="column" gap={1} padding={1}>
@@ -90,8 +96,8 @@ export function FeedPage() {
                   {(item) => {
                     const isSelected = () => {
                       if (
-                        nav.activeTab == TABS.FEED &&
-                        nav.activeDepth == FeedPaneType.FEED &&
+                        nav.activeTab() == TABS.FEED &&
+                        nav.activeDepth() == FeedPaneType.FEED &&
                         selectedEpisodeID() &&
                         selectedEpisodeID() === item.episode.id
                       ) {