⚡ Adds basic fetch

- 🐛 cors
- 🐛 `.env.js`/`ENV`

src/app-episodes/index.css.ts

@@ -6,4 +6,15 @@ export const styles = css`
 		align-items: center;
 		justify-content: flex-start;
 	}
+
+	.episode-list {
+		padding: 0;
+		margin: 0;
+		width: 100%;
+		max-width: 600px;
+	}
+
+	.error {
+		color: red;
+	}
 `;

src/app-episodes/index.ts

@@ -1,14 +1,54 @@
 import { LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, state, property } from "lit/decorators.js";
 import { styles } from "./index.css.js";
+import { getEpisodes, type Episode } from "../api/episodes.js";
+import "../components/c-episode-list-card/index.js";
 
 @customElement("app-episodes")
 export class AppEpisodes extends LitElement {
 	static override styles = styles;
+
+	@property({ type: String }) feedId: string = "all";
+	@state() private episodes: Episode[] = [];
+	@state() private loading = true;
+	@state() private error: string | null = null;
+
+	override async firstUpdated() {
+		await this.fetchEpisodes();
+	}
+
+	private async fetchEpisodes() {
+		this.loading = true;
+		this.error = null;
+		try {
+			this.episodes = await getEpisodes(this.feedId);
+		} catch (e) {
+			this.error = e instanceof Error ? e.message : "An unknown error occurred";
+		} finally {
+			this.loading = false;
+		}
+	}
+
 	override render() {
+		if (this.loading) {
+			return html`<p>Loading episodes...</p>`;
+		}
+
+		if (this.error) {
+			return html`<p class="error">Error: ${this.error}</p>`;
+		}
+
+		if (this.episodes.length === 0) {
+			return html`<p>No episodes found.</p>`;
+		}
+
 		return html`
-			<div class="logo"></div>
-			<a href="/episodes/1">Episode 1</a>
+			<div class="logo">
+				<h1>Episodes</h1>
+			</div>
+			<ul class="episode-list">
+				${this.episodes.map((episode) => html`<c-episode-list-card .episode=${episode}></c-episode-list-card>`)}
+			</ul>
 		`;
 	}
 }