quicknotes/frontend/src/routes/feeds/[id]/+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { entries, feeds } from '$lib/feeds';
	import CardList from '$lib/components/CardList.svelte';
	import type { Feed, FeedEntry, Note, ReadLaterItem } from '$lib/types';
	import { page } from '$app/stores';

	// Define the CardProps interface to match what CardList expects
	interface CardProps {
		title: string;
		description: string;
		timestamp: Date;
		actions?: Array<{
			icon?: string;
			label: string;
			href?: string;
			target?: string;
			onClick?: () => void;
		}>;
	}

	let feed: Feed | null = null;
	let isLoading = true;
	let isRefreshing = false;
	let showUnreadOnly = false;
	let error: string | null = null;

	onMount(async () => {
		await loadData();
	});

	async function loadData() {
		isLoading = true;
		error = null;
		try {
			const feedId = $page.params.id;

			// Load feed info
			const feedsList = await feeds.load();
			feed = feedsList.find((f) => f.id === feedId) || null;

			if (!feed) {
				error = 'Feed not found';
				return;
			}

			// Load entries for this feed
			await loadEntries();
		} catch (e) {
			error = e instanceof Error ? e.message : 'Failed to load feed';
		} finally {
			isLoading = false;
		}
	}

	async function loadEntries() {
		if (!feed) return;

		isLoading = true;
		try {
			await entries.loadEntries(feed.id, showUnreadOnly);
		} catch (e) {
			error = e instanceof Error ? e.message : 'Failed to load entries';
		} finally {
			isLoading = false;
		}
	}

	async function handleRefreshFeed() {
		if (!feed) return;

		isRefreshing = true;
		error = null;
		try {
			await feeds.refresh(feed.id);
			await loadEntries();
		} catch (e) {
			error = e instanceof Error ? e.message : 'Failed to refresh feed';
		} finally {
			isRefreshing = false;
		}
	}

	async function handleMarkAllAsRead() {
		if (!feed) return;

		error = null;
		try {
			await entries.markAllAsRead(feed.id);
			// Reload entries if showing unread only
			if (showUnreadOnly) {
				await loadEntries();
			}
		} catch (e) {
			error = e instanceof Error ? e.message : 'Failed to mark all entries as read';
		}
	}

	function toggleUnreadFilter() {
		showUnreadOnly = !showUnreadOnly;
		loadEntries();
	}

	// This function adapts any item type to the format expected by CardList
	function renderCard(item: Feed | Note | ReadLaterItem): CardProps {
		// We know we're only passing FeedEntry objects to this function in this component
		if ('feedId' in item) {
			const entry = item as FeedEntry;

			return {
				title: entry.title,
				description: entry.summary || 'No summary available',
				timestamp: entry.published,
				actions: [
					{
						icon: 'fas fa-book-reader',
						label: 'Read',
						href: `/feeds/entries/${entry.id}`
					},
					{
						icon: 'fas fa-external-link-alt',
						label: 'Original',
						href: entry.url,
						target: '_blank'
					},
					{
						icon: entry.readAt ? 'fas fa-check' : 'fas fa-bookmark',
						label: entry.readAt ? 'Read' : 'Mark Read',
						onClick: async () => {
							if (!entry.readAt) {
								try {
									await entries.markAsRead(entry.id);
									if (showUnreadOnly) {
										await loadEntries();
									}
								} catch (e) {
									error = e instanceof Error ? e.message : 'Failed to mark as read';
								}
							}
						}
					}
				]
			};
		}

		// For other item types (Feed, Note, ReadLaterItem) - this won't be used in this component
		// but is needed to satisfy the type requirements
		return {
			title: item.title,
			description: getDescription(item),
			timestamp: item.createdAt
		};
	}

	// Helper function to safely extract description from different item types
	function getDescription(item: Feed | Note | ReadLaterItem): string {
		if ('description' in item && item.description) {
			return item.description;
		} else if ('content' in item) {
			return item.content;
		}
		return 'No description available';
	}
</script>

<div class="container">
	<div class="level mt-4">
		<div class="level-left">
			<div class="level-item">
				<nav class="breadcrumb" aria-label="breadcrumbs">
					<ul>
						<li><a href="/feeds">Feeds</a></li>
						<li><a href="/feeds/list">Manage Feeds</a></li>
						<li class="is-active"><a href="#" aria-current="page">{feed?.title || 'Feed'}</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

	{#if error}
		<div class="notification is-danger">
			<p>{error}</p>
		</div>
	{/if}

	{#if feed}
		<div class="box">
			<div class="level">
				<div class="level-left">
					<div class="level-item">
						<h1 class="title">{feed.title}</h1>
					</div>
				</div>
				<div class="level-right">
					<div class="level-item">
						<a href={feed.siteUrl || feed.url} target="_blank" class="button is-small">
							<span class="icon">
								<i class="fas fa-external-link-alt"></i>
							</span>
							<span>Visit Site</span>
						</a>
					</div>
				</div>
			</div>

			{#if feed.description}
				<div class="content">
					<p>{feed.description}</p>
				</div>
			{/if}

			<div class="level">
				<div class="level-left">
					<div class="level-item">
						<button class="button" on:click={toggleUnreadFilter}>
							<span class="icon">
								<i class="fas fa-filter"></i>
							</span>
							<span>{showUnreadOnly ? 'Show All' : 'Show Unread Only'}</span>
						</button>
					</div>
					<div class="level-item">
						<button class="button is-primary" on:click={handleRefreshFeed} disabled={isRefreshing}>
							<span class="icon">
								<i class="fas fa-sync" class:fa-spin={isRefreshing}></i>
							</span>
							<span>Refresh Feed</span>
						</button>
					</div>
					<div class="level-item">
						<button class="button is-info" on:click={handleMarkAllAsRead} disabled={isLoading}>
							<span class="icon">
								<i class="fas fa-check-double"></i>
							</span>
							<span>Mark All as Read</span>
						</button>
					</div>
				</div>
				<div class="level-right">
					{#if feed.lastFetched}
						<div class="level-item">
							<span class="tag is-light">
								Last updated: {feed.lastFetched.toLocaleString()}
							</span>
						</div>
					{/if}
				</div>
			</div>
		</div>

		{#if isLoading && $entries.length === 0}
			<div class="has-text-centered py-6">
				<span class="icon is-large">
					<i class="fas fa-spinner fa-spin fa-2x"></i>
				</span>
			</div>
		{:else}
			<CardList
				items={$entries}
				{renderCard}
				emptyMessage={showUnreadOnly
					? 'No unread entries found. Try refreshing your feed or viewing all entries.'
					: 'No entries found. Try refreshing your feed.'}
			/>
		{/if}
	{:else if !isLoading}
		<div class="notification is-warning">
			<p>Feed not found.</p>
			<a href="/feeds" class="button is-light mt-4">Back to Feeds</a>
		</div>
	{/if}
</div>