Rename Window to Pane

src/components/AppWindow/AppWindow.svelte → src/components/Pane/Pane.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import Moveable from 'svelte-moveable';
-	import AppWindowHeader from './AppWindowHeader.svelte';
-	import AppWindowFooter from './AppWindowFooter.svelte';
+	import PaneHeader from './PaneHeader.svelte';
+	import PaneFooter from './PaneFooter.svelte';
 
 	export let title: string = '';
 	export let x: number;
 	export let y: number;
 
-	let winHeader: HTMLElement;
+	let paneHeader: HTMLElement;
+	let paneFooter: HTMLElement;
+	
 	let targetRef: HTMLElement | null = null;
 	let moveableRef = null;
 
@@ -25,6 +27,14 @@
 	const keepRatio = false;
 	const throttleResize = 1;
 	const renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'];
+
+	let contentHeight: string;
+
+	$: {
+		if (targetRef && paneHeader && paneFooter) {
+			contentHeight = `${window.innerHeight - paneHeader.offsetHeight - paneFooter.offsetHeight}px`;
+		}
+	}
 </script>
 
 <section
@@ -33,15 +43,20 @@
 	bind:this={targetRef}
 	style={`max-width: ${maxWidth};max-height: ${maxHeight};min-width: ${minWidth};min-height: ${minHeight}; left: ${x}px; top: ${y}px;`}
 >
-	<div bind:this={winHeader}>
-		<AppWindowHeader {title} />
+	<div bind:this={paneHeader}>
+		<PaneHeader {title} />
 	</div>
 
-	<div class="border-l-[16px] border-r-[16px] border-gray-500 p-4">
+	<div
+		class="overflow-auto border-l-[16px] border-r-[16px] border-gray-500 p-4"
+		style={`max-height: ${contentHeight};`}
+	>
 		<slot />
 	</div>
 
-	<AppWindowFooter />
+	<div bind:this={paneFooter}>
+		<PaneFooter />
+	</div>
 </section>
 
 <Moveable

src/components/Pane/PaneHeader.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import PaneButton from './PaneButton.svelte';
+
+	export let title: string = '';
+
+	function closePane() {
+		console.log('Close pane');
+	}
+
+	function minimizePane() {
+		console.log('Minimize pane');
+	}
+
+	function maximizePane() {
+		console.log('Maximize pane');
+	}
+</script>
+
+<header class="flex h-2 items-center justify-between border-b border-gray-400 bg-gray-300 p-2">
+	<PaneButton action={closePane} label="Close" />
+	<h2 class="text-left text-base font-normal">{title}</h2>
+	<div class="flex items-center justify-end space-x-2">
+		<PaneButton action={minimizePane} label="Minimize" />
+		<PaneButton action={maximizePane} label="Maximize" />
+	</div>
+</header>

src/lib/types.ts

@@ -1,8 +1,12 @@
-import type WinSignupNews from '../routes/sections/WinSignupNews.svelte';
-import type WinBlog from '../routes/sections/WinBlog.svelte';
+// src/lib/types.ts
+import type { Writable } from 'svelte/store';
+import type PaneSignupNews from '../routes/sections/PaneSignupNews.svelte';
+import type PaneBlog from '../routes/sections/PaneBlog.svelte';
 
-export type Window = {
-	component: typeof WinSignupNews | typeof WinBlog;
-	x: number;
-	y: number;
-};
+export type Pane = {
+	component: typeof PaneSignupNews | typeof PaneBlog;
+	x: Writable<number>;
+	y: Writable<number>;
+	width: Writable<number>;
+	height: Writable<number>;
+};

src/routes/+page.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import WinSignupNews from './sections/WinSignupNews.svelte';
-	import WinBlog from './sections/WinBlog.svelte';
+	import PaneSignupNews from './sections/PaneSignupNews.svelte';
+	import PaneBlog from './sections/PaneBlog.svelte';
 
