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

style(tabpanel): convert tab indentation to 2 spaces

Browse Source
This commit is contained in:
Michael Freno
2026-08-10 20:57:16 -04:00
parent dc2b22eaa5
commit ebed49237c
1 changed files with 82 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/TabPanel.tsx
View File

@@ -24,101 +24,100 @@ import { TABS } from "@/utils/navigation";
import { NF_ICONS, supportsNerdFonts } from "@/utils/nerd-fonts"; import { NF_ICONS, supportsNerdFonts } from "@/utils/nerd-fonts";
const TAB_LABEL: Record<TABS, string> = { const TAB_LABEL: Record<TABS, string> = {
[TABS.FEED]: "Feed", [TABS.FEED]: "Feed",
[TABS.MYSHOWS]: "My Shows", [TABS.MYSHOWS]: "My Shows",
[TABS.DISCOVER]: "Discover", [TABS.DISCOVER]: "Discover",
[TABS.SEARCH]: "Search", [TABS.SEARCH]: "Search",
[TABS.PLAYER]: "Player", [TABS.PLAYER]: "Player",
[TABS.SETTINGS]: "Settings", [TABS.SETTINGS]: "Settings",
}; };
/** Nerd Font glyph per tab (rendered only when the terminal supports them). */ /** Nerd Font glyph per tab (rendered only when the terminal supports them). */
const TAB_ICON: Record<TABS, string> = { const TAB_ICON: Record<TABS, string> = {
[TABS.FEED]: NF_ICONS.feed, [TABS.FEED]: NF_ICONS.feed,
[TABS.MYSHOWS]: NF_ICONS.shows, [TABS.MYSHOWS]: NF_ICONS.shows,
[TABS.DISCOVER]: NF_ICONS.discover, [TABS.DISCOVER]: NF_ICONS.discover,
[TABS.SEARCH]: NF_ICONS.search, [TABS.SEARCH]: NF_ICONS.search,
[TABS.PLAYER]: NF_ICONS.player, [TABS.PLAYER]: NF_ICONS.player,
[TABS.SETTINGS]: NF_ICONS.settings, [TABS.SETTINGS]: NF_ICONS.settings,
}; };
/** Numeric TABS values, in declaration order (1..TabsCount). */ /** Numeric TABS values, in declaration order (1..TabsCount). */
const TAB_ORDER = Object.values(TABS).filter( const TAB_ORDER = Object.values(TABS).filter(
(v): v is TABS => typeof v === "number", (v): v is TABS => typeof v === "number",
) as TABS[]; ) as TABS[];
export function TabListPane(props: { muted?: boolean }) { export function TabListPane(props: { muted?: boolean }) {
// Static: detection never changes mid-session. // Static: detection never changes mid-session.
const nerd = supportsNerdFonts(); const nerd = supportsNerdFonts();
const { theme } = useTheme(); const { theme } = useTheme();
const nav = useNavigation(); const nav = useNavigation();
const marker = useSelectionMarker(); const marker = useSelectionMarker();
const cursor = () => nav.tabCursor(); const cursor = () => nav.tabCursor();
const activeTab = () => nav.activeTab(); const activeTab = () => nav.activeTab();
/** `active=true` when this pane is the CURRENT column (Shell root); /** `active=true` when this pane is the CURRENT column (Shell root);
* `false` when it is the muted UP/parent column (pages' parent pane). */ * `false` when it is the muted UP/parent column (pages' parent pane). */
const active = () => !props.muted; const active = () => !props.muted;
// Same focus-bg / focus-fg contract every other pane uses. // Same focus-bg / focus-fg contract every other pane uses.
const focusBg = (t: TABS) => const focusBg = (t: TABS) =>
t === cursor() && active() t === cursor() && active()
? theme.primary ? theme.primary
: t === cursor() : t === cursor()
? theme.border ? theme.border
: undefined; : undefined;
const focusFg = (t: TABS) => const focusFg = (t: TABS) =>
t === cursor() && active() t === cursor() && active()
? theme.surface ? theme.surface
: t === cursor() : t === cursor()
? theme.selectedListItemText ?? theme.text ? theme.selectedListItemText ?? theme.text
: theme.text; : theme.text;
return ( return (
<For each={TAB_ORDER}> <For each={TAB_ORDER}>
{(tab) => { {(tab) => {
const isCursor = () => cursor() === tab; const isCursor = () => cursor() === tab;
const isActive = () => activeTab() === tab; const isActive = () => activeTab() === tab;
// The active tab is only accented in the Up/parent position — when this // The active tab is only accented in the Up/parent position — when this
// pane is CURRENT, the cursor highlight is the only highlight. // pane is CURRENT, the cursor highlight is the only highlight.
const labelFg = () => const labelFg = () =>
isCursor() isCursor()
? focusFg(tab) ? focusFg(tab)
: isActive() && !active() : isActive() && !active()
? theme.accent ? theme.accent
: theme.text; : theme.text;
const ref = useScrollIntoView(isCursor); const ref = useScrollIntoView(isCursor);
return ( return (
<box <box
ref={ref} ref={ref}
width="100%" width="100%"
height={1} height={1}
flexDirection="row" flexDirection="row"
paddingRight={1} paddingRight={1}
backgroundColor={focusBg(tab)} backgroundColor={focusBg(tab)}
onMouseDown={() => { onMouseDown={() => {
// Click = hover + open, the yazi "open" of the row // Click = hover + open, the yazi "open" of the row
// (switches to the tab and enters its content), the same // (switches to the tab and enters its content), the same
// as l/Enter. Restores mouse support the tab-strip // as l/Enter. Restores mouse support the tab-strip
// refactor dropped. // refactor dropped.
nav.setTabCursor(tab); nav.setTabCursor(tab);
nav.activateTabCursor(); nav.activateTabCursor();
}} }}
> >
{/* ── selection marker (j/k cursor) ─────────────────────────── */} {/* ── selection marker (j/k cursor) ─────────────────────────── */}
<text fg={focusFg(tab)}>{isCursor() ? marker() : " "}</text> <text fg={focusFg(tab)}>{isCursor() ? marker() : " "}</text>
{nerd && ( {nerd && (
<text fg={focusFg(tab)} paddingRight={1}> <text fg={focusFg(tab)} paddingRight={1}>
{TAB_ICON[tab]} {TAB_ICON[tab]}
</text> </text>
)} )}
<text fg={isCursor() ? focusFg(tab) : theme.textMuted}>{tab}</text> <text fg={labelFg()} paddingLeft={1}>
<text fg={labelFg()} paddingLeft={1}> {TAB_LABEL[tab]}
{TAB_LABEL[tab]} </text>
</text> </box>
</box> );
); }}
}} </For>
</For> );
);
} }