From ef108ea69564d731ec4f1b4075c32b0a3caed907 Mon Sep 17 00:00:00 2001
From: Daniel Schultz <slifty@gmail.com>
Date: Fri, 4 Sep 2026 11:28:17 -0400
Subject: [PATCH 1/6] Update icon text input to paint its own icon

Prior to this change the icon was passed to the component, but by having
the component render the icon with a gradient the icons get distinct
IDs.

Issue #1159 Implement UX for location coordinate entry

Claude-Session: https://claude.ai/code/session_01HM1anu1T97zKvtb1TKTcfc
---
 .../uncertain-location-picker.component.html  | 10 ----
 .../uncertain-location-picker.component.scss  | 15 -----
 ...ncertain-location-picker.component.spec.ts |  8 ---
 .../uncertain-location-picker.component.ts    |  6 +-
 .../icon-text-input.component.html            | 20 ++++++-
 .../icon-text-input.component.scss            | 24 +++++++-
 .../icon-text-input.component.spec.ts         | 56 ++++++++++++++++++-
 .../icon-text-input.component.ts              | 12 +++-
 8 files changed, 106 insertions(+), 45 deletions(-)

diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html
index f99d2422f..0ad6f80cf 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html
@@ -1,13 +1,3 @@
-<!-- The gradient every `pr-icon-text-input` below fills its icon from. -->
-<svg class="pr-icon-gradient-defs" aria-hidden="true" focusable="false">
-	<defs>
-		<linearGradient [attr.id]="iconGradientId" x1="0" y1="0" x2="1" y2="0">
-			<stop class="pr-icon-gradient-start" offset="0%" />
-			<stop class="pr-icon-gradient-end" offset="100%" />
-		</linearGradient>
-	</defs>
-</svg>
-
 <div class="pr-uncertain-location-dialog">
 	<div class="pr-dialog-header">
 		<h2>Add a place or address…</h2>
diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss
index dc9519f2e..6c3eb6f86 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss
@@ -6,21 +6,6 @@
 	display: block;
 }
 
-// Out of flow: an inline `svg` opens a line box and pushes the card down.
-.pr-icon-gradient-defs {
-	position: absolute;
-	width: 0;
-	height: 0;
-}
-
-.pr-icon-gradient-start {
-	stop-color: $PR-brand-purple;
-}
-
-.pr-icon-gradient-end {
-	stop-color: $PR-brand-yellow;
-}
-
 .pr-uncertain-location-dialog {
 	background: $PR-brand-white;
 	border-radius: 12px;
diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts
index 51f84a9f7..aaf5cd32b 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts
@@ -108,14 +108,6 @@ describe('UncertainLocationPickerComponent', () => {
 			]);
 		});
 
