refactor(ops-harbor): separate settings into dedicated page

Extract settings UI and logic from DashboardPage into a standalone
SettingsPage with hash-based routing (#/settings), simplifying the
dashboard and improving navigation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: masseater

apps/ops-harbor/src/client/app/App.tsx

@@ -1,5 +1,22 @@
+import { useEffect, useState } from "react";
 import { DashboardPage } from "../pages/dashboard";
+import { SettingsPage } from "../pages/settings";
+
+function useHashRoute(): string {
+  const [hash, setHash] = useState(window.location.hash);
+  useEffect(() => {
+    const handler = () => setHash(window.location.hash);
+    window.addEventListener("hashchange", handler);
+    return () => window.removeEventListener("hashchange", handler);
+  }, []);
+  return hash;
+}
 
 export function App() {
+  const hash = useHashRoute();
+
+  if (hash === "#/settings") {
+    return <SettingsPage />;
+  }
   return <DashboardPage />;
 }

apps/ops-harbor/src/client/app/styles.css

@@ -768,6 +768,38 @@ input:focus {
   margin-bottom: 14px;
 }
 
+/* ─── Settings Page Layout ─── */
+.settings-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 24px;
+  background: var(--bg-base);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.page-header h1 {
+  flex: 1;
+  margin: 0;
+}
+
+.settings-main {
+  flex: 1;
+  padding: 24px;
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
 /* ─── Empty State ─── */
 .empty {
   color: var(--text-tertiary);

apps/ops-harbor/src/client/lib/fetch.ts

@@ -0,0 +1,7 @@
+export async function fetchJson<T>(input: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(input, init);
+  if (!response.ok) {
+    throw new Error(await response.text());
+  }
+  return (await response.json()) as T;
+}