From d742298b0df423e3cde3c615cd982556992785e5 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Mon, 22 Dec 2025 13:33:56 -0600
Subject: [PATCH] feat: titlebar with info modal

---
 apps/web/src/lib/canvas/Canvas.svelte         |   2 +
 apps/web/src/lib/components/TitleBar.svelte   | 173 ++++++++++++++++++
 apps/web/src/lib/tests/Canvas.history.test.ts |   2 +-
 apps/web/src/lib/tests/Canvas.svelte.test.ts  |   9 +-
 .../web/src/lib/tests/TitleBar.svelte.test.ts |  26 +++
 5 files changed, 210 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/lib/components/TitleBar.svelte
 create mode 100644 apps/web/src/lib/tests/TitleBar.svelte.test.ts

diff --git a/apps/web/src/lib/canvas/Canvas.svelte b/apps/web/src/lib/canvas/Canvas.svelte
index 2865de4..0fd459a 100644
--- a/apps/web/src/lib/canvas/Canvas.svelte
+++ b/apps/web/src/lib/canvas/Canvas.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import HistoryViewer from '$lib/components/HistoryViewer.svelte';
 	import StatusBar from '$lib/components/StatusBar.svelte';
+	import TitleBar from '$lib/components/TitleBar.svelte';
 	import Toolbar from '$lib/components/Toolbar.svelte';
 	import { createInputAdapter, type InputAdapter } from '$lib/input';
 	import {
@@ -324,6 +325,7 @@
 </script>
 
 <div class="editor">
+	<TitleBar />
 	<Toolbar currentTool={currentToolId} onToolChange={handleToolChange} onHistoryClick={handleHistoryClick} />
 	<canvas bind:this={canvas}></canvas>
 	<HistoryViewer {store} bind:open={historyViewerOpen} onClose={handleHistoryClose} />
diff --git a/apps/web/src/lib/components/TitleBar.svelte b/apps/web/src/lib/components/TitleBar.svelte
new file mode 100644
index 0000000..b85b06e
--- /dev/null
+++ b/apps/web/src/lib/components/TitleBar.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+	import Dialog from '$lib/components/Dialog.svelte';
+
+	const helpLinks = [
+		{ label: 'Project README', href: 'https://github.com/stormlightlabs/inkfinite', external: true },
+		{ label: 'Issue Tracker', href: 'https://github.com/stormlightlabs/inkfinite/issues', external: true }
+	];
+
+	const keyboardTips = [
+		'⌘/Ctrl + Z to undo, ⇧ + ⌘/Ctrl + Z to redo',
+		'Hold space to pan the canvas',
+		'Scroll to zoom, double-click to reset view'
+	];
+
+	let infoOpen = $state(false);
+	function openInfo() {
+		infoOpen = true;
+	}
+	function closeInfo() {
+		infoOpen = false;
+	}
+</script>
+
+<header class="titlebar">
+	<div class="titlebar__brand">
+		<div class="titlebar__logo">∞</div>
+		<div>
+			<div class="titlebar__name">Inkfinite</div>
+			<div class="titlebar__tagline">Infinite canvas playground</div>
+		</div>
+	</div>
+	<div class="titlebar__spacer"></div>
+	<button class="titlebar__info" onclick={openInfo} aria-label="About Inkfinite">
+		<span aria-hidden="true">ℹ︎</span>
+		<span class="titlebar__info-label">Info</span>
+	</button>
+</header>
+
+<Dialog bind:open={infoOpen} onClose={closeInfo} title="About Inkfinite">
+	<section class="about">
+		<h1>About Inkfinite</h1>
+		<p>
+			Inkfinite is a Svelte-native infinite canvas prototype. The goal is to build a cross-platform editor with a
+			framework-agnostic core so the same engine powers both the web and desktop apps.
+		</p>
+
+		<div class="about__section">
+			<h2>Quick Tips</h2>
+			<ul>
+				{#each keyboardTips as tip}
+					<li>{tip}</li>
+				{/each}
+			</ul>
+		</div>
+
+		<div class="about__section">
+			<h2>Need help?</h2>
+			<ul>
+				{#each helpLinks as link}
+					<li>
+						<a href={link.href} target={link.external ? '_blank' : undefined} rel="noreferrer">
+							{link.label}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</section>
+</Dialog>
+
+<style>
+	.titlebar {
+		display: flex;
+		align-items: center;
+		padding: 8px 16px;
+		gap: 12px;
+		background: var(--surface-elevated);
+		border-bottom: 1px solid var(--border);
+	}
+
+	.titlebar__brand {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.titlebar__logo {
+		width: 36px;
+		height: 36px;
+		border-radius: 8px;
+		background: var(--accent);
+		color: var(--surface);
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 18px;
+	}
+
+	.titlebar__name {
+		font-weight: 600;
+		color: var(--text);
+	}
+
+	.titlebar__tagline {
+		font-size: 12px;
+		color: var(--text-muted);
+	}
+
+	.titlebar__spacer {
+		flex: 1;
+	}
+
+	.titlebar__info {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		border: 1px solid var(--border);
+		background: var(--surface);
+		color: var(--text);
+		border-radius: 999px;
+		padding: 4px 10px;
+		cursor: pointer;
+		font-size: 14px;
+	}
+
+	.titlebar__info:hover {
+		background: var(--surface-elevated);
+	}
+
+	.titlebar__info-label {
+		font-size: 12px;
+		color: var(--text-secondary);
+	}
+
+	.about {
+		padding: 24px;
+		max-width: 480px;
+	}
+
+	.about h1 {
+		margin-top: 0;
+		font-size: 22px;
+	}
+
+	.about__section {
+		margin-top: 20px;
+	}
+
+	.about__section h2 {
+		margin-bottom: 8px;
+		font-size: 16px;
+		color: var(--text-secondary);
+	}
+
+	.about__section ul {
+		margin: 0;
+		padding-left: 20px;
+	}
+
+	.about__section li + li {
+		margin-top: 4px;
+	}
+
+	.about__section a {
+		color: var(--accent);
+		text-decoration: none;
+	}
+
+	.about__section a:hover {
+		text-decoration: underline;
+	}
+</style>
diff --git a/apps/web/src/lib/tests/Canvas.history.test.ts b/apps/web/src/lib/tests/Canvas.history.test.ts
index 9d2ba6d..39c206d 100644
--- a/apps/web/src/lib/tests/Canvas.history.test.ts
+++ b/apps/web/src/lib/tests/Canvas.history.test.ts
@@ -53,7 +53,7 @@ vi.mock(
       update: () => {},
     }),
     createSnapStore: () => ({
-      get: () => ({ snapEnabled: false, gridEnabled: false, gridSize: 10 }),
+      get: () => ({ snapEnabled: false, gridEnabled: true, gridSize: 25 }),
       subscribe: () => () => {},
       update: () => {},
       set: () => {},
diff --git a/apps/web/src/lib/tests/Canvas.svelte.test.ts b/apps/web/src/lib/tests/Canvas.svelte.test.ts
index 3a673d9..f130000 100644
--- a/apps/web/src/lib/tests/Canvas.svelte.test.ts
+++ b/apps/web/src/lib/tests/Canvas.svelte.test.ts
@@ -23,7 +23,7 @@ vi.mock("$lib/status", () => {
       update: () => {},
     }),
     createSnapStore: () => ({
-      get: () => ({ snapEnabled: false, gridEnabled: false, gridSize: 10 }),
+      get: () => ({ snapEnabled: false, gridEnabled: true, gridSize: 25 }),
       subscribe: () => () => {},
       update: () => {},
       set: () => {},
@@ -104,6 +104,13 @@ describe("Canvas component", () => {
     expect(statusBar).toBeTruthy();
   });
 
+  it("should render the header with info button", () => {
+    const { container } = render(Canvas);
+    const titleBar = container.querySelector(".titlebar");
+    expect(titleBar).toBeTruthy();
+    expect(titleBar?.querySelector(".titlebar__info")).toBeTruthy();
+  });
+
   it("should render all tool buttons in toolbar", () => {
     const { container } = render(Canvas);
     const toolButtons = container.querySelectorAll(".tool-button");
diff --git a/apps/web/src/lib/tests/TitleBar.svelte.test.ts b/apps/web/src/lib/tests/TitleBar.svelte.test.ts
new file mode 100644
index 0000000..98ee1f1
--- /dev/null
+++ b/apps/web/src/lib/tests/TitleBar.svelte.test.ts
@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "vitest-browser-svelte";
+import TitleBar from "../components/TitleBar.svelte";
+
+describe("TitleBar", () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it("renders title/logo and info button", () => {
+    const { container } = render(TitleBar);
+    expect(container.querySelector(".titlebar")).toBeTruthy();
+    expect(container.querySelector(".titlebar__logo")?.textContent).toContain("∞");
+    expect(container.querySelector(".titlebar__info")).toBeTruthy();
+  });
+
+  it("opens info dialog when button clicked", async () => {
+    const { container } = render(TitleBar);
+    const button = container.querySelector(".titlebar__info") as HTMLButtonElement;
+    expect(button).toBeTruthy();
+
+    button.click();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(container.querySelector(".about")).toBeTruthy();
+  });
+});
-- 
2.51.2