From 4f8378264ffc40e407370ef4617714df9945d6a8 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Tue, 2 Dec 2025 14:50:25 -0800
Subject: [PATCH 1/3] Improve workspaces types

---
 services/import/tdei.ts | 19 ++++++---
 services/osm.ts         | 16 +++++---
 services/pathways.ts    |  2 +-
 services/workspaces.ts  | 86 +++++++++++++++++++++++++----------------
 types/bbox.ts           |  7 ++++
 types/workspaces.ts     | 33 ++++++++++++++++
 6 files changed, 116 insertions(+), 47 deletions(-)
 create mode 100644 types/bbox.ts

diff --git a/services/import/tdei.ts b/services/import/tdei.ts
index 6ead802..32596e1 100644
--- a/services/import/tdei.ts
+++ b/services/import/tdei.ts
@@ -5,6 +5,8 @@ import { openTdeiPathwaysArchive, pathways2osc } from '~/services/pathways';
 import { TdeiClient, TdeiClientError } from '~/services/tdei';
 import { WorkspacesClient, WorkspacesClientError } from '~/services/workspaces';
 
+import type { WorkspaceCreation } from '~/types/workspaces';
+
 const status = {
   idle: 'Idle',
   createWorkspace: 'Initializing workspace...',
@@ -17,9 +19,9 @@ const status = {
 };
 
 export class TdeiImporterContext {
-  constructor() {
-    this.reset();
-  }
+  active: boolean = false;
+  status: string = status.idle;
+  error?: string;
 
   get complete(): boolean {
     return this.status === status.complete;
@@ -28,11 +30,16 @@ export class TdeiImporterContext {
   reset() {
     this.active = false;
     this.status = status.idle;
-    this.error = null;
+    this.error = undefined;
   }
 }
 
 export class TdeiImporter {
+  readonly _workspacesClient: WorkspacesClient;
+  readonly _tdeiClient: TdeiClient;
+  readonly _osmClient: OsmApiClient;
+  readonly _context: TdeiImporterContext;
+
   constructor(
     workspacesClient: WorkspacesClient,
     tdeiClient: TdeiClient,
@@ -49,7 +56,7 @@ export class TdeiImporter {
     return this._context;
   }
 
-  async import(workspace): Promise<number> {
+  async import(workspace: WorkspaceCreation): Promise<number | undefined> {
     this._context.reset();
     this._context.active = true;
 
@@ -62,7 +69,7 @@ export class TdeiImporter {
     }
   }
 
-  async _run(workspace): Promise<number> {
+  async _run(workspace: WorkspaceCreation): Promise<number> {
     // Create the workspace in parallel:
     const workspacePromise = this._workspacesClient.createWorkspace(workspace);
 
diff --git a/services/osm.ts b/services/osm.ts
index 91ef12d..9f41aea 100644
--- a/services/osm.ts
+++ b/services/osm.ts
@@ -239,15 +239,15 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     });
   }
 
-  async createWorkspace(workspaceId: number) {
+  async createWorkspace(workspaceId: WorkspaceId) {
     await this._put(`workspaces/${workspaceId}`);
   }
 
-  async deleteWorkspace(workspaceId: number) {
+  async deleteWorkspace(workspaceId: WorkspaceId) {
     await this._delete(`workspaces/${workspaceId}`);
   }
 
-  async getWorkspaceBbox(workspaceId: number) {
+  async getWorkspaceBbox(workspaceId: WorkspaceId) {
     const response = await this._get(`workspaces/${workspaceId}/bbox.json`);
 
     if (response.status === 204) {
@@ -433,7 +433,11 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     return Number(await response.text());
   }
 
-  async uploadChangeset(workspaceId: number, changesetId: number, changesetXml: string) {
+  async uploadChangeset(
+    workspaceId: WorkspaceId,
+    changesetId: number,
+    changesetXml: string
+  ) {
     await this._post(`changeset/${changesetId}/upload`, changesetXml, {
       headers: {
         'Content-Type': 'application/xml',
@@ -489,7 +493,7 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     return notesGeoJsonToEntities(await response.json());
   }
 
-  async getWorkspaceData(workspaceId: number): Promise<Array> {
+  async getWorkspaceData(workspaceId: WorkspaceId): Promise<Array> {
     const bboxParam = await this.getExportBbox(workspaceId);
     const response = await this._get(`map.json?bbox=${bboxParam}`, {
       headers: {
@@ -502,7 +506,7 @@ export class OsmApiClient extends BaseHttpClient implements ICancelableClient {
     return (await response.json()).elements;
   }
 
-  async exportWorkspaceXml(workspaceId: number): Promise<Blob> {
+  async exportWorkspaceXml(workspaceId: WorkspaceId): Promise<Blob> {
     const bboxParam = await this.getExportBbox(workspaceId);
     const response = await this._get(`map?bbox=${bboxParam}`, {
       headers: {
diff --git a/services/pathways.ts b/services/pathways.ts
index 7c546b3..ea480de 100644
--- a/services/pathways.ts
+++ b/services/pathways.ts
@@ -149,7 +149,7 @@ function makePathwayColumnMap() {
   return map;
 }
 
-export async function buildPathwaysCsvArchive(elements, gtfsFiles: Map): Blob {
+export async function buildPathwaysCsvArchive(elements, gtfsFiles?: Map): Blob {
   if (!gtfsFiles) {
     gtfsFiles = createEmptyGtfsDataset();
   }
diff --git a/services/workspaces.ts b/services/workspaces.ts
index bfed5aa..bddd87d 100644
--- a/services/workspaces.ts
+++ b/services/workspaces.ts
@@ -1,11 +1,21 @@
 import { BaseHttpClient, BaseHttpClientError } from "~/services/http";
-import type { ICancelableClient } from '~/services/loading';
-import type { OsmApiClient } from '~/services/osm';
 import { buildPathwaysCsvArchive } from '~/services/pathways';
-import type { TdeiClient } from '~/services/tdei';
 
-export function compareWorkspaceCreatedAtDesc(a, b) {
-  return b.createdAt - a.createdAt;
+import type { ICancelableClient } from '~/services/loading';
+import type { OsmApiClient } from '~/services/osm';
+import type { TdeiAuthStore, TdeiClient } from '~/services/tdei';
+import type { BoundingBox } from '~/types/bbox'
+import type {
+  QuestSettings,
+  QuestSettingsPatch,
+  Workspace,
+  WorkspaceCreation,
+  WorkspaceId,
+  WorkspacePatch
+} from '~/types/workspaces';
+
+export function compareWorkspaceCreatedAtDesc(a: Workspace, b: Workspace) {
+  return b.createdAt.getTime() - a.createdAt.getTime();
 }
 
 export class WorkspacesClientError extends Error {
@@ -33,11 +43,11 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     this.#osmClient = osmClient;
   }
 
-  get auth() {
+  get auth(): TdeiAuthStore {
     return this.#tdeiClient.auth;
   }
 
-  clone(signal?: AbortSignal) {
+  clone(signal?: AbortSignal): WorkspacesClient {
     return new WorkspacesClient(
       this._baseUrl,
       this.#tdeiClient,
@@ -46,7 +56,7 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     );
   }
 
-  async getMyWorkspaces() {
+  async getMyWorkspaces(): Promise<Workspace[]> {
     const response = await this._get('workspaces/mine');
     const workspaces = (await response.json()) ?? [];
 
@@ -58,20 +68,17 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     return workspaces;
   }
 
-  async getWorkspace(id: number) {
-    try {
-      const response = await this._get(`workspaces/${id}`);
-      return await response.json();
-    } catch (e: any) {
-      return null;
-    }
+  async getWorkspace(id: WorkspaceId): Promise<Workspace> {
+    const response = await this._get(`workspaces/${id}`);
+
+    return await response.json();
   }
 
-  getWorkspaceBbox(id: number) {
+  getWorkspaceBbox(id: WorkspaceId): Promise<BoundingBox> {
     return this.#osmClient.getWorkspaceBbox(id);
   }
 
-  async createWorkspace(workspace): Promise<number> {
+  async createWorkspace(workspace: WorkspaceCreation): Promise<WorkspaceId> {
     workspace.createdBy = this.#tdeiClient.auth.subject;
     workspace.createdByName = this.#tdeiClient.auth.displayName;
 
@@ -82,52 +89,63 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     return workspaceId;
   }
 
-  async updateWorkspace(id: number, workspaceDetails: object): Promise {
+  async updateWorkspace(id: WorkspaceId, workspaceDetails: WorkspacePatch)
+    : Promise<void>
+  {
     await this._patch(`workspaces/${id}`, workspaceDetails);
   }
 
-  async exportWorkspaceArchive(workspace): Promise<Blob> {
+  async exportWorkspaceArchive(workspace: Workspace): Promise<Blob> {
     if (workspace.type === 'pathways') {
       const elements = await this.#osmClient.getWorkspaceData(workspace.id);
       return await buildPathwaysCsvArchive(elements);
     }
 
-    const osm = await this.#osmClient.exportWorkspaceXml(workspace.id);
+    const osmXml = await this.#osmClient.exportWorkspaceXml(workspace.id);
 
-    return await this.#tdeiClient.convertDataset(osm, 'osm', 'osw', workspace.tdeiProjectGroupId);
+    return await this.#tdeiClient.convertDataset(
+      osmXml,
+      'osm',
+      'osw',
+      workspace.tdeiProjectGroupId
+    );
   }
 
-  async deleteWorkspace(id: number): Promise {
+  async deleteWorkspace(id: WorkspaceId): Promise<void> {
     await Promise.all([
       this._delete(`workspaces/${id}`),
       this.#osmClient.deleteWorkspace(id)
     ]);
   }
 
-  async getLongFormQuestSettings(workspaceId: number) {
-    const response = this._get(`workspaces/${workspaceId}/quests/long/settings`);
-    return response.then(data => {
-      // case when no existing settings exist, just show empty form
-      if(data.status === 204) return {};   
-      return data.json();
-    });
+  async getLongFormQuestSettings(id: WorkspaceId): Promise<QuestSettings> {
+    const response = await this._get(`workspaces/${id}/quests/long/settings`);
+
+    return await response.json();
   }
 
-  async saveLongFormQuestSettings(workspaceId: number, settings: object): Promise<void> {
-      this._patch(`workspaces/${workspaceId}/quests/long/settings`, settings);
+  async saveLongFormQuestSettings(id: WorkspaceId, settings: QuestSettingsPatch)
+    : Promise<void>
+  {
+    await this._patch(`workspaces/${id}/quests/long/settings`, settings);
   }
 
   async saveImageryDefSettings(workspaceId: number, settings: object): Promise<void> {
-      this._patch(`workspaces/${workspaceId}/imagery/settings`, settings);
+    await this._patch(`workspaces/${workspaceId}/imagery/settings`, settings);
   }
 
   #setAuthHeader() {
     if (this.#tdeiClient.auth.complete) {
-      this._requestHeaders.Authorization = 'Bearer ' + this.#tdeiClient.auth.accessToken;
+      this._requestHeaders.Authorization = 'Bearer ' + this.auth.accessToken;
     }
   }
 
-  override async _send(url: string, method: string, body?: any, config?: object): Promise<Response> {
+  override async _send(
+    url: string,
+    method: string,
+    body?: any,
+    config?: object
+  ): Promise<Response> {
     try {
       await this.#tdeiClient.tryRefreshAuth();
       this.#setAuthHeader();
diff --git a/types/bbox.ts b/types/bbox.ts
new file mode 100644
index 0000000..a8f080b
--- /dev/null
+++ b/types/bbox.ts
@@ -0,0 +1,7 @@
+
+export interface BoundingBox {
+  min_lat: number;
+  min_lon: number;
+  max_lat: number;
+  max_lon: number;
+}
diff --git a/types/workspaces.ts b/types/workspaces.ts
index ff9a61f..61c6615 100644
--- a/types/workspaces.ts
+++ b/types/workspaces.ts
@@ -18,3 +18,36 @@ export interface Workspace {
   externalAppAccess: WorkspaceAppAccess;
   kartaViewToken?: string;
 }
+
+export interface WorkspaceCreation {
+  type: WorkspaceType;
+  title: string;
+  description?: string;
+  tdeiRecordId?: string;
+  tdeiProjectGroupId: string;
+  tdeiServiceId?: string;
+  tdeiMetadata?: string;
+  createdBy?: string;
+  createdByName?: string;
+}
+
+export interface WorkspacePatch {
+  title?: string;
+  description?: string;
+  externalAppAccess?: WorkspaceAppAccess;
+}
+
+export type QuestSettingsType = 'JSON' | 'URL';
+
+export interface QuestSettingsPatch {
+  type: QuestSettingsType;
+  definition?: string;
+  url?: string;
+}
+
+export interface QuestSettings extends QuestSettingsPatch {
+  workspace_id: WorkspaceId;
+  modified_at: Date;
+  modified_by: string;
+  modified_by_name: string;
+}

From e25cc91a0f0fb9bd51e8e20ae3bcbd236ad480a6 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Thu, 4 Dec 2025 10:01:25 -0800
Subject: [PATCH 2/3] Replace bootstrap JS bundle with bootstrap-vue

---
 app.vue                              |   8 +-
 components/AppNavbar.vue             |  25 +++--
 components/review/FilterDropdown.vue | 119 ++++++++++----------
 nuxt.config.ts                       |   8 +-
 package-lock.json                    | 156 ++++++++++++++++++++++++++-
 package.json                         |   5 +-
 6 files changed, 239 insertions(+), 82 deletions(-)

diff --git a/app.vue b/app.vue
index e385020..e803de5 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,7 @@
 <template>
-  <nuxt-layout>
-    <nuxt-page />
-  </nuxt-layout>
+  <b-app>
+    <nuxt-layout>
+      <nuxt-page />
+    </nuxt-layout>
+  </b-app>
 </template>
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 8266eeb..b988b3a 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -29,18 +29,21 @@
         <span class="mx-auto" />
 
         <nuxt-link v-show="!auth.ok" to="/signin" class="btn">Sign In</nuxt-link>
-        <span v-show="auth.ok" class="nav-item dropdown">
-          <a class="nav-link" href="#" id="navbarAccountMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <b-dropdown
+          v-show="auth.ok"
+          class="nav-item"
+          placement="bottom-end"
+          :variant="null"
+          is-nav
+          no-caret
+        >
+          <template #button-content>
             <app-icon variant="account_circle" size="24" />{{ auth.displayName }}
-          </a>
-          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarAccountMenuLink">
-            <li>
-              <nuxt-link class="dropdown-item" to="/" @click="auth.clear()">
-                <app-icon variant="logout" class="me-3" />Logout
-              </nuxt-link>
-            </li>
-          </ul>
-        </span>
+          </template>
+          <b-dropdown-item to="/" @click="auth.clear()">
+            <app-icon variant="logout" class="me-3" />Logout
+          </b-dropdown-item>
+        </b-dropdown>
       </div>
     </div>
   </nav>
diff --git a/components/review/FilterDropdown.vue b/components/review/FilterDropdown.vue
index 1c89542..e3923b9 100644
--- a/components/review/FilterDropdown.vue
+++ b/components/review/FilterDropdown.vue
@@ -1,73 +1,72 @@
 <template>
-  <div class="dropdown ms-auto">
-    <button
-      id="reviewSettingsBtn"
-      type="button"
-      class="btn btn-light btn-sm border"
-      data-bs-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false"
-    >
+  <b-dropdown
+    class="ms-auto"
+    toggle-class="border"
+    variant="light"
+    size="sm"
+    placement="bottom-end"
+    auto-close="outside"
+    no-caret
+  >
+    <template #button-content>
       <app-icon variant="settings" no-margin />
       <span class="visually-hidden">Settings</span>
-    </button>
+    </template>
 
-    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="reviewSettingsBtn">
-      <div class="px-3 py-2">
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeChangesets"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Changesets
-          </label>
-        </div>
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeFeedback"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Feedback
-          </label>
-        </div>
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeNotes"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Notes
-          </label>
-        </div>
+    <div class="px-3 py-2">
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeChangesets"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Changesets
+        </label>
       </div>
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeFeedback"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Feedback
+        </label>
+      </div>
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeNotes"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Notes
+        </label>
+      </div>
+    </div>
 
-      <div class="dropdown-divider" />
+    <b-dropdown-divider />
 
-      <div class="px-3 py-2">
-        <div class="form-check form-switch">
-          <label class="form-check-label">
-            <input
-              v-model="filter.includeResolved"
-              type="checkbox"
-              class="form-check-input"
-            />
-            Show Resolved
-          </label>
-        </div>
+    <div class="px-3 py-2">
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="filter.includeResolved"
+            type="checkbox"
+            class="form-check-input"
+          />
+          Show Resolved
+        </label>
       </div>
+    </div>
 
-      <div class="dropdown-divider" />
+    <div class="dropdown-divider" />
 
-      <div class="px-3 py-2">
-        <button class="d-block btn btn-primary btn-sm" @click="apply">Apply</button>
-      </div>
-    </div><!-- .dropdown-menu -->
-  </div><!-- .dropdown -->
+    <div class="px-3 py-2">
+      <button class="d-block btn btn-primary btn-sm" @click="apply">Apply</button>
+    </div>
+  </b-dropdown>
 </template>
 
 <script setup lang="ts">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5aaa085..4aa93bd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,7 +3,11 @@ export default defineNuxtConfig({
   ssr: false,
   sourcemap: { client: 'hidden' },
   devtools: { enabled: true },
-  modules: ['@sentry/nuxt/module', '@nuxt/eslint'],
+  modules: [
+    '@bootstrap-vue-next/nuxt',
+    '@nuxt/eslint',
+    '@sentry/nuxt/module',
+  ],
   nitro: {
     // deal with CORS issues during development
     devProxy: {
@@ -22,8 +26,6 @@ export default defineNuxtConfig({
       ],
       script: [
         { src: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' },
-        { src: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" },
-        { src: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" }
       ]
     },
     pageTransition: { name: 'page', mode: 'out-in' }
diff --git a/package-lock.json b/package-lock.json
index a67869a..f58e24a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "workspaces",
       "hasInstallScript": true,
       "dependencies": {
+        "@bootstrap-vue-next/nuxt": "^0.43.1",
         "@osmcha/maplibre-adiff-viewer": "^1.3.1",
         "@osmcha/osmchange-parser": "^1.0.0",
         "@sentry/integrations": "^7.114.0",
@@ -15,6 +16,7 @@
         "ajv": "^8.17.1",
         "ajv-formats": "^3.0.1",
         "bootstrap": "^5.3.3",
+        "bootstrap-vue-next": "^0.43.1",
         "dayjs": "^1.11.19",
         "maplibre-gl": "^5.10.0",
         "nuxt": "^4.0.0",
@@ -29,7 +31,8 @@
         "eslint": "^9.39.2",
         "eslint-plugin-vue": "^10.6.2",
         "sass": "1.77.6",
-        "sass-loader": "^14.1.0"
+        "sass-loader": "^14.1.0",
+        "vue-component-type-helpers": "^3.2.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -435,6 +438,116 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bootstrap-vue-next/nuxt": {
+      "version": "0.43.1",
+      "resolved": "https://registry.npmjs.org/@bootstrap-vue-next/nuxt/-/nuxt-0.43.1.tgz",
+      "integrity": "sha512-h4DD0QbOHwTN1OArguoEol2HZsIULeG+ZUvoFbfrrB7vKQsbr0y20wT3fVPG4UoV9nctndqwc5hQGYjmyeCL5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.20.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap-vue-next"
+      },
+      "peerDependencies": {
+        "bootstrap-vue-next": "^0.43.1"
+      }
+    },
+    "node_modules/@bootstrap-vue-next/nuxt/node_modules/@nuxt/kit": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.1.tgz",
+      "integrity": "sha512-QORZRjcuTKgo++XP1Pc2c2gqwRydkaExrIRfRI9vFsPA3AzuHVn5Gfmbv1ic8y34e78mr5DMBvJlelUaeOuajg==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.3.3",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.8",
+        "ignore": "^7.0.5",
+        "jiti": "^2.6.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.3.0",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^3.0.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.4",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.3",
+        "unctx": "^2.5.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@bootstrap-vue-next/nuxt/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@bootstrap-vue-next/nuxt/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@bootstrap-vue-next/nuxt/node_modules/rc9": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.0.tgz",
+      "integrity": "sha512-MGOue0VqscKWQ104udASX/3GYDcKyPI4j4F8gu/jHHzglpmy9a/anZK3PNe8ug6aZFl+9GxLtdhe3kVZuMaQbA==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4",
+        "destr": "^2.0.5"
+      }
+    },
+    "node_modules/@bootstrap-vue-next/nuxt/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/@bootstrap-vue-next/nuxt/node_modules/ufo": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
+      "license": "MIT"
+    },
     "node_modules/@clack/core": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.5.0.tgz",
@@ -8178,6 +8291,34 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-vue-next": {
+      "version": "0.43.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue-next/-/bootstrap-vue-next-0.43.1.tgz",
+      "integrity": "sha512-Q+h9GO1My59jypmRgShT39EDDPEAH2qVGkJBYWxpi36MZkF7pMVzkC1F0gsOt2tVbvSFlDH4wTs843y09CeWFA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap-vue-next"
+      },
+      "peerDependencies": {
+        "@floating-ui/vue": "*",
+        "@vueuse/core": "*",
+        "vue": "^3.5.13",
+        "vue-router": "*"
+      },
+      "peerDependenciesMeta": {
+        "@floating-ui/vue": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.2",
       "license": "MIT",
@@ -14906,9 +15047,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -16771,6 +16912,13 @@
         "ufo": "^1.6.1"
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.2.4.tgz",
+      "integrity": "sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-devtools-stub": {
       "version": "0.1.0",
       "license": "MIT"
diff --git a/package.json b/package.json
index 5578ed6..fe09684 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@bootstrap-vue-next/nuxt": "^0.43.1",
     "@osmcha/maplibre-adiff-viewer": "^1.3.1",
     "@osmcha/osmchange-parser": "^1.0.0",
     "@sentry/integrations": "^7.114.0",
@@ -20,6 +21,7 @@
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.43.1",
     "dayjs": "^1.11.19",
     "maplibre-gl": "^5.10.0",
     "nuxt": "^4.0.0",
@@ -34,6 +36,7 @@
     "eslint": "^9.39.2",
     "eslint-plugin-vue": "^10.6.2",
     "sass": "1.77.6",
-    "sass-loader": "^14.1.0"
+    "sass-loader": "^14.1.0",
+    "vue-component-type-helpers": "^3.2.4"
   }
 }

From 7495bea9a3ea95f4c6dd445f2849d9a1c9b5e239 Mon Sep 17 00:00:00 2001
From: Cy Rossignol <cy@rossignols.me>
Date: Mon, 22 Dec 2025 10:15:33 -0800
Subject: [PATCH 3/3] Componentize settings and add team configuration

---
 Dockerfile                                    |   5 +-
 assets/scss/main.scss                         |   1 +
 components/ReturnToDashboardButton.vue        |  20 +
 components/settings/Nav.vue                   |  19 +
 components/settings/NavLink.vue               |  29 +
 components/settings/panel/Apps.vue            | 259 +++++++++
 components/settings/panel/Delete.vue          |  66 +++
 components/settings/panel/General.vue         |  49 ++
 components/settings/panel/Imagery.vue         | 130 +++++
 components/settings/teams/JoinDialog.vue      |  89 ++++
 components/teams/Item.vue                     |  97 ++++
 components/teams/JoinDialog.vue               |  61 +++
 components/teams/MembersDialog.vue            | 110 ++++
 components/teams/QrCode.vue                   |  34 ++
 components/teams/SettingsDialog.vue           |  93 ++++
 package-lock.json                             | 329 ++++++++++++
 package.json                                  |   3 +
 pages/workspace/[id]/settings.vue             | 496 +-----------------
 pages/workspace/[id]/settings/index.vue       |   8 +
 pages/workspace/[id]/settings/teams/index.vue | 127 +++++
 pages/workspace/[id]/teams/[teamId].vue       | 219 ++++++++
 plugins/qr-code.client.ts                     |   5 +
 services/http.ts                              |   6 +-
 services/index.ts                             |   3 +-
 services/loading.ts                           |   8 +-
 services/workspaces.ts                        |  70 ++-
 types/workspaces.ts                           |  16 +-
 util/compare.ts                               |   7 +
 util/schema.ts                                | 106 ++++
 29 files changed, 1973 insertions(+), 492 deletions(-)
 create mode 100644 components/ReturnToDashboardButton.vue
 create mode 100644 components/settings/Nav.vue
 create mode 100644 components/settings/NavLink.vue
 create mode 100644 components/settings/panel/Apps.vue
 create mode 100644 components/settings/panel/Delete.vue
 create mode 100644 components/settings/panel/General.vue
 create mode 100644 components/settings/panel/Imagery.vue
 create mode 100644 components/settings/teams/JoinDialog.vue
 create mode 100644 components/teams/Item.vue
 create mode 100644 components/teams/JoinDialog.vue
 create mode 100644 components/teams/MembersDialog.vue
 create mode 100644 components/teams/QrCode.vue
 create mode 100644 components/teams/SettingsDialog.vue
 create mode 100644 pages/workspace/[id]/settings/index.vue
 create mode 100644 pages/workspace/[id]/settings/teams/index.vue
 create mode 100644 pages/workspace/[id]/teams/[teamId].vue
 create mode 100644 plugins/qr-code.client.ts
 create mode 100644 util/compare.ts
 create mode 100644 util/schema.ts

diff --git a/Dockerfile b/Dockerfile
index 8873d09..08ca219 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,6 +6,7 @@ FROM node as builder
 ARG VITE_TDEI_API_URL
 ARG VITE_TDEI_USER_API_URL
 ARG VITE_API_URL
+ARG VITE_NEW_API_URL
 ARG VITE_OSM_URL
 ARG VITE_RAPID_URL
 ARG VITE_PATHWAYS_EDITOR_URL
@@ -29,8 +30,8 @@ COPY --from=builder /app/.output/public /usr/share/nginx/html/
 # https://stackoverflow.com/questions/44438637/arg-substitution-in-run-command-not-working-for-dockerfile
 ARG CODE_VERSION
 
-RUN echo "This is (frontend, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION"
-RUN echo "This is (frontend, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION" > /usr/share/nginx/html/VERSION
+RUN echo "This is (frontend, api, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION"
+RUN echo "This is (frontend, api, cgimap, osmrails, pathways, rapid, taskingmanager) $CODE_VERSION" > /usr/share/nginx/html/VERSION
 
 RUN chown -R nginx:nginx /usr/share/nginx/html/
 
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 2e00af6..46b42c0 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,6 +1,7 @@
 @import "theme.scss";
 @import "bootstrap/scss/bootstrap.scss";
 @import "maplibre-gl/dist/maplibre-gl.css";
+@import "vue3-toastify/dist/index.css";
 
 :root {
   --ws-create-color: $review-create-color;
diff --git a/components/ReturnToDashboardButton.vue b/components/ReturnToDashboardButton.vue
new file mode 100644
index 0000000..20193d6
--- /dev/null
+++ b/components/ReturnToDashboardButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <b-button
+    :variant="props.variant"
+    to="/dashboard"
+  >
+    Return to Dashboard
+  </b-button>
+</template>
+
+<script setup lang="ts">
+import type { BButtonProps } from 'bootstrap-vue-next/types';
+
+interface Props {
+  variant?: BButtonProps['variant'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+});
+</script>
diff --git a/components/settings/Nav.vue b/components/settings/Nav.vue
new file mode 100644
index 0000000..06482be
--- /dev/null
+++ b/components/settings/Nav.vue
@@ -0,0 +1,19 @@
+<template>
+  <nav class="list-group mb-4">
+    <settings-nav-link
+      to=""
+      icon="settings"
+    >
+      General
+    </settings-nav-link>
+    <settings-nav-link
+      to="/teams"
+      icon="group"
+    >
+      Teams
+    </settings-nav-link>
+  </nav>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/components/settings/NavLink.vue b/components/settings/NavLink.vue
new file mode 100644
index 0000000..bc592af
--- /dev/null
+++ b/components/settings/NavLink.vue
@@ -0,0 +1,29 @@
+<template>
+  <nuxt-link
+    class="list-group-item"
+    :class="{ active }"
+    :to="to"
+  >
+    <app-icon :variant="props.icon" />
+    <slot />
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+import type { Workspace } from '~/types/workspaces';
+
+interface Props {
+  to: string;
+  icon: string;
+}
+
+const props = defineProps<Props>();
+const route = useRoute();
+
+const workspace = inject<Workspace>('workspace')!;
+const to = computed(() => `/workspace/${workspace.id}/settings${props.to}`);
+
+const active = computed(() =>
+  (route.path.endsWith('/settings') && to.value.endsWith('/settings'))
+  || (!to.value.endsWith('/settings') && route.path.startsWith(to.value)));
+</script>
diff --git a/components/settings/panel/Apps.vue b/components/settings/panel/Apps.vue
new file mode 100644
index 0000000..a142729
--- /dev/null
+++ b/components/settings/panel/Apps.vue
@@ -0,0 +1,259 @@
+<template>
+  <form
+    class="card mb-4"
+    @submit.prevent="saveExternalAppConfiguration"
+  >
+    <div class="card-body border-bottom">
+      <h3 class="card-title mb-3">
+        External Apps
+      </h3>
+
+      <div class="form-check form-switch">
+        <label class="form-check-label">
+          <input
+            v-model="workspace.externalAppAccess"
+            type="checkbox"
+            class="form-check-input"
+            :true-value="1"
+            :false-value="0"
+          >
+          Publish this workspace for external apps
+        </label>
+      </div>
+
+      <hr>
+
+      <h4 class="h5">
+        AVIV ScoutRoute Long Form Quest Definitions
+      </h4>
+
+      <div class="form-check">
+        <label class="form-check-label">
+          Define quests in Workspaces
+          <input
+            v-model="longFormQuestType"
+            class="form-check-input"
+            type="radio"
+            name="longFormQuestType"
+            value="JSON"
+          >
+        </label>
+      </div>
+      <div class="form-check">
+        <label class="form-check-label">
+          Load quest definitions from an external URL
+          <input
+            v-model="longFormQuestType"
+            class="form-check-input"
+            type="radio"
+            name="longFormQuestType"
+            value="URL"
+          >
+        </label>
+      </div>
+
+      <template v-if="longFormQuestType === 'JSON'">
+        <label class="d-block form-label mt-3">
+          JSON Quest Definition
+          <textarea
+            v-model.trim="longFormQuestDef"
+            class="form-control"
+            :class="{ 'drag-over': isDraggingQuest }"
+            rows="5"
+            placeholder="Optional"
+            @dragover.prevent="isDraggingQuest = true"
+            @dragleave.prevent="isDraggingQuest = false"
+            @drop.prevent="onQuestFileDrop"
+          />
+        </label>
+        <div
+          id="imagery-help"
+          class="form-text"
+        >
+          Paste the JSON content directly or drag and drop a JSON file.
+          See the
+          <a
+            :href="longFormQuestSchemaUrl"
+            target="_blank"
+          >
+            JSON Schema
+          </a>
+          for the required format and an
+          <a
+            :href="longFormQuestExampleUrl"
+            target="_blank"
+          >
+            example
+          </a>.
+        </div>
+      </template>
+
+      <template v-else-if="longFormQuestType === 'URL'">
+        <label class="d-block form-label mt-3">
+          Quest Definition URL
+          <input
+            v-model.trim="longFormQuestUrl"
+            type="text"
+            class="form-control"
+            placeholder="https://..."
+          >
+        </label>
+        <div
+          id="imagery-help"
+          class="form-text"
+        >
+          Enter the address of a quest definition JSON document
+          See the
+          <a
+            :href="longFormQuestSchemaUrl"
+            target="_blank"
+          >
+            JSON Schema
+          </a>
+          for the required format and an
+          <a
+            :href="longFormQuestExampleUrl"
+            target="_blank"
+          >
+            example
+          </a>.
+        </div>
+      </template>
+
+      <div
+        v-if="longFormQuestError"
+        class="form-text text-danger"
+      >
+        {{ longFormQuestError }}
+      </div>
+
+      <hr>
+      <button
+        type="submit"
+        class="btn btn-primary"
+      >
+        Save
+      </button>
+      <div
+        v-if="externalAppSaveStatus"
+        :class="`mt-2 form-text text-${
+          externalAppSaveStatus.type === 'success' ? 'success' : 'danger'
+        }`"
+      >
+        {{ externalAppSaveStatus.message }}
+      </div>
+    </div><!-- .card-body -->
+  </form><!-- .card -->
+</template>
+
+<script setup lang="ts">
+import { workspacesClient } from '~/services/index';
+import { handleFileDrop, validateJson } from '~/util/schema';
+import { isHttpUrl, normalizeUrl } from '~/util/url';
+
+import type { Workspace } from '~/types/workspaces';
+
+const longFormQuestSchemaUrl = import.meta.env.VITE_LONG_FORM_QUEST_SCHEMA;
+const longFormQuestExampleUrl = import.meta.env.VITE_LONG_FORM_QUEST_EXAMPLE_URL;
+
+const workspace = inject<Workspace>('workspace')!;
+
+const [longFormQuestSettings] = await Promise.all([
+  workspacesClient.getLongFormQuestSettings(workspace.id),
+]);
+
+const longFormQuestSchema = ref<object | undefined>();
+const longFormQuestType = ref(longFormQuestSettings.type);
+const longFormQuestDef = ref(longFormQuestSettings.definition);
+const longFormQuestUrl = ref(longFormQuestSettings.url);
+const longFormQuestError = ref<string | null>(null);
+const externalAppSaveStatus = ref<{ type: 'success' | 'error'; message: string } | null>(null);
+const isDraggingQuest = ref(false);
+
+watch(
+  [
+    longFormQuestType,
+    longFormQuestDef,
+    longFormQuestUrl,
+    () => workspace.externalAppAccess,
+  ],
+  () => { clearExternalAppMessages(); },
+);
+
+function clearExternalAppMessages() {
+  longFormQuestError.value = null;
+  externalAppSaveStatus.value = null;
+}
+
+function onQuestFileDrop(event: DragEvent) {
+  handleFileDrop(event, longFormQuestDef, isDraggingQuest);
+}
+
+async function saveExternalAppConfiguration() {
+  clearExternalAppMessages();
+
+  let type = longFormQuestType.value;
+  let definition = longFormQuestDef.value;
+  let url = longFormQuestUrl.value;
+
+  if (type === 'JSON') {
+    url = undefined;
+
+    if (!definition) {
+      type = 'NONE';
+    }
+    else {
+      const validationResult = await validateJson(
+        definition,
+        longFormQuestSchemaUrl,
+        longFormQuestSchema,
+        'Long form quest definition',
+      );
+
+      if (validationResult.error) {
+        longFormQuestError.value = validationResult.error;
+        return;
+      }
+    }
+  }
+  else if (type === 'URL') {
+    definition = undefined;
+
+    if (!url) {
+      type = 'NONE';
+    }
+    else if (!isHttpUrl(url)) {
+      longFormQuestError.value = 'The URL is not valid.';
+      return;
+    }
+    else {
+      url = normalizeUrl(url);
+    }
+  }
+
+  try {
+    await Promise.all([
+      workspacesClient.updateWorkspace(workspace.id, {
+        externalAppAccess: workspace.externalAppAccess,
+      }),
+      workspacesClient.saveLongFormQuestSettings(workspace.id, {
+        type,
+        definition,
+        url,
+      }),
+    ]);
+
+    externalAppSaveStatus.value = { type: 'success', message: 'Changes saved.' };
+    longFormQuestType.value = type;
+    longFormQuestDef.value = definition;
+    longFormQuestUrl.value = url;
+  }
+  catch (e) {
+    const errorMessage = e instanceof Error ? e.message : 'unexpected error';
+    externalAppSaveStatus.value = {
+      type: 'error',
+      message: 'Failed to save changes: ' + errorMessage,
+    };
+  }
+}
+</script>
diff --git a/components/settings/panel/Delete.vue b/components/settings/panel/Delete.vue
new file mode 100644
index 0000000..fb2c4bd
--- /dev/null
+++ b/components/settings/panel/Delete.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="card mb-4 border-danger">
+    <div class="card-body">
+      <h3 class="card-title mb-3">
+        Delete Workspace
+      </h3>
+
+      <p>
+        Deleting a workspace is permanent. This action will not remove any
+        TDEI datasets outside of Workspaces.
+      </p>
+
+      <button
+        class="btn btn-outline-danger mb-3"
+        :disabled="accepted"
+        @click="acceptDelete"
+      >
+        I understand, and I want to delete this workspace
+      </button>
+
+      <template v-if="accepted">
+        <label class="d-block mb-3">
+          <strong>To confirm, please type "delete" in the box below:</strong>
+          <input
+            ref="input"
+            v-model.trim="attestation"
+            class="form-control border-danger"
+          >
+        </label>
+
+        <button
+          class="btn btn-danger"
+          :disabled="attestation !== 'delete'"
+          @click="submitDelete"
+        >
+          Delete this workspace
+        </button>
+      </template>
+    </div>
+    <!-- .card-body -->
+  </div>
+  <!-- .card -->
+</template>
+
+<script setup lang="ts">
+import { workspacesClient } from '~/services/index';
+
+import type { Workspace } from '~/types/workspaces';
+
+const workspace = inject<Workspace>('workspace')!;
+
+const accepted = ref(false);
+const attestation = ref('');
+const input = useTemplateRef<HTMLInputElement>('input');
+
+async function acceptDelete() {
+  accepted.value = true;
+  await nextTick();
+  input.value!.focus();
+}
+
+async function submitDelete() {
+  await workspacesClient.deleteWorkspace(workspace.id);
+  navigateTo('/dashboard');
+}
+</script>
diff --git a/components/settings/panel/General.vue b/components/settings/panel/General.vue
new file mode 100644
index 0000000..f3ea6f6
--- /dev/null
+++ b/components/settings/panel/General.vue
@@ -0,0 +1,49 @@
+<template>
+  <section class="card mb-4">
+    <div class="card-body">
+      <form @submit.prevent="rename">
+        <label class="d-block mb-3">
+          Workspace Title
+          <input
+            v-model.trim="workspaceName"
+            class="form-control"
+          >
+        </label>
+
+        <button
+          type="submit"
+          class="btn btn-primary"
+        >
+          Rename
+        </button>
+      </form>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { toast } from 'vue3-toastify';
+import { workspacesClient } from '~/services/index';
+
+import type { Workspace } from '~/types/workspaces';
+
+const workspace = inject<Workspace>('workspace')!;
+const workspaceName = ref(workspace.title);
+
+async function rename() {
+  try {
+    await workspacesClient.updateWorkspace(workspace.id, {
+      title: workspaceName.value,
+    });
+    toast.success('Workspace renamed successfully.');
+  }
+  catch (e) {
+    if (e instanceof Error) {
+      toast.error('Rename failed: ' + e.message);
+    }
+    else {
+      toast.error('Rename failed: unexpected error');
+    }
+  }
+}
+</script>
diff --git a/components/settings/panel/Imagery.vue b/components/settings/panel/Imagery.vue
new file mode 100644
index 0000000..e19461a
--- /dev/null
+++ b/components/settings/panel/Imagery.vue
@@ -0,0 +1,130 @@
+<template>
+  <form
+    class="card mb-4"
+    @submit.prevent="saveImageryConfiguration"
+  >
+    <div class="card-body">
+      <h3 class="card-title mb-3">
+        Custom Imagery
+      </h3>
+
+      <label class="d-block form-label">
+        Imagery JSON Definition
+        <textarea
+          v-model.trim="imageryListDef"
+          class="form-control"
+          :class="{ 'drag-over': isDraggingImagery }"
+          rows="5"
+          placeholder="Optional"
+          @dragover.prevent="isDraggingImagery = true"
+          @dragleave.prevent="isDraggingImagery = false"
+          @drop.prevent="onImageryFileDrop"
+        />
+        <div
+          id="imagery-help"
+          class="form-text"
+        >
+          Paste the JSON content directly or drag and drop a JSON file.
+          See the
+          <a
+            :href="imagerySchemaUrl"
+            target="_blank"
+          >
+            JSON Schema
+          </a>
+          for the required format and an
+          <a
+            :href="imageryExampleUrl"
+            target="_blank"
+          >
+            example
+          </a>.
+        </div>
+        <div
+          v-if="imageryError"
+          class="form-text text-danger"
+        >
+          {{ imageryError }}
+        </div>
+      </label>
+
+      <button
+        type="submit"
+        class="btn btn-primary"
+      >
+        Save
+      </button>
+      <div
+        v-if="imagerySaveStatus"
+        :class="`mt-2 form-text text-${
+          imagerySaveStatus.type === 'success' ? 'success' : 'danger'
+        }`"
+      >
+        {{ imagerySaveStatus.message }}
+      </div>
+    </div><!-- .card-body -->
+  </form><!-- .card -->
+</template>
+
+<script setup lang="ts">
+import { workspacesClient } from '~/services/index';
+import { handleFileDrop, validateJson } from '~/util/schema';
+
+import type { Workspace } from '~/types/workspaces';
+
+const workspace = inject<Workspace>('workspace')!;
+
+const imagerySchemaUrl = import.meta.env.VITE_IMAGERY_SCHEMA;
+const imageryExampleUrl = import.meta.env.VITE_IMAGERY_EXAMPLE_URL;
+
+let imageryListDefInit = '';
+
+if (Array.isArray(workspace.imageryListDef)) {
+  imageryListDefInit = JSON.stringify(workspace.imageryListDef, null, 2);
+}
+
+const imagerySchema = ref<object | undefined>();
+const imageryListDef = ref(imageryListDefInit);
+const imageryError = ref<string | null>(null);
+const imagerySaveStatus = ref<{ type: 'success' | 'error'; message: string } | null>(null);
+const isDraggingImagery = ref(false);
+
+function clearImageryMessages() {
+  imageryError.value = null;
+  imagerySaveStatus.value = null;
+}
+
+function onImageryFileDrop(event: DragEvent) {
+  handleFileDrop(event, imageryListDef, isDraggingImagery);
+}
+
+async function saveImageryConfiguration() {
+  clearImageryMessages();
+
+  const imageryResult = await validateJson(
+    imageryListDef.value,
+    imagerySchemaUrl,
+    imagerySchema,
+    'Imagery definition',
+  );
+
+  if (imageryResult.error) {
+    imageryError.value = imageryResult.error;
+    return;
+  }
+
+  try {
+    workspacesClient.updateWorkspace(workspace.id, {
+      imageryListDef: imageryResult.data,
+    });
+    imagerySaveStatus.value = { type: 'success', message: 'Changes saved.' };
+  }
+  catch (e) {
+    const errorMessage = e instanceof Error ? e.message : 'unexpected error';
+    imagerySaveStatus.value = {
+      type: 'error',
+      message: 'Failed to save changes: ' + errorMessage,
+    };
+  }
+}
+</script>
diff --git a/components/settings/teams/JoinDialog.vue b/components/settings/teams/JoinDialog.vue
new file mode 100644
index 0000000..464f572
--- /dev/null
+++ b/components/settings/teams/JoinDialog.vue
@@ -0,0 +1,89 @@
+<template>
+  <div
+    ref="modal"
+    class="modal fade"
+    tabindex="-1"
+    aria-labelledby="joinTeamDialogLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5
+            id="joinTeamDialogLabel"
+            class="modal-title"
+          >
+            Join this Team
+          </h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          />
+        </div>
+
+        <div
+          v-if="props?.team"
+          class="modal-body"
+        >
+          <qr-code
+            ref="qrCode"
+            class="d-block mx-auto border rounded-3"
+            type="image/png"
+            :width="256"
+            :color="{ dark: '#000000ff', light: '#ffffffff' }"
+            :value="joinUrl"
+            @change="updateQrCodeUrl"
+          />
+
+          <div class="text-center">
+            <small>Share this link:</small>
+          </div>
+          <div class="text-center">
+            <a
+              :href="joinUrl"
+              target="_blank"
+            >{{ joinUrl }}</a>
+          </div>
+        </div>
+
+        <div class="modal-footer justify-content-center">
+          <a
+            v-if="qrCodeUrl"
+            class="btn btn-dark"
+            :href="qrCodeUrl"
+            download="qr-code.png"
+          >
+            <app-icon variant="download" />
+            Download QR Code
+          </a>
+          <button
+            type="button"
+            class="btn btn-primary"
+            data-bs-dismiss="modal"
+          >
+            Close
+          </button>
+        </div><!-- .modal-footer -->
+      </div><!-- .modal-content -->
+    </div><!-- .modal-dialog -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WorkspaceTeam } from '~/types/workspaces';
+
+interface Props {
+  team?: WorkspaceTeam;
+}
+
+const props = defineProps<Props>();
+
+const qrCodeUrl = ref('');
+const joinUrl = computed(() => `${window.location.origin}/join-team/${props.team?.id}`);
+
+function updateQrCodeUrl(dataUrl: string) {
+  qrCodeUrl.value = dataUrl;
+}
+</script>
diff --git a/components/teams/Item.vue b/components/teams/Item.vue
new file mode 100644
index 0000000..8a231a5
--- /dev/null
+++ b/components/teams/Item.vue
@@ -0,0 +1,97 @@
+<template>
+  <li class="list-group-item d-flex">
+    <div>
+      <app-icon variant="group" />
+    </div>
+    <div>
+      <a
+        href="#"
+        class="fw-bold"
+        @click.prevent="viewMembers"
+      >
+        {{ props.team.name }}
+      </a>
+      <b-button
+        variant="link"
+        class="team-members-btn"
+        @click="viewMembers"
+      >
+        {{ props.team.member_count }} members
+      </b-button>
+    </div>
+    <div class="align-self-center flex-shrink-0 ms-auto">
+      <button
+        class="btn px-1"
+        @click="openSettings"
+      >
+        <app-icon
+          variant="settings"
+          no-margin
+        />
+        <span class="visually-hidden">Open Team Settings</span>
+      </button>
+      <button
+        class="btn ms-1 px-1"
+        @click="join"
+      >
+        <app-icon
+          variant="qr_code"
+          no-margin
+        />
+        <span class="visually-hidden">View QR Code</span>
+      </button>
+      <button
+        class="btn ms-1 px-1 text-danger"
+        @click="remove"
+      >
+        <app-icon
+          variant="delete"
+          no-margin
+        />
+        <span class="visually-hidden">Delete</span>
+      </button>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { WorkspaceTeam } from '~/types/workspaces';
+
+interface Props {
+  team: WorkspaceTeam;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['join', 'open-settings', 'remove', 'view-members']);
+
+function viewMembers() {
+  emit('view-members', props.team);
+}
+
+function openSettings() {
+  emit('open-settings', props.team);
+}
+
+function join() {
+  emit('join', props.team);
+}
+
+async function remove() {
+  emit('remove', props.team);
+}
+</script>
+
+<style lang="scss">
+@import "assets/scss/theme.scss";
+
+.team-members-btn {
+  display: block;
+  padding: 0;
+  color: $body-color;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/components/teams/JoinDialog.vue b/components/teams/JoinDialog.vue
new file mode 100644
index 0000000..878b4c3
--- /dev/null
+++ b/components/teams/JoinDialog.vue
@@ -0,0 +1,61 @@
+<template>
+  <b-modal
+    ref="modal"
+    title="Join this Team"
+  >
+    <teams-qr-code
+      v-if="props.team"
+      :workspace-id="workspace.id"
+      :team-id="props.team.id"
+      @change="updateQrCodeUrl"
+    />
+
+    <template #footer="{ hide }">
+      <a
+        v-if="qrCodeUrl"
+        class="btn btn-dark"
+        :href="qrCodeUrl"
+        :download="qrCodeFilename"
+      >
+        <app-icon variant="download" />
+        Download QR Code
+      </a>
+      <b-button
+        variant="primary"
+        @click="hide()"
+      >
+        Close
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script setup lang="ts">
+import slugify from '@sindresorhus/slugify';
+import { BModal } from 'bootstrap-vue-next/components/BModal';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+
+import type { Workspace, WorkspaceTeam } from '~/types/workspaces';
+
+interface Props {
+  team?: WorkspaceTeam;
+}
+
+const props = defineProps<Props>();
+const workspace = inject<Workspace>('workspace')!;
+const modal = useTemplateRef<ComponentExposed<typeof BModal>>('modal');
+
+const teamNameSlug = computed(() => slugify(props.team?.name ?? ''));
+const qrCodeUrl = ref('');
+const qrCodeFilename = computed(() => `team-${teamNameSlug.value}-qr-code.png`);
+
+defineExpose({ show });
+
+function show() {
+  modal.value!.show();
+}
+
+function updateQrCodeUrl(dataUrl: string) {
+  qrCodeUrl.value = dataUrl;
+}
+</script>
diff --git a/components/teams/MembersDialog.vue b/components/teams/MembersDialog.vue
new file mode 100644
index 0000000..5f94a52
--- /dev/null
+++ b/components/teams/MembersDialog.vue
@@ -0,0 +1,110 @@
+<template>
+  <b-modal
+    ref="modal"
+    title="Team Members"
+    ok-title="Close"
+    ok-only
+  >
+    <app-spinner
+      v-if="loading.active"
+      class="d-block mx-auto"
+    />
+    <b-alert
+      v-else-if="!members.length"
+      variant="info"
+      class="mt-4"
+      show
+    >
+      <app-icon variant="info" />
+      No members have been assigned to this team yet.
+    </b-alert>
+    <b-list-group v-else>
+      <b-list-group-item
+        v-for="user in members"
+        :key="user.id"
+        class="d-flex align-items-center"
+      >
+        <app-icon variant="person" />
+        {{ user.display_name }}
+
+        <div class="align-self-center flex-shrink-0 ms-auto">
+          <button
+            class="btn ms-1 px-1 py-0 text-danger"
+            @click="remove(user)"
+          >
+            <app-icon
+              variant="close"
+              no-margin
+            />
+            <span class="visually-hidden">Remove Member</span>
+          </button>
+        </div>
+      </b-list-group-item>
+    </b-list-group>
+  </b-modal>
+</template>
+
+<script setup lang="ts">
+import { BModal } from 'bootstrap-vue-next/components/BModal';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+
+import { LoadingContext } from '~/services/loading';
+import { workspacesClient } from '~/services/index';
+import type { User, Workspace, WorkspaceTeam } from '~/types/workspaces';
+
+interface Props {
+  team?: WorkspaceTeam;
+}
+
+const props = defineProps<Props>();
+const workspace = inject<Workspace>('workspace')!;
+const { create } = useModal();
+const modal = useTemplateRef<ComponentExposed<typeof BModal>>('modal');
+
+const loading = reactive(new LoadingContext());
+const members = ref<User[]>([]);
+
+defineExpose({ show });
+watch(() => props.team, onTeamChange);
+
+async function show() {
+  modal.value!.show();
+}
+
+async function onTeamChange(team?: WorkspaceTeam) {
+  members.value = [];
+
+  if (!team) {
+    return;
+  }
+
+  await loading.cancelable(workspacesClient, async (client) => {
+    members.value = await client.getTeamMembers(workspace.id, props.team!.id);
+    props.team!.member_count = members.value.length;
+  });
+}
+
+async function remove(user: User) {
+  const value = await create({
+    body: `Remove ${user.display_name} from "${props.team!.name}"?`,
+    title: 'Remove Team Member',
+    okTitle: 'Remove',
+    okVariant: 'danger',
+    cancelTitle: 'Cancel',
+    cancelVariant: 'link',
+  }).show();
+
+  if (value?.ok) {
+    const index = members.value.indexOf(user);
+
+    if (index === -1) {
+      return;
+    }
+
+    members.value.splice(index, 1);
+    props.team!.member_count--;
+
+    await workspacesClient.removeFromTeam(workspace.id, props.team!.id, user.id);
+  }
+}
+</script>
diff --git a/components/teams/QrCode.vue b/components/teams/QrCode.vue
new file mode 100644
index 0000000..4c9685e
--- /dev/null
+++ b/components/teams/QrCode.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <qr-code
+      class="d-block mx-auto mb-3 border rounded-3"
+      type="image/png"
+      :width="256"
+      :color="{ dark: '#000000ff', light: '#ffffffff' }"
+      :value="joinUrl"
+      @change="onChange"
+    />
+    <div class="text-center">
+      <small>Share this link:</small>
+    </div>
+    <div class="text-center">
+      <nuxt-link :to="joinRoute">{{ joinUrl }}</nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  workspaceId: number;
+  teamId: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['change']);
+const joinRoute = computed(() => `/workspace/${props.workspaceId}/teams/${props.teamId}`);
+const joinUrl = computed(() => `${window.location.origin}${joinRoute.value}`);
+
+function onChange(dataUrl: string) {
+  emit('change', dataUrl);
+}
+</script>
diff --git a/components/teams/SettingsDialog.vue b/components/teams/SettingsDialog.vue
new file mode 100644
index 0000000..9336fbb
--- /dev/null
+++ b/components/teams/SettingsDialog.vue
@@ -0,0 +1,93 @@
+<template>
+  <b-modal
+    ref="modal"
+    :title="title"
+  >
+    <label class="d-block">
+      Team Name
+      <b-input v-model.trim="name" />
+    </label>
+
+    <template #footer="{ cancel }">
+      <b-button
+        variant="link"
+        @click="cancel()"
+      >
+        Cancel
+      </b-button>
+      <b-button
+        type="submit"
+        variant="primary"
+        :disabled="!complete || saving.active"
+        @click="save"
+      >
+        <app-spinner
+          v-if="saving.active"
+          size="sm"
+        />
+        <template v-else-if="props.team">
+          Update
+        </template>
+        <template v-else>
+          Create
+        </template>
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script setup lang="ts">
+import { BModal } from 'bootstrap-vue-next/components/BModal';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+
+import { LoadingContext } from '~/services/loading';
+import { workspacesClient } from '~/services/index';
+import type { Workspace, WorkspaceTeam } from '~/types/workspaces';
+
+interface Props {
+  team?: WorkspaceTeam;
+}
+
+const props = defineProps<Props>();
+const workspace = inject<Workspace>('workspace')!;
+const emit = defineEmits(['created', 'updated']);
+const modal = useTemplateRef<ComponentExposed<typeof BModal>>('modal');
+
+const saving = reactive(new LoadingContext());
+const name = ref('');
+
+const title = computed(() => props.team ? 'Team Settings' : 'Create a Team');
+const complete = computed(() => name.value.length > 0);
+
+defineExpose({ show });
+
+function show() {
+  name.value = props.team?.name ?? '';
+  modal.value!.show();
+}
+
+async function save() {
+  if (props.team) {
+    await update();
+  }
+  else {
+    await create();
+  }
+
+  modal.value!.hide();
+}
+
+async function create() {
+  await saving.wrap(workspacesClient, async (client) => {
+    const newId = await client.createTeam(workspace.id, name.value);
+    emit('created', newId);
+  });
+}
+
+async function update() {
+  await saving.wrap(workspacesClient, async (client) => {
+    await client.updateTeam(workspace.id, props.team!.id, name.value);
+    emit('updated');
+  });
+}
+</script>
diff --git a/package-lock.json b/package-lock.json
index f58e24a..8f3f8ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@osmcha/osmchange-parser": "^1.0.0",
         "@sentry/integrations": "^7.114.0",
         "@sentry/nuxt": "^10.31.0",
+        "@sindresorhus/slugify": "^3.0.0",
         "@zip.js/zip.js": "^2.7.41",
         "ajv": "^8.17.1",
         "ajv-formats": "^3.0.1",
@@ -22,11 +23,13 @@
         "nuxt": "^4.0.0",
         "papaparse": "^5.5.1",
         "vue": "^3.4.19",
+        "vue-qrcode": "^2.2.2",
         "vue-router": "^4.2.5",
         "vue3-toastify": "^0.2.8"
       },
       "devDependencies": {
         "@nuxt/eslint": "^1.12.1",
+        "@types/bootstrap": "^5.2.10",
         "@types/geojson": "^7946.0.16",
         "eslint": "^9.39.2",
         "eslint-plugin-vue": "^10.6.2",
@@ -6502,6 +6505,34 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@sindresorhus/slugify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-3.0.0.tgz",
+      "integrity": "sha512-SCrKh1zS96q+CuH5GumHcyQEVPsM4Ve8oE0E6tw7AAhGq50K8ojbTUOQnX/j9Mhcv/AXiIsbCfquovyGOo5fGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/transliterate": "^2.0.0",
+        "escape-string-regexp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/transliterate": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-2.3.1.tgz",
+      "integrity": "sha512-gVaaGtKYMYAMmI8buULVH3A2TXVJ98QiwGwI7ddrWGuGidGC2uRt4FHs22+8iROJ0QTzju9CuMjlVsrvpqsdhA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@speed-highlight/core": {
       "version": "1.2.7",
       "license": "CC0-1.0"
@@ -6619,6 +6650,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -8582,6 +8623,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "license": "MIT",
@@ -9346,6 +9396,15 @@
         "callsite": "^1.0.0"
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -9620,6 +9679,12 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "license": "MIT",
@@ -13632,6 +13697,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/p-wait-for": {
       "version": "5.0.2",
       "license": "MIT",
@@ -13870,6 +13944,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -14473,6 +14556,218 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "license": "BSD-3-Clause",
@@ -14742,6 +15037,12 @@
         "node": ">=9.3.0 || >=8.10.0 <9.0.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/require-package-name": {
       "version": "2.0.1",
       "license": "MIT"
@@ -15105,6 +15406,12 @@
         "node": ">= 18"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -16948,6 +17255,22 @@
         "eslint": "^8.57.0 || ^9.0.0"
       }
     },
+    "node_modules/vue-qrcode": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vue-qrcode/-/vue-qrcode-2.2.2.tgz",
+      "integrity": "sha512-SbrXq/mSb1g2tbDyXPe9gy9KiMYsvxWKRErlpij1BqiFoHwQckheZV63CTw6yRLLUVG2RXAVlX+APkpdCK7SQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/rxts"
+      },
+      "peerDependencies": {
+        "qrcode": "^1.0.0",
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.1",
       "license": "MIT",
@@ -17254,6 +17577,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.20",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
diff --git a/package.json b/package.json
index fe09684..596255b 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@osmcha/osmchange-parser": "^1.0.0",
     "@sentry/integrations": "^7.114.0",
     "@sentry/nuxt": "^10.31.0",
+    "@sindresorhus/slugify": "^3.0.0",
     "@zip.js/zip.js": "^2.7.41",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -27,11 +28,13 @@
     "nuxt": "^4.0.0",
     "papaparse": "^5.5.1",
     "vue": "^3.4.19",
+    "vue-qrcode": "^2.2.2",
     "vue-router": "^4.2.5",
     "vue3-toastify": "^0.2.8"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.12.1",
+    "@types/bootstrap": "^5.2.10",
     "@types/geojson": "^7946.0.16",
     "eslint": "^9.39.2",
     "eslint-plugin-vue": "^10.6.2",
diff --git a/pages/workspace/[id]/settings.vue b/pages/workspace/[id]/settings.vue
index 3858e8c..3ab0e6c 100644
--- a/pages/workspace/[id]/settings.vue
+++ b/pages/workspace/[id]/settings.vue
@@ -1,498 +1,30 @@
 <template>
   <app-page>
-    <h2 class="mb-5">Workspace Settings</h2>
+    <h2 class="mb-4">
+      Workspace Settings
+    </h2>
 
-    <div class="col-lg-8">
-      <div class="card mb-4">
-        <div class="card-body">
-          <h3 class="card-title mb-3">General</h3>
-
-          <form @submit.prevent="rename">
-            <label class="d-block mb-3">
-              Workspace Title
-              <input v-model.trim="workspaceName" class="form-control" />
-            </label>
-
-            <button type="submit" class="btn btn-primary">Rename</button>
-          </form>
-        </div>
-        <!-- .card-body -->
+    <div class="row align-items-start">
+      <div class="col-lg-3">
+        <settings-nav />
       </div>
-      <!-- .card -->
-
-      <form class="card mb-4" @submit.prevent="saveExternalAppConfiguration">
-        <div class="card-body border-bottom">
-          <h3 class="card-title mb-3">External Apps</h3>
-
-          <div class="form-check form-switch">
-            <label class="form-check-label">
-              <input
-                v-model="workspace.externalAppAccess"
-                type="checkbox"
-                class="form-check-input"
-                :true-value="1"
-                :false-value="0"
-              />
-              Publish this workspace for external apps
-            </label>
-          </div>
-
-          <hr>
-
-          <h4 class="h5">AVIV ScoutRoute Long Form Quest Definitions</h4>
-
-          <div class="form-check">
-            <label class="form-check-label">
-              Define quests in Workspaces
-              <input
-                v-model="longFormQuestType"
-                class="form-check-input"
-                type="radio"
-                name="longFormQuestType"
-                value="JSON"
-              >
-            </label>
-          </div>
-          <div class="form-check">
-            <label class="form-check-label">
-              Load quest definitions from an external URL
-              <input
-                v-model="longFormQuestType"
-                class="form-check-input"
-                type="radio"
-                name="longFormQuestType"
-                value="URL"
-              >
-            </label>
-          </div>
-
-          <template v-if="longFormQuestType === 'JSON'">
-            <label class="d-block form-label mt-3">
-              JSON Quest Definition
-              <textarea
-                v-model.trim="longFormQuestDef"
-                class="form-control"
-                :class="{ 'drag-over': isDraggingQuest }"
-                rows="5"
-                placeholder="Optional"
-                @dragover.prevent="isDraggingQuest = true"
-                @dragleave.prevent="isDraggingQuest = false"
-                @drop.prevent="onQuestFileDrop"
-              />
-            </label>
-            <div id="imagery-help" class="form-text">
-              Paste the JSON content directly or drag and drop a JSON file.
-              See the
-              <a :href="longFormQuestSchemaUrl" target="_blank">JSON Schema</a>
-              for the required format and an
-              <a :href="longFormQuestExampleUrl" target="_blank">example</a>.
-            </div>
-          </template>
-
-          <template v-else-if="longFormQuestType === 'URL'">
-            <label class="d-block form-label mt-3">
-              Quest Definition URL
-              <input
-                v-model.trim="longFormQuestUrl"
-                type="text"
-                class="form-control"
-                placeholder="https://..."
-              />
-            </label>
-            <div id="imagery-help" class="form-text">
-              Enter the address of a quest definition JSON document
-              See the
-              <a :href="longFormQuestSchemaUrl" target="_blank">JSON Schema</a>
-              for the required format and an
-              <a :href="longFormQuestExampleUrl" target="_blank">example</a>.
-            </div>
-          </template>
-
-          <div v-if="longFormQuestError" class="form-text text-danger">
-            {{ longFormQuestError }}
-          </div>
-
-          <hr>
-          <button type="submit" class="btn btn-primary">Save</button>
-          <div
-            v-if="externalAppSaveStatus"
-            :class="`mt-2 form-text text-${
-              externalAppSaveStatus.type === 'success' ? 'success' : 'danger'
-            }`"
-          >
-            {{ externalAppSaveStatus.message }}
-          </div>
-        </div><!-- .card-body -->
-      </form><!-- .card -->
-
-      <form class="card mb-4" @submit.prevent="saveImageryConfiguration">
-        <div class="card-body">
-          <h3 class="card-title mb-3">Custom Imagery</h3>
-
-          <label class="d-block form-label">
-            Imagery JSON Definition
-            <textarea
-              v-model.trim="imageryListDef"
-              class="form-control"
-              :class="{ 'drag-over': isDraggingImagery }"
-              rows="5"
-              placeholder="Optional"
-              @dragover.prevent="isDraggingImagery = true"
-              @dragleave.prevent="isDraggingImagery = false"
-              @drop.prevent="onImageryFileDrop"
-            />
-            <div id="imagery-help" class="form-text">
-              Paste the JSON content directly or drag and drop a JSON file.
-              See the
-              <a :href="imagerySchemaUrl" target="_blank">JSON Schema</a>
-              for the required format and an
-              <a :href="imageryExampleUrl" target="_blank">example</a>.
-            </div>
-            <div v-if="imageryError" class="form-text text-danger">
-              {{ imageryError }}
-            </div>
-          </label>
-
-          <button type="submit" class="btn btn-primary">Save</button>
-          <div
-            v-if="imagerySaveStatus"
-            :class="`mt-2 form-text text-${
-              imagerySaveStatus.type === 'success' ? 'success' : 'danger'
-            }`"
-          >
-            {{ imagerySaveStatus.message }}
-          </div>
-        </div><!-- .card-body -->
-      </form><!-- .card -->
-
-      <div class="card mb-4 border-danger">
-        <div class="card-body">
-          <h3 class="card-title mb-3">Delete Workspace</h3>
-
-          <p>
-            Deleting a workspace is permanent. This action will not remove any
-            TDEI datasets outside of Workspaces.
-          </p>
-
-          <button
-            class="btn btn-outline-danger mb-3"
-            :disabled="deleteAccepted"
-            @click="acceptDelete"
-          >
-            I understand, and I want to delete this workspace
-          </button>
 
-          <template v-if="deleteAccepted">
-            <label class="d-block mb-3">
-              <strong>To confirm, please type "delete" in the box below:</strong>
-              <input
-                ref="deleteAttestationInput"
-                v-model.trim="deleteAttestation"
-                class="form-control border-danger"
-              />
-            </label>
-
-            <button
-              class="btn btn-danger"
-              :disabled="deleteAttestation !== 'delete'"
-              @click="submitDelete"
-            >
-              Delete this workspace
-            </button>
-          </template>
-        </div>
-        <!-- .card-body -->
-      </div>
-      <!-- .card -->
-    </div>
-    <!-- .col -->
+      <nuxt-page />
+    </div><!-- .row -->
   </app-page>
 </template>
 
 <script setup lang="ts">
-import { LoadingContext } from "~/services/loading";
-import { workspacesClient } from "~/services/index";
-import { isHttpUrl, normalizeUrl } from '~/util/url';
-
-import type { Ref } from "vue";
-import { toast } from "vue3-toastify";
-import "vue3-toastify/dist/index.css";
-import Ajv from "ajv";
-import addFormats from "ajv-formats";
+import { workspacesClient } from '~/services/index';
 
 const route = useRoute();
-const workspaceId = route.params.id;
-const [workspace, longFormQuestSettings] = await Promise.all([
-  workspacesClient.getWorkspace(workspaceId),
-  workspacesClient.getLongFormQuestSettings(workspaceId)
-]);
-
-const workspaceName = ref(workspace.title);
-
-const longFormQuestType = ref(longFormQuestSettings.type);
-const longFormQuestDef = ref(longFormQuestSettings.definition);
-const longFormQuestUrl = ref(longFormQuestSettings.url);
-const longFormQuestError = ref<string | null>(null);
-const externalAppSaveStatus = ref<{ type: "success" | "error"; message: string } | null>(null);
-const isDraggingQuest = ref(false);
-
-let imageryListDefInit: string = "";
-if (Array.isArray(workspace.imageryListDef)) {
-  imageryListDefInit = JSON.stringify(workspace.imageryListDef, null, 2);
-}
-const imageryListDef = ref(imageryListDefInit);
-const imageryError = ref<string | null>(null);
-const imagerySaveStatus = ref<{ type: "success" | "error"; message: string } | null>(null);
-const isDraggingImagery = ref(false);
-
-const deleteAccepted = ref(false);
-const deleteAttestation = ref("");
-const deleteAttestationInput = ref(null);
+const workspaceId = Number(route.params.id);
+const workspace = await workspacesClient.getWorkspace(workspaceId);
 
-watch(
-  [
-    longFormQuestType,
-    longFormQuestDef,
-    longFormQuestUrl,
-    () => workspace.externalAppAccess
-  ],
-  () => { clearExternalAppMessages(); }
-);
-watch(imageryListDef, () => { clearExternalAppMessages(); });
-
-function clearExternalAppMessages() {
-  longFormQuestError.value = null;
-  externalAppSaveStatus.value = null;
-}
-
-function clearImageryMessages() {
-  imageryError.value = null;
-  externalAppSaveStatus.value = null;
-}
-
-async function save(details) {
-  await workspacesClient.updateWorkspace(workspaceId, details);
-}
-
-async function rename() {
-  try {
-    await save({ title: workspaceName.value });
-  } catch (e) {
-    toast.error("Workspace rename failed:" + e.message);
-    return;
-  }
-  toast.success("Workspace renamed successfully.");
-}
-
-const imagerySchemaUrl = import.meta.env.VITE_IMAGERY_SCHEMA;
-const imageryExampleUrl = import.meta.env.VITE_IMAGERY_EXAMPLE_URL;
-const longFormQuestSchemaUrl = import.meta.env.VITE_LONG_FORM_QUEST_SCHEMA;
-const longFormQuestExampleUrl = import.meta.env.VITE_LONG_FORM_QUEST_EXAMPLE_URL;
-
-const imagerySchema = ref<any>(null);
-const longFormQuestSchema = ref<any>(null);
-
-function handleFileDrop(
-  event: DragEvent,
-  targetRef: Ref<string>,
-  isDraggingRef: Ref<boolean>
-) {
-  isDraggingRef.value = false;
-  const files = event.dataTransfer?.files;
-  if (files && files[0]) {
-    const file = files[0];
-    if (!file.type.includes("json") && !file.name.endsWith(".json")) {
-      toast.error("Please drop a valid JSON file.");
-      return;
-    }
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      if (typeof e.target?.result === "string") {
-        try {
-          const parsed = JSON.parse(e.target.result);
-          targetRef.value = JSON.stringify(parsed, null, 2);
-          toast.success("JSON file loaded successfully.");
-        } catch (err) {
-          targetRef.value = e.target.result;
-          toast.warn("The selected file is not valid JSON.");
-        }
-      }
-    };
-    reader.onerror = () => {
-      toast.error("Failed to read the file.");
-    };
-    reader.readAsText(file);
-  }
-}
-
-function onImageryFileDrop(event: DragEvent) {
-  handleFileDrop(event, imageryListDef, isDraggingImagery);
-}
-
-function onQuestFileDrop(event: DragEvent) {
-  handleFileDrop(event, longFormQuestDef, isDraggingQuest);
-}
-
-async function validateJson(
-  jsonString: string | undefined,
-  schemaUrl: string,
-  cachedSchema: Ref<any>,
-  definitionName: string
-): Promise<{ data: any | null; error: string | null }> {
-  if (!jsonString) {
-    return { data: null, error: null };
-  }
-
-  try {
-    if (!cachedSchema.value) {
-      const schemaResponse = await fetch(schemaUrl);
-      if (!schemaResponse.ok) {
-        throw new Error(
-          `Could not fetch ${definitionName.toLowerCase()} schema: ${
-            schemaResponse.statusText
-          }`
-        );
-      }
-      cachedSchema.value = await schemaResponse.json();
-      // remove "version" from the schema if exists
-      // we have version in long form quest schema which is creating problem while validating with json.
-      if (cachedSchema.value.version) {
-        delete cachedSchema.value.version;
-      }
-    }
-
-    let parsedJson;
-    try {
-      parsedJson = JSON.parse(jsonString);
-    } catch (e: any) {
-      return {
-        data: null,
-        error: `${definitionName} is not valid JSON: ${e.message}`,
-      };
-    }
-
-    const ajv = new Ajv({ allErrors: true });
-    addFormats(ajv);
-    const validate = ajv.compile(cachedSchema.value);
-    const valid = validate(parsedJson);
-    if (!valid) {
-      return {
-        data: null,
-        error: `${definitionName} JSON is not valid: ${ajv.errorsText(
-          validate.errors
-        )}`,
-      };
-    }
-
-    return { data: parsedJson, error: null };
-  } catch (e: any) {
-    return {
-      data: null,
-      error: `Failed to validate ${definitionName.toLowerCase()}: ${e.message}`,
-    };
-  }
-}
-
-async function saveExternalAppConfiguration() {
-  clearExternalAppMessages();
-
-  let type = longFormQuestType.value;
-  let definition = longFormQuestDef.value;
-  let url = longFormQuestUrl.value;
-
-  if (type === 'JSON') {
-    url = null;
-
-    if (!definition) {
-      type = 'NONE'
-    } else {
-      const validationResult = await validateJson(
-        definition,
-        longFormQuestSchemaUrl,
-        longFormQuestSchema,
-        'Long form quest definition'
-      );
-
-      if (validationResult.error) {
-        longFormQuestError.value = validationResult.error;
-        return;
-      }
-    }
-  } else if (type === 'URL') {
-    definition = null;
-
-    if (!url) {
-      type = 'NONE'
-    } else if (!isHttpUrl(url)) {
-      longFormQuestError.value = 'The URL is not valid.';
-      return;
-    } else {
-      url = normalizeUrl(url);
-    }
-  }
-
-  try {
-    await Promise.all([
-      save({ externalAppAccess: workspace.externalAppAccess }),
-      workspacesClient.saveLongFormQuestSettings(workspaceId, {
-        type,
-        definition,
-        url
-      })
-    ]);
-
-    externalAppSaveStatus.value = { type: 'success', message: 'Changes saved.' };
-    longFormQuestType.value = type;
-    longFormQuestDef.value = definition;
-    longFormQuestUrl.value = url;
-  } catch (e) {
-    externalAppSaveStatus.value = {
-      type: 'error',
-      message: 'Failed to save changes: ' + e.message,
-    };
-  }
-}
-
-async function saveImageryConfiguration() {
-  clearImageryMessages();
-
-  const imageryResult = await validateJson(
-    imageryListDef.value,
-    imagerySchemaUrl,
-    imagerySchema,
-    "Imagery definition"
-  );
-
-  if (imageryResult.error) {
-    imageryError.value = imageryResult.error;
-    return;
-  }
-
-  try {
-    // FIXME: make both the legacy and the new backend API calls to handle both cases until we
-    // fully deprecate the old API.
-    await save({ imageryListDef: imageryResult.data });
-    workspacesClient.saveImageryDefSettings(workspaceId, { definition: imageryResult.data })
-    
-    imagerySaveStatus.value = { type: "success", message: "Changes saved." };
-  } catch (e) {
-    imagerySaveStatus.value = {
-      type: "error",
-      message: "Failed to save changes: " + e.message,
-    };
-  }
-}
-
-async function acceptDelete() {
-  deleteAccepted.value = true;
-  await nextTick();
-  deleteAttestationInput.value.focus();
-}
+provide('workspace', workspace);
+</script>
 
-async function submitDelete() {
-  await workspacesClient.deleteWorkspace(workspaceId);
-  navigateTo("/dashboard");
-}
+<script lang="ts">
 </script>
 
 <style scoped>
diff --git a/pages/workspace/[id]/settings/index.vue b/pages/workspace/[id]/settings/index.vue
new file mode 100644
index 0000000..5cd0a17
--- /dev/null
+++ b/pages/workspace/[id]/settings/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="col-lg-8">
+    <settings-panel-general />
+    <settings-panel-apps />
+    <settings-panel-imagery />
+    <settings-panel-delete />
+  </div>
+</template>
diff --git a/pages/workspace/[id]/settings/teams/index.vue b/pages/workspace/[id]/settings/teams/index.vue
new file mode 100644
index 0000000..0b3df9f
--- /dev/null
+++ b/pages/workspace/[id]/settings/teams/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="col-lg-8">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h3 class="mb-0">
+        Teams
+      </h3>
+      <b-button
+        variant="primary"
+        class="flex-shrink-0"
+        @click="openNewDialog"
+      >
+        <app-icon variant="add" /> New Team
+      </b-button>
+    </div>
+
+    <b-alert
+      v-if="!teams.length"
+      variant="info"
+      class="mt-4"
+      show
+    >
+      <app-icon variant="info" />
+      No teams exist in this workspace.
+    </b-alert>
+    <b-list-group v-else>
+      <teams-item
+        v-for="team in teams"
+        :key="team.id"
+        :team="team"
+        @join="openJoinDialog"
+        @open-settings="openSettingsDialog"
+        @remove="remove"
+        @view-members="openMembersDialog"
+      />
+    </b-list-group>
+
+    <teams-settings-dialog
+      ref="settingsDialog"
+      :team="selectedTeam"
+      @created="onSaved"
+      @updated="onSaved"
+    />
+    <teams-members-dialog
+      ref="membersDialog"
+      :team="selectedTeam"
+    />
+    <teams-join-dialog
+      ref="joinDialog"
+      :team="selectedTeam"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useModal } from 'bootstrap-vue-next/composables/useModal';
+
+import { workspacesClient } from '~/services/index';
+
+import type TeamsJoinDialog from '~/components/teams/JoinDialog.vue';
+import type TeamsMembersDialog from '~/components/teams/MembersDialog.vue';
+import type TeamsSettingsDialog from '~/components/teams/SettingsDialog.vue';
+import type { WorkspaceTeam } from '~/types/workspaces';
+
+const { create } = useModal();
+const route = useRoute();
+const workspaceId = Number(route.params.id);
+const teams = ref<WorkspaceTeam[]>([]);
+const selectedTeam = ref<WorkspaceTeam | undefined>();
+
+const joinTeamDialog = useTemplateRef<typeof TeamsJoinDialog>('joinDialog');
+const membersDialog = useTemplateRef<typeof TeamsMembersDialog>('membersDialog');
+const settingsDialog = useTemplateRef<typeof TeamsSettingsDialog>('settingsDialog');
+
+await refresh();
+
+async function refresh() {
+  teams.value = await workspacesClient.getTeams(workspaceId);
+}
+
+async function openNewDialog() {
+  selectedTeam.value = undefined;
+  await nextTick();
+  settingsDialog.value!.show();
+}
+
+async function openSettingsDialog(team: WorkspaceTeam) {
+  selectedTeam.value = team;
+  await nextTick();
+  settingsDialog.value!.show();
+}
+
+function openMembersDialog(team: WorkspaceTeam) {
+  selectedTeam.value = team;
+  membersDialog.value!.show();
+}
+
+function openJoinDialog(team: WorkspaceTeam) {
+  selectedTeam.value = team;
+  joinTeamDialog.value!.show();
+}
+
+async function onSaved() {
+  await refresh();
+}
+
+async function remove(team: WorkspaceTeam) {
+  const value = await create({
+    body: `Are you sure you want to delete "${team.name}"?`,
+    title: 'Delete Team',
+    okTitle: 'Delete',
+    okVariant: 'danger',
+    cancelTitle: 'Cancel',
+    cancelVariant: 'link',
+  }).show();
+
+  if (value?.ok) {
+    const index = teams.value.indexOf(team);
+
+    if (index === -1) {
+      return;
+    }
+
+    teams.value.splice(index, 1);
+    await workspacesClient.deleteTeam(workspaceId, team.id);
+  }
+}
+</script>
diff --git a/pages/workspace/[id]/teams/[teamId].vue b/pages/workspace/[id]/teams/[teamId].vue
new file mode 100644
index 0000000..d76da41
--- /dev/null
+++ b/pages/workspace/[id]/teams/[teamId].vue
@@ -0,0 +1,219 @@
+<template>
+  <app-page v-if="notFound">
+    <div class="text-center mt-5">
+      <app-icon
+        variant="sentiment_dissatisfied"
+        size="48"
+        no-margin
+      />
+    </div>
+    <h1 class="h4 mt-2 mb-5 text-center">
+      Team not found
+    </h1>
+    <p class="text-center mb-4">
+      This team may not exist anymore, or you may need to ask your team leader
+      for access to the project group.
+    </p>
+    <div class="text-center">
+      <return-to-dashboard-button />
+    </div>
+  </app-page>
+
+  <app-page v-else>
+    <div class="text-center mt-5">
+      <app-icon
+        variant="diversity_3"
+        size="48"
+        no-margin
+      />
+    </div>
+    <h1 class="mb-5 text-center">
+      Join Team
+    </h1>
+
+    <b-row align-v="start">
+      <b-col
+        md="6"
+        xl="5"
+        xxl="4"
+        offset-xl="1"
+        offset-xxl="2"
+      >
+        <b-card class="mb-3">
+          <div v-if="!joined">
+            You've been invited to join a team:
+            <div class="h3">
+              {{ team!.name }}
+            </div>
+            <b-button
+              variant="primary"
+              :disabled="saving.active"
+              @click="join"
+            >
+              <app-spinner
+                v-if="saving.active"
+                size="sm"
+              />
+              <template v-else>
+                <app-icon variant="how_to_reg" /> Join Team
+              </template>
+            </b-button>
+          </div>
+          <div v-else>
+            <div class="h3">
+              {{ team!.name }}
+            </div>
+            <div class="mb-3">
+              You already joined this team.
+            </div>
+            <b-button
+              variant="danger"
+              :disabled="saving.active"
+              @click="leave"
+            >
+              <app-spinner
+                v-if="saving.active"
+                size="sm"
+              />
+              <template v-else>
+                <app-icon variant="logout" /> Leave Team
+              </template>
+            </b-button>
+          </div>
+        </b-card>
+
+        <b-card class="mb-3">
+          <template #header>
+            <h2 class="h5 mb-0">
+              <app-icon
+                variant="edit_location_alt"
+                size="24"
+              /> Workspace
+            </h2>
+          </template>
+
+          <nuxt-link :to="workspaceRoute">
+            {{ workspace?.title }}
+          </nuxt-link>
+        </b-card>
+
+        <b-card
+          class="mb-3"
+          no-body
+        >
+          <template #header>
+            <h2 class="h5 mb-0">
+              <app-icon
+                variant="people_alt"
+                size="24"
+              /> On the team
+            </h2>
+          </template>
+
+          <b-list-group
+            v-if="members?.length"
+            flush
+          >
+            <b-list-group-item
+              v-for="u in members"
+              :key="u.id"
+            >
+              <app-icon variant="person" /> {{ u.display_name }}
+            </b-list-group-item>
+          </b-list-group>
+          <div
+            v-else
+            class="p-3"
+          >
+            No one here yet. Be the first to join!
+          </div>
+        </b-card>
+      </b-col>
+
+      <b-col
+        md="6"
+        xl="5"
+        xxl="4"
+      >
+        <b-card class="mb-3">
+          <template #header>
+            <h2 class="h5 mb-0">
+              <app-icon
+                variant="group_add"
+                size="24"
+              /> Invite more teammates
+            </h2>
+          </template>
+
+          <teams-qr-code
+            :workspace-id="workspaceId"
+            :team-id="teamId"
+          />
+        </b-card>
+      </b-col>
+    </b-row>
+  </app-page>
+</template>
+
+<script setup lang="ts">
+import { LoadingContext } from '~/services/loading';
+import { tdeiAuth, workspacesClient } from '~/services/index';
+import { WorkspacesClientError } from '~/services/workspaces';
+
+import type { Workspace, WorkspaceTeam, User } from '~/types/workspaces';
+
+const route = useRoute();
+const workspaceId = Number(route.params.id);
+const teamId = Number(route.params.teamId);
+const loading = reactive(new LoadingContext());
+const saving = reactive(new LoadingContext());
+
+let workspace: Workspace | undefined;
+let team: WorkspaceTeam | undefined;
+const members = ref<User[] | undefined>();
+let notFound = false;
+
+try {
+  await loading.cancelable(workspacesClient, async (client) => {
+    const responses = await Promise.all([
+      client.getWorkspace(workspaceId),
+      client.getTeam(workspaceId, teamId),
+      client.getTeamMembers(workspaceId, teamId),
+    ]);
+    workspace = responses[0];
+    team = responses[1];
+    members.value = responses[2];
+  });
+}
+catch (e: unknown) {
+  if (e instanceof WorkspacesClientError && e.response.status === 404) {
+    notFound = true;
+  }
+  else {
+    throw e;
+  }
+}
+
+const joined = computed(() => members.value?.some(u => u.auth_uid === tdeiAuth.subject));
+const workspaceRoute = computed(() => `/dashboard?workspace=${workspaceId}`);
+
+async function join() {
+  await saving.wrap(workspacesClient, async (client) => {
+    const user = await client.joinTeam(workspaceId, teamId);
+    members.value!.push(user);
+  });
+
+  members.value!.sort();
+}
+
+async function leave() {
+  const member = members.value!.find(u => u.auth_uid === tdeiAuth.subject);
+
+  await saving.wrap(workspacesClient, async (client) => {
+    await client.removeFromTeam(workspaceId, teamId, member!.id);
+  });
+
+  const index = members.value!.indexOf(member!);
+  members.value!.splice(index, 1);
+}
+</script>
diff --git a/plugins/qr-code.client.ts b/plugins/qr-code.client.ts
new file mode 100644
index 0000000..0ab729f
--- /dev/null
+++ b/plugins/qr-code.client.ts
@@ -0,0 +1,5 @@
+import VueQrCode from 'vue-qrcode';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('qr-code', VueQrCode);
+});
diff --git a/services/http.ts b/services/http.ts
index 26e9223..3e818b4 100644
--- a/services/http.ts
+++ b/services/http.ts
@@ -29,15 +29,15 @@ export abstract class BaseHttpClient {
     return this._send(url, 'GET', undefined, config);
   }
 
-  _post(url: string, body: any, config?: object): Promise<Response> {
+  _post(url: string, body?: any, config?: object): Promise<Response> {
     return this._send(url, 'POST', body, config);
   }
 
-  _put(url: string, body: any, config?: object): Promise<Response> {
+  _put(url: string, body?: any, config?: object): Promise<Response> {
     return this._send(url, 'PUT', body, config);
   }
 
-  _patch(url: string, body: any, config?: object): Promise<Response> {
+  _patch(url: string, body?: any, config?: object): Promise<Response> {
     return this._send(url, 'PATCH', body, config);
   }
 
diff --git a/services/index.ts b/services/index.ts
index c298ef7..9cc0bfa 100644
--- a/services/index.ts
+++ b/services/index.ts
@@ -16,6 +16,7 @@ import { WorkspacesClient } from '~/services/workspaces';
 const tdeiApiUrl = import.meta.env.VITE_TDEI_API_URL;
 const tdeiUserApiUrl = import.meta.env.VITE_TDEI_USER_API_URL;
 const apiUrl = import.meta.env.VITE_API_URL;
+const newApiUrl = import.meta.env.VITE_NEW_API_URL;
 const osmWebUrl = import.meta.env.VITE_OSM_URL;
 const osmApiUrl = osmWebUrl + 'api/0.6/';
 const rapidUrl = import.meta.env.VITE_RAPID_URL;
@@ -27,7 +28,7 @@ export const tdeiUserClient = new TdeiUserClient(tdeiUserApiUrl, tdeiClient);
 tdeiClient.restartAutoAuthRefresh();
 
 export const osmClient = new OsmApiClient(osmWebUrl, osmApiUrl, tdeiClient);
-export const workspacesClient = new WorkspacesClient(apiUrl, tdeiClient, osmClient);
+export const workspacesClient = new WorkspacesClient(apiUrl, newApiUrl, tdeiClient, osmClient);
 
 const oscCacheTtl = 1000 * 60 * 60 * 24 * 45; // 45 days
 const adiffCacheTtl = oscCacheTtl;
diff --git a/services/loading.ts b/services/loading.ts
index ced7b73..29dc69d 100644
--- a/services/loading.ts
+++ b/services/loading.ts
@@ -43,6 +43,12 @@ export class LoadingContext {
     this._abortController = new AbortController();
     const cancelableClient = client.clone(this.abortSignal) as T;
 
-    await this.wrap(cancelableClient, tx);
+    try {
+      await this.wrap(cancelableClient, tx);
+    }
+    catch (e: unknown) {
+      this._abortController.abort();
+      throw e;
+    }
   }
 }
diff --git a/services/workspaces.ts b/services/workspaces.ts
index bddd87d..2397ac3 100644
--- a/services/workspaces.ts
+++ b/services/workspaces.ts
@@ -1,5 +1,6 @@
 import { BaseHttpClient, BaseHttpClientError } from "~/services/http";
 import { buildPathwaysCsvArchive } from '~/services/pathways';
+import { compareStringAsc } from '~/util/compare';
 
 import type { ICancelableClient } from '~/services/loading';
 import type { OsmApiClient } from '~/services/osm';
@@ -8,10 +9,12 @@ import type { BoundingBox } from '~/types/bbox'
 import type {
   QuestSettings,
   QuestSettingsPatch,
+  User,
   Workspace,
   WorkspaceCreation,
   WorkspaceId,
-  WorkspacePatch
+  WorkspacePatch,
+  WorkspaceTeam,
 } from '~/types/workspaces';
 
 export function compareWorkspaceCreatedAtDesc(a: Workspace, b: Workspace) {
@@ -30,9 +33,11 @@ export class WorkspacesClientError extends Error {
 export class WorkspacesClient extends BaseHttpClient implements ICancelableClient {
   #tdeiClient: TdeiClient;
   #osmClient: OsmApiClient;
+  #newApiUrl: string;
 
   constructor(
     apiUrl: string,
+    newApiUrl: string,
     tdeiClient: TdeiClient,
     osmClient: OsmApiClient,
     signal?: AbortSignal
@@ -41,15 +46,28 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
 
     this.#tdeiClient = tdeiClient;
     this.#osmClient = osmClient;
+    this.#newApiUrl = newApiUrl;
   }
 
   get auth(): TdeiAuthStore {
     return this.#tdeiClient.auth;
   }
 
+  // Transitional helper for migration to a new API backend
+  get #newApi() {
+    return new WorkspacesClient(
+      this.#newApiUrl,
+      this.#newApiUrl,
+      this.#tdeiClient,
+      this.#osmClient,
+      this._abortSignal
+    );
+  }
+
   clone(signal?: AbortSignal): WorkspacesClient {
     return new WorkspacesClient(
       this._baseUrl,
+      this.#newApiUrl,
       this.#tdeiClient,
       this.#osmClient,
       signal ?? this._abortSignal
@@ -134,6 +152,56 @@ export class WorkspacesClient extends BaseHttpClient implements ICancelableClien
     await this._patch(`workspaces/${workspaceId}/imagery/settings`, settings);
   }
 
+  async getTeams(id: WorkspaceId): Promise<WorkspaceTeam[]> {
+    const response = await this.#newApi._get(`workspaces/${id}/teams`);
+
+    return (await response.json())
+      .sort(compareStringAsc<WorkspaceTeam>(t => t.name));
+  }
+
+  async getTeam(id: WorkspaceId, teamId: number): Promise<WorkspaceTeam> {
+    const response = await this.#newApi._get(`workspaces/${id}/teams/${teamId}`);
+
+    return await response.json();
+  }
+
+  async createTeam(id: WorkspaceId, name: string): Promise<number> {
+    const response = await this.#newApi._post(`workspaces/${id}/teams`, {
+      name,
+    });
+
+    return Number(await response.text());
+  }
+
+  async updateTeam(id: WorkspaceId, teamId: number, name: string): Promise<void> {
+    await this.#newApi._put(`workspaces/${id}/teams/${teamId}`, { name });
+  }
+
+  async deleteTeam(id: WorkspaceId, teamId: number): Promise<void> {
+    await this.#newApi._delete(`workspaces/${id}/teams/${teamId}`);
+  }
+
+  async getTeamMembers(id: WorkspaceId, teamId: number): Promise<User[]> {
+    const response = await this.#newApi._get(`workspaces/${id}/teams/${teamId}/members`);
+
+    return (await response.json())
+      .sort(compareStringAsc<User>(u => u.display_name));
+  }
+
+  async joinTeam(id: WorkspaceId, teamId: number): Promise<User> {
+    const response = await this.#newApi._post(`workspaces/${id}/teams/${teamId}/members`);
+
+    return await response.json();
+  }
+
+  async addToTeam(id: WorkspaceId, teamId: number, userId: number): Promise<void> {
+    await this.#newApi._put(`workspaces/${id}/teams/${teamId}/members/${userId}`);
+  }
+
+  async removeFromTeam(id: WorkspaceId, teamId: number, userId: number): Promise<void> {
+    await this.#newApi._delete(`workspaces/${id}/teams/${teamId}/members/${userId}`);
+  }
+
   #setAuthHeader() {
     if (this.#tdeiClient.auth.complete) {
       this._requestHeaders.Authorization = 'Bearer ' + this.auth.accessToken;
diff --git a/types/workspaces.ts b/types/workspaces.ts
index 61c6615..0b0a08e 100644
--- a/types/workspaces.ts
+++ b/types/workspaces.ts
@@ -1,4 +1,3 @@
-
 export type WorkspaceId = number;
 export type WorkspaceType = 'osw' | 'pathways';
 export type WorkspaceAppAccess = 0 | 1 | 2;
@@ -37,7 +36,7 @@ export interface WorkspacePatch {
   externalAppAccess?: WorkspaceAppAccess;
 }
 
-export type QuestSettingsType = 'JSON' | 'URL';
+export type QuestSettingsType = 'NONE' | 'JSON' | 'URL';
 
 export interface QuestSettingsPatch {
   type: QuestSettingsType;
@@ -51,3 +50,16 @@ export interface QuestSettings extends QuestSettingsPatch {
   modified_by: string;
   modified_by_name: string;
 }
+
+export interface WorkspaceTeam {
+  id: number;
+  name: string;
+  member_count: number;
+}
+
+export interface User {
+  id: number;
+  auth_uid: string;
+  email: string;
+  display_name: string;
+}
diff --git a/util/compare.ts b/util/compare.ts
new file mode 100644
index 0000000..65afd28
--- /dev/null
+++ b/util/compare.ts
@@ -0,0 +1,7 @@
+export function compareStringAsc<T>(propFn: (t: T) => string): (a: T, b: T) => number {
+  return (a, b) => propFn(a).localeCompare(propFn(b));
+}
+
+export function compareStringDesc<T>(propFn: (t: T) => string): (a: T, b: T) => number {
+  return (a, b) => propFn(b).localeCompare(propFn(a));
+}
diff --git a/util/schema.ts b/util/schema.ts
new file mode 100644
index 0000000..38c98a7
--- /dev/null
+++ b/util/schema.ts
@@ -0,0 +1,106 @@
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
+import { toast } from 'vue3-toastify';
+
+export function handleFileDrop(
+  event: DragEvent,
+  targetRef: Ref<string | undefined>,
+  isDraggingRef: Ref<boolean>,
+) {
+  isDraggingRef.value = false;
+  const files = event.dataTransfer?.files;
+  if (files && files[0]) {
+    const file = files[0];
+    if (!file.type.includes('json') && !file.name.endsWith('.json')) {
+      toast.error('Please drop a valid JSON file.');
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (typeof e.target?.result === 'string') {
+        try {
+          const parsed = JSON.parse(e.target.result);
+          targetRef.value = JSON.stringify(parsed, null, 2);
+          toast.success('JSON file loaded successfully.');
+        }
+        catch {
+          targetRef.value = e.target.result;
+          toast.warn('The selected file is not valid JSON.');
+        }
+      }
+    };
+    reader.onerror = () => {
+      toast.error('Failed to read the file.');
+    };
+    reader.readAsText(file);
+  }
+}
+
+export async function validateJson(
+  jsonString: string | undefined,
+  schemaUrl: string,
+  cachedSchema: Ref<{ version?: number }>,
+  definitionName: string,
+): Promise<{ data: object | null; error: string | null }> {
+  if (!jsonString) {
+    return { data: null, error: null };
+  }
+
+  try {
+    if (!cachedSchema.value) {
+      const schemaResponse = await fetch(schemaUrl);
+      if (!schemaResponse.ok) {
+        throw new Error(
+          `Could not fetch ${definitionName.toLowerCase()} schema: ${
+            schemaResponse.statusText
+          }`,
+        );
+      }
+      cachedSchema.value = await schemaResponse.json();
+      // Remove "version" from the schema if exists. We have version in long
+      // form quest schema which is creating problem while validating with
+      // json.
+      if (cachedSchema.value.version) {
+        delete cachedSchema.value.version;
+      }
+    }
+
+    let parsedJson;
+    try {
+      parsedJson = JSON.parse(jsonString);
+    }
+    catch (e: unknown) {
+      let error = `${definitionName} is not valid JSON`;
+
+      if (typeof e === 'object' && e && 'message' in e) {
+        error += `: ${e.message}`;
+      }
+
+      return { data: null, error };
+    }
+
+    const ajv = new Ajv({ allErrors: true });
+    addFormats(ajv);
+    const validate = ajv.compile(cachedSchema.value);
+    const valid = validate(parsedJson);
+    if (!valid) {
+      return {
+        data: null,
+        error: `${definitionName} JSON is not valid: ${ajv.errorsText(
+          validate.errors,
+        )}`,
+      };
+    }
+
+    return { data: parsedJson, error: null };
+  }
+  catch (e: unknown) {
+    let error = `Failed to validate ${definitionName.toLowerCase()}`;
+
+    if (typeof e === 'object' && e && 'message' in e) {
+      error += `: ${e.message}`;
+    }
+
+    return { data: null, error };
+  }
+}