From 64f7c3861083da688349930b6ed7618e09b42013 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Tue, 9 Jun 2026 15:24:49 -0500
Subject: [PATCH] feat: add a not-impl modal and atmosphere info

---
 README.md                                     |   2 +
 src/lib/components/AppWindow.svelte           |  25 ++--
 src/lib/components/DocumentViewer.svelte      |  16 +++
 src/lib/components/GnomeMenuBar.svelte        |   2 +-
 src/lib/components/GnomePanel.svelte          |   3 +-
 .../components/NotImplementedDialog.svelte    | 136 ++++++++++++++++++
 src/lib/not-implemented.svelte.ts             |  13 ++
 src/routes/+layout.svelte                     |   9 +-
 src/routes/docs/+page.svelte                  |   6 +
 src/routes/docs/atmosphere.md                 |  53 +++++++
 10 files changed, 251 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/NotImplementedDialog.svelte
 create mode 100644 src/lib/not-implemented.svelte.ts
 create mode 100644 src/routes/docs/atmosphere.md

diff --git a/README.md b/README.md
index 42bc173..167dfb8 100644
--- a/README.md
+++ b/README.md
@@ -34,3 +34,5 @@ based on the Base 16 spec.
 - Ubuntu 11 ([duh](https://archive.org/details/ubuntu-11.10-desktop-i386-20110812))
 - Atmosphere app logos are adapted from
   [atmologos](https://tangled.org/cozylittle.house/atmologos).
+- Atmosphere [info](/src/routes/docs/atmosphere.md) adapted from
+  [Atmosphere Account](https://atmosphereaccount.com/).
diff --git a/src/lib/components/AppWindow.svelte b/src/lib/components/AppWindow.svelte
index a1b785e..597caab 100644
--- a/src/lib/components/AppWindow.svelte
+++ b/src/lib/components/AppWindow.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
+	import { notImplemented } from '$lib/not-implemented.svelte';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
@@ -191,26 +192,30 @@
 				aria-label={maximized ? 'Restore' : 'Maximize'}
 				tabindex={onmaximize ? 0 : -1}
 				onclick={onmaximize}></button>
-			<button class="close-control" type="button" aria-label="Close" tabindex={onclose ? 0 : -1} onclick={onclose}
-			></button>
+			<button
+				class="close-control"
+				type="button"
+				aria-label="Close"
+				tabindex={onclose ? 0 : -1}
+				onclick={onclose ?? (() => notImplemented.show())}></button>
 		</div>
 	</header>
 
 	{#if showMenubar}
 		<nav class="menubar" aria-label="Application menu">
-			<button type="button">Collection</button>
-			<button type="button">Navigate</button>
-			<button type="button">View</button>
-			<button type="button">Bookmarks</button>
-			<button type="button">Help</button>
+			<button type="button" onclick={() => notImplemented.show()}>Collection</button>
+			<button type="button" onclick={() => notImplemented.show()}>Navigate</button>
+			<button type="button" onclick={() => notImplemented.show()}>View</button>
+			<button type="button" onclick={() => notImplemented.show()}>Bookmarks</button>
+			<button type="button" onclick={() => notImplemented.show()}>Help</button>
 		</nav>
 	{/if}
 
 	{#if showToolbar}
 		<div class="toolbar" aria-label="Application toolbar">
-			<button type="button"><span aria-hidden="true">◀</span> Back</button>
-			<button type="button"><span aria-hidden="true">▶</span> Forward</button>
-			<button type="button"
+			<button type="button" onclick={() => notImplemented.show()}><span aria-hidden="true">◀</span> Back</button>
+			<button type="button" onclick={() => notImplemented.show()}><span aria-hidden="true">▶</span> Forward</button>
+			<button type="button" onclick={() => notImplemented.show()}
 				><img src="/icons/humanity/actions/mail-send-receive.svg" alt="" width="18" height="18" /> Sync</button>
 			<label>
 				<span class="sr-only">Address</span>
diff --git a/src/lib/components/DocumentViewer.svelte b/src/lib/components/DocumentViewer.svelte
index bd87be4..e3650ae 100644
--- a/src/lib/components/DocumentViewer.svelte
+++ b/src/lib/components/DocumentViewer.svelte
@@ -129,6 +129,22 @@
 		list-style: decimal;
 	}
 
+	.document-page :global(a) {
+		color: #164a8b;
+		font-weight: 700;
+		text-decoration-line: underline;
+		text-decoration-thickness: 2px;
+		text-underline-offset: 0.18em;
+		background: linear-gradient(transparent 58%, rgb(114 159 207 / 0.28) 58%);
+		border-radius: var(--radius-1);
+	}
+
+	.document-page :global(a:hover) {
+		color: white;
+		background: var(--selection);
+		text-decoration-color: rgb(255 255 255 / 0.8);
+	}
+
 	.document-page :global(code) {
 		padding: 0.08rem 0.3rem;
 		font-family: var(--font-mono);
diff --git a/src/lib/components/GnomeMenuBar.svelte b/src/lib/components/GnomeMenuBar.svelte
index ce9b302..1106d92 100644
--- a/src/lib/components/GnomeMenuBar.svelte
+++ b/src/lib/components/GnomeMenuBar.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <nav class="panel-menus" aria-label="System menus">
-	<button class="applications-menu" type="button" onclick={() => goto('/')}>
+	<button class="applications-menu" type="button" onclick={() => goto('/docs/atmosphere')}>
 		<img src="/icons/humanity/apps/system-file-manager.svg" alt="" width="20" height="20" />
 		<span>Applications</span>
 	</button>
diff --git a/src/lib/components/GnomePanel.svelte b/src/lib/components/GnomePanel.svelte
index 7d3d42a..6eb5017 100644
--- a/src/lib/components/GnomePanel.svelte
+++ b/src/lib/components/GnomePanel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { notImplemented } from '$lib/not-implemented.svelte';
 	import { windowManager } from '$lib/window-manager.svelte';
 	import GnomeMenuBar from '$lib/components/GnomeMenuBar.svelte';
 
@@ -14,7 +15,7 @@
 
 	<div class="panel-launchers" aria-label="Launchers">
 		{#each launchers as launcher (launcher.label)}
-			<button type="button" title={launcher.label}>
+			<button type="button" title={launcher.label} onclick={() => notImplemented.show()}>
 				<img src={launcher.icon} alt="" width="22" height="22" />
 			</button>
 		{/each}
diff --git a/src/lib/components/NotImplementedDialog.svelte b/src/lib/components/NotImplementedDialog.svelte
new file mode 100644
index 0000000..2fcb378
--- /dev/null
+++ b/src/lib/components/NotImplementedDialog.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { notImplemented } from '$lib/not-implemented.svelte';
+
+	function closeFromBackdrop(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			notImplemented.close();
+		}
+	}
+</script>
+
+{#if notImplemented.message}
+	<div class="dialog-backdrop" role="presentation" onclick={closeFromBackdrop}>
+		<div
+			class="not-implemented-dialog"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="not-implemented-title"
+			tabindex="-1">
+			<header class="dialog-titlebar">
+				<div>
+					<img src="/icons/humanity/mimes/text-x-generic.svg" alt="" width="18" height="18" />
+					<h2 id="not-implemented-title">Not Implemented</h2>
+				</div>
+				<button type="button" aria-label="Close" onclick={() => notImplemented.close()}></button>
+			</header>
+
+			<div class="dialog-body">
+				<img src="/icons/humanity/devices/computer.svg" alt="" width="48" height="48" />
+				<p>{notImplemented.message}</p>
+			</div>
+
+			<footer class="dialog-actions">
+				<button type="button" onclick={() => notImplemented.close()}>OK</button>
+			</footer>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.dialog-backdrop {
+		position: fixed;
+		inset: 1.75rem 0 0;
+		display: grid;
+		place-items: center;
+		padding: var(--space-4);
+		background: rgb(0 0 0 / 0.18);
+		z-index: 10000;
+	}
+
+	.not-implemented-dialog {
+		width: min(22rem, 100%);
+		overflow: hidden;
+		color: var(--text);
+		background: #f4e6cc;
+		border: 1px solid #2a170d;
+		border-radius: var(--radius-3) var(--radius-3) var(--radius-2) var(--radius-2);
+		box-shadow: var(--shadow-window);
+	}
+
+	.dialog-titlebar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		min-height: 1.85rem;
+		padding: 3px var(--space-2) 3px var(--space-3);
+		color: #fff1d7;
+		background:
+			linear-gradient(rgb(255 255 255 / 0.14), transparent 45%),
+			linear-gradient(var(--window-title-start), var(--window-title-end));
+		border-bottom: 1px solid #1b0f09;
+		text-shadow: 0 1px 1px rgb(0 0 0 / 0.9);
+	}
+
+	.dialog-titlebar div {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		min-width: 0;
+	}
+
+	.dialog-titlebar h2 {
+		font-size: var(--text-2);
+	}
+
+	.dialog-titlebar button {
+		width: 14px;
+		height: 14px;
+		border: 1px solid #1e120a;
+		border-radius: var(--radius-round);
+		background: radial-gradient(circle at 35% 30%, #fff4d0, #cf7b1f 45%, #6d3412 78%);
+		box-shadow: 0 1px 0 rgb(255 255 255 / 0.24) inset;
+		cursor: default;
+	}
+
+	.dialog-titlebar button:hover {
+		background: radial-gradient(circle at 35% 30%, #ffd6c9, #ef2929 42%, #660000 78%);
+	}
+
+	.dialog-body {
+		display: grid;
+		grid-template-columns: 48px minmax(0, 1fr);
+		gap: var(--space-4);
+		align-items: center;
+		padding: var(--space-5);
+		background: linear-gradient(#fff8ed, #e4cfad);
+	}
+
+	.dialog-body p {
+		font-size: var(--text-3);
+		font-weight: 700;
+	}
+
+	.dialog-actions {
+		display: flex;
+		justify-content: end;
+		padding: var(--space-3);
+		background: #d6bf99;
+		border-top: 1px solid #a5875d;
+	}
+
+	.dialog-actions button {
+		min-width: 5.5rem;
+		height: 1.8rem;
+		padding: 0 var(--space-4);
+		background: linear-gradient(#fff9ec, #ceb48a);
+		border: 1px solid #9b7d55;
+		border-radius: var(--radius-2);
+		box-shadow: var(--shadow-raised);
+		font-weight: 700;
+		cursor: default;
+	}
+
+	.dialog-actions button:active {
+		box-shadow: var(--shadow-sunken);
+	}
+</style>
diff --git a/src/lib/not-implemented.svelte.ts b/src/lib/not-implemented.svelte.ts
new file mode 100644
index 0000000..803eae8
--- /dev/null
+++ b/src/lib/not-implemented.svelte.ts
@@ -0,0 +1,13 @@
+class NotImplementedState {
+	message = $state<string | null>(null);
+
+	show(message = 'Coming soon :)') {
+		this.message = message;
+	}
+
+	close() {
+		this.message = null;
+	}
+}
+
+export const notImplemented = new NotImplementedState();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8d55e39..6bb321f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -18,6 +18,7 @@
 	import GnomePanel from '$lib/components/GnomePanel.svelte';
 	import LockScreen from '$lib/components/LockScreen.svelte';
 	import NativeWindow from '$lib/components/NativeWindow.svelte';
+	import NotImplementedDialog from '$lib/components/NotImplementedDialog.svelte';
 	import SetupDialog from '$lib/components/SetupDialog.svelte';
 	import '$lib/styles/style.css';
 
@@ -35,7 +36,8 @@
 	const windowTitle = $derived.by(() => {
 		if (routeRequiresSetup) return 'AT Protocol Account Setup';
 		if (page.route.id === '/') return 'Welcome to Intrepid Ibex';
-		if (page.route.id?.startsWith('/docs')) return 'Getting Started - Document Viewer';
+		// TODO: this should be slug aware
+		if (page.route.id?.startsWith('/docs')) return 'Document Viewer';
 		return 'AT Protocol Collections - Intrepid Ibex';
 	});
 	const windowIcon = $derived.by(() => {
@@ -80,7 +82,8 @@
 		{
 			label: 'Document Viewer',
 			icon: '/icons/humanity/mimes/gnome-mime-application-pdf.svg',
-			selected: page.route.id?.startsWith('/docs') || (documentViewerWindow?.isOpen && !documentViewerWindow.isMinimized),
+			selected:
+				page.route.id?.startsWith('/docs') || (documentViewerWindow?.isOpen && !documentViewerWindow.isMinimized),
 			onactivate: () => {
 				windowManager.restore('main');
 				void goto('/docs');
@@ -329,6 +332,8 @@
 			{/if}
 		</main>
 
+		<NotImplementedDialog />
+
 		{#if desktopSession.isLocked}
 			<LockScreen identity={accountSetup.identity} onunlock={() => desktopSession.unlock()} />
 		{/if}
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index cb0e378..b068709 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -8,6 +8,12 @@
 			description: 'A short guide to browsing public ATProto repos and sharing records.',
 			icon: '/icons/humanity/mimes/gnome-mime-application-pdf.svg'
 		},
+		{
+			title: 'Atmosphere',
+			slug: 'atmosphere',
+			description: 'A short note about portable accounts and the open social web.',
+			icon: '/icons/humanity/apps/web-browser.svg'
+		},
 		{
 			title: 'Changelog',
 			slug: 'changelog',
diff --git a/src/routes/docs/atmosphere.md b/src/routes/docs/atmosphere.md
new file mode 100644
index 0000000..55c0936
--- /dev/null
+++ b/src/routes/docs/atmosphere.md
@@ -0,0 +1,53 @@
+# Atmosphere
+
+The Atmosphere is an open social web made of apps and services that work together.
+Instead of creating a fresh account for every app, you can use one portable identity
+across the network.
+
+An Atmosphere account is like a passport: one handle, one home for your data, and the
+freedom to choose the apps you use.
+
+## One account, many apps
+
+Posts, likes, follows, comments, lists, photos, videos, blogs, and new kinds of records
+can all live with the same account. Apps can present that data in different ways, but
+the identity stays yours.
+
+## Built differently
+
+- **Universal identity** — the same `@handle` can identify you across Atmosphere apps.
+- **Account ownership** — your profile and records are not trapped inside one app.
+- **Anyone can build** — developers can make new apps that plug into the same network.
+- **Personal domains** — your handle can be your own domain, so your identity follows
+  your name or project.
+
+## Choose your provider
+
+Your account lives with a provider: a service that stores your personal data and keeps
+it available to apps. A provider might be an app you already use, an independent host,
+or infrastructure you run yourself.
+
+You can move providers without starting over. Your account, records, and relationships
+are designed to remain portable.
+
+## Post once, show everywhere
+
+A blog post might appear in a reader. A photo might appear in a gallery. Music might
+show up in a player. The same account can produce records that many apps understand,
+and the ecosystem can grow without a fixed list of app types.
+
+## Your account, your choice
+
+No single company has to decide what you see or where you go. Moderation, feeds, and
+apps can be chosen in layers:
+
+- Subscribe to community moderation and block lists.
+- Switch feeds like playlists.
+- Move between apps and providers while keeping your audience.
+
+The promise is an internet that is open by default and owned by the people using
+it.
+
+## Credit
+
+Adapted from [Atmosphere Account](https://atmosphereaccount.com/).
-- 
2.51.2