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

more indication

Browse Source
This commit is contained in:
Michael Freno
2026-02-20 22:42:15 -05:00
parent 1a5efceebd
commit 1e6618211a
5 changed files with 168 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,13 +43,17 @@ export function DiscoverPage() {
<box <box
border border
padding={1} padding={1}
borderColor={theme.border} borderColor={
nav.activeDepth() != DiscoverPagePaneType.CATEGORIES
? theme.border
: theme.accent
}
flexDirection="column" flexDirection="column"
gap={1} gap={1}
> >
<text <text
fg={ fg={
nav.activeDepth == DiscoverPagePaneType.CATEGORIES nav.activeDepth() == DiscoverPagePaneType.CATEGORIES
? theme.accent ? theme.accent
: theme.text : theme.text
} }
@@ -80,12 +84,16 @@ export function DiscoverPage() {
flexDirection="column" flexDirection="column"
flexGrow={1} flexGrow={1}
border border
borderColor={theme.border} borderColor={
nav.activeDepth() == DiscoverPagePaneType.SHOWS
? theme.accent
: theme.border
}
> >
<box padding={1}> <box padding={1}>
<SelectableText <SelectableText
selected={() => false} selected={() => false}
primary={nav.activeDepth == DiscoverPagePaneType.SHOWS} primary={nav.activeDepth() == DiscoverPagePaneType.SHOWS}
> >
Trending in{" "} Trending in{" "}
{DISCOVER_CATEGORIES.find( {DISCOVER_CATEGORIES.find(
@@ -111,7 +119,9 @@ export function DiscoverPage() {
discoverStore.filteredPodcasts().length === 0 discoverStore.filteredPodcasts().length === 0
} }
> >
<scrollbox> <scrollbox
focused={nav.activeDepth() == DiscoverPagePaneType.SHOWS}
>
<box flexDirection="column"> <box flexDirection="column">
<For each={discoverStore.filteredPodcasts()}> <For each={discoverStore.filteredPodcasts()}>
{(podcast, index) => ( {(podcast, index) => (
@@ -119,7 +129,7 @@ export function DiscoverPage() {
podcast={podcast} podcast={podcast}
selected={ selected={
index() === showIndex() && index() === showIndex() &&
nav.activeDepth == DiscoverPagePaneType.SHOWS nav.activeDepth() == DiscoverPagePaneType.SHOWS
} }
onSelect={() => handleShowSelect(index())} onSelect={() => handleShowSelect(index())}
onSubscribe={() => handleSubscribe(podcast)} onSubscribe={() => handleSubscribe(podcast)}

16
src/pages/MyShows/MyShowsPage.tsx
View File

@@ -129,8 +129,14 @@ export function MyShowsPage() {
} }
> >
<scrollbox <scrollbox
border
height="100%" height="100%"
focused={nav.activeDepth == MyShowsPaneType.SHOWS} borderColor={
nav.activeDepth() == MyShowsPaneType.SHOWS
? theme.accent
: theme.border
}
focused={nav.activeDepth() == MyShowsPaneType.SHOWS}
> >
<For each={shows()}> <For each={shows()}>
{(feed, index) => ( {(feed, index) => (
@@ -188,8 +194,14 @@ export function MyShowsPage() {
} }
> >
<scrollbox <scrollbox
border
height="100%" height="100%"
focused={nav.activeDepth == MyShowsPaneType.EPISODES} borderColor={
nav.activeDepth() == MyShowsPaneType.EPISODES
? theme.accent
: theme.border
}
focused={nav.activeDepth() == MyShowsPaneType.EPISODES}
> >
<For each={episodes()}> <For each={episodes()}>
{(episode, index) => ( {(episode, index) => (

4
src/pages/Player/PlayerPage.tsx
View File

@@ -3,6 +3,7 @@ import { RealtimeWaveform } from "./RealtimeWaveform";
import { useAudio } from "@/hooks/useAudio"; import { useAudio } from "@/hooks/useAudio";
import { useAppStore } from "@/stores/app"; import { useAppStore } from "@/stores/app";
import { useTheme } from "@/context/ThemeContext"; import { useTheme } from "@/context/ThemeContext";
import { useNavigation } from "@/context/NavigationContext";
enum PlayerPaneType { enum PlayerPaneType {
PLAYER = 1, PLAYER = 1,
@@ -12,6 +13,7 @@ export const PlayerPaneCount = 1;
export function PlayerPage() { export function PlayerPage() {
const audio = useAudio(); const audio = useAudio();
const { theme } = useTheme(); const { theme } = useTheme();
const nav = useNavigation();
const progressPercent = () => { const progressPercent = () => {
const d = audio.duration(); const d = audio.duration();
@@ -41,7 +43,7 @@ export function PlayerPage() {
<box <box
border border
borderColor={theme.border} borderColor={nav.activeDepth() == PlayerPaneType.PLAYER ? theme.accent : theme.border}
padding={1} padding={1}
flexDirection="column" flexDirection="column"
gap={1} gap={1}

16
src/pages/Search/SearchPage.tsx
View File

@@ -69,7 +69,7 @@ export function SearchPage() {
setInputValue(value); setInputValue(value);
}} }}
placeholder="Enter podcast name, topic, or author..." placeholder="Enter podcast name, topic, or author..."
focused={nav.activeDepth === SearchPaneType.INPUT} focused={nav.activeDepth() === SearchPaneType.INPUT}
width={50} width={50}
/> />
<box <box
@@ -99,12 +99,16 @@ export function SearchPage() {
flexDirection="column" flexDirection="column"
flexGrow={1} flexGrow={1}
border border
borderColor={theme.border} borderColor={
nav.activeDepth() === SearchPaneType.RESULTS
? theme.accent
: theme.border
}
> >
<box padding={1}> <box padding={1}>
<text <text
fg={ fg={
nav.activeDepth === SearchPaneType.RESULTS nav.activeDepth() === SearchPaneType.RESULTS
? theme.primary ? theme.primary
: theme.muted : theme.muted
} }
@@ -127,7 +131,7 @@ export function SearchPage() {
<SearchResults <SearchResults
results={searchStore.results()} results={searchStore.results()}
selectedIndex={resultIndex()} selectedIndex={resultIndex()}
focused={nav.activeDepth === SearchPaneType.RESULTS} focused={nav.activeDepth() === SearchPaneType.RESULTS}
onSelect={handleResultSelect} onSelect={handleResultSelect}
onChange={setResultIndex} onChange={setResultIndex}
isSearching={searchStore.isSearching()} isSearching={searchStore.isSearching()}
@@ -142,7 +146,7 @@ export function SearchPage() {
<box paddingBottom={1}> <box paddingBottom={1}>
<text <text
fg={ fg={
nav.activeDepth === SearchPaneType.HISTORY nav.activeDepth() === SearchPaneType.HISTORY
? theme.primary ? theme.primary
: theme.muted : theme.muted
} }
@@ -153,7 +157,7 @@ export function SearchPage() {
<SearchHistory <SearchHistory
history={searchStore.history()} history={searchStore.history()}
selectedIndex={historyIndex()} selectedIndex={historyIndex()}
focused={nav.activeDepth === SearchPaneType.HISTORY} focused={nav.activeDepth() === SearchPaneType.HISTORY}
onSelect={handleHistorySelect} onSelect={handleHistorySelect}
onRemove={searchStore.removeFromHistory} onRemove={searchStore.removeFromHistory}
onClear={searchStore.clearHistory} onClear={searchStore.clearHistory}

17
src/pages/Settings/SettingsPage.tsx
View File

@@ -28,6 +28,11 @@ export function SettingsPage() {
const { theme } = useTheme(); const { theme } = useTheme();
const nav = useNavigation(); const nav = useNavigation();
// Helper function to check if a depth is active
const isActive = (depth: SettingsPaneType): boolean => {
return nav.activeDepth() === depth;
};
return ( return (
<box flexDirection="column" gap={1} height="100%" width="100%"> <box flexDirection="column" gap={1} height="100%" width="100%">
<box flexDirection="row" gap={1}> <box flexDirection="row" gap={1}>
@@ -56,23 +61,23 @@ export function SettingsPage() {
<box <box
border border
borderColor={theme.border} borderColor={isActive(SettingsPaneType.SYNC) || isActive(SettingsPaneType.SOURCES) || isActive(SettingsPaneType.PREFERENCES) || isActive(SettingsPaneType.VISUALIZER) || isActive(SettingsPaneType.ACCOUNT) ? theme.accent : theme.border}
flexGrow={1} flexGrow={1}
padding={1} padding={1}
flexDirection="column" flexDirection="column"
gap={1} gap={1}
> >
{nav.activeDepth === SettingsPaneType.SYNC && <SyncPanel />} {isActive(SettingsPaneType.SYNC) && <SyncPanel />}
{nav.activeDepth === SettingsPaneType.SOURCES && ( {isActive(SettingsPaneType.SOURCES) && (
<SourceManager focused /> <SourceManager focused />
)} )}
{nav.activeDepth === SettingsPaneType.PREFERENCES && ( {isActive(SettingsPaneType.PREFERENCES) && (
<PreferencesPanel /> <PreferencesPanel />
)} )}
{nav.activeDepth === SettingsPaneType.VISUALIZER && ( {isActive(SettingsPaneType.VISUALIZER) && (
<VisualizerSettings /> <VisualizerSettings />
)} )}
{nav.activeDepth === SettingsPaneType.ACCOUNT && ( {isActive(SettingsPaneType.ACCOUNT) && (
<box flexDirection="column" gap={1}> <box flexDirection="column" gap={1}>
<text fg={theme.textMuted}>Account</text> <text fg={theme.textMuted}>Account</text>
</box> </box>