navigation controls + starting indicators

src/App.tsx

@@ -28,7 +28,15 @@ export function App() {
   const audio = useAudio();
   const toast = useToast();
   const renderer = useRenderer();
-  const { theme } = useTheme();
+  const themeContext = useTheme();
+  const theme = themeContext.theme;
+
+  // Create a reactive expression for background color
+  const backgroundColor = () => {
+    return themeContext.selected === "system"
+      ? "transparent"
+      : themeContext.theme.surface;
+  };
   const keybind = useKeybinds();
   const audioNav = useAudioNavStore();
 
@@ -62,11 +70,11 @@ export function App() {
 
   useKeyboard(
     (keyEvent) => {
+      const isCycle = keybind.match("cycle", keyEvent);
       const isUp = keybind.match("up", keyEvent);
       const isDown = keybind.match("down", keyEvent);
       const isLeft = keybind.match("left", keyEvent);
       const isRight = keybind.match("right", keyEvent);
-      const isCycle = keybind.match("cycle", keyEvent);
       const isDive = keybind.match("dive", keyEvent);
       const isOut = keybind.match("out", keyEvent);
       const isToggle = keybind.match("audio-toggle", keyEvent);
@@ -75,27 +83,31 @@ export function App() {
       const isSeekForward = keybind.match("audio-seek-forward", keyEvent);
       const isSeekBackward = keybind.match("audio-seek-backward", keyEvent);
       const isQuit = keybind.match("quit", keyEvent);
-      console.log({
+      const isInverting = keybind.isInverting(keyEvent);
-        up: isUp,
-        down: isDown,
-        left: isLeft,
-        right: isRight,
-        cycle: isCycle,
-        dive: isDive,
-        out: isOut,
-        audioToggle: isToggle,
-        audioNext: isNext,
-        audioPrev: isPrev,
-        audioSeekForward: isSeekForward,
-        audioSeekBackward: isSeekBackward,
-        quit: isQuit,
-      });
 
       // 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 (isCycle) {
+        if (
+          (isCycle && !isInverting) ||
+          (isDown && !isInverting) ||
+          (isUp && isInverting)
+        ) {
           nav.nextTab();
+          return;
         }
+        if (
+          (isCycle && isInverting) ||
+          (isDown && isInverting) ||
+          (isUp && !isInverting)
+        ) {
+          nav.prevTab();
+          return;
+        }
+        if ((isRight && !isInverting) || (isLeft && isInverting)) {
+          nav.setActiveDepth(1);
+        }
+      }
+      if (nav.activeDepth == 1) {
       }
     },
     { release: false },
@@ -117,7 +129,11 @@ export function App() {
         flexDirection="column"
         width="100%"
         height="100%"
-        backgroundColor={theme.surface}
+        backgroundColor={
+          themeContext.selected === "system"
+            ? "transparent"
+            : themeContext.theme.surface
+        }
       >
         <LoadingIndicator />
         {DEBUG && (
@@ -149,10 +165,7 @@ export function App() {
           </box>
         )}
         <box flexDirection="row" width="100%" height="100%">
-          <TabNavigation
+          <TabNavigation />
-            activeTab={nav.activeTab}
-            onTabSelect={nav.setActiveTab}
-          />
           {LayerGraph[nav.activeTab]()}
         </box>
       </box>

src/components/TabNavigation.tsx

@@ -1,12 +1,8 @@
 import { useTheme } from "@/context/ThemeContext";
-import { TABS } from "@/utils/navigation";
+import { TABS, TabsCount } from "@/utils/navigation";
 import { For } from "solid-js";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
-
+import { useNavigation } from "@/context/NavigationContext";
-interface TabNavigationProps {
-  activeTab: TABS;
-  onTabSelect: (tab: TABS) => void;
-}
 
 export const tabs: TabDefinition[] = [
   { id: TABS.FEED, label: "Feed" },
@@ -17,26 +13,30 @@ export const tabs: TabDefinition[] = [
   { id: TABS.SETTINGS, label: "Settings" },
 ];
 
-export function TabNavigation(props: TabNavigationProps) {
+export function TabNavigation() {
   const { theme } = useTheme();
+  const { activeTab, setActiveTab, activeDepth } = useNavigation();
   return (
     <box
-      backgroundColor={theme.surface}
+      border
+      borderColor={activeDepth !== 0 ? "transparent" : theme.accent}
+      backgroundColor={"transparent"}
       style={{
         flexDirection: "column",
-        width: 10,
+        width: 12,
-        flexGrow: 1,
+        height: TabsCount * 3 + 2,
       }}
     >
       <For each={tabs}>
         {(tab) => (
           <SelectableBox
             border
-             selected={() => tab.id == props.activeTab}
+            height={3}
-             onMouseDown={() => props.onTabSelect(tab.id)}
+            selected={() => tab.id == activeTab}
+            onMouseDown={() => setActiveTab(tab.id)}
           >
             <SelectableText
-               selected={() => tab.id == props.activeTab}
+              selected={() => tab.id == activeTab}
               primary
               alignSelf="center"
             >

src/config/keybind.jsonc

@@ -6,7 +6,7 @@
   "cycle": ["tab"], // this will cycle no matter the depth/orientation
   "dive": ["return"],
   "out": ["esc"],
-  "inverse": ["shift"],
+  "inverseModifier": ["shift"],
   "leader": ":", // will not trigger while focused on input
   "quit": ["<leader>q"],
   "refresh": ["<leader>r"],

src/context/KeybindContext.tsx

@@ -15,7 +15,7 @@ export type KeybindsResolved = {
   cycle: string[]; // this will cycle no matter the depth/orientation
   dive: string[];
   out: string[];
-  inverse: string[];
+  inverseModifier: string;
   leader: string; // will not trigger while focused on input
   quit: string[];
   "audio-toggle": string[];
@@ -57,7 +57,7 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         cycle: [],
         dive: [],
         out: [],
-        inverse: [],
+        inverseModifier: "",
         leader: "",
         quit: [],
         refresh: [],
@@ -100,6 +100,18 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         return false;
       }
 
+      function isInverting(evt: {
+        name: string;
+        ctrl?: boolean;
+        meta?: boolean;
+        shift?: boolean;
+      }) {
+        if (store.inverseModifier === "ctrl" && evt.ctrl) return true;
+        if (store.inverseModifier === "meta" && evt.meta) return true;
+        if (store.inverseModifier === "shift" && evt.shift) return true;
+        return false;
+      }
+
       // Load on mount
       onMount(() => {
         load().catch(() => {});
@@ -115,6 +127,7 @@ export const { use: useKeybinds, provider: KeybindProvider } =
         save,
         print,
         match,
+        isInverting,
       };
     },
   });

src/pages/Feed/FeedPage.tsx

@@ -12,6 +12,7 @@ import { useTheme } from "@/context/ThemeContext";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
 import { useNavigation } from "@/context/NavigationContext";
 import { LoadingIndicator } from "@/components/LoadingIndicator";
+import { TABS } from "@/utils/navigation";
 
 enum FeedPaneType {
   FEED = 1,
@@ -23,27 +24,21 @@ const ITEMS_PER_BATCH = 50;
 
 export function FeedPage() {
   const feedStore = useFeedStore();
-  const [isRefreshing, setIsRefreshing] = createSignal(false);
-  const [loadedEpisodesCount, setLoadedEpisodesCount] =
-    createSignal(ITEMS_PER_BATCH);
   const nav = useNavigation();
-
+  const { theme } = useTheme();
+  const [selectedEpisodeID, setSelectedEpisodeID] = createSignal<
+    string | undefined
+  >();
   const allEpisodes = () => feedStore.getAllEpisodesChronological();
 
-  const paginatedEpisodes = () => {
-    const episodes = allEpisodes();
-    return episodes.slice(0, loadedEpisodesCount());
-  };
-
   const formatDate = (date: Date): string => {
     return format(date, "MMM d, yyyy");
   };
 
   const groupEpisodesByDate = () => {
     const groups: Record<string, Array<{ episode: Episode; feed: Feed }>> = {};
-    const episodes = paginatedEpisodes();
 
-    for (const item of episodes) {
+    for (const item of allEpisodes()) {
       const dateKey = formatDate(new Date(item.episode.pubDate));
       if (!groups[dateKey]) {
         groups[dateKey] = [];
@@ -51,8 +46,7 @@ export function FeedPage() {
       groups[dateKey].push(item);
     }
 
-    return Object.entries(groups)
+    return Object.entries(groups).sort(([a, _aItems], [b, _bItems]) => {
-      .sort(([a, _aItems], [b, _bItems]) => {
       // Convert date strings back to Date objects for proper chronological sorting
       const dateA = new Date(a);
       const dateB = new Date(b);
@@ -68,7 +62,6 @@ export function FeedPage() {
     return `${mins}m`;
   };
 
-  const { theme } = useTheme();
   return (
     <box
       backgroundColor={theme.background}
@@ -76,11 +69,6 @@ export function FeedPage() {
       height="100%"
       width="100%"
     >
-      {/* Status line */}
-      <Show when={isRefreshing()}>
-        <text fg={theme.warning}>Refreshing feeds...</text>
-      </Show>
-
       <Show
         when={allEpisodes().length > 0}
         fallback={
@@ -99,9 +87,21 @@ export function FeedPage() {
                   {date}
                 </SelectableText>
                 <For each={items}>
-                  {(item) => (
+                  {(item) => {
+                    const isSelected = () => {
+                      if (
+                        nav.activeTab == TABS.FEED &&
+                        nav.activeDepth == FeedPaneType.FEED &&
+                        selectedEpisodeID() &&
+                        selectedEpisodeID() === item.episode.id
+                      ) {
+                        return true;
+                      }
+                      return false;
+                    };
+                    return (
                       <SelectableBox
-                      selected={() => false}
+                        selected={isSelected}
                         flexDirection="column"
                         gap={0}
                         paddingLeft={1}
@@ -112,29 +112,24 @@ export function FeedPage() {
                           // Selection is handled by App's keyboard navigation
                         }}
                       >
-                      <SelectableText selected={() => false} primary>
+                        <SelectableText selected={isSelected} primary>
                           {item.episode.title}
                         </SelectableText>
                         <box flexDirection="row" gap={2} paddingLeft={2}>
-                        <SelectableText selected={() => false} primary>
+                          <SelectableText selected={isSelected} primary>
                             {item.feed.podcast.title}
                           </SelectableText>
-                        <SelectableText selected={() => false} tertiary>
+                          <SelectableText selected={isSelected} tertiary>
                             {formatDuration(item.episode.duration)}
                           </SelectableText>
                         </box>
                       </SelectableBox>
-                  )}
+                    );
+                  }}
                 </For>
               </box>
             )}
           </For>
-          {/* Loading indicator */}
-          <Show when={feedStore.isLoadingMore()}>
-            <box padding={1}>
-              <LoadingIndicator />
-            </box>
-          </Show>
         </scrollbox>
       </Show>
     </box>

src/utils/keybinds-persistence.ts

@@ -28,7 +28,7 @@ const DEFAULT_KEYBINDS: KeybindsResolved = {
   cycle: ["tab"],
   dive: ["return"],
   out: ["esc"],
-  inverse: ["shift"],
+  inverseModifier: "shift",
   leader: ":",
   quit: ["<leader>q"],
   "audio-toggle": ["<leader>p"],