-		it('should point the icons at the gradient the dialog defines', () => {
-			const gradient = fixture.nativeElement.querySelector(
-				`linearGradient#${component.iconGradientId}`,
-			);
-
-			expect(gradient).not.toBeNull();
-		});
-
 		it('should start with empty fields', () => {
 			getFields().forEach((input) => {
 				expect(input.value).toBe('');
diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts
index c796dbc10..0426df031 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts
@@ -17,10 +17,7 @@ import {
 	LocnVOData,
 } from '@models';
 import { ProfileItemVOData } from '@models/profile-item-vo';
-import {
-	ICON_GRADIENT_ID,
-	IconTextInputComponent,
-} from '@shared/components/icon-text-input/icon-text-input.component';
+import { IconTextInputComponent } from '@shared/components/icon-text-input/icon-text-input.component';
 import {
 	faFlagUsa,
 	faHouse,
@@ -112,7 +109,6 @@ const toQualifierFlags = (
 export class UncertainLocationPickerComponent implements OnInit {
 	readonly fields = LOCATION_FIELDS;
 	readonly nameIcon = faHouse;
-	readonly iconGradientId = ICON_GRADIENT_ID;
 	readonly qualifierOptions = LOCATION_QUALIFIER_OPTIONS;
 	readonly LocationQualifier = LocationQualifier;
 
diff --git a/src/app/shared/components/icon-text-input/icon-text-input.component.html b/src/app/shared/components/icon-text-input/icon-text-input.component.html
index 0b0be7963..b34dc2577 100644
--- a/src/app/shared/components/icon-text-input/icon-text-input.component.html
+++ b/src/app/shared/components/icon-text-input/icon-text-input.component.html
@@ -1,5 +1,21 @@
-<div class="pr-icon-text-input" [class.disabled]="disabled">
-	<span class="pr-icon-text-input-icon" aria-hidden="true">
+<div
+	class="pr-icon-text-input"
+	[class.disabled]="disabled"
+	[class.invalid]="invalid"
+>
+	<svg class="pr-icon-text-input-gradient" aria-hidden="true" focusable="false">
+		<defs>
+			<linearGradient [attr.id]="gradientId" x1="0" y1="0" x2="1" y2="0">
+				<stop class="pr-icon-gradient-start" offset="0%" />
+				<stop class="pr-icon-gradient-end" offset="100%" />
+			</linearGradient>
+		</defs>
+	</svg>
+	<span
+		class="pr-icon-text-input-icon"
+		aria-hidden="true"
+		[style.--pr-icon-text-input-fill]="iconFill"
+	>
 		<fa-icon [icon]="icon" />
 	</span>
 	<input
diff --git a/src/app/shared/components/icon-text-input/icon-text-input.component.scss b/src/app/shared/components/icon-text-input/icon-text-input.component.scss
index 1d3beada6..47af6513a 100644
--- a/src/app/shared/components/icon-text-input/icon-text-input.component.scss
+++ b/src/app/shared/components/icon-text-input/icon-text-input.component.scss
@@ -23,6 +23,14 @@
 		}
 	}
 
+	// After the focus rule, and naming the focused case outright: focus is
+	// when the value is being typed, which is when saying it is unreadable
+	// matters most.
+	&.invalid,
+	&.invalid:focus-within {
+		border-color: $PR-red-300;
+	}
+
 	&.disabled {
 		opacity: 0.5;
 	}
@@ -43,10 +51,24 @@
 	// no encapsulation attribute. The colour after the url is not a fallback
 	// nicety — an unresolved paint reference draws nothing.
 	::ng-deep svg path {
-		fill: url('#pr-icon-gradient') $PR-blue-600;
+		fill: var(--pr-icon-text-input-fill) $PR-blue-600;
 	}
 }
 
+.pr-icon-text-input-gradient {
+	position: absolute;
+	width: 0;
+	height: 0;
+}
+
+.pr-icon-gradient-start {
+	stop-color: $PR-brand-purple;
+}
+
+.pr-icon-gradient-end {
+	stop-color: $PR-brand-yellow;
+}
+
 .pr-icon-text-input-control {
 	@include input-segment;
 	// No `@font-face` declares a plain 'Usual'; the faces are named per weight.
diff --git a/src/app/shared/components/icon-text-input/icon-text-input.component.spec.ts b/src/app/shared/components/icon-text-input/icon-text-input.component.spec.ts
index 33040ce4d..326345c77 100644
--- a/src/app/shared/components/icon-text-input/icon-text-input.component.spec.ts
+++ b/src/app/shared/components/icon-text-input/icon-text-input.component.spec.ts
@@ -11,6 +11,7 @@ import { IconTextInputComponent } from './icon-text-input.component';
 		label="Name"
 		[value]="value"
 		[disabled]="disabled"
+		[invalid]="invalid"
 		(valueChange)="onValueChange($event)"
 	/>`,
 })
@@ -18,6 +19,7 @@ class TestHostComponent {
 	icon = faHouse;
 	value = '';
 	disabled = false;
+	invalid = false;
 	lastEmittedValue: string | null = null;
 
 	onValueChange(newValue: string): void {
@@ -56,12 +58,62 @@ describe('IconTextInputComponent', () => {
 		expect(getInput().getAttribute('aria-label')).toBe('Name');
 	});
 
-	it('should paint the icon with the gradient', () => {
+	it('should define the gradient it paints its own icon with', () => {
+		const component = fixture.debugElement.query(
+			(node) => node.name === 'pr-icon-text-input',
+		).componentInstance as IconTextInputComponent;
+		const gradient = fixture.nativeElement.querySelector(
+			`linearGradient#${component.gradientId}`,
+		);
+
+		expect(gradient).not.toBeNull();
+	});
+
+	it('should paint the icon with that gradient', () => {
+		const component = fixture.debugElement.query(
+			(node) => node.name === 'pr-icon-text-input',
+		).componentInstance as IconTextInputComponent;
 		const path: SVGPathElement = fixture.nativeElement.querySelector(
 			'.pr-icon-text-input-icon svg path',
 		);
 
-		expect(getComputedStyle(path).fill).toContain('pr-icon-gradient');
+		expect(getComputedStyle(path).fill).toContain(component.gradientId);
+	});
+
+	it('should give each instance its own gradient id', () => {
+		const second = TestBed.createComponent(TestHostComponent);
+		second.detectChanges();
+		const idOf = (host: ComponentFixture<TestHostComponent>): string =>
+			(
+				host.debugElement.query((node) => node.name === 'pr-icon-text-input')
+					.componentInstance as IconTextInputComponent
+			).gradientId;
+
+		expect(idOf(second)).not.toBe(idOf(fixture));
+	});
+
+	it('should mark itself invalid on request', () => {
+		hostComponent.invalid = true;
+		fixture.detectChanges();
+
+		expect(
+			fixture.nativeElement.querySelector('.pr-icon-text-input.invalid'),
+		).not.toBeNull();
+	});
+
+	it('should keep the invalid border while the field is being typed in', () => {
+		hostComponent.invalid = true;
+		fixture.detectChanges();
+		const field: HTMLElement = fixture.nativeElement.querySelector(
+			'.pr-icon-text-input',
+		);
+		const borderWhenIdle = getComputedStyle(field).borderColor;
+
+		getInput().focus();
+		fixture.detectChanges();
+
+		expect(field.matches(':focus-within')).toBeTrue();
+		expect(getComputedStyle(field).borderColor).toBe(borderWhenIdle);
 	});
 
 	it('should emit the typed value', () => {
diff --git a/src/app/shared/components/icon-text-input/icon-text-input.component.ts b/src/app/shared/components/icon-text-input/icon-text-input.component.ts
index edb356673..f4f8fc704 100644
--- a/src/app/shared/components/icon-text-input/icon-text-input.component.ts
+++ b/src/app/shared/components/icon-text-input/icon-text-input.component.ts
@@ -3,8 +3,12 @@ import { CommonModule } from '@angular/common';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
-/** The host renders the gradient definition; an SVG fill can only cite an id. */
-export const ICON_GRADIENT_ID = 'pr-icon-gradient';
+let gradientCount = 0;
+
+const takeGradientId = (): string => {
+	gradientCount += 1;
+	return `pr-icon-text-input-gradient-${gradientCount}`;
+};
 
 @Component({
 	selector: 'pr-icon-text-input',
@@ -21,9 +25,13 @@ export class IconTextInputComponent {
 
 	@Input() value = '';
 	@Input() disabled = false;
+	@Input() invalid = false;
 
 	@Output() valueChange = new EventEmitter<string>();
 
+	readonly gradientId = takeGradientId();
+	readonly iconFill = `url('#${this.gradientId}')`;
+
 	onInput(event: Event): void {
 		this.valueChange.emit((event.target as HTMLInputElement).value);
 	}

From 847bb7698c3ef935b97637f77c3e43162f2c2c83 Mon Sep 17 00:00:00 2001
From: Daniel Schultz <slifty@gmail.com>
Date: Fri, 4 Sep 2026 11:28:25 -0400
Subject: [PATCH 2/6] Extract a reusable dialog frame

This frame is going to be used by other location picker modals.

Issue #1159 Implement UX for location coordinate entry

Claude-Session: https://claude.ai/code/session_01HM1anu1T97zKvtb1TKTcfc
---
 .../uncertain-location-picker.component.html  |  41 +++----
 .../uncertain-location-picker.component.scss  |  84 -------------
 ...ncertain-location-picker.component.spec.ts |   6 +-
 .../uncertain-location-picker.component.ts    |   3 +-
 .../dialog-frame/dialog-frame.component.html  |  36 ++++++
 .../dialog-frame/dialog-frame.component.scss  |  96 +++++++++++++++
 .../dialog-frame.component.spec.ts            | 113 ++++++++++++++++++
 .../dialog-frame/dialog-frame.component.ts    |  19 +++
 8 files changed, 283 insertions(+), 115 deletions(-)
 create mode 100644 src/app/shared/components/dialog-frame/dialog-frame.component.html
 create mode 100644 src/app/shared/components/dialog-frame/dialog-frame.component.scss
 create mode 100644 src/app/shared/components/dialog-frame/dialog-frame.component.spec.ts
 create mode 100644 src/app/shared/components/dialog-frame/dialog-frame.component.ts

diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html
index 0ad6f80cf..777633f68 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.html
@@ -1,16 +1,8 @@
-<div class="pr-uncertain-location-dialog">
-	<div class="pr-dialog-header">
-		<h2>Add a place or address…</h2>
-		<button
-			type="button"
-			class="pr-close-button"
-			aria-label="Close"
-			(click)="cancel()"
-		>
-			<i class="material-icons">close</i>
-		</button>
-	</div>
-
+<pr-dialog-frame
+	heading="Add a place or address…"
+	(cancelled)="cancel()"
+	(confirmed)="save()"
+>
 	<div class="pr-dialog-content">
 		<div class="pr-qualifiers-row">
 			<span class="pr-qualifiers-label">This place is:</span>
@@ -53,16 +45,13 @@ <h2>Add a place or address…</h2>
 		</div>
 	</div>
 
-	<div class="pr-dialog-footer">
-		<button type="button" class="pr-clear-link" (click)="clearAll()">
-			<i class="material-icons">backspace</i>
-			<span>Clear place and address</span>
-		</button>
-		<div class="pr-dialog-actions">
-			<button type="button" class="pr-btn-cancel" (click)="cancel()">
-				Cancel
-			</button>
-			<button type="button" class="pr-btn-save" (click)="save()">Save</button>
-		</div>
-	</div>
-</div>
+	<button
+		type="button"
+		class="pr-clear-link"
+		prDialogFooterAside
+		(click)="clearAll()"
+	>
+		<i class="material-icons">backspace</i>
+		<span>Clear place and address</span>
+	</button>
+</pr-dialog-frame>
diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss
index 6c3eb6f86..44c89d7b3 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.scss
@@ -6,50 +6,6 @@
 	display: block;
 }
 
-.pr-uncertain-location-dialog {
-	background: $PR-brand-white;
-	border-radius: 12px;
-	box-shadow: 0 8px 32px rgba($PR-brand-black, 0.12);
-}
-
-.pr-dialog-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: 8px;
-	height: 64px;
-	padding: 0 20px;
-	border-bottom: 1px solid $PR-blue-50;
-
-	h2 {
-		// No `@font-face` declares a plain 'Usual'; faces are named per weight.
-		font-family: 'UsualMedium', sans-serif;
-		font-size: 16px;
-		line-height: 24px;
-		letter-spacing: -0.01em;
-		margin: 0;
-		color: $PR-blue-900;
-	}
-}
-
-.pr-close-button {
-	background: none;
-	border: none;
-	cursor: pointer;
-	padding: 4px;
-	color: $PR-blue-200;
-	display: flex;
-	align-items: center;
-
-	&:hover {
-		color: $PR-blue-400;
-	}
-
-	.material-icons {
-		font-size: 20px;
-	}
-}
-
 .pr-dialog-content {
 	display: flex;
 	flex-direction: column;
@@ -154,18 +110,6 @@
 	gap: 8px;
 }
 
-.pr-dialog-footer {
-	@include panel-footer;
-	border-top: none;
-	gap: 24px;
-	padding: 32px;
-}
-
-.pr-dialog-actions {
-	display: flex;
-	gap: 24px;
-}
-
 .pr-clear-link {
 	@include clear-btn;
 	@include usual-text;
@@ -181,31 +125,3 @@
 		font-size: 20px;
 	}
 }
-
-.pr-btn-cancel,
-.pr-btn-save {
-	@include usual-text;
-	font-family: 'UsualMedium', sans-serif;
-	padding: 16px 24px;
-	border: none;
-	border-radius: 6px;
-	cursor: pointer;
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.pr-btn-cancel {
-	background: $PR-brand-white;
-	color: $PR-blue-900;
-}
-
-.pr-btn-save {
-	background: $PR-blue-900;
-	color: $PR-brand-white;
-
-	&:hover {
-		background: $PR-blue-800;
-	}
-}
diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts
index aaf5cd32b..29d3c4d23 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.spec.ts
@@ -63,11 +63,9 @@ describe('UncertainLocationPickerComponent', () => {
 			expect(component.item).toBe(item);
 		});
 
-		it('should start the card at the top, with no room taken by the gradient', () => {
+		it('should start the card at the top of the host', () => {
 			const host: HTMLElement = fixture.nativeElement;
-			const card: HTMLElement = host.querySelector(
-				'.pr-uncertain-location-dialog',
-			);
+			const card: HTMLElement = host.querySelector('.pr-dialog-frame');
 			const gap =
 				card.getBoundingClientRect().top - host.getBoundingClientRect().top;
 
diff --git a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts
index 0426df031..bc24029fa 100644
--- a/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts
+++ b/src/app/file-browser/components/uncertain-location-picker/uncertain-location-picker.component.ts
@@ -17,6 +17,7 @@ import {
 	LocnVOData,
 } from '@models';
 import { ProfileItemVOData } from '@models/profile-item-vo';
+import { DialogFrameComponent } from '@shared/components/dialog-frame/dialog-frame.component';
 import { IconTextInputComponent } from '@shared/components/icon-text-input/icon-text-input.component';
 import {
 	faFlagUsa,
@@ -102,7 +103,7 @@ const toQualifierFlags = (
 @Component({
 	selector: 'pr-uncertain-location-picker',
 	standalone: true,
-	imports: [CommonModule, IconTextInputComponent],
+	imports: [CommonModule, DialogFrameComponent, IconTextInputComponent],
 	templateUrl: './uncertain-location-picker.component.html',
 	styleUrls: ['./uncertain-location-picker.component.scss'],
 })
diff --git a/src/app/shared/components/dialog-frame/dialog-frame.component.html b/src/app/shared/components/dialog-frame/dialog-frame.component.html
new file mode 100644
index 000000000..b5822b288
--- /dev/null
+++ b/src/app/shared/components/dialog-frame/dialog-frame.component.html
@@ -0,0 +1,36 @@
+<div class="pr-dialog-frame">
+	<div class="pr-dialog-header">
+		<h2>{{ heading }}</h2>
+		<button
+			type="button"
+			class="pr-close-button"
+			aria-label="Close"
+			(click)="cancelled.emit()"
+		>
+			<i class="material-icons">close</i>
+		</button>
+	</div>
+
+	<div class="pr-dialog-body">
+		<ng-content></ng-content>
+	</div>
+
+	<div class="pr-dialog-footer">
+		<div class="pr-dialog-footer-aside">
+			<ng-content select="[prDialogFooterAside]"></ng-content>
+		</div>
+		<div class="pr-dialog-actions">
+			<button type="button" class="pr-btn-cancel" (click)="cancelled.emit()">
+				{{ cancelLabel }}
+			</button>
+			<button
+				type="button"
+				class="pr-btn-confirm"
+				[disabled]="confirmDisabled"
+				(click)="confirmed.emit()"
+			>
+				{{ confirmLabel }}
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/src/app/shared/components/dialog-frame/dialog-frame.component.scss b/src/app/shared/components/dialog-frame/dialog-frame.component.scss
new file mode 100644
index 000000000..e67eaa184
--- /dev/null
+++ b/src/app/shared/components/dialog-frame/dialog-frame.component.scss
@@ -0,0 +1,96 @@
+@import 'colors';
+@import 'fonts';
+@import 'mixins';
+
+:host {
+	display: block;
+}
+
+.pr-dialog-frame {
+	background: $PR-brand-white;
+	border-radius: 12px;
+	box-shadow: 0 8px 32px rgba($PR-brand-black, 0.12);
+}
+
+.pr-dialog-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	height: 64px;
+	padding: 0 20px;
+	border-bottom: 1px solid $PR-blue-50;
+
+	h2 {
+		// No `@font-face` declares a plain 'Usual'; faces are named per weight.
+		font-family: 'UsualMedium', sans-serif;
+		font-size: 16px;
+		line-height: 24px;
+		letter-spacing: -0.01em;
+		margin: 0;
+		color: $PR-blue-900;
+	}
+}
+
+.pr-close-button {
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 4px;
+	color: $PR-blue-200;
+	display: flex;
+	align-items: center;
+
+	&:hover {
+		color: $PR-blue-400;
+	}
+
+	.material-icons {
+		font-size: 20px;
+	}
+}
+
+.pr-dialog-footer {
+	@include panel-footer;
+	border-top: none;
+	gap: 24px;
+	padding: 32px;
+}
+
+.pr-dialog-actions {
+	display: flex;
+	gap: 24px;
+}
+
+.pr-btn-cancel,
+.pr-btn-confirm {
+	@include usual-text;
+	font-family: 'UsualMedium', sans-serif;
+	padding: 16px 24px;
+	border: none;
+	border-radius: 6px;
+	cursor: pointer;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.pr-btn-cancel {
+	background: $PR-brand-white;
+	color: $PR-blue-900;
+}
+
+.pr-btn-confirm {
+	background: $PR-blue-900;
+	color: $PR-brand-white;
+
+	&:hover:not(:disabled) {
+		background: $PR-blue-800;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+}
diff --git a/src/app/shared/components/dialog-frame/dialog-frame.component.spec.ts b/src/app/shared/components/dialog-frame/dialog-frame.component.spec.ts
new file mode 100644
index 000000000..134120dae
--- /dev/null
+++ b/src/app/shared/components/dialog-frame/dialog-frame.component.spec.ts
@@ -0,0 +1,113 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DialogFrameComponent } from './dialog-frame.component';
+
+@Component({
+	standalone: true,
+	imports: [DialogFrameComponent],
+	template: `<pr-dialog-frame
+		[heading]="heading"
+		[confirmLabel]="confirmLabel"
+		[confirmDisabled]="confirmDisabled"
+		(confirmed)="confirmedCount = confirmedCount + 1"
+		(cancelled)="cancelledCount = cancelledCount + 1"
+	>
+		<p class="body-content">Body</p>
+		<button prDialogFooterAside type="button" class="aside-content">
+			Clear
+		</button>
+	</pr-dialog-frame>`,
+})
+class TestHostComponent {
+	heading = 'Choose GPS Coordinates';
+	confirmLabel = 'Save';
+	confirmDisabled = false;
+	confirmedCount = 0;
+	cancelledCount = 0;
+}
+
+describe('DialogFrameComponent', () => {
+	let fixture: ComponentFixture<TestHostComponent>;
+	let host: TestHostComponent;
+
+	const query = <T extends HTMLElement>(selector: string): T =>
+		fixture.nativeElement.querySelector(selector);
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [TestHostComponent],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(TestHostComponent);
+		host = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should show the heading it was given', () => {
+		expect(query('.pr-dialog-header h2').textContent.trim()).toBe(
+			'Choose GPS Coordinates',
+		);
+	});
+
+	it('should project the body content', () => {
+		expect(query('.pr-dialog-body .body-content')).not.toBeNull();
+	});
+
+	it('should project footer content beside the actions', () => {
+		expect(query('.pr-dialog-footer-aside .aside-content')).not.toBeNull();
+	});
+
+	it('should start the card at the top of the host', () => {
+		const card = query('.pr-dialog-frame');
+		const gap =
+			card.getBoundingClientRect().top -
+			(fixture.nativeElement as HTMLElement).getBoundingClientRect().top;
+
+		expect(gap).toBe(0);
+	});
+
+	it('should label the actions', () => {
+		expect(query('.pr-btn-cancel').textContent.trim()).toBe('Cancel');
+		expect(query('.pr-btn-confirm').textContent.trim()).toBe('Save');
+	});
+
+	it('should take a different confirm label', () => {
+		host.confirmLabel = 'Done';
+		fixture.detectChanges();
+
+		expect(query('.pr-btn-confirm').textContent.trim()).toBe('Done');
+	});
+
+	it('should report a confirm', () => {
+		query<HTMLButtonElement>('.pr-btn-confirm').click();
+
+		expect(host.confirmedCount).toBe(1);
+	});
+
+	it('should report a cancel from the footer button', () => {
+		query<HTMLButtonElement>('.pr-btn-cancel').click();
+
+		expect(host.cancelledCount).toBe(1);
+	});
+
+	it('should report a cancel from the header close button', () => {
+		query<HTMLButtonElement>('.pr-close-button').click();
+
+		expect(host.cancelledCount).toBe(1);
+	});
+
+	it('should disable confirm on request', () => {
+		host.confirmDisabled = true;
+		fixture.detectChanges();
+
+		expect(query<HTMLButtonElement>('.pr-btn-confirm').disabled).toBeTrue();
+	});
+
+	it('should not report a confirm while it is disabled', () => {
+		host.confirmDisabled = true;
+		fixture.detectChanges();
+		query<HTMLButtonElement>('.pr-btn-confirm').click();
+
+		expect(host.confirmedCount).toBe(0);
+	});
+});
diff --git a/src/app/shared/components/dialog-frame/dialog-frame.component.ts b/src/app/shared/components/dialog-frame/dialog-frame.component.ts
new file mode 100644
index 000000000..603f6d510
--- /dev/null
+++ b/src/app/shared/components/dialog-frame/dialog-frame.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+	selector: 'pr-dialog-frame',
+	standalone: true,
+	imports: [CommonModule],
+	templateUrl: './dialog-frame.component.html',
+	styleUrls: ['./dialog-frame.component.scss'],
+})
+export class DialogFrameComponent {
+	@Input() heading = '';
+	@Input() confirmLabel = 'Save';
+	@Input() cancelLabel = 'Cancel';
+	@Input() confirmDisabled = false;
+
+	@Output() confirmed = new EventEmitter<void>();
+	@Output() cancelled = new EventEmitter<void>();
+}

From 3af3f2b608db55572276d335d934fec6dd7e6887 Mon Sep 17 00:00:00 2001
From: Daniel Schultz <slifty@gmail.com>
Date: Fri, 4 Sep 2026 11:02:25 -0400
Subject: [PATCH 3/6] Add GPS coordinate formatting and parsing

This utility is going to be used for the upcoming location picker UX.
There are a few ways to note GPS coordinates and we're standardizing on
DMS for rendering but will accept degree format for now.  If the string
doesn't parse we return null because that's actually something a caller
can handler and understand.

Issue #1159 Implement UX for location coordinate entry

Claude-Session: https://claude.ai/code/session_01HM1anu1T97zKvtb1TKTcfc
---
 src/app/shared/utilities/coordinates.spec.ts | 162 +++++++++++++++++++
 src/app/shared/utilities/coordinates.ts      | 159 ++++++++++++++++++
 2 files changed, 321 insertions(+)
 create mode 100644 src/app/shared/utilities/coordinates.spec.ts
 create mode 100644 src/app/shared/utilities/coordinates.ts

diff --git a/src/app/shared/utilities/coordinates.spec.ts b/src/app/shared/utilities/coordinates.spec.ts
new file mode 100644
index 000000000..b85c4d4cb
--- /dev/null
+++ b/src/app/shared/utilities/coordinates.spec.ts
@@ -0,0 +1,162 @@
+import {
+	coordinatesFromLocation,
+	formatCoordinates,
+	parseCoordinates,
+} from './coordinates';
+
+describe('formatCoordinates', () => {
+	it('writes the pair as degrees, minutes and seconds', () => {
+		expect(
+			formatCoordinates({ latitude: 38.70786, longitude: -9.400139 }),
+		).toBe(`38°42'28.3" N  9°24'00.5" W`);
+	});
+
+	it('names the southern and eastern hemispheres', () => {
+		expect(formatCoordinates({ latitude: -33.8688, longitude: 151.2093 })).toBe(
+			`33°52'07.7" S  151°12'33.5" E`,
+		);
+	});
+
+	it('treats the equator and prime meridian as north and east', () => {
+		expect(formatCoordinates({ latitude: 0, longitude: 0 })).toBe(
+			`0°00'00.0" N  0°00'00.0" E`,
+		);
+	});
+
+	it('carries a rounded-up second into the minute above it', () => {
+		// 0.99999° is 59'59.996", which must not print as 59'60.0".
+		expect(formatCoordinates({ latitude: 0.99999, longitude: 0 })).toBe(
+			`1°00'00.0" N  0°00'00.0" E`,
+		);
+	});
+});
+
+describe('parseCoordinates', () => {
+	it('reads back what formatCoordinates wrote', () => {
+		const parsed = parseCoordinates(`38°42'28.3" N  9°24'00.5" W`);
+
+		expect(parsed.latitude).toBeCloseTo(38.707861, 6);
+		expect(parsed.longitude).toBeCloseTo(-9.400139, 6);
+	});
+
+	it('reads decimal degrees separated by a comma', () => {
+		expect(parseCoordinates('38.7078, -9.4001')).toEqual({
+			latitude: 38.7078,
+			longitude: -9.4001,
+		});
+	});
+
+	it('reads decimal degrees separated by whitespace alone', () => {
+		expect(parseCoordinates('38.7078 -9.4001')).toEqual({
+			latitude: 38.7078,
+			longitude: -9.4001,
+		});
+	});
+
+	it('reads decimal degrees carrying hemisphere letters', () => {
+		expect(parseCoordinates('38.7078° N; 9.4001° W')).toEqual({
+			latitude: 38.7078,
+			longitude: -9.4001,
+		});
+	});
+
+	it('accepts lowercase hemisphere letters', () => {
+		expect(parseCoordinates('38.7078 n, 9.4001 w')).toEqual({
+			latitude: 38.7078,
+			longitude: -9.4001,
+		});
+	});
+
+	it('reads degrees and minutes without seconds', () => {
+		expect(parseCoordinates(`38°42' N  9°24' W`)).toEqual({
+			latitude: 38.7,
+			longitude: -9.4,
+		});
+	});
+
+	it('lets the hemisphere letters name the axis when longitude comes first', () => {
+		expect(parseCoordinates('9.4001° W, 38.7078° N')).toEqual({
+			latitude: 38.7078,
+			longitude: -9.4001,
+		});
+	});
+
+	it('assumes latitude first when no letters name the axis', () => {
+		expect(parseCoordinates('9.4001, 38.7078')).toEqual({
+			latitude: 9.4001,
+			longitude: 38.7078,
+		});
+	});
+
+	it('rejects two angles from the same axis', () => {
+		expect(parseCoordinates('38° N, 9° N')).toBeNull();
+	});
+
+	it('rejects a sign that contradicts its hemisphere letter', () => {
+		expect(parseCoordinates('-38 N, -9 W')).toBeNull();
+		expect(parseCoordinates('-38 S, 9 E')).toBeNull();
+	});
+
+	it('still accepts a sign on the half that carries no letter', () => {
+		expect(parseCoordinates('-38, 9 E')).toEqual({
+			latitude: -38,
+			longitude: 9,
+		});
+	});
+
+	it('rejects a latitude beyond the poles', () => {
+		expect(parseCoordinates('91, 9')).toBeNull();
+	});
+
+	it('rejects a longitude beyond half a turn', () => {
+		expect(parseCoordinates('38, 181')).toBeNull();
+	});
+
+	it('rejects minutes and seconds that overflow', () => {
+		expect(parseCoordinates(`38°60'00.0" N  9°00'00.0" W`)).toBeNull();
+		expect(parseCoordinates(`38°00'60.0" N  9°00'00.0" W`)).toBeNull();
+	});
+
+	it('rejects a half-typed pair rather than guessing at the rest', () => {
+		expect(parseCoordinates('38.70, ')).toBeNull();
+		expect(parseCoordinates('')).toBeNull();
+		expect(parseCoordinates(null)).toBeNull();
+	});
+
+	it('rejects a lone number, decimal point and all', () => {
+		expect(parseCoordinates('38')).toBeNull();
+		// Without a separator this reads as 38.7 and 0.
+		expect(parseCoordinates('38.70')).toBeNull();
+	});
+
+	it('rejects text that is not a coordinate pair at all', () => {
+		expect(parseCoordinates('Lisbon, Portugal')).toBeNull();
+	});
+});
+
+describe('coordinatesFromLocation', () => {
+	it('reads a stored pair', () => {
+		expect(
+			coordinatesFromLocation({ latitude: 38.7078, longitude: -9.4001 }),
+		).toEqual({ latitude: 38.7078, longitude: -9.4001 });
+	});
+
+	it('reads a pair that was stored as strings', () => {
+		expect(
+			coordinatesFromLocation({ latitude: '38.7078', longitude: '-9.4001' }),
+		).toEqual({ latitude: 38.7078, longitude: -9.4001 });
+	});
+
+	it('returns null when the location carries no pair', () => {
+		expect(coordinatesFromLocation({ city: 'Lisbon' })).toBeNull();
+		expect(coordinatesFromLocation({ latitude: 38.7078 })).toBeNull();
+		expect(coordinatesFromLocation({ latitude: '', longitude: '' })).toBeNull();
+		expect(coordinatesFromLocation(null)).toBeNull();
+	});
+
+	it('returns null when what was stored is not a number', () => {
+		expect(
+			coordinatesFromLocation({ latitude: 'somewhere', longitude: 'nice' }),
+		).toBeNull();
+	});
+});
diff --git a/src/app/shared/utilities/coordinates.ts b/src/app/shared/utilities/coordinates.ts
new file mode 100644
index 000000000..b2cf699ce
--- /dev/null
+++ b/src/app/shared/utilities/coordinates.ts
@@ -0,0 +1,159 @@
+import { LocnVOData } from '@models';
+
+export interface Coordinates {
+	latitude: number;
+	longitude: number;
+}
+
+const MAX_LATITUDE = 90;
+const MAX_LONGITUDE = 180;
+const MINUTES_PER_DEGREE = 60;
+const SECONDS_PER_MINUTE = 60;
+const SECONDS_PER_DEGREE = MINUTES_PER_DEGREE * SECONDS_PER_MINUTE;
+const TENTHS_PER_SECOND = 10;
+
+const PAIR_SEPARATOR = '  ';
+
+const SIGNED_NUMBER = String.raw`[+-]?\d+(?:\.\d+)?`;
+const UNSIGNED_NUMBER = String.raw`\d+(?:\.\d+)?`;
+const DEGREE_MARK = String.raw`[°º]?`;
+const MINUTE_MARK = String.raw`['′]`;
+const SECOND_MARK = String.raw`''|"|″`;
+const HEMISPHERE_LETTER = String.raw`[NSEW]`;
+
+const ANGLE = String.raw`(${SIGNED_NUMBER})\s*${DEGREE_MARK}\s*(?:(${UNSIGNED_NUMBER})\s*${MINUTE_MARK}\s*(?:(${UNSIGNED_NUMBER})\s*(?:${SECOND_MARK})\s*)?)?(${HEMISPHERE_LETTER})?`;
+const CAPTURES_PER_ANGLE = 4;
+
+/**
+ * Required, because `38.70` otherwise reads as the pair 38.7 and 0: the
+ * decimal point ends the first number and the digits after it begin a second.
+ */
+const ANGLE_SEPARATOR = String.raw`(?:\s*[,;]\s*|\s+)`;
+
+const COORDINATE_PAIR = new RegExp(
+	`^\\s*${ANGLE}${ANGLE_SEPARATOR}${ANGLE}\\s*$`,
+	'i',
+);
+
+const LATITUDE_HEMISPHERES = ['N', 'S'];
+const NEGATIVE_HEMISPHERES = ['S', 'W'];
+
+interface Angle {
+	degrees: number;
+	minutes: number;
+	seconds: number;
+	hemisphere: string | null;
+}
+
+const twoDigits = (value: number): string => String(value).padStart(2, '0');
+
+const toDegreesMinutesSeconds = (
+	value: number,
+	positiveHemisphere: string,
+	negativeHemisphere: string,
+): string => {
+	const hemisphere = value < 0 ? negativeHemisphere : positiveHemisphere;
+	const totalTenths = Math.round(
+		Math.abs(value) * SECONDS_PER_DEGREE * TENTHS_PER_SECOND,
+	);
+	const tenths = totalTenths % TENTHS_PER_SECOND;
+	const totalSeconds = Math.floor(totalTenths / TENTHS_PER_SECOND);
+	const seconds = totalSeconds % SECONDS_PER_MINUTE;
+	const totalMinutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE);
+	const minutes = totalMinutes % MINUTES_PER_DEGREE;
+	const degrees = Math.floor(totalMinutes / MINUTES_PER_DEGREE);
+
+	return `${degrees}°${twoDigits(minutes)}'${twoDigits(seconds)}.${tenths}" ${hemisphere}`;
+};
+
+export const formatCoordinates = (coordinates: Coordinates): string =>
+	[
+		toDegreesMinutesSeconds(coordinates.latitude, 'N', 'S'),
+		toDegreesMinutesSeconds(coordinates.longitude, 'E', 'W'),
+	].join(PAIR_SEPARATOR);
+
+const toDecimalDegrees = (angle: Angle): number => {
+	const magnitude =
+		Math.abs(angle.degrees) +
+		angle.minutes / MINUTES_PER_DEGREE +
+		angle.seconds / SECONDS_PER_DEGREE;
+	const isNegative = angle.hemisphere
+		? NEGATIVE_HEMISPHERES.includes(angle.hemisphere)
+		: angle.degrees < 0;
+
+	return isNegative ? -magnitude : magnitude;
+};
+
+const hasValidMinutesAndSeconds = (angle: Angle): boolean =>
+	angle.minutes < MINUTES_PER_DEGREE && angle.seconds < SECONDS_PER_MINUTE;
+
+const contradictsItsHemisphere = (angle: Angle): boolean =>
+	angle.hemisphere !== null && angle.degrees < 0;
+
+const isLatitudeHemisphere = (angle: Angle): boolean | null =>
+	angle.hemisphere === null
+		? null
+		: LATITUDE_HEMISPHERES.includes(angle.hemisphere);
+
+const readAngles = (match: RegExpExecArray): Angle[] =>
+	[0, CAPTURES_PER_ANGLE].map((offset) => ({
+		degrees: Number(match[offset + 1]),
+		minutes: Number(match[offset + 2] ?? 0),
+		seconds: Number(match[offset + 3] ?? 0),
+		hemisphere: match[offset + 4]?.toUpperCase() ?? null,
+	}));
+
+const isInRange = ({ latitude, longitude }: Coordinates): boolean =>
+	Math.abs(latitude) <= MAX_LATITUDE && Math.abs(longitude) <= MAX_LONGITUDE;
+
+export const parseCoordinates = (
+	text: string | null | undefined,
+): Coordinates | null => {
+	const match = COORDINATE_PAIR.exec(text ?? '');
+	if (!match) {
+		return null;
+	}
+
+	const angles = readAngles(match);
+	if (!angles.every(hasValidMinutesAndSeconds)) {
+		return null;
+	}
+	if (angles.some(contradictsItsHemisphere)) {
+		return null;
+	}
+
+	const [firstIsLatitude, secondIsLatitude] = angles.map(isLatitudeHemisphere);
+	const namesTheSameAxis =
+		firstIsLatitude !== null &&
+		secondIsLatitude !== null &&
+		firstIsLatitude === secondIsLatitude;
+	if (namesTheSameAxis) {
+		return null;
+	}
+
+	const isLongitudeFirst =
+		firstIsLatitude === false || secondIsLatitude === true;
+	const [latitude, longitude] = (
+		isLongitudeFirst ? [angles[1], angles[0]] : angles
+	).map(toDecimalDegrees);
+
+	return isInRange({ latitude, longitude }) ? { latitude, longitude } : null;
+};
+
+export const coordinatesFromLocation = (
+	location: LocnVOData | null | undefined,
+): Coordinates | null => {
+	const hasLatitude = location?.latitude != null && location.latitude !== '';
+	const hasLongitude = location?.longitude != null && location.longitude !== '';
+	if (!hasLatitude || !hasLongitude) {
+		return null;
+	}
+
+	const latitude = Number(location.latitude);
+	const longitude = Number(location.longitude);
+	if (Number.isNaN(latitude) || Number.isNaN(longitude)) {
+		return null;
+	}
+
+	return { latitude, longitude };
+};

From d02de771dc95ef5f594b35075f4195bc21caa193 Mon Sep 17 00:00:00 2001
From: Daniel Schultz <slifty@gmail.com>
Date: Fri, 4 Sep 2026 11:32:01 -0400
Subject: [PATCH 4/6] Add a reusable coordinate map input

The coordinate map input only has a single intended use right now but
I think there is benefit in having well-scoped components from
a testability and consolidation of complexity perspective.

Issue #1159 Implement UX for location coordinate entry

Claude-Session: https://claude.ai/code/session_01HM1anu1T97zKvtb1TKTcfc
---
 .../coordinate-map-input.component.html       |  20 ++
 .../coordinate-map-input.component.scss       |  15 +
 .../coordinate-map-input.component.spec.ts    | 274 ++++++++++++++++++
 .../coordinate-map-input.component.ts         | 165 +++++++++++
 4 files changed, 474 insertions(+)
 create mode 100644 src/app/shared/components/coordinate-map-input/coordinate-map-input.component.html
 create mode 100644 src/app/shared/components/coordinate-map-input/coordinate-map-input.component.scss
 create mode 100644 src/app/shared/components/coordinate-map-input/coordinate-map-input.component.spec.ts
 create mode 100644 src/app/shared/components/coordinate-map-input/coordinate-map-input.component.ts

diff --git a/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.html b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.html
new file mode 100644
index 000000000..ee2e62ad9
--- /dev/null
+++ b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.html
@@ -0,0 +1,20 @@
+<google-map
+	[height]="height"
+	width="100%"
+	[options]="mapOptions"
+	(mapClick)="onMapClick($event)"
+>
+	@if (markerPosition(); as position) {
+		<map-marker [position]="position" [options]="markerOptions" />
+	}
+</google-map>
+
+<div class="pr-coordinate-field">
+	<pr-icon-text-input
+		[icon]="coordinateIcon"
+		[label]="label"
+		[value]="coordinateText()"
+		[invalid]="!isValid()"
+		(valueChange)="onCoordinateTextChange($event)"
+	/>
+</div>
diff --git a/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.scss b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.scss
new file mode 100644
index 000000000..dfbfe483d
--- /dev/null
+++ b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.scss
@@ -0,0 +1,15 @@
+@import 'colors';
+
+:host {
+	display: block;
+	position: relative;
+}
+
+.pr-coordinate-field {
+	position: absolute;
+	top: 16px;
+	left: 16px;
+	right: 16px;
+	border-radius: 6px;
+	box-shadow: 0 2px 8px rgba($PR-brand-black, 0.16);
+}
diff --git a/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.spec.ts b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.spec.ts
new file mode 100644
index 000000000..6ac1a2cc6
--- /dev/null
+++ b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.spec.ts
@@ -0,0 +1,274 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GoogleMapsModule } from '@angular/google-maps';
+import { Coordinates } from '@shared/utilities/coordinates';
+import { CoordinateMapInputComponent } from './coordinate-map-input.component';
+
+const LISBON: Coordinates = { latitude: 38.70786, longitude: -9.400139 };
+const LISBON_AS_TEXT = `38°42'28.3" N  9°24'00.5" W`;
+
+const mapClickAt = (lat: number, lng: number): google.maps.MapMouseEvent =>
+	({
+		latLng: { lat: () => lat, lng: () => lng },
+	}) as google.maps.MapMouseEvent;
+
+@Component({
+	standalone: true,
+	imports: [CoordinateMapInputComponent],
+	template: `<pr-coordinate-map-input
+		[coordinates]="coordinates"
+		(coordinatesChange)="onCoordinatesChange($event)"
+		(validityChange)="onValidityChange($event)"
+	/>`,
+})
+class TestHostComponent {
+	@ViewChild(CoordinateMapInputComponent) input: CoordinateMapInputComponent;
+	coordinates: Coordinates | null = null;
+	emitted: (Coordinates | null)[] = [];
+	validity: boolean[] = [];
+
+	onCoordinatesChange(coordinates: Coordinates | null): void {
+		this.emitted.push(coordinates);
+	}
+
+	onValidityChange(isValid: boolean): void {
+		this.validity.push(isValid);
+	}
+}
+
+describe('CoordinateMapInputComponent', () => {
+	let fixture: ComponentFixture<TestHostComponent>;
+	let host: TestHostComponent;
+
+	const setUp = async (coordinates: Coordinates | null): Promise<void> => {
+		await TestBed.configureTestingModule({
+			imports: [TestHostComponent],
+		})
+			.overrideComponent(CoordinateMapInputComponent, {
+				remove: { imports: [GoogleMapsModule] },
+				add: { schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+			})
+			.compileComponents();
+
+		fixture = TestBed.createComponent(TestHostComponent);
+		host = fixture.componentInstance;
+		host.coordinates = coordinates;
+		fixture.detectChanges();
+	};
+
+	const getField = (): HTMLInputElement =>
+		fixture.nativeElement.querySelector('.pr-icon-text-input-control');
+
+	const typeInField = (value: string): void => {
+		const field = getField();
+		field.value = value;
+		field.dispatchEvent(new Event('input'));
+		fixture.detectChanges();
+	};
+
+	describe('with no coordinates', () => {
+		beforeEach(async () => {
+			await setUp(null);
+		});
+
+		it('should start with an empty field', () => {
+			expect(getField().value).toBe('');
+		});
+
+		it('should show no pin', () => {
+			expect(host.input.markerPosition()).toBeNull();
+		});
+
+		it('should open on the whole country', () => {
+			expect(host.input.mapOptions.zoom).toBe(4);
+		});
+	});
+
+	describe('with coordinates given', () => {
+		beforeEach(async () => {
+			await setUp(LISBON);
+		});
+
+		it('should write them into the field', () => {
+			expect(getField().value).toBe(LISBON_AS_TEXT);
+		});
+
+		it('should drop the pin on them', () => {
+			expect(host.input.markerPosition()).toEqual({
+				lat: LISBON.latitude,
+				lng: LISBON.longitude,
+			});
+		});
+
+		it('should centre the map on them', () => {
+			expect(host.input.mapOptions.center).toEqual({
+				lat: LISBON.latitude,
+				lng: LISBON.longitude,
+			});
+
+			expect(host.input.mapOptions.zoom).toBe(12);
+		});
+
+		it('should not report anything it was merely given', () => {
+			expect(host.emitted).toEqual([]);
+		});
+	});
+
+	describe('clicking the map', () => {
+		beforeEach(async () => {
+			await setUp(null);
+		});
+
+		it('should move the pin to the click', () => {
+			host.input.onMapClick(mapClickAt(LISBON.latitude, LISBON.longitude));
+			fixture.detectChanges();
+
+			expect(host.input.markerPosition()).toEqual({
+				lat: LISBON.latitude,
+				lng: LISBON.longitude,
+			});
+		});
+
+		it('should write the clicked pair into the field', () => {
+			host.input.onMapClick(mapClickAt(LISBON.latitude, LISBON.longitude));
+			fixture.detectChanges();
+
+			expect(getField().value).toBe(LISBON_AS_TEXT);
+		});
+
+		it('should report the clicked pair', () => {
+			host.input.onMapClick(mapClickAt(LISBON.latitude, LISBON.longitude));
+
+			expect(host.emitted).toEqual([LISBON]);
+		});
+
+		it('should ignore a click that names no position', () => {
+			host.input.onMapClick({} as google.maps.MapMouseEvent);
+
+			expect(host.input.markerPosition()).toBeNull();
+			expect(host.emitted).toEqual([]);
+		});
+	});
+
+	describe('when the coordinates it was given change', () => {
+		beforeEach(async () => {
+			await setUp(LISBON);
+		});
+
+		it('should follow them to a new place', () => {
+			const sydney = { latitude: -33.8688, longitude: 151.2093 };
+			host.coordinates = sydney;
+			fixture.detectChanges();
+
+			expect(host.input.markerPosition()).toEqual({
+				lat: sydney.latitude,
+				lng: sydney.longitude,
+			});
+		});
+
+		it('should keep the opening view rather than re-centring on every change', () => {
+			host.coordinates = { latitude: -33.8688, longitude: 151.2093 };
+			fixture.detectChanges();
+
+			expect(host.input.mapOptions.center).toEqual({
+				lat: LISBON.latitude,
+				lng: LISBON.longitude,
+			});
+		});
+
+		it('should empty the field when they are taken away', () => {
+			host.coordinates = null;
+			fixture.detectChanges();
+
+			expect(getField().value).toBe('');
+		});
+	});
+
+	describe('typing into the field', () => {
+		let panTo: jasmine.Spy;
+
+		beforeEach(async () => {
+			await setUp(null);
+			panTo = jasmine.createSpy('panTo');
+			host.input.map = {
+				panTo,
+				googleMap: {},
+			} as unknown as typeof host.input.map;
+		});
+
+		it('should report a pair typed in full', () => {
+			typeInField('38.70786, -9.400139');
+
+			expect(host.emitted).toEqual([LISBON]);
+		});
+
+		it('should follow the pin with the map', () => {
+			typeInField('38.70786, -9.400139');
+
+			expect(panTo).toHaveBeenCalledWith({
+				lat: LISBON.latitude,
+				lng: LISBON.longitude,
+			});
+		});
+
+		it('should leave the typed text as typed', () => {
+			typeInField('38.70786, -9.400139');
+
+			expect(getField().value).toBe('38.70786, -9.400139');
+		});
+
+		it('should leave the map alone until the Maps API has loaded', () => {
+			host.input.map = { panTo } as unknown as typeof host.input.map;
+
+			typeInField('38.70786, -9.400139');
+
+			expect(panTo).not.toHaveBeenCalled();
+		});
+
+		it('should hold the pin still while the pair is half typed', () => {
+			typeInField('38.70786, -9.400139');
+			typeInField('38.70786, -');
+
+			expect(host.input.markerPosition()).toEqual({
+				lat: LISBON.latitude,
+				lng: LISBON.longitude,
+			});
+		});
+
+		it('should report itself invalid while the text names no pair', () => {
+			typeInField('38.70786, -');
+
+			expect(host.input.isValid()).toBeFalse();
+			expect(host.validity.pop()).toBeFalse();
+		});
+
+		it('should mark the field invalid to the eye as well', () => {
+			typeInField('38.70786, -');
+
+			expect(
+				fixture.nativeElement.querySelector('.pr-icon-text-input.invalid'),
+			).not.toBeNull();
+		});
+
+		it('should drop the pin when the field is emptied', () => {
+			typeInField('38.70786, -9.400139');
+			typeInField('   ');
+
+			expect(host.input.markerPosition()).toBeNull();
+			expect(host.emitted.pop()).toBeNull();
+		});
+
+		it('should call an emptied field valid, since that clears the pair', () => {
+			typeInField('   ');
+
+			expect(host.input.isValid()).toBeTrue();
+		});
+
+		it('should become valid again once the text reads as a pair', () => {
+			typeInField('40.7, -74.');
+			typeInField('40.7, -74.0');
+
+			expect(host.input.isValid()).toBeTrue();
+		});
+	});
+});
diff --git a/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.ts b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.ts
new file mode 100644
index 000000000..1da0f3efd
--- /dev/null
+++ b/src/app/shared/components/coordinate-map-input/coordinate-map-input.component.ts
@@ -0,0 +1,165 @@
+import {
+	Component,
+	computed,
+	EventEmitter,
+	Input,
+	OnChanges,
+	Output,
+	signal,
+	ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
+import { IconTextInputComponent } from '@shared/components/icon-text-input/icon-text-input.component';
+import {
+	Coordinates,
+	formatCoordinates,
+	parseCoordinates,
+} from '@shared/utilities/coordinates';
+import { faLocationCrosshairs } from '@fortawesome/pro-regular-svg-icons';
+
+const CONTINENTAL_US_CENTER: google.maps.LatLngLiteral = {
+	lat: 39.8333333,
+	lng: -98.585522,
+};
+
+const LOCATED_ZOOM = 12;
+const WHOLE_COUNTRY_ZOOM = 4;
+
+const BRAND_PIN_ICON_URL = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
+	`<svg xmlns="http://www.w3.org/2000/svg" width="28" height="36" viewBox="0 0 28 36">
+		<path fill="#131B4A" d="M14 0C6.268 0 0 6.268 0 14c0 9.5 12.2 20.86 12.72 21.34a1.87 1.87 0 0 0 2.56 0C15.8 34.86 28 23.5 28 14 28 6.268 21.732 0 14 0Z"/>
+		<circle cx="14" cy="14" r="5" fill="#FFFFFF"/>
+	</svg>`,
+)}`;
+
+const toLatLngLiteral = (
+	coordinates: Coordinates,
+): google.maps.LatLngLiteral => ({
+	lat: coordinates.latitude,
+	lng: coordinates.longitude,
+});
+
+const isSamePlace = (a: Coordinates | null, b: Coordinates | null): boolean =>
+	a?.latitude === b?.latitude && a?.longitude === b?.longitude;
+
+@Component({
+	selector: 'pr-coordinate-map-input',
+	standalone: true,
+	imports: [CommonModule, GoogleMapsModule, IconTextInputComponent],
+	templateUrl: './coordinate-map-input.component.html',
+	styleUrls: ['./coordinate-map-input.component.scss'],
+})
+export class CoordinateMapInputComponent implements OnChanges {
+	@Input() coordinates: Coordinates | null = null;
+	@Input() label = 'Add coordinates…';
+	@Input() height = '400px';
+
+	@Output() coordinatesChange = new EventEmitter<Coordinates | null>();
+	@Output() validityChange = new EventEmitter<boolean>();
+
+	readonly coordinateIcon = faLocationCrosshairs;
+
+	readonly markerOptions: google.maps.MarkerOptions = {
+		icon: { url: BRAND_PIN_ICON_URL },
+	};
+
+	mapOptions: google.maps.MapOptions = {
+		zoom: WHOLE_COUNTRY_ZOOM,
+		center: CONTINENTAL_US_CENTER,
+		streetViewControl: false,
+		fullscreenControl: false,
+		mapTypeControl: false,
+		clickableIcons: false,
+	};
+
+	coordinateText = signal('');
+
+	currentCoordinates = signal<Coordinates | null>(null);
+
+	markerPosition = computed<google.maps.LatLngLiteral | null>(() => {
+		const coordinates = this.currentCoordinates();
+		return coordinates ? toLatLngLiteral(coordinates) : null;
+	});
+
+	isValid = computed<boolean>(() => {
+		const text = this.coordinateText().trim();
+		return !text || parseCoordinates(text) !== null;
+	});
+
+	@ViewChild(GoogleMap) map?: GoogleMap;
+
+	private hasCentredOnAPlace = false;
+
+	ngOnChanges(): void {
+		if (isSamePlace(this.coordinates, this.currentCoordinates())) {
+			return;
+		}
+		this.currentCoordinates.set(this.coordinates);
+		this.coordinateText.set(
+			this.coordinates ? formatCoordinates(this.coordinates) : '',
+		);
+		this.centreOnFirstPlace();
+	}
+
+	public onMapClick(event: google.maps.MapMouseEvent): void {
+		if (!event.latLng) {
+			return;
+		}
+		const coordinates: Coordinates = {
+			latitude: event.latLng.lat(),
+			longitude: event.latLng.lng(),
+		};
+		this.currentCoordinates.set(coordinates);
+		this.coordinateText.set(formatCoordinates(coordinates));
+		this.report();
+	}
+
+	public onCoordinateTextChange(text: string): void {
+		this.coordinateText.set(text);
+
+		if (!text.trim()) {
+			this.currentCoordinates.set(null);
+			this.report();
+			return;
+		}
+
+		const coordinates = parseCoordinates(text);
+		if (!coordinates) {
+			this.report();
+			return;
+		}
+		this.currentCoordinates.set(coordinates);
+		this.panMapTo(coordinates);
+		this.report();
+	}
+
+	private report(): void {
+		this.coordinatesChange.emit(this.currentCoordinates());
+		this.validityChange.emit(this.isValid());
+	}
+
+	private centreOnFirstPlace(): void {
+		const coordinates = this.currentCoordinates();
+		if (!coordinates || this.hasCentredOnAPlace) {
+			return;
+		}
+		this.hasCentredOnAPlace = true;
+		this.mapOptions = {
+			...this.mapOptions,
+			zoom: LOCATED_ZOOM,
+			center: toLatLngLiteral(coordinates),
+		};
+	}
+
+	private isGoogleMapsApiReady(): boolean {
+		return Boolean(this.map?.googleMap);
+	}
+
+	private panMapTo(coordinates: Coordinates): void {
+		if (!this.isGoogleMapsApiReady()) {
+			return;
+		}
+		this.map.panTo(toLatLngLiteral(coordinates));
+	}
+}

From 31af94dcae0d2584a31be440216885f36bc92e04 Mon Sep 17 00:00:00 2001
From: Daniel Schultz <slifty@gmail.com>
Date: Fri, 4 Sep 2026 11:02:32 -0400
Subject: [PATCH 5/6] Add a GPS coordinate picker modal

This modal will allow users to pick GPS by dropping a pin on a map *or*
by pasting in text.  Unparsable text will result in an inability to
click save, since that's something the user should resolve and simply
falling back might be confusing.

Issue #1159 Implement UX for location coordinate entry

Claude-Session: https://claude.ai/code/session_01HM1anu1T97zKvtb1TKTcfc
---
 .../coordinate-picker.component.html          |  12 ++
 .../coordinate-picker.component.scss          |   3 +
 .../coordinate-picker.component.spec.ts       | 170 ++++++++++++++++++
 .../coordinate-picker.component.ts            |  84 +++++++++
 4 files changed, 269 insertions(+)
 create mode 100644 src/app/file-browser/components/coordinate-picker/coordinate-picker.component.html
 create mode 100644 src/app/file-browser/components/coordinate-picker/coordinate-picker.component.scss
 create mode 100644 src/app/file-browser/components/coordinate-picker/coordinate-picker.component.spec.ts
 create mode 100644 src/app/file-browser/components/coordinate-picker/coordinate-picker.component.ts

diff --git a/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.html b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.html
new file mode 100644
index 000000000..f7fbe4f51
--- /dev/null
+++ b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.html
@@ -0,0 +1,12 @@
+<pr-dialog-frame
+	heading="Choose GPS Coordinates"
+	[confirmDisabled]="!isValid()"
+	(cancelled)="cancel()"
+	(confirmed)="save()"
+>
+	<pr-coordinate-map-input
+		[coordinates]="coordinates()"
+		(coordinatesChange)="onCoordinatesChange($event)"
+		(validityChange)="onValidityChange($event)"
+	/>
+</pr-dialog-frame>
diff --git a/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.scss b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.scss
new file mode 100644
index 000000000..d0a69bc1e
--- /dev/null
+++ b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.scss
@@ -0,0 +1,3 @@
+:host {
+	display: block;
+}
diff --git a/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.spec.ts b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.spec.ts
new file mode 100644
index 000000000..add750f26
--- /dev/null
+++ b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.spec.ts
@@ -0,0 +1,170 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { GoogleMapsModule } from '@angular/google-maps';
+import { RecordVO } from '@models';
+import { ProfileItemVOData } from '@models/profile-item-vo';
+import { CoordinateMapInputComponent } from '@shared/components/coordinate-map-input/coordinate-map-input.component';
+import {
+	CoordinatePickerComponent,
+	CoordinatePickerData,
+} from './coordinate-picker.component';
+
+const LISBON = { latitude: 38.70786, longitude: -9.400139 };
+
+describe('CoordinatePickerComponent', () => {
+	let fixture: ComponentFixture<CoordinatePickerComponent>;
+	let component: CoordinatePickerComponent;
+	let dialogRef: jasmine.SpyObj<DialogRef>;
+
+	const setUp = async (dialogData: CoordinatePickerData): Promise<void> => {
+		dialogRef = jasmine.createSpyObj('DialogRef', ['close']);
+
+		await TestBed.configureTestingModule({
+			imports: [CoordinatePickerComponent],
+			providers: [
+				{ provide: DIALOG_DATA, useValue: dialogData },
+				{ provide: DialogRef, useValue: dialogRef },
+			],
+		})
+			.overrideComponent(CoordinateMapInputComponent, {
+				remove: { imports: [GoogleMapsModule] },
+				add: { schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+			})
+			.compileComponents();
+
+		fixture = TestBed.createComponent(CoordinatePickerComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	};
+
+	const query = <T extends HTMLElement>(selector: string): T =>
+		fixture.nativeElement.querySelector(selector);
+
+	describe('with an item that has no location', () => {
+		const item = new RecordVO({ recordId: 123 });
+
+		beforeEach(async () => {
+			await setUp({ item });
+		});
+
+		it('should read the item off the dialog data', () => {
+			expect(component.item).toBe(item);
+		});
+
+		it('should render a titled dialog', () => {
+			expect(query('.pr-dialog-header h2').textContent.trim()).toBe(
+				'Choose GPS Coordinates',
+			);
+		});
+
+		it('should hand the map input nothing to start from', () => {
+			expect(component.coordinates()).toBeNull();
+		});
+	});
+
+	describe('when the item already has coordinates', () => {
+		beforeEach(async () => {
+			await setUp({
+				item: new RecordVO({
+					recordId: 123,
+					LocnVO: { ...LISBON, city: 'Lisbon' },
+				}),
+			});
+		});
+
+		it('should hand the stored pair to the map input', () => {
+			expect(component.coordinates()).toEqual(LISBON);
+		});
+
+		it('should keep the address it was given when saving', () => {
+			component.save();
+
+			expect(dialogRef.close).toHaveBeenCalledWith({
+				location: { ...LISBON, city: 'Lisbon' },
+			});
+		});
+
+		it('should clear the stored pair when the map input reports none', () => {
+			component.onCoordinatesChange(null);
+			component.save();
+
+			expect(dialogRef.close).toHaveBeenCalledWith({
+				location: { latitude: null, longitude: null, city: 'Lisbon' },
+			});
+		});
+	});
+
+	describe('when the item has an address but no coordinates', () => {
+		beforeEach(async () => {
+			await setUp({
+				item: new RecordVO({ recordId: 123, LocnVO: { city: 'Lisbon' } }),
+			});
+		});
+
+		it('should still carry the address through a save', () => {
+			component.save();
+
+			expect(dialogRef.close).toHaveBeenCalledWith({
+				location: { city: 'Lisbon', latitude: null, longitude: null },
+			});
+		});
+	});
+
+	describe('when a profile item carries the location', () => {
+		it('should read the first of its locations', async () => {
+			await setUp({
+				profileItem: { LocnVOs: [{ ...LISBON }] } as ProfileItemVOData,
+			});
+
+			expect(component.coordinates()).toEqual(LISBON);
+		});
+	});
+
+	describe('when the map input reports unreadable text', () => {
+		beforeEach(async () => {
+			await setUp({
+				item: new RecordVO({ recordId: 123, LocnVO: { ...LISBON } }),
+			});
+		});
+
+		it('should disable the confirm button', () => {
+			component.onValidityChange(false);
+			fixture.detectChanges();
+
+			expect(query<HTMLButtonElement>('.pr-btn-confirm').disabled).toBeTrue();
+		});
+
+		it('should refuse to save the pair the field is no longer showing', () => {
+			component.onValidityChange(false);
+			component.save();
+
+			expect(dialogRef.close).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('leaving the dialog', () => {
+		beforeEach(async () => {
+			await setUp({ item: new RecordVO({ recordId: 123 }) });
+		});
+
+		it('should close with nothing when cancelled', () => {
+			query<HTMLButtonElement>('.pr-btn-cancel').click();
+
+			expect(dialogRef.close).toHaveBeenCalledWith();
+		});
+
+		it('should close with nothing when dismissed from the header', () => {
+			query<HTMLButtonElement>('.pr-close-button').click();
+
+			expect(dialogRef.close).toHaveBeenCalledWith();
+		});
+
+		it('should close with the pair when saved', () => {
+			component.onCoordinatesChange(LISBON);
+			query<HTMLButtonElement>('.pr-btn-confirm').click();
+
+			expect(dialogRef.close).toHaveBeenCalledWith({ location: LISBON });
+		});
+	});
+});
diff --git a/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.ts b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.ts
new file mode 100644
index 000000000..63ea98239
--- /dev/null
+++ b/src/app/file-browser/components/coordinate-picker/coordinate-picker.component.ts
@@ -0,0 +1,84 @@
+import { Component, Inject, OnInit, Optional, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { ItemVO, LocnVOData } from '@models';
+import { ProfileItemVOData } from '@models/profile-item-vo';
+import { CoordinateMapInputComponent } from '@shared/components/coordinate-map-input/coordinate-map-input.component';
+import { DialogFrameComponent } from '@shared/components/dialog-frame/dialog-frame.component';
+import {
+	Coordinates,
+	coordinatesFromLocation,
+} from '@shared/utilities/coordinates';
+
+export interface CoordinatePickerData {
+	item?: ItemVO;
+	profileItem?: ProfileItemVOData;
+}
+
+export interface CoordinatePickerResult {
+	location: LocnVOData;
+}
+
+@Component({
+	selector: 'pr-coordinate-picker',
+	standalone: true,
+	imports: [CommonModule, CoordinateMapInputComponent, DialogFrameComponent],
+	templateUrl: './coordinate-picker.component.html',
+	styleUrls: ['./coordinate-picker.component.scss'],
+})
+export class CoordinatePickerComponent implements OnInit {
+	public item?: ItemVO;
+	public profileItem?: ProfileItemVOData;
+
+	coordinates = signal<Coordinates | null>(null);
+	isValid = signal(true);
+
+	private locationBeingEdited: LocnVOData = {};
+
+	constructor(
+		@Optional()
+		@Inject(DIALOG_DATA)
+		public dialogData?: CoordinatePickerData,
+		@Optional() private dialogRef?: DialogRef<CoordinatePickerResult>,
+	) {
+		if (this.dialogData) {
+			this.item = this.dialogData.item;
+			this.profileItem = this.dialogData.profileItem;
+		}
+	}
+
+	ngOnInit(): void {
+		const existing = this.item?.LocnVO ?? this.profileItem?.LocnVOs?.[0];
+		if (!existing) {
+			return;
+		}
+		this.locationBeingEdited = { ...existing };
+		this.coordinates.set(coordinatesFromLocation(existing));
+	}
+
+	public onCoordinatesChange(coordinates: Coordinates | null): void {
+		this.coordinates.set(coordinates);
+	}
+
+	public onValidityChange(isValid: boolean): void {
+		this.isValid.set(isValid);
+	}
+
+	public cancel(): void {
+		this.dialogRef?.close();
+	}
+
+	public save(): void {
+		if (!this.isValid()) {
+			return;
+		}
+		const coordinates = this.coordinates();
+		this.dialogRef?.close({
+			location: {
+				...this.locationBeingEdited,
+				latitude: coordinates?.latitude ?? null,
+				longitude: coordinates?.longitude ?? null,
+			},
+		});
+	}
+}

From 6e1c973201b6e731b3b8243c9caf24a7042a2d6b Mon Sep 17 00:00:00 2001
From: Daniel Schultz <slifty@gmail.com>
Date: Fri, 4 Sep 2026 11:02:39 -0400
Subject: [PATCH 6/6] Separate sidebar address and coordinate editing

The final UX for the sidebar will look quite different from this, but
we're making this change to allow interaction with both types of
location modal as we develop.

Issue #1159 Implement UX for location coordinate entry

Claude-Session: https://claude.ai/code/session_01HM1anu1T97zKvtb1TKTcfc
---
 .../core/services/edit/edit.service.spec.ts   |  19 +++
 src/app/core/services/edit/edit.service.ts    |  15 ++
 .../components/sidebar/sidebar.component.html |  83 ++++++---
 .../components/sidebar/sidebar.component.scss |  20 +++
 .../sidebar/sidebar.component.spec.ts         | 159 +++++++++++++++++-
 .../components/sidebar/sidebar.component.ts   |  71 +++++++-
 6 files changed, 339 insertions(+), 28 deletions(-)

diff --git a/src/app/core/services/edit/edit.service.spec.ts b/src/app/core/services/edit/edit.service.spec.ts
index 5b83814fe..e211e9146 100644
--- a/src/app/core/services/edit/edit.service.spec.ts
+++ b/src/app/core/services/edit/edit.service.spec.ts
@@ -16,6 +16,7 @@ import { DeviceService } from '@shared/services/device/device.service';
 import { DialogCdkService } from '@root/app/dialog-cdk/dialog-cdk.service';
 import { SharingComponent } from '@fileBrowser/components/sharing/sharing.component';
 import { SharingDialogComponent } from '@fileBrowser/components/sharing-dialog/sharing-dialog.component';
+import { CoordinatePickerComponent } from '@fileBrowser/components/coordinate-picker/coordinate-picker.component';
 import { LocationPickerComponent } from '@fileBrowser/components/location-picker/location-picker.component';
 import { UncertainLocationPickerComponent } from '@fileBrowser/components/uncertain-location-picker/uncertain-location-picker.component';
 import { FeatureFlagService } from '@root/app/feature-flag/services/feature-flag.service';
@@ -578,6 +579,24 @@ describe('EditService', () => {
 		});
 	});
 
+	describe('openCoordinateDialog', () => {
+		it('should open CoordinatePickerComponent for the item', () => {
+			const record = new RecordVO({ recordId: 123 });
+
+			service.openCoordinateDialog(record);
+
+			expect(dialogService.open).toHaveBeenCalledOnceWith(
+				CoordinatePickerComponent,
+				{
+					data: { item: record },
+					panelClass: 'dialog',
+					height: 'auto',
+					width: '640px',
+				},
+			);
+		});
+	});
+
 	describe('openShareDialog', () => {
 		const mockShareLink: ShareLink = {
 			id: 'link1',
diff --git a/src/app/core/services/edit/edit.service.ts b/src/app/core/services/edit/edit.service.ts
index 5bc8a2659..cd70035d0 100644
--- a/src/app/core/services/edit/edit.service.ts
+++ b/src/app/core/services/edit/edit.service.ts
@@ -42,6 +42,7 @@ import { PublishComponent } from '@fileBrowser/components/publish/publish.compon
 import { EditTagsComponent } from '@fileBrowser/components/edit-tags/edit-tags.component';
 import { LocationPickerComponent } from '@fileBrowser/components/location-picker/location-picker.component';
 import { UncertainLocationPickerComponent } from '@fileBrowser/components/uncertain-location-picker/uncertain-location-picker.component';
+import { CoordinatePickerComponent } from '@fileBrowser/components/coordinate-picker/coordinate-picker.component';
 import { FeatureFlagService } from '@root/app/feature-flag/services/feature-flag.service';
 import { SharingDialogComponent } from '@fileBrowser/components/sharing-dialog/sharing-dialog.component';
 import { FolderPickerService } from '../folder-picker/folder-picker.service';
@@ -647,6 +648,20 @@ export class EditService {
 		});
 	}
 
+	/**
+	 * The coordinate half of a location, which the uncertain address modal
+	 * leaves alone. Only reachable behind `uncertain-locations`, which is what
+	 * splits a location into an address and a pair in the first place.
+	 */
+	openCoordinateDialog(item: ItemVO): void {
+		this.dialog.open(CoordinatePickerComponent, {
+			data: { item },
+			panelClass: 'dialog',
+			height: 'auto',
+			width: '640px',
+		});
+	}
+
 	public async openFolderPicker(
 		items: ItemVO[],
 		operation: FolderPickerOperations,
diff --git a/src/app/file-browser/components/sidebar/sidebar.component.html b/src/app/file-browser/components/sidebar/sidebar.component.html
index 584ee8a9e..b4441e581 100644
--- a/src/app/file-browser/components/sidebar/sidebar.component.html
+++ b/src/app/file-browser/components/sidebar/sidebar.component.html
@@ -148,32 +148,71 @@
 		}
 		<div class="sidebar-item">
 			<label>Location</label>
-			<div
-				class="sidebar-item-content"
-				(click)="onLocationClick()"
-				[class.can-edit]="canEdit"
-			>
-				@if (selectedItem.LocnVO | prLocation; as location) {
-					@if (location.name) {
-						<strong>{{ location.name }}</strong>
-						<br />
+			@if (showUncertainLocations) {
+				<button
+					type="button"
+					class="sidebar-item-content sidebar-location-button"
+					[disabled]="!canEdit"
+					(click)="onCoordinateClick()"
+				>
+					@if (coordinateDisplay) {
+						<span class="sidebar-coordinates">{{ coordinateDisplay }}</span>
+					} @else {
+						<span class="sidebar-item-content-empty">
+							{{ canEdit ? 'Add coordinates…' : 'No coordinates' }}
+						</span>
 					}
-					<span>{{ location.line1 }}, {{ location.line2 }}</span>
-				}
-				@if (!selectedItem.LocnVO && !canEdit) {
-					<span class="sidebar-item-content-empty"> No location </span>
-				}
-				@if (!selectedItem.LocnVO && canEdit) {
-					<span class="sidebar-item-content-empty">
-						Click to set location
-					</span>
-				}
-			</div>
+				</button>
+				<button
+					type="button"
+					class="sidebar-item-content sidebar-location-button"
+					[disabled]="!canEdit"
+					(click)="onLocationClick()"
+				>
+					@if (addressDisplay; as address) {
+						@if (address.name) {
+							<strong>{{ address.name }}</strong>
+							@if (address.line) {
+								<br />
+							}
+						}
+						@if (address.line) {
+							<span>{{ address.line }}</span>
+						}
+					} @else {
+						<span class="sidebar-item-content-empty">
+							{{ canEdit ? 'Add a place or address…' : 'No place or address' }}
+						</span>
+					}
+				</button>
+			} @else {
+				<div
+					class="sidebar-item-content"
+					(click)="onLocationClick()"
+					[class.can-edit]="canEdit"
+				>
+					@if (selectedItem.LocnVO | prLocation; as location) {
+						@if (location.name) {
+							<strong>{{ location.name }}</strong>
+							<br />
+						}
+						<span>{{ location.line1 }}, {{ location.line2 }}</span>
+					}
+					@if (!selectedItem.LocnVO && !canEdit) {
+						<span class="sidebar-item-content-empty"> No location </span>
+					}
+					@if (!selectedItem.LocnVO && canEdit) {
+						<span class="sidebar-item-content-empty">
+							Click to set location
+						</span>
+					}
+				</div>
+			}
 			<div
 				class="sidebar-item-content"
-				(click)="onLocationClick()"
+				(click)="onMapPreviewClick()"
 				tabindex="0"
-				(keydown)="onLocationEnterPress($event)"
+				(keydown)="onMapPreviewEnterPress($event)"
 				[class.can-edit]="canEdit"
 			>
 				<pr-static-map [location]="selectedItem.LocnVO"></pr-static-map>
diff --git a/src/app/file-browser/components/sidebar/sidebar.component.scss b/src/app/file-browser/components/sidebar/sidebar.component.scss
index c50173d96..579c208da 100644
--- a/src/app/file-browser/components/sidebar/sidebar.component.scss
+++ b/src/app/file-browser/components/sidebar/sidebar.component.scss
@@ -75,6 +75,26 @@ $sidebar-thumb-height: 200px;
 	.sidebar-item-content-empty {
 		color: $text-muted;
 	}
+
+	.sidebar-coordinates {
+		white-space: pre-wrap;
+	}
+
+	.sidebar-location-button {
+		display: block;
+		width: 100%;
+		padding: 0;
+		border: none;
+		background: none;
+		font: inherit;
+		color: inherit;
+		text-align: left;
+		cursor: pointer;
+
+		&:disabled {
+			cursor: default;
+		}
+	}
 }
 
 .sidebar-detail {
diff --git a/src/app/file-browser/components/sidebar/sidebar.component.spec.ts b/src/app/file-browser/components/sidebar/sidebar.component.spec.ts
index c50ccd954..b322e19b9 100644
--- a/src/app/file-browser/components/sidebar/sidebar.component.spec.ts
+++ b/src/app/file-browser/components/sidebar/sidebar.component.spec.ts
@@ -109,6 +109,7 @@ const mockDataService = {
 
 const mockEditService = {
 	openLocationDialog: (_: any) => {},
+	openCoordinateDialog: (_: any) => {},
 	saveItemVoProperty: (_item: any, _prop: any, _value: any) => {},
 };
 
@@ -132,8 +133,10 @@ class MockAccountService {
 	}
 }
 
+let enabledFlags: string[] = [];
+
 const mockFeatureFlagService = {
-	isEnabled: (_flag: string) => false,
+	isEnabled: (flag: string) => enabledFlags.includes(flag),
 };
 
 describe('SidebarComponent', () => {
@@ -141,6 +144,7 @@ describe('SidebarComponent', () => {
 	let fixture: ComponentFixture<SidebarComponent>;
 
 	beforeEach(async () => {
+		enabledFlags = [];
 		closedSubject = new Subject<DateTimeModel | undefined>();
 
 		selectedItemsSubject = new BehaviorSubject<Set<any>>(
@@ -215,7 +219,7 @@ describe('SidebarComponent', () => {
 			'openLocationDialog',
 		).and.callThrough();
 
-		component.onLocationEnterPress(
+		component.onMapPreviewEnterPress(
 			new KeyboardEvent('keydown', { key: 'Enter' }),
 		);
 
@@ -696,4 +700,155 @@ describe('SidebarComponent', () => {
 			]);
 		});
 	});
+
+	describe('the location section', () => {
+		const getLocationButtons = (): HTMLButtonElement[] =>
+			Array.from(
+				fixture.nativeElement.querySelectorAll('.sidebar-location-button'),
+			);
+
+		describe('with uncertain locations off', () => {
+			it('should offer the one dialog that covers both halves', () => {
+				expect(component.showUncertainLocations).toBeFalse();
+				expect(getLocationButtons().length).toBe(0);
+			});
+		});
+
+		describe('with uncertain locations on', () => {
+			beforeEach(() => {
+				enabledFlags = ['uncertain-locations'];
+				fixture = TestBed.createComponent(SidebarComponent);
+				component = fixture.componentInstance;
+				component.canEdit = true;
+				fixture.detectChanges();
+			});
+
+			it('should split the coordinates and the address into their own buttons', () => {
+				const [coordinates, address] = getLocationButtons();
+
+				expect(getLocationButtons().length).toBe(2);
+				expect(coordinates.textContent.trim()).toBe('Add coordinates…');
+				expect(address.textContent.trim()).toBe('Add a place or address…');
+			});
+
+			it('should open the coordinate dialog from the coordinate button', () => {
+				const editService = TestBed.inject(EditService);
+				spyOn(editService, 'openCoordinateDialog');
+
+				getLocationButtons()[0].click();
+
+				expect(editService.openCoordinateDialog).toHaveBeenCalledWith(
+					component.selectedItem,
+				);
+			});
+
+			it('should open the address dialog from the address button', () => {
+				const editService = TestBed.inject(EditService);
+				spyOn(editService, 'openLocationDialog');
+
+				getLocationButtons()[1].click();
+
+				expect(editService.openLocationDialog).toHaveBeenCalledWith(
+					component.selectedItem,
+				);
+			});
+
+			it('should leave both buttons alone when the item is read only', () => {
+				component.canEdit = false;
+				fixture.detectChanges();
+
+				expect(getLocationButtons().map((button) => button.disabled)).toEqual([
+					true,
+					true,
+				]);
+			});
+
+			it('should write the stored pair the way the dialog writes it', () => {
+				component.selectedItem = new RecordVO({
+					LocnVO: { latitude: 38.70786, longitude: -9.400139 },
+				});
+
+				expect(component.coordinateDisplay).toBe(`38°42'28.3" N  9°24'00.5" W`);
+			});
+
+			it('should leave the address row empty when only coordinates are stored', () => {
+				component.selectedItem = new RecordVO({
+					LocnVO: { latitude: 38.70786, longitude: -9.400139 },
+				});
+
+				expect(component.addressDisplay).toBeNull();
+			});
+
+			it('should hand the address row the address parts on one line', () => {
+				component.selectedItem = new RecordVO({
+					LocnVO: {
+						sublocation: '55 Rue Plumet',
+						city: 'Lisbon',
+						country: 'Portugal',
+					},
+				});
+
+				expect(component.addressDisplay).toEqual({
+					name: null,
+					line: '55 Rue Plumet, Lisbon, Portugal',
+				});
+			});
+
+			it('should keep the coordinates out of the address row', () => {
+				component.selectedItem = new RecordVO({
+					LocnVO: {
+						country: 'Portugal',
+						latitude: 38.70786,
+						longitude: -9.400139,
+					},
+				});
+
+				expect(component.addressDisplay).toEqual({
+					name: null,
+					line: 'Portugal',
+				});
+			});
+
+			it('should show a place that has a name and nothing else', () => {
+				component.selectedItem = new RecordVO({
+					LocnVO: { name: "Grandma's house", latitude: 38.70786 },
+				});
+
+				expect(component.addressDisplay).toEqual({
+					name: "Grandma's house",
+					line: null,
+				});
+			});
+
+			it('should show a postal code the address dialog collected', () => {
+				component.selectedItem = new RecordVO({
+					LocnVO: { postalCode: '1200-109' },
+				});
+
+				expect(component.addressDisplay).toEqual({
+					name: null,
+					line: '1200-109',
+				});
+			});
+
+			it('should hand the template one stable object across checks', () => {
+				component.selectedItem = new RecordVO({
+					LocnVO: { city: 'Lisbon' },
+				});
+
+				expect(component.addressDisplay).toBe(component.addressDisplay);
+			});
+
+			it('should send the map preview to the coordinate dialog', () => {
+				const editService = TestBed.inject(EditService);
+				spyOn(editService, 'openCoordinateDialog');
+
+				component.onMapPreviewClick();
+
+				expect(editService.openCoordinateDialog).toHaveBeenCalledWith(
+					component.selectedItem,
+				);
+			});
+		});
+	});
 });
