Mike/PodTui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redoing navigation logic to favor more local

Browse Source
This commit is contained in:
Mike Freno
2026-02-19 15:59:50 -05:00
parent 8e0f90f449
commit 1c65c85d02
9 changed files with 230 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/Discover/DiscoverPage.tsx
View File

@@ -7,8 +7,8 @@ import { useKeyboard } from "@opentui/solid";
import { useDiscoverStore, DISCOVER_CATEGORIES } from "@/stores/discover";
import { useTheme } from "@/context/ThemeContext";
import { PodcastCard } from "./PodcastCard";
import { PageProps } from "@/App";
import { SelectableBox, SelectableText } from "@/components/Selectable";
import { useNavigation } from "@/context/NavigationContext";
enum DiscoverPagePaneType {
CATEGORIES = 1,
@@ -16,10 +16,11 @@ enum DiscoverPagePaneType {
}
export const DiscoverPaneCount = 2;
export function DiscoverPage(props: PageProps) {
export function DiscoverPage() {
const discoverStore = useDiscoverStore();
const [showIndex, setShowIndex] = createSignal(0);
const [categoryIndex, setCategoryIndex] = createSignal(0);
const nav = useNavigation();
const handleCategorySelect = (categoryId: string) => {
discoverStore.setSelectedCategory(categoryId);
@@ -48,35 +49,32 @@ export function DiscoverPage(props: PageProps) {
>
<text
fg={
props.depth() == DiscoverPagePaneType.CATEGORIES
nav.activeDepth == DiscoverPagePaneType.CATEGORIES
? theme.accent
: theme.text
}
>
Categories:
</text>
<box flexDirection="column" gap={1}>
<For each={discoverStore.categories}>
{(category) => {
const isSelected = () =>
discoverStore.selectedCategory() === category.id;
<box flexDirection="column" gap={1}>
<For each={discoverStore.categories}>
{(category) => {
const isSelected = () =>
discoverStore.selectedCategory() === category.id;
return (
<SelectableBox
selected={isSelected}
onMouseDown={() => handleCategorySelect(category.id)}
>
<SelectableText
selected={isSelected}
primary
>
{category.icon} {category.name}
</SelectableText>
</SelectableBox>
);
}}
</For>
</box>
return (
<SelectableBox
selected={isSelected}
onMouseDown={() => handleCategorySelect(category.id)}
>
<SelectableText selected={isSelected} primary>
{category.icon} {category.name}
</SelectableText>
</SelectableBox>
);
}}
</For>
</box>
</box>
<box
flexDirection="column"
@@ -85,10 +83,10 @@ export function DiscoverPage(props: PageProps) {
borderColor={theme.border}
>
<box padding={1}>
<SelectableText
selected={() => false}
primary={props.depth() == DiscoverPagePaneType.SHOWS}
>
<SelectableText
selected={() => false}
primary={nav.activeDepth == DiscoverPagePaneType.SHOWS}
>
Trending in{" "}
{DISCOVER_CATEGORIES.find(
(c) => c.id === discoverStore.selectedCategory(),
@@ -102,7 +100,9 @@ export function DiscoverPage(props: PageProps) {
{discoverStore.filteredPodcasts().length !== 0 ? (
<text fg={theme.warning}>Loading trending shows...</text>
) : (
<text fg={theme.textMuted}>No podcasts found in this category.</text>
<text fg={theme.textMuted}>
No podcasts found in this category.
</text>
)}
</box>
}
@@ -119,7 +119,7 @@ export function DiscoverPage(props: PageProps) {
podcast={podcast}
selected={
index() === showIndex() &&
props.depth() == DiscoverPagePaneType.SHOWS
nav.activeDepth == DiscoverPagePaneType.SHOWS
}
onSelect={() => handleShowSelect(index())}
onSubscribe={() => handleSubscribe(podcast)}