More refactors

Author: JoviDeCroock

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
+*.local.*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

CLAUDE.md

@@ -1,51 +1,41 @@
 import { StatusIndicator } from "./StatusIndicator";
 import { Button } from "./Button";
-import { ConnectionStatus } from "../types";
+import { connectionStore } from "../models/ConnectionModel";
+import { updatesStore } from "../models/UpdatesModel";
 
 interface HeaderProps {
-	connectionStatus: ConnectionStatus;
-	onClear?: () => void;
-	onTogglePause?: () => void;
 	onToggleSettings?: () => void;
-	isPaused?: boolean;
-	showControls?: boolean;
-	title?: string;
-	subtitle?: string;
 }
 
-export function Header({
-	connectionStatus,
-	onClear,
-	onTogglePause,
-	onToggleSettings,
-	isPaused = false,
-	showControls = true,
-	title = "Preact Signals",
-	subtitle,
-}: HeaderProps) {
+export function Header({ onToggleSettings }: HeaderProps) {
+	const onTogglePause = () => {
+		connectionStore.isPaused = !connectionStore.isPaused;
+	};
+
+	const onClear = () => {
+		updatesStore.clearUpdates();
+	};
+
 	return (
 		<header className="header">
 			<div className="header-title">
-				<h1>{title}</h1>
-				{subtitle && <p>{subtitle}</p>}
+				<h1>Signals</h1>
 				<StatusIndicator
-					status={connectionStatus.status}
-					message={connectionStatus.message}
+					status={connectionStore.status}
+					message={connectionStore.message}
 				/>
 			</div>
-			{showControls && (
-				<div className="header-controls">
-					{onClear && <Button onClick={onClear}>Clear</Button>}
-					{onTogglePause && (
-						<Button onClick={onTogglePause} active={isPaused}>
-							{isPaused ? "Resume" : "Pause"}
-						</Button>
-					)}
-					{onToggleSettings && (
-						<Button onClick={onToggleSettings}>Settings</Button>
-					)}
-				</div>
-			)}
+			<div className="header-controls">
+				{onClear && <Button onClick={onClear}>Clear</Button>}
+				{onTogglePause && (
+					<Button onClick={onTogglePause} active={connectionStore.isPaused}>
+						{connectionStore.isPaused ? "Resume" : "Pause"}
+					</Button>
+				)}
+				{onToggleSettings && (
+					<Button onClick={onToggleSettings}>Settings</Button>
+				)}
+			</div>
 		</header>
 	);
 }

extension/src/components/Header.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from "preact/hooks";
+import { Signal, useSignal, useSignalEffect } from "@preact/signals";
 import { Button } from "./Button";
 import { Settings } from "../types";
 
 interface SettingsPanelProps {
-	isVisible: boolean;
-	settings: Settings;
+	isVisible: Signal<boolean>;
+	settings: Signal<Settings>;
 	onApply: (settings: Settings) => void;
 	onCancel: () => void;
 }
@@ -15,17 +15,19 @@ export function SettingsPanel({
 	onApply,
 	onCancel,
 }: SettingsPanelProps) {
-	const [localSettings, setLocalSettings] = useState<Settings>(settings);
+	const localSettings = useSignal<Settings>(settings.value);
 
-	useEffect(() => {
-		setLocalSettings(settings);
-	}, [settings]);
+	useSignalEffect(() => {
+		localSettings.value = settings.value;
+	});
 
 	const handleApply = () => {
-		onApply(localSettings);
+		onApply(localSettings.value);
 	};
 
-	if (!isVisible) return null;
+	if (!isVisible.value) {
+		return null;
+	}
 
 	return (
 		<div className="settings-panel">
@@ -36,10 +38,10 @@ export function SettingsPanel({
 					<label>
 						<input
 							type="checkbox"
-							checked={localSettings.enabled}
+							checked={localSettings.value.enabled}
 							onChange={e =>
-								setLocalSettings({
-									...localSettings,
+								(localSettings.value = {
+									...localSettings.value,
 									enabled: (e.target as HTMLInputElement).checked,
 								})
 							}
@@ -52,10 +54,10 @@ export function SettingsPanel({
 					<label>
 						<input
 							type="checkbox"
-							checked={localSettings.grouped}
+							checked={localSettings.value.grouped}
 							onChange={e =>
-								setLocalSettings({
-									...localSettings,
+								(localSettings.value = {
+									...localSettings.value,
 									grouped: (e.target as HTMLInputElement).checked,
 								})
 							}
@@ -69,12 +71,12 @@ export function SettingsPanel({
 					<input
 						type="number"
 						id="maxUpdatesInput"
-						value={localSettings.maxUpdatesPerSecond}
+						value={localSettings.value.maxUpdatesPerSecond}
 						min="1"
 						max="1000"
 						onChange={e =>
-							setLocalSettings({
-								...localSettings,
+							(localSettings.value = {
+								...localSettings.value,
 								maxUpdatesPerSecond:
 									parseInt((e.target as HTMLInputElement).value) || 60,
 							})
@@ -89,10 +91,10 @@ export function SettingsPanel({
 					<textarea
 						id="filterPatternsInput"
 						placeholder="user.*&#10;.*State$&#10;global"
-						value={localSettings.filterPatterns.join("\n")}
+						value={localSettings.value.filterPatterns.join("\n")}
 						onChange={e =>
-							setLocalSettings({
-								...localSettings,
+							(localSettings.value = {
+								...localSettings.value,
 								filterPatterns: (e.target as HTMLTextAreaElement).value
 									.split("\n")
 									.map(pattern => pattern.trim())