diff --git a/src/app/file-browser/components/sidebar/sidebar.component.ts b/src/app/file-browser/components/sidebar/sidebar.component.ts
index 4bc323673..e2958838b 100644
--- a/src/app/file-browser/components/sidebar/sidebar.component.ts
+++ b/src/app/file-browser/components/sidebar/sidebar.component.ts
@@ -7,7 +7,7 @@ import {
 } from '@shared/utilities/hasSubscriptions';
 import { Subscription } from 'rxjs';
 import { some } from 'lodash';
-import { ItemVO, FolderVO, ArchiveVO, AccessRole } from '@models';
+import { ItemVO, FolderVO, ArchiveVO, AccessRole, LocnVOData } from '@models';
 import { DataStatus } from '@models/data-status.enum';
 import { EditService } from '@core/services/edit/edit.service';
 import { AccountService } from '@shared/services/account/account.service';
@@ -18,10 +18,39 @@ import {
 	EdtfService,
 } from '@shared/services/edtf-service/edtf.service';
 import { MessageService } from '@shared/services/message/message.service';
+import {
+	coordinatesFromLocation,
+	formatCoordinates,
+} from '@shared/utilities/coordinates';
 import { FeatureFlagService } from '@root/app/feature-flag/services/feature-flag.service';
 import { EditDateTimeModalService } from '../edit-date-time-modal/edit-date-time-modal.service';
 
 type SidebarTab = 'info' | 'details' | 'sharing' | 'views';
