feat: ChannelDetail now initializes view mode from the channel's platfo…

- "src/frontend/src/pages/ChannelDetail.tsx"

GSD-Task: S04/T03
This commit is contained in:
jlightner 2026-04-04 10:03:53 +00:00
parent d8d876e9b8
commit f8916d2cc3

View file

@ -30,6 +30,7 @@ import { useChannel, useUpdateChannel, useDeleteChannel, useScanChannel, useCanc
import { useChannelContentPaginated, useContentTypeCounts, useDownloadContent, useToggleMonitored, useBulkMonitored, useCollectMonitored, useUpdateContentRating, type ChannelContentFilters } from '../api/hooks/useContent';
import { useChannelPlaylists, useRefreshPlaylists } from '../api/hooks/usePlaylists';
import { useFormatProfiles } from '../api/hooks/useFormatProfiles';
import { usePlatformSetting } from '../api/hooks/usePlatformSettings';
import { Table, type Column } from '../components/Table';
import { PlatformBadge } from '../components/PlatformBadge';
import { StatusBadge } from '../components/StatusBadge';
@ -82,6 +83,7 @@ export function ChannelDetail() {
const { data: formatProfiles } = useFormatProfiles();
const { data: playlistData } = useChannelPlaylists(channelId);
const { data: contentTypeCounts } = useContentTypeCounts(channelId);
const { data: platformSettings } = usePlatformSetting(channel?.platform ?? null);
// ── Content type tab (URL-driven) ──
const activeTab = searchParams.get('tab') ?? 'all';
@ -108,6 +110,7 @@ export function ChannelDetail() {
const [sortDirection, setSortDirection] = usePersistedState<'asc' | 'desc'>('tubearr-sort-dir', 'asc');
const [groupBy, setGroupBy] = usePersistedState<GroupByKey>('tubearr-group-by', 'none');
const [viewMode, setViewMode] = usePersistedState<'table' | 'card' | 'list'>('tubearr-content-view', 'table');
const viewModeOverriddenRef = useRef(false);
// Derive contentType filter from active tab
const contentTypeFilter = activeTab === 'all' ? '' : activeTab;
@ -176,6 +179,18 @@ export function ChannelDetail() {
return () => observer.disconnect();
}, []);
// Reset view-mode override when navigating to a different channel
useEffect(() => {
viewModeOverriddenRef.current = false;
}, [channelId]);
// Apply platform default view when settings load (only if user hasn't manually switched)
useEffect(() => {
if (!platformSettings?.defaultView || viewModeOverriddenRef.current) return;
const mapped = platformSettings.defaultView === 'poster' ? 'card' : platformSettings.defaultView;
setViewMode(mapped);
}, [platformSettings?.defaultView, setViewMode]);
// Sync local check interval from channel data
useEffect(() => {
if (channel?.checkInterval != null) {
@ -344,6 +359,7 @@ export function ChannelDetail() {
}, [groupBy]);
const handleSetViewMode = useCallback((mode: 'table' | 'card' | 'list') => {
viewModeOverriddenRef.current = true;
setViewMode(mode);
}, [setViewMode]);