-	let windows = [
+	let panes = [
 		{
-			component: WinSignupNews,
+			component: PaneSignupNews,
 			x: 0,
 			y: 0
 		},
 		{
-			component: WinBlog,
+			component: PaneBlog,
 			x: 0,
 			y: 0
-		}
-		// Add more windows here...
+		},
+		// Add more panes here...
 	];
 
 	onMount(() => {
-		windows = windows.map((win) => ({
-			...win,
+		panes = panes.map((pane) => ({
+			...pane,
 			x: Math.random() * window.innerWidth,
 			y: Math.random() * window.innerHeight
 		}));
@@ -32,7 +32,7 @@
 </svelte:head>
 
 <section>
-	{#each windows as { component: Window, x, y }}
-		<svelte:component this={Window} {x} {y} />
+	{#each panes as { component: Pane, x, y }}
+		<svelte:component this={Pane} {x} {y} />
 	{/each}
 </section>

src/routes/sections/WinBlog.svelte → src/routes/sections/PaneBlog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { blogPosts, fetchFeed } from '../../services/blogService';
-	import AppWindow from '../../components/AppWindow/AppWindow.svelte';
+	import Pane from '../../components/Pane/Pane.svelte';
 
 	export let x: number;
 	export let y: number;
@@ -12,7 +12,7 @@
 	});
 </script>
 
-<AppWindow title="Blog" {x} {y}>
+<Pane title="Blog" {x} {y}>
 	{#each $blogPosts as post} <!-- Subscribe to the blogPosts store -->
 		<article class="p-4 my-4 border border-gray-300 rounded">
 			<h2 class="mb-2 text-lg"><a class="text-gray-700 underline" href={post.link}>{post.title}</a></h2>
@@ -21,4 +21,4 @@
 			</div>
 		</article>
 	{/each}
-</AppWindow>
+</Pane>

src/routes/sections/WinSignupNews.svelte → src/routes/sections/PaneSignupNews.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import AppWindow from '../../components/AppWindow/AppWindow.svelte';
+	import Pane from '../../components/Pane/Pane.svelte';
 
 	export let x: number;
 	export let y: number;
@@ -13,7 +13,7 @@
 	}
 </script>
 
-<AppWindow title="Newsletter" {x} {y}>
+<Pane title="Newsletter" {x} {y}>
 	<form on:submit|preventDefault={handleSubmit} class="space-y-4">
 		<div>
 			<label for="email" class="mb-2 block text-sm font-bold text-gray-700">Email:</label>
@@ -42,4 +42,4 @@
 			Sign Up
 		</button>
 	</form>
-</AppWindow>
+</Pane>

src/routes/sections/WinSignupNews.test.js → src/routes/sections/PaneSignupNews.test.js

@@ -3,10 +3,10 @@ import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { expect, test } from 'vitest';
 
-import WinSignupNews from './WinSignupNews.svelte';
+import PaneSignupNews from './PaneSignupNews.svelte';
 
 test('initial form state', () => {
-	render(WinSignupNews);
+	render(PaneSignupNews);
 
 	const emailInput = screen.getByLabelText('Email:');
 	const nameInput = screen.getByLabelText('Name:');
@@ -19,7 +19,7 @@ test('initial form state', () => {
 
 test('form submission', async () => {
 	const user = userEvent.setup();
-	render(WinSignupNews);
+	render(PaneSignupNews);
 
 	const emailInput = screen.getByLabelText('Email:');
 	const nameInput = screen.getByLabelText('Name:');

src/services/blogService.ts

@@ -8,22 +8,16 @@ type Post = {
 };
 
 export async function fetchFeed() {
-  console.log('Fetching feed...');
   const response = await fetch('https://jonesrussell.github.io/blog/feed.xml');
-  console.log('Feed fetched:', response);
   const text = await response.text();
-  console.log('Feed text:', text);
   const parser = new DOMParser();
   const doc = parser.parseFromString(text, 'application/xml');
-  console.log('Parsed XML document:', doc);
   const items = Array.from(doc.querySelectorAll('entry')).map((entry) => {
     const title = entry.querySelector('title')?.textContent || '';
     const link = entry.querySelector('link')?.getAttribute('href') || '';
     const description = entry.querySelector('summary')?.textContent || '';
-    console.log('Processed entry:', { title, link, description });
     return { title, link, description };
   });
-  console.log('All entries processed:', items);
   return items;
 }