+
+const ADDRESS_LINE_FIELDS = [
+	'sublocation',
+	'city',
+	'adminOneName',
+	'postalCode',
+	'country',
+] as const satisfies ReadonlyArray<keyof LocnVOData>;
+
+export interface SidebarAddressDisplay {
+	name: string | null;
+	line: string | null;
+}
+
+const toAddressDisplay = (
+	location: LocnVOData | null,
+): SidebarAddressDisplay | null => {
+	const line = ADDRESS_LINE_FIELDS.map((field) => location?.[field])
+		.filter(Boolean)
+		.join(', ');
+	const name = location?.name || null;
+
+	return name || line ? { name, line: line || null } : null;
+};
+
 @Component({
 	selector: 'pr-sidebar',
 	templateUrl: './sidebar.component.html',
@@ -50,8 +79,13 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions {
 
 	showEdtfDatePicker: boolean;
 
+	showUncertainLocations: boolean;
+
 	displayTimeObject: DateTimeModel | null = null;
 
+	private cachedAddressDisplaySource: LocnVOData | null = null;
+	private cachedAddressDisplay: SidebarAddressDisplay | null = null;
+
 	private updateDisplayTimeObject(): void {
 		const timeSource =
 			this.selectedItem?.displayTime || this.selectedItem?.displayDT;
@@ -104,6 +138,7 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions {
 	) {
 		this.currentArchive = this.accountService.getArchive();
 		this.showEdtfDatePicker = this.feature.isEnabled('edtf-date');
+		this.showUncertainLocations = this.feature.isEnabled('uncertain-locations');
 
 		this.subscriptions.push(
 			this.dataService.selectedItems$().subscribe(async (selectedItems) => {
@@ -281,15 +316,43 @@ export class SidebarComponent implements OnDestroy, HasSubscriptions {
 		}
 	}
 
+	get coordinateDisplay(): string | null {
+		const coordinates = coordinatesFromLocation(this.selectedItem?.LocnVO);
+		return coordinates ? formatCoordinates(coordinates) : null;
+	}
+
+	get addressDisplay(): SidebarAddressDisplay | null {
+		const location = this.selectedItem?.LocnVO ?? null;
+		if (location !== this.cachedAddressDisplaySource) {
+			this.cachedAddressDisplaySource = location;
+			this.cachedAddressDisplay = toAddressDisplay(location);
+		}
+		return this.cachedAddressDisplay;
+	}
+
 	onLocationClick() {
 		if (this.canEdit) {
 			this.editService.openLocationDialog(this.selectedItem);
 		}
 	}
 
-	onLocationEnterPress(e: KeyboardEvent): void {
-		if (this.canEdit && e.key === 'Enter') {
-			this.editService.openLocationDialog(this.selectedItem);
+	onCoordinateClick() {
+		if (this.canEdit) {
+			this.editService.openCoordinateDialog(this.selectedItem);
+		}
+	}
+
+	onMapPreviewClick(): void {
+		if (this.showUncertainLocations) {
+			this.onCoordinateClick();
+			return;
+		}
+		this.onLocationClick();
+	}
+
+	onMapPreviewEnterPress(e: KeyboardEvent): void {
+		if (e.key === 'Enter') {
+			this.onMapPreviewClick();
 		}
 	}