Fix plugin (again)

Fixes #6

.eslintrc.cjs

@@ -8,11 +8,11 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "eslint-config-prettier"
   ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: ['./tsconfig.json'],
+    project: ["./tsconfig.json"]
   },
-  ignorePatterns: ["src-tauri/**/*"],
+  ignorePatterns: ["src-tauri/**/*", "plugins/**/*"],
   settings: {
     react: {
       version: "detect"
@@ -25,13 +25,13 @@ module.exports = {
     }
   },
   rules: {
-    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/no-autofocus": "off",
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "off",
     "@typescript-eslint/consistent-type-imports": ["error", {
       prefer: "type-imports",
       disallowTypeAnnotations: true,
       fixStyle: "separate-type-imports"
-    }],
+    }]
   }
 };

.github/workflows/artifacts.yml

@@ -3,16 +3,22 @@ on:
   push:
     tags: [ v* ]
 
+permissions: write-all
+
 jobs:
   build-artifacts:
     strategy:
       fail-fast: false
       matrix:
         include:
-          - os: macos-latest
+          - os: macos-12
             target: aarch64-apple-darwin
           - os: macos-latest
             target: x86_64-apple-darwin
+          - os: windows-2022
+            target: x86_64-pc-windows-msvc
+          - os: ubuntu-20.04
+            target: x86_64-unknown-linux-gnu
 
     runs-on: ${{ matrix.os }}
 
@@ -34,7 +40,7 @@ jobs:
           node-version: 18
           cache: 'npm'
       - name: install dependencies (ubuntu only)
-        if: matrix.os == 'ubuntu-latest'
+        if: matrix.os == 'ubuntu-20.04'
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
@@ -54,6 +60,7 @@ jobs:
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
         with:
           tagName: 'v__VERSION__'

.gitignore

@@ -22,5 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.eslintcache
 
 *.sqlite

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.nvmrc

@@ -1 +1 @@
-18
+20

.sqllsrc.json

@@ -0,0 +1,5 @@
+{
+  "name": "yaak-dev",
+  "adapter": "sqlite3",
+  "filename": "src-tauri/db.sqlite"
+}

Makefile

@@ -0,0 +1,13 @@
+.PHONY: sqlx-prepare, dev, migrate, build
+
+sqlx-prepare:
+	cd src-tauri && cargo sqlx prepare --database-url 'sqlite://db.sqlite'
+
+dev:
+	npm run tauri-dev
+
+migrate:
+	cd src-tauri && cargo sqlx migrate run --database-url 'sqlite://db.sqlite?mode=rw'
+
+build:
+	./node_modules/.bin/tauri build

README.md

@@ -10,7 +10,7 @@ npm run tauri-dev
 
 # Migration commands
 cd src-tauri
-cargo sqlx migrate add <name>
+cargo sqlx migrate add ${MIGRATION_NAME}
 cargo sqlx migrate run --database-url 'sqlite://db.sqlite?mode=rw'
 cargo sqlx prepare --database-url 'sqlite://db.sqlite'
 ```

package.json

@@ -13,11 +13,11 @@
     "build:icon": "tauri icon src-tauri/icons/icon.png",
     "build:frontend": "vite build",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@codemirror/commands": "^6.2.1",
-    "@codemirror/lang-html": "^6.4.2",
     "@codemirror/lang-javascript": "^6.1.4",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-xml": "^6.0.2",
@@ -33,14 +33,15 @@
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.28.0",
     "@tanstack/react-query-persist-client": "^4.28.0",
-    "@tauri-apps/api": "^1.2.0",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@tauri-apps/api": "^1.5.1",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.2",
-    "cm6-graphql": "^0.0.4-canary-b30a2325.0",
+    "cm6-graphql": "^0.0.9",
     "codemirror": "^6.0.1",
     "focus-trap-react": "^10.1.1",
     "format-graphql": "^1.4.0",
     "framer-motion": "^9.0.4",
+    "papaparse": "^5.4.1",
     "parse-color": "^1.0.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
@@ -53,8 +54,9 @@
   },
   "devDependencies": {
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-    "@tauri-apps/cli": "^1.2.2",
+    "@tauri-apps/cli": "^1.5.4",
     "@types/node": "^18.7.10",
+    "@types/papaparse": "^5.3.7",
     "@types/parse-color": "^1.0.1",
     "@types/parse-json": "^4.0.0",
     "@types/react": "^18.0.31",
@@ -62,6 +64,7 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
@@ -69,6 +72,8 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.0.2",
     "postcss": "^8.4.21",
     "postcss-nesting": "^11.2.1",
     "prettier": "^2.8.4",
@@ -78,5 +83,9 @@
     "vite-plugin-svgr": "^2.4.0",
     "vite-plugin-top-level-await": "^1.2.4",
     "vitest": "^0.29.2"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --cache --fix",
+    "*.{js,css,md}": "prettier --write"
   }
 }

rustfmt.toml

@@ -0,0 +1 @@
+edition = "2018"

src-tauri/Cargo.toml

@@ -15,23 +15,36 @@ tauri-build = { version = "1.2", features = [] }
 
 [target.'cfg(target_os = "macos")'.dependencies]
 objc = "0.2.7"
-cocoa = "0.24.1"
+cocoa = "0.25.0"
 
 [dependencies]
-serde_json = { version = "1.0", features = ["raw_value"] }
-serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["config-toml", "devtools", "shell-open", "system-tray", "updater", "window-start-dragging"] }
-http = "0.2.8"
-reqwest = { version = "0.11.14", features = ["json"] }
-tokio = { version = "1.25.0", features = ["sync"] }
-futures = "0.3.26"
-deno_core = "0.178.0"
-deno_ast = { version = "0.25.0", features = ["transpiling"] }
-sqlx = { version = "0.6.2", features = ["sqlite", "runtime-tokio-rustls", "json", "chrono", "time", "offline"] }
-uuid = "1.3.0"
-rand = "0.8.5"
-chrono = { version = "0.4.23", features = ["serde"] }
 base64 = "0.21.0"
+boa_engine = "0.17.3"
+boa_runtime = "0.17.3"
+chrono = { version = "0.4.23", features = ["serde"] }
+futures = "0.3.26"
+http = "0.2.8"
+rand = "0.8.5"
+reqwest = { version = "0.11.14", features = ["json"] }
+serde = { version = "1.0", features = ["derive"] }
+serde_json = { version = "1.0", features = ["raw_value"] }
+sqlx = { version = "0.6.2", features = ["sqlite", "runtime-tokio-rustls", "json", "chrono", "time", "offline"] }
+tauri = { version = "1.3", features = [
+    "cli",
+    "config-toml",
+    "devtools",
+    "fs-read-file",
+    "os-all",
+    "protocol-asset",
+    "shell-open",
+    "system-tray",
+    "updater",
+    "window-start-dragging",
+    "dialog-open",
+] }
+tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
+tokio = { version = "1.25.0", features = ["sync"] }
+uuid = "1.3.0"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/migrations/20230413232435_response-body-blob.sql

@@ -0,0 +1,5 @@
+DELETE FROM main.http_responses;
+ALTER TABLE http_responses DROP COLUMN body;
+ALTER TABLE http_responses ADD COLUMN body BLOB;
+ALTER TABLE http_responses ADD COLUMN body_path TEXT;
+ALTER TABLE http_responses ADD COLUMN content_length INTEGER;

src-tauri/migrations/20231022205109_environments.sql

@@ -0,0 +1,15 @@
+CREATE TABLE environments
+(
+    id          TEXT                               NOT NULL
+        PRIMARY KEY,
+    model       TEXT     DEFAULT 'workspace'       NOT NULL,
+    created_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at  DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at  DATETIME,
+    workspace_id TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    name        TEXT                               NOT NULL,
+    data        TEXT                               NOT NULL
+        DEFAULT '{}'
+);

src-tauri/migrations/20231028161007_variables.sql

@@ -0,0 +1,2 @@
+ALTER TABLE environments DROP COLUMN data;
+ALTER TABLE environments ADD COLUMN variables DEFAULT '[]' NOT NULL;

src-tauri/migrations/20231103004111_workspace-variables.sql

@@ -0,0 +1 @@
+ALTER TABLE workspaces ADD COLUMN variables DEFAULT '[]' NOT NULL;

src-tauri/migrations/20231103142807_folders.sql

@@ -0,0 +1,19 @@
+CREATE TABLE folders
+(
+    id            TEXT                               NOT NULL
+        PRIMARY   KEY,
+    model         TEXT     DEFAULT 'folder'          NOT NULL,
+    created_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at    DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    deleted_at    DATETIME,
+    workspace_id  TEXT                               NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id     TEXT                               NULL
+        REFERENCES folders
+            ON DELETE CASCADE,
+    name          TEXT                               NOT NULL,
+    sort_priority REAL     DEFAULT 0                 NOT NULL
+);
+
+ALTER TABLE http_requests ADD COLUMN folder_id TEXT REFERENCES folders(id) ON DELETE CASCADE;

src-tauri/plugins/hello-world/greet.js

@@ -0,0 +1,4 @@
+export function greet() {
+  // Call Rust-provided fn!
+  sayHello('Plugin');
+}

src-tauri/plugins/hello-world/index.js

@@ -0,0 +1,7 @@
+import { greet } from './greet.js';
+
+export function hello() {
+  greet();
+  console.log('Try JSON parse', JSON.parse(`{ "hello": 123 }`).hello);
+  console.log('Try RegExp', '123'.match(/[\d]+/));
+}

src-tauri/plugins/insomnia-importer/out/index.js

@@ -0,0 +1,156 @@
+function O(e, t) {
+  return (
+    console.log('IMPORTING Environment', e._id, e.name, JSON.stringify(e, null, 2)),
+    {
+      id: e._id,
+      createdAt: new Date(e.created ?? Date.now()).toISOString().replace('Z', ''),
+      updatedAt: new Date(e.updated ?? Date.now()).toISOString().replace('Z', ''),
+      workspaceId: t,
+      model: 'environment',
+      name: e.name,
+      variables: Object.entries(e.data).map(([i, s]) => ({
+        enabled: !0,
+        name: i,
+        value: `${s}`,
+      })),
+    }
+  );
+}
+function g(e) {
+  return d(e) && e._type === 'workspace';
+}
+function y(e) {
+  return d(e) && e._type === 'request_group';
+}
+function _(e) {
+  return d(e) && e._type === 'request';
+}
+function I(e) {
+  return d(e) && e._type === 'environment';
+}
+function d(e) {
+  return Object.prototype.toString.call(e) === '[object Object]';
+}
+function h(e) {
+  return Object.prototype.toString.call(e) === '[object String]';
+}
+function N(e) {
+  return Object.entries(e).map(([t, i]) => ({
+    enabled: !0,
+    name: t,
+    value: `${i}`,
+  }));
+}
+function c(e) {
+  return h(e) ? e.replaceAll(/{{\s*(_\.)?([^}]+)\s*}}/g, '${[$2]}') : e;
+}
+function D(e, t, i = 0) {
+  var a, u;
+  console.log('IMPORTING REQUEST', e._id, e.name, JSON.stringify(e, null, 2));
+  let s = null,
+    n = null;
+  ((a = e.body) == null ? void 0 : a.mimeType) === 'application/graphql'
+    ? ((s = 'graphql'), (n = c(e.body.text)))
+    : ((u = e.body) == null ? void 0 : u.mimeType) === 'application/json' &&
+      ((s = 'application/json'), (n = c(e.body.text)));
+  let p = null,
+    o = {};
+  return (
+    e.authentication.type === 'bearer'
+      ? ((p = 'bearer'),
+        (o = {
+          token: c(e.authentication.token),
+        }))
+      : e.authentication.type === 'basic' &&
+        ((p = 'basic'),
+        (o = {
+          username: c(e.authentication.username),
+          password: c(e.authentication.password),
+        })),
+    {
+      id: e._id,
+      createdAt: new Date(e.created ?? Date.now()).toISOString().replace('Z', ''),
+      updatedAt: new Date(e.updated ?? Date.now()).toISOString().replace('Z', ''),
+      workspaceId: t,
+      folderId: e.parentId === t ? null : e.parentId,
+      model: 'http_request',
+      sortPriority: i,
+      name: e.name,
+      url: c(e.url),
+      body: n,
+      bodyType: s,
+      authentication: o,
+      authenticationType: p,
+      method: e.method,
+      headers: (e.headers ?? []).map(({ name: m, value: r, disabled: f }) => ({
+        enabled: !f,
+        name: m,
+        value: r,
+      })),
+    }
+  );
+}
+function w(e, t) {
+  return (
+    console.log('IMPORTING Workspace', e._id, e.name, JSON.stringify(e, null, 2)),
+    {
+      id: e._id,
+      createdAt: new Date(e.created ?? Date.now()).toISOString().replace('Z', ''),
+      updatedAt: new Date(e.updated ?? Date.now()).toISOString().replace('Z', ''),
+      model: 'workspace',
+      name: e.name,
+      variables: t,
+    }
+  );
+}
+function b(e, t) {
+  return (
+    console.log('IMPORTING FOLDER', e._id, e.name, JSON.stringify(e, null, 2)),
+    {
+      id: e._id,
+      createdAt: new Date(e.created ?? Date.now()).toISOString().replace('Z', ''),
+      updatedAt: new Date(e.updated ?? Date.now()).toISOString().replace('Z', ''),
+      folderId: e.parentId === t ? null : e.parentId,
+      workspaceId: t,
+      model: 'folder',
+      name: e.name,
+    }
+  );
+}
+function T(e) {
+  const t = JSON.parse(e);
+  if (!d(t)) return;
+  const { _type: i, __export_format: s } = t;
+  if (i !== 'export' || s !== 4 || !Array.isArray(t.resources)) return;
+  const n = {
+      workspaces: [],
+      requests: [],
+      environments: [],
+      folders: [],
+    },
+    p = t.resources.filter(g);
+  for (const o of p) {
+    console.log('IMPORTING WORKSPACE', o.name);
+    const a = t.resources.find((r) => I(r) && r.parentId === o._id);
+    console.log('FOUND BASE ENV', a.name),
+      n.workspaces.push(w(o, a ? N(a.data) : [])),
+      console.log('IMPORTING ENVIRONMENTS', a.name);
+    const u = t.resources.filter((r) => I(r) && r.parentId === (a == null ? void 0 : a._id));
+    console.log('FOUND', u.length, 'ENVIRONMENTS'),
+      n.environments.push(...u.map((r) => O(r, o._id)));
+    const m = (r) => {
+      const f = t.resources.filter((l) => l.parentId === r);
+      let S = 0;
+      for (const l of f)
+        y(l) ? (n.folders.push(b(l, o._id)), m(l._id)) : _(l) && n.requests.push(D(l, o._id, S++));
+    };
+    m(o._id);
+  }
+  return (
+    (n.requests = n.requests.filter(Boolean)),
+    (n.environments = n.environments.filter(Boolean)),
+    (n.workspaces = n.workspaces.filter(Boolean)),
+    n
+  );
+}
+export { T as pluginHookImport };

src-tauri/plugins/insomnia-importer/src/helpers/types.js

@@ -0,0 +1,23 @@
+export function isWorkspace(obj) {
+  return isJSObject(obj) && obj._type === 'workspace';
+}
+
+export function isRequestGroup(obj) {
+  return isJSObject(obj) && obj._type === 'request_group';
+}
+
+export function isRequest(obj) {
+  return isJSObject(obj) && obj._type === 'request';
+}
+
+export function isEnvironment(obj) {
+  return isJSObject(obj) && obj._type === 'environment';
+}
+
+export function isJSObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+export function isJSString(obj) {
+  return Object.prototype.toString.call(obj) === '[object String]';
+}

src-tauri/plugins/insomnia-importer/src/helpers/variables.js

@@ -0,0 +1,18 @@
+import { isJSString } from './types.js';
+
+export function parseVariables(data) {
+  return Object.entries(data).map(([name, value]) => ({
+    enabled: true,
+    name,
+    value: `${value}`,
+  }));
+}
+
+/**
+ * Convert Insomnia syntax to Yaak syntax
+ * @param {string} variable - Text to convert
+ */
+export function convertSyntax(variable) {
+  if (!isJSString(variable)) return variable;
+  return variable.replaceAll(/{{\s*(_\.)?([^}]+)\s*}}/g, '${[$2]}');
+}

src-tauri/plugins/insomnia-importer/src/importers/environment.js

@@ -0,0 +1,21 @@
+/**
+ * Import an Insomnia environment object.
+ * @param {Object} e - The environment object to import.
+ * @param workspaceId - Workspace to import into.
+ */
+export function importEnvironment(e, workspaceId) {
+  console.log('IMPORTING Environment', e._id, e.name, JSON.stringify(e, null, 2));
+  return {
+    id: e._id,
+    createdAt: new Date(e.created ?? Date.now()).toISOString().replace('Z', ''),
+    updatedAt: new Date(e.updated ?? Date.now()).toISOString().replace('Z', ''),
+    workspaceId,
+    model: 'environment',
+    name: e.name,
+    variables: Object.entries(e.data).map(([name, value]) => ({
+      enabled: true,
+      name,
+      value: `${value}`,
+    })),
+  };
+}

src-tauri/plugins/insomnia-importer/src/importers/folder.js

@@ -0,0 +1,17 @@
+/**
+ * Import an Insomnia folder object.
+ * @param {Object} f - The environment object to import.
+ * @param workspaceId - Workspace to import into.
+ */
+export function importFolder(f, workspaceId) {
+  console.log('IMPORTING FOLDER', f._id, f.name, JSON.stringify(f, null, 2));
+  return {
+    id: f._id,
+    createdAt: new Date(f.created ?? Date.now()).toISOString().replace('Z', ''),
+    updatedAt: new Date(f.updated ?? Date.now()).toISOString().replace('Z', ''),
+    folderId: f.parentId === workspaceId ? null : f.parentId,
+    workspaceId,
+    model: 'folder',
+    name: f.name,
+  };
+}

src-tauri/plugins/insomnia-importer/src/importers/request.js

@@ -0,0 +1,58 @@
+import { convertSyntax } from '../helpers/variables.js';
+
+/**
+ * Import an Insomnia request object.
+ * @param {Object} r - The request object to import.
+ * @param workspaceId - The workspace ID to use for the request.
+ * @param {number} sortPriority - The sort priority to use for the request.
+ */
+export function importRequest(r, workspaceId, sortPriority = 0) {
+  console.log('IMPORTING REQUEST', r._id, r.name, JSON.stringify(r, null, 2));
+
+  let bodyType = null;
+  let body = null;
+  if (r.body?.mimeType === 'application/graphql') {
+    bodyType = 'graphql';
+    body = convertSyntax(r.body.text);
+  } else if (r.body?.mimeType === 'application/json') {
+    bodyType = 'application/json';
+    body = convertSyntax(r.body.text);
+  }
+
+  let authenticationType = null;
+  let authentication = {};
+  if (r.authentication.type === 'bearer') {
+    authenticationType = 'bearer';
+    authentication = {
+      token: convertSyntax(r.authentication.token),
+    };
+  } else if (r.authentication.type === 'basic') {
+    authenticationType = 'basic';
+    authentication = {
+      username: convertSyntax(r.authentication.username),
+      password: convertSyntax(r.authentication.password),
+    };
+  }
+
+  return {
+    id: r._id,
+    createdAt: new Date(r.created ?? Date.now()).toISOString().replace('Z', ''),
+    updatedAt: new Date(r.updated ?? Date.now()).toISOString().replace('Z', ''),
+    workspaceId,
+    folderId: r.parentId === workspaceId ? null : r.parentId,
+    model: 'http_request',
+    sortPriority,
+    name: r.name,
+    url: convertSyntax(r.url),
+    body,
+    bodyType,
+    authentication,
+    authenticationType,
+    method: r.method,
+    headers: (r.headers ?? []).map(({ name, value, disabled }) => ({
+      enabled: !disabled,
+      name,
+      value,
+    })),
+  };
+}

src-tauri/plugins/insomnia-importer/src/importers/workspace.js

@@ -0,0 +1,15 @@
+/**
+ * Import an Insomnia workspace object.
+ * @param {Object} w - The workspace object to import.
+ */
+export function importWorkspace(w, variables) {
+  console.log('IMPORTING Workspace', w._id, w.name, JSON.stringify(w, null, 2));
+  return {
+    id: w._id,
+    createdAt: new Date(w.created ?? Date.now()).toISOString().replace('Z', ''),
+    updatedAt: new Date(w.updated ?? Date.now()).toISOString().replace('Z', ''),
+    model: 'workspace',
+    name: w.name,
+    variables,
+  };
+}

src-tauri/plugins/insomnia-importer/src/index.js

@@ -0,0 +1,78 @@
+import { importEnvironment } from './importers/environment.js';
+import { importRequest } from './importers/request.js';
+import { importWorkspace } from './importers/workspace.js';
+import {
+  isEnvironment,
+  isJSObject,
+  isRequest,
+  isRequestGroup,
+  isWorkspace,
+} from './helpers/types.js';
+import { parseVariables } from './helpers/variables.js';
+import { importFolder } from './importers/folder.js';
+
+export function pluginHookImport(contents) {
+  const parsed = JSON.parse(contents);
+  if (!isJSObject(parsed)) {
+    return;
+  }
+
+  const { _type, __export_format } = parsed;
+  if (_type !== 'export' || __export_format !== 4 || !Array.isArray(parsed.resources)) {
+    return;
+  }
+
+  const resources = {
+    workspaces: [],
+    requests: [],
+    environments: [],
+    folders: [],
+  };
+
+  // Import workspaces
+  const workspacesToImport = parsed.resources.filter(isWorkspace);
+  for (const workspaceToImport of workspacesToImport) {
+    console.log('IMPORTING WORKSPACE', workspaceToImport.name);
+    const baseEnvironment = parsed.resources.find(
+      (r) => isEnvironment(r) && r.parentId === workspaceToImport._id,
+    );
+    console.log('FOUND BASE ENV', baseEnvironment.name);
+    resources.workspaces.push(
+      importWorkspace(
+        workspaceToImport,
+        baseEnvironment ? parseVariables(baseEnvironment.data) : [],
+      ),
+    );
+    console.log('IMPORTING ENVIRONMENTS', baseEnvironment.name);
+    const environmentsToImport = parsed.resources.filter(
+      (r) => isEnvironment(r) && r.parentId === baseEnvironment?._id,
+    );
+    console.log('FOUND', environmentsToImport.length, 'ENVIRONMENTS');
+    resources.environments.push(
+      ...environmentsToImport.map((r) => importEnvironment(r, workspaceToImport._id)),
+    );
+
+    const nextFolder = (parentId) => {
+      const children = parsed.resources.filter((r) => r.parentId === parentId);
+      let sortPriority = 0;
+      for (const child of children) {
+        if (isRequestGroup(child)) {
+          resources.folders.push(importFolder(child, workspaceToImport._id));
+          nextFolder(child._id);
+        } else if (isRequest(child)) {
+          resources.requests.push(importRequest(child, workspaceToImport._id, sortPriority++));
+        }
+      }
+    };
+
+    // Import folders
+    nextFolder(workspaceToImport._id);
+  }
+
+  // Filter out any `null` values
+  resources.requests = resources.requests.filter(Boolean);
+  resources.environments = resources.environments.filter(Boolean);
+  resources.workspaces = resources.workspaces.filter(Boolean);
+
+  return resources;
+}

src-tauri/plugins/insomnia-importer/vite.config.js

@@ -0,0 +1,13 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      fileName: 'index',
+      formats: ['es'],
+    },
+    outDir: resolve(__dirname, 'out'),
+  },
+});

src-tauri/plugins/plugin.ts

@@ -1 +0,0 @@
-Deno.core.opAsync('op_hello', 'Deno');

src-tauri/src/analytics.rs

@@ -0,0 +1,118 @@
+use sqlx::types::JsonValue;
+use tauri::{async_runtime, AppHandle, Manager};
+
+use crate::is_dev;
+
+pub enum AnalyticsResource {
+    App,
+    // Workspace,
+    // Environment,
+    // Folder,
+    // HttpRequest,
+    // HttpResponse,
+}
+
+pub enum AnalyticsAction {
+    Launch,
+    // Create,
+    // Update,
+    // Upsert,
+    // Delete,
+    // Send,
+    // Duplicate,
+}
+
+fn resource_name(resource: AnalyticsResource) -> &'static str {
+    match resource {
+        AnalyticsResource::App => "app",
+        // AnalyticsResource::Workspace => "workspace",
+        // AnalyticsResource::Environment => "environment",
+        // AnalyticsResource::Folder => "folder",
+        // AnalyticsResource::HttpRequest => "http_request",
+        // AnalyticsResource::HttpResponse => "http_response",
+    }
+}
+
+fn action_name(action: AnalyticsAction) -> &'static str {
+    match action {
+        AnalyticsAction::Launch => "launch",
+        // AnalyticsAction::Create => "create",
+        // AnalyticsAction::Update => "update",
+        // AnalyticsAction::Upsert => "upsert",
+        // AnalyticsAction::Delete => "delete",
+        // AnalyticsAction::Send => "send",
+        // AnalyticsAction::Duplicate => "duplicate",
+    }
+}
+
+pub fn track_event(
+    app_handle: &AppHandle,
+    resource: AnalyticsResource,
+    action: AnalyticsAction,
+    attributes: Option<JsonValue>,
+) {
+    async_runtime::block_on(async move {
+        let event = format!("{}.{}", resource_name(resource), action_name(action));
+        let attributes_json = attributes.unwrap_or("{}".to_string().into()).to_string();
+        let info = app_handle.package_info();
+        let params = vec![
+            ("e", event.clone()),
+            ("a", attributes_json.clone()),
+            ("id", "site_zOK0d7jeBy2TLxFCnZ".to_string()),
+            ("v", info.version.clone().to_string()),
+            ("os", get_os().to_string()),
+            ("xy", get_window_size(app_handle)),
+        ];
+        let url = format!("https://t.yaak.app/t/e");
+        let req = reqwest::Client::builder()
+            .build()
+            .unwrap()
+            .get(&url)
+            .query(&params);
+
+        if is_dev() {
+            println!("Ignore dev analytics event: {} {:?}", event, params);
+        } else {
+            if let Err(e) = req.send().await {
+                println!("Error sending analytics event: {}", e);
+            } else {
+                println!("Sent analytics event: {}", event);
+            }
+        }
+    });
+}
+
+fn get_os() -> &'static str {
+    if cfg!(target_os = "windows") {
+        "windows"
+    } else if cfg!(target_os = "macos") {
+        "macos"
+    } else if cfg!(target_os = "linux") {
+        "linux"
+    } else {
+        "unknown"
+    }
+}
+
+fn get_window_size(app_handle: &AppHandle) -> String {
+    let window = match app_handle.windows().into_values().next() {
+        Some(w) => w,
+        None => return "unknown".to_string(),
+    };
+
+    let current_monitor = match window.current_monitor() {
+        Ok(Some(m)) => m,
+        _ => return "unknown".to_string(),
+    };
+
+    let scale_factor = current_monitor.scale_factor();
+    let size = current_monitor.size();
+    let width: f64 = size.width as f64 / scale_factor;
+    let height: f64 = size.height as f64 / scale_factor;
+
+    format!(
+        "{}x{}",
+        (width / 100.0).round() * 100.0,
+        (height / 100.0).round() * 100.0
+    )
+}

src-tauri/src/main.rs

@@ -9,27 +9,37 @@ extern crate objc;
 
 use std::collections::HashMap;
 use std::env::current_dir;
-use std::fs::create_dir_all;
+use std::fs::{create_dir_all, File};
+use std::io::Write;
+use std::process::exit;
 
 use base64::Engine;
 use http::header::{HeaderName, ACCEPT, USER_AGENT};
 use http::{HeaderMap, HeaderValue, Method};
+use rand::random;
 use reqwest::redirect::Policy;
 use serde::Serialize;
 use sqlx::migrate::Migrator;
 use sqlx::sqlite::SqlitePoolOptions;
 use sqlx::types::Json;
 use sqlx::{Pool, Sqlite};
-use tauri::regex::Regex;
-use tauri::{AppHandle, Menu, MenuItem, RunEvent, State, Submenu, TitleBarStyle, Window, Wry};
-use tauri::{CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, WindowEvent};
+#[cfg(target_os = "macos")]
+use tauri::TitleBarStyle;
+use tauri::{AppHandle, Menu, RunEvent, State, Submenu, Window, WindowUrl, Wry};
+use tauri::{CustomMenuItem, Manager, WindowEvent};
+use tauri_plugin_window_state::{StateFlags, WindowExt};
 use tokio::sync::Mutex;
 
-use window_ext::WindowExt;
+use window_ext::TrafficLightWindowExt;
 
+use crate::analytics::{track_event, AnalyticsAction, AnalyticsResource};
+
+mod analytics;
 mod models;
-mod runtime;
+mod plugin;
+mod render;
 mod window_ext;
+mod window_menu;
 
 #[derive(serde::Serialize)]
 pub struct CustomResponse {
@@ -61,44 +71,38 @@ async fn migrate_db(
 
 #[tauri::command]
 async fn send_ephemeral_request(
-    request: models::HttpRequest,
+    mut request: models::HttpRequest,
+    environment_id: Option<&str>,
     app_handle: AppHandle<Wry>,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<models::HttpResponse, String> {
     let pool = &*db_instance.lock().await;
-    let response = models::HttpResponse::default();
-    return actually_send_ephemeral_request(request, &response, &app_handle, pool).await;
+    let response = models::HttpResponse::new();
+    let environment_id2 = environment_id.unwrap_or("n/a").to_string();
+    request.id = "".to_string();
+    return actually_send_request(request, &response, &environment_id2, &app_handle, pool).await;
 }
 
-async fn actually_send_ephemeral_request(
+async fn actually_send_request(
     request: models::HttpRequest,
     response: &models::HttpResponse,
+    environment_id: &str,
     app_handle: &AppHandle<Wry>,
     pool: &Pool<Sqlite>,
 ) -> Result<models::HttpResponse, String> {
     let start = std::time::Instant::now();
-    let mut url_string = request.url.to_string();
+    let environment = models::get_environment(environment_id, pool).await.ok();
+    let environment_ref = environment.as_ref();
+    let workspace = models::get_workspace(&request.workspace_id, pool)
+        .await
+        .expect("Failed to get Workspace");
 
-    let variables: HashMap<&str, &str> = HashMap::new();
-    // variables.insert("", "");
-
-    let re = Regex::new(r"\$\{\[\s*([^]\s]+)\s*]}").expect("Failed to create regex");
-    url_string = re
-        .replace(&url_string, |caps: &tauri::regex::Captures| {
-            let key = caps.get(1).unwrap().as_str();
-            match variables.get(key) {
-                Some(v) => v,
-                None => "",
-            }
-        })
-        .to_string();
+    let mut url_string = render::render(&request.url, &workspace, environment.as_ref());
 
     if !url_string.starts_with("http://") && !url_string.starts_with("https://") {
         url_string = format!("http://{}", url_string);
     }
 
-    println!("Sending request to {}", url_string);
-
     let client = reqwest::Client::builder()
         .redirect(Policy::none())
         // .danger_accept_invalid_certs(true)
@@ -113,57 +117,62 @@ async fn actually_send_ephemeral_request(
         if h.name.is_empty() && h.value.is_empty() {
             continue;
         }
+
         if !h.enabled {
             continue;
         }
-        let header_name = match HeaderName::from_bytes(h.name.as_bytes()) {
+
+        let name = render::render(&h.name, &workspace, environment_ref);
+        let value = render::render(&h.value, &workspace, environment_ref);
+
+        let header_name = match HeaderName::from_bytes(name.as_bytes()) {
             Ok(n) => n,
             Err(e) => {
                 eprintln!("Failed to create header name: {}", e);
                 continue;
             }
         };
-        let header_value = match HeaderValue::from_str(h.value.as_str()) {
+        let header_value = match HeaderValue::from_str(value.as_str()) {
             Ok(n) => n,
             Err(e) => {
                 eprintln!("Failed to create header value: {}", e);
                 continue;
             }
         };
+
         headers.insert(header_name, header_value);
     }
 
     if let Some(b) = &request.authentication_type {
         let empty_value = &serde_json::to_value("").unwrap();
+        let a = request.authentication.0;
+
         if b == "basic" {
-            let a = request.authentication.0;
-            let auth = format!(
-                "{}:{}",
-                a.get("username")
-                    .unwrap_or(empty_value)
-                    .as_str()
-                    .unwrap_or(""),
-                a.get("password")
-                    .unwrap_or(empty_value)
-                    .as_str()
-                    .unwrap_or(""),
-            );
+            let raw_username = a
+                .get("username")
+                .unwrap_or(empty_value)
+                .as_str()
+                .unwrap_or("");
+            let raw_password = a
+                .get("password")
+                .unwrap_or(empty_value)
+                .as_str()
+                .unwrap_or("");
+            let username = render::render(raw_username, &workspace, environment_ref);
+            let password = render::render(raw_password, &workspace, environment_ref);
+
+            let auth = format!("{username}:{password}");
             let encoded = base64::engine::general_purpose::STANDARD_NO_PAD.encode(auth);
             headers.insert(
                 "Authorization",
                 HeaderValue::from_str(&format!("Basic {}", encoded)).unwrap(),
             );
         } else if b == "bearer" {
-            let token = request
-                .authentication
-                .0
-                .get("token")
-                .unwrap_or(empty_value)
-                .as_str()
-                .unwrap_or("");
+            let raw_token = a.get("token").unwrap_or(empty_value).as_str().unwrap_or("");
+            let token = render::render(raw_token, &workspace, environment_ref);
             headers.insert(
                 "Authorization",
-                HeaderValue::from_str(&format!("Bearer {}", token)).unwrap(),
+                HeaderValue::from_str(&format!("Bearer {token}")).unwrap(),
             );
         }
     }
@@ -173,7 +182,10 @@ async fn actually_send_ephemeral_request(
     let builder = client.request(m, url_string.to_string()).headers(headers);
 
     let sendable_req_result = match (request.body, request.body_type) {
-        (Some(b), Some(_)) => builder.body(b).build(),
+        (Some(raw_body), Some(_)) => {
+            let body = render::render(&raw_body, &workspace, environment_ref);
+            builder.body(body).build()
+        }
         _ => builder.build(),
     };
 
@@ -186,24 +198,6 @@ async fn actually_send_ephemeral_request(
 
     let raw_response = client.execute(sendable_req).await;
 
-    let plugin_rel_path = "plugins/plugin.ts";
-    let plugin_path = match app_handle.path_resolver().resolve_resource(plugin_rel_path) {
-        Some(p) => p,
-        None => {
-            return response_err(
-                response,
-                format!("Plugin not found at {}", plugin_rel_path),
-                &app_handle,
-                pool,
-            )
-            .await;
-        }
-    };
-
-    if let Err(e) = runtime::run_plugin_sync(plugin_path.to_str().unwrap()) {
-        return response_err(response, e.to_string(), &app_handle, pool).await;
-    }
-
     match raw_response {
         Ok(v) => {
             let mut response = response.clone();
@@ -219,9 +213,41 @@ async fn actually_send_ephemeral_request(
                     .collect(),
             );
             response.url = v.url().to_string();
-            response.body = v.text().await.expect("Failed to get body");
+            let body_bytes = v.bytes().await.expect("Failed to get body").to_vec();
+            response.content_length = Some(body_bytes.len() as i64);
+
+            {
+                // Write body to FS
+                let dir = app_handle.path_resolver().app_data_dir().unwrap();
+                let base_dir = dir.join("responses");
+                create_dir_all(base_dir.clone()).expect("Failed to create responses dir");
+                let body_path = match response.id == "" {
+                    false => base_dir.join(response.id.clone()),
+                    true => base_dir.join(uuid::Uuid::new_v4().to_string()),
+                };
+                let mut f = File::options()
+                    .create(true)
+                    .truncate(true)
+                    .write(true)
+                    .open(&body_path)
+                    .expect("Failed to open file");
+                f.write_all(body_bytes.as_slice())
+                    .expect("Failed to write to file");
+                response.body_path = Some(
+                    body_path
+                        .to_str()
+                        .expect("Failed to get body path")
+                        .to_string(),
+                );
+            }
+
+            // Also store body directly on the model, if small enough
+            if body_bytes.len() < 100_000 {
+                response.body = Some(body_bytes);
+            }
+
             response.elapsed = start.elapsed().as_millis() as i64;
-            response = models::update_response_if_id(response, pool)
+            response = models::update_response_if_id(&response, pool)
                 .await
                 .expect("Failed to update response");
             if request.id != "" {
@@ -232,12 +258,29 @@ async fn actually_send_ephemeral_request(
         Err(e) => response_err(response, e.to_string(), app_handle, pool).await,
     }
 }
+#[tauri::command]
+async fn import_data(
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+    file_paths: Vec<&str>,
+) -> Result<plugin::ImportedResources, String> {
+    let pool = &*db_instance.lock().await;
+    let imported = plugin::run_plugin_import(
+        &window.app_handle(),
+        pool,
+        "insomnia-importer",
+        file_paths.first().unwrap(),
+    )
+    .await;
+    Ok(imported)
+}
 
 #[tauri::command]
 async fn send_request(
     window: Window<Wry>,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
     request_id: &str,
+    environment_id: Option<&str>,
 ) -> Result<models::HttpResponse, String> {
     let pool = &*db_instance.lock().await;
 
@@ -245,15 +288,17 @@ async fn send_request(
         .await
         .expect("Failed to get request");
 
-    let response = models::create_response(&req.id, 0, "", 0, None, "", vec![], pool)
+    let response = models::create_response(&req.id, 0, "", 0, None, None, None, None, vec![], pool)
         .await
         .expect("Failed to create response");
 
     let response2 = response.clone();
+    let environment_id2 = environment_id.unwrap_or("n/a").to_string();
     let app_handle2 = window.app_handle().clone();
     let pool2 = pool.clone();
+
     tokio::spawn(async move {
-        actually_send_ephemeral_request(req, &response2, &app_handle2, &pool2)
+        actually_send_request(req, &response2, &environment_id2, &app_handle2, &pool2)
             .await
             .expect("Failed to send request");
     });
@@ -268,8 +313,9 @@ async fn response_err(
     pool: &Pool<Sqlite>,
 ) -> Result<models::HttpResponse, String> {
     let mut response = response.clone();
+    response.elapsed = -1;
     response.error = Some(error.clone());
-    response = models::update_response_if_id(response, pool)
+    response = models::update_response_if_id(&response, pool)
         .await
         .expect("Failed to update response");
     emit_side_effect(app_handle, "updated_model", &response);
@@ -312,36 +358,63 @@ async fn create_workspace(
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<models::Workspace, String> {
     let pool = &*db_instance.lock().await;
-    let created_workspace = models::create_workspace(name, "", pool)
-        .await
-        .expect("Failed to create workspace");
+    let created_workspace = models::upsert_workspace(
+        pool,
+        models::Workspace {
+            name: name.to_string(),
+            ..Default::default()
+        },
+    )
+    .await
+    .expect("Failed to create Workspace");
 
     emit_and_return(&window, "created_model", created_workspace)
 }
 
+#[tauri::command]
+async fn create_environment(
+    workspace_id: &str,
+    name: &str,
+    variables: Vec<models::EnvironmentVariable>,
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Environment, String> {
+    let pool = &*db_instance.lock().await;
+    let created_environment = models::upsert_environment(
+        pool,
+        models::Environment {
+            workspace_id: workspace_id.to_string(),
+            name: name.to_string(),
+            variables: Json(variables),
+            ..Default::default()
+        },
+    )
+    .await
+    .expect("Failed to create environment");
+
+    emit_and_return(&window, "created_model", created_environment)
+}
+
 #[tauri::command]
 async fn create_request(
     workspace_id: &str,
     name: &str,
     sort_priority: f64,
+    folder_id: Option<&str>,
     window: Window<Wry>,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<models::HttpRequest, String> {
     let pool = &*db_instance.lock().await;
-    let headers = Vec::new();
     let created_request = models::upsert_request(
-        None,
-        workspace_id,
-        name,
-        "GET",
-        None,
-        None,
-        HashMap::new(),
-        None,
-        "",
-        headers,
-        sort_priority,
         pool,
+        models::HttpRequest {
+            workspace_id: workspace_id.to_string(),
+            name: name.to_string(),
+            method: "GET".to_string(),
+            folder_id: folder_id.map(|s| s.to_string()),
+            sort_priority,
+            ..Default::default()
+        },
     )
     .await
     .expect("Failed to create request");
@@ -362,6 +435,36 @@ async fn duplicate_request(
     emit_and_return(&window, "updated_model", request)
 }
 
+#[tauri::command]
+async fn update_workspace(
+    workspace: models::Workspace,
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Workspace, String> {
+    let pool = &*db_instance.lock().await;
+
+    let updated_workspace = models::upsert_workspace(pool, workspace)
+        .await
+        .expect("Failed to update request");
+
+    emit_and_return(&window, "updated_model", updated_workspace)
+}
+
+#[tauri::command]
+async fn update_environment(
+    environment: models::Environment,
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Environment, String> {
+    let pool = &*db_instance.lock().await;
+
+    let updated_environment = models::upsert_environment(pool, environment)
+        .await
+        .expect("Failed to update environment");
+
+    emit_and_return(&window, "updated_model", updated_environment)
+}
+
 #[tauri::command]
 async fn update_request(
     request: models::HttpRequest,
@@ -369,35 +472,9 @@ async fn update_request(
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<models::HttpRequest, String> {
     let pool = &*db_instance.lock().await;
-
-    // TODO: Figure out how to make this better
-    let b2;
-    let body = match request.body {
-        Some(b) => {
-            b2 = b;
-            Some(b2.as_str())
-        }
-        None => None,
-    };
-
-    // TODO: Figure out how to make this better
-    let updated_request = models::upsert_request(
-        Some(request.id.as_str()),
-        request.workspace_id.as_str(),
-        request.name.as_str(),
-        request.method.as_str(),
-        body,
-        request.body_type,
-        request.authentication.0,
-        request.authentication_type,
-        request.url.as_str(),
-        request.headers.0,
-        request.sort_priority,
-        pool,
-    )
-    .await
-    .expect("Failed to update request");
-
+    let updated_request = models::upsert_request(pool, request)
+        .await
+        .expect("Failed to update request");
     emit_and_return(&window, "updated_model", updated_request)
 }
 
@@ -415,7 +492,83 @@ async fn delete_request(
 }
 
 #[tauri::command]
-async fn requests(
+async fn list_folders(
+    workspace_id: &str,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<Vec<models::Folder>, String> {
+    let pool = &*db_instance.lock().await;
+    models::find_folders(workspace_id, pool)
+        .await
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+async fn create_folder(
+    workspace_id: &str,
+    name: &str,
+    sort_priority: f64,
+    folder_id: Option<&str>,
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Folder, String> {
+    let pool = &*db_instance.lock().await;
+    let created_request = models::upsert_folder(
+        pool,
+        models::Folder {
+            workspace_id: workspace_id.to_string(),
+            name: name.to_string(),
+            folder_id: folder_id.map(|s| s.to_string()),
+            sort_priority,
+            ..Default::default()
+        },
+    )
+    .await
+    .expect("Failed to create folder");
+
+    emit_and_return(&window, "created_model", created_request)
+}
+
+#[tauri::command]
+async fn update_folder(
+    folder: models::Folder,
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Folder, String> {
+    let pool = &*db_instance.lock().await;
+    let updated_folder = models::upsert_folder(pool, folder)
+        .await
+        .expect("Failed to update request");
+    emit_and_return(&window, "updated_model", updated_folder)
+}
+
+#[tauri::command]
+async fn delete_folder(
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+    folder_id: &str,
+) -> Result<models::Folder, String> {
+    let pool = &*db_instance.lock().await;
+    let req = models::delete_folder(folder_id, pool)
+        .await
+        .expect("Failed to delete folder");
+    emit_and_return(&window, "deleted_model", req)
+}
+
+#[tauri::command]
+async fn delete_environment(
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+    environment_id: &str,
+) -> Result<models::Environment, String> {
+    let pool = &*db_instance.lock().await;
+    let req = models::delete_environment(environment_id, pool)
+        .await
+        .expect("Failed to delete environment");
+    emit_and_return(&window, "deleted_model", req)
+}
+
+#[tauri::command]
+async fn list_requests(
     workspace_id: &str,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<Vec<models::HttpRequest>, String> {
@@ -425,6 +578,30 @@ async fn requests(
         .map_err(|e| e.to_string())
 }
 
+#[tauri::command]
+async fn list_environments(
+    workspace_id: &str,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<Vec<models::Environment>, String> {
+    let pool = &*db_instance.lock().await;
+    let environments = models::find_environments(workspace_id, pool)
+        .await
+        .expect("Failed to find environments");
+
+    Ok(environments)
+}
+
+#[tauri::command]
+async fn get_folder(
+    id: &str,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Folder, String> {
+    let pool = &*db_instance.lock().await;
+    models::get_folder(id, pool)
+        .await
+        .map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 async fn get_request(
     id: &str,
@@ -437,7 +614,29 @@ async fn get_request(
 }
 
 #[tauri::command]
-async fn responses(
+async fn get_environment(
+    id: &str,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Environment, String> {
+    let pool = &*db_instance.lock().await;
+    models::get_environment(id, pool)
+        .await
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+async fn get_workspace(
+    id: &str,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::Workspace, String> {
+    let pool = &*db_instance.lock().await;
+    models::get_workspace(id, pool)
+        .await
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+async fn list_responses(
     request_id: &str,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<Vec<models::HttpResponse>, String> {
@@ -472,7 +671,7 @@ async fn delete_all_responses(
 }
 
 #[tauri::command]
-async fn workspaces(
+async fn list_workspaces(
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<Vec<models::Workspace>, String> {
     let pool = &*db_instance.lock().await;
@@ -480,10 +679,15 @@ async fn workspaces(
         .await
         .expect("Failed to find workspaces");
     if workspaces.is_empty() {
-        let workspace =
-            models::create_workspace("My Project", "This is the default workspace", pool)
-                .await
-                .expect("Failed to create workspace");
+        let workspace = models::upsert_workspace(
+            pool,
+            models::Workspace {
+                name: "My Project".to_string(),
+                ..Default::default()
+            },
+        )
+        .await
+        .expect("Failed to create Workspace");
         Ok(vec![workspace])
     } else {
         Ok(workspaces)
@@ -491,30 +695,27 @@ async fn workspaces(
 }
 
 #[tauri::command]
-async fn delete_workspace(
-    window: Window<Wry>,
-    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
-    id: &str,
-) -> Result<models::Workspace, String> {
-    let pool = &*db_instance.lock().await;
-    let workspace = models::delete_workspace(id, pool)
-        .await
-        .expect("Failed to delete workspace");
-    emit_and_return(&window, "deleted_model", workspace)
+async fn new_window(window: Window<Wry>, url: &str) -> Result<(), String> {
+    create_window(&window.app_handle(), Some(url));
+    Ok(())
 }
 
 #[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
+async fn delete_workspace(
+    window: Window<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+    workspace_id: &str,
+) -> Result<models::Workspace, String> {
+    let pool = &*db_instance.lock().await;
+    let workspace = models::delete_workspace(workspace_id, pool)
+        .await
+        .expect("Failed to delete Workspace");
+    emit_and_return(&window, "deleted_model", workspace)
 }
 
 fn main() {
-    let quit = CustomMenuItem::new("quit".to_string(), "Quit");
-    let tray_menu = SystemTrayMenu::new().add_item(quit);
-    let system_tray = SystemTray::new().with_menu(tray_menu);
-
     tauri::Builder::default()
-        .system_tray(system_tray)
+        .plugin(tauri_plugin_window_state::Builder::default().build())
         .setup(|app| {
             let dir = match is_dev() {
                 true => current_dir().unwrap(),
@@ -526,6 +727,7 @@ fn main() {
             let p_string = p.to_string_lossy().replace(' ', "%20");
             let url = format!("sqlite://{}?mode=rwc", p_string);
             println!("Connecting to database at {}", url);
+
             tauri::async_runtime::block_on(async move {
                 let pool = SqlitePoolOptions::new()
                     .connect(url.as_str())
@@ -533,53 +735,94 @@ fn main() {
                     .expect("Failed to connect to database");
 
                 // Setup the DB handle
-                let m = Mutex::new(pool);
+                let m = Mutex::new(pool.clone());
                 migrate_db(app.handle(), &m)
                     .await
                     .expect("Failed to migrate database");
                 app.manage(m);
 
+                let _ = models::cancel_pending_responses(&pool).await;
+
+                // TODO: Move this somewhere better
+                match app.get_cli_matches() {
+                    Ok(matches) => {
+                        let cmd = matches.subcommand.unwrap_or_default();
+                        if cmd.name == "import" {
+                            let arg_file = cmd
+                                .matches
+                                .args
+                                .get("file")
+                                .unwrap()
+                                .value
+                                .as_str()
+                                .unwrap();
+                            plugin::run_plugin_import(
+                                &app.handle(),
+                                &pool,
+                                "insomnia-importer",
+                                arg_file,
+                            )
+                            .await;
+                            exit(0);
+                        } else if cmd.name == "hello" {
+                            plugin::run_plugin_hello(&app.handle(), "hello-world");
+                            exit(0);
+                        }
+                    }
+                    Err(e) => {
+                        println!("Nothing found: {}", e);
+                    }
+                }
+
                 Ok(())
             })
         })
-        .on_system_tray_event(|app, event| {
-            if let SystemTrayEvent::MenuItemClick { id, .. } = event {
-                match id.as_str() {
-                    "quit" => {
-                        std::process::exit(0);
-                    }
-                    "hide" => {
-                        let window = app.get_window("main").unwrap();
-                        window.hide().unwrap();
-                    }
-                    _ => {}
-                };
-            }
-        })
         .invoke_handler(tauri::generate_handler![
-            greet,
-            workspaces,
-            get_request,
-            requests,
-            send_request,
-            send_ephemeral_request,
-            duplicate_request,
+            create_environment,
+            create_folder,
             create_request,
             create_workspace,
-            delete_workspace,
-            update_request,
-            delete_request,
-            responses,
-            get_key_value,
-            set_key_value,
-            delete_response,
             delete_all_responses,
+            delete_environment,
+            delete_folder,
+            delete_request,
+            delete_response,
+            delete_workspace,
+            duplicate_request,
+            get_key_value,
+            get_environment,
+            get_folder,
+            get_request,
+            get_workspace,
+            import_data,
+            list_environments,
+            list_folders,
+            list_requests,
+            list_responses,
+            list_workspaces,
+            new_window,
+            send_ephemeral_request,
+            send_request,
+            set_key_value,
+            update_environment,
+            update_folder,
+            update_request,
+            update_workspace,
         ])
         .build(tauri::generate_context!())
         .expect("error while running tauri application")
         .run(|app_handle, event| match event {
             RunEvent::Ready => {
-                create_window(app_handle);
+                let w = create_window(app_handle, None);
+                w.restore_state(StateFlags::all())
+                    .expect("Failed to restore window state");
+
+                track_event(
+                    app_handle,
+                    AnalyticsResource::App,
+                    AnalyticsAction::Launch,
+                    None,
+                );
             }
 
             // ExitRequested { api, .. } => {
@@ -593,86 +836,72 @@ fn is_dev() -> bool {
     env.unwrap_or("production") != "production"
 }
 
-fn create_window(handle: &AppHandle<Wry>) -> Window<Wry> {
-    let default_menu = Menu::os_default("Yaak".to_string().as_str());
-    let mut test_menu = Menu::new()
-        .add_item(
-            CustomMenuItem::new("send_request".to_string(), "Send Request")
-                .accelerator("CmdOrCtrl+r"),
-        )
-        .add_item(
-            CustomMenuItem::new("zoom_reset".to_string(), "Zoom to Actual Size")
-                .accelerator("CmdOrCtrl+0"),
-        )
-        .add_item(
-            CustomMenuItem::new("zoom_in".to_string(), "Zoom In").accelerator("CmdOrCtrl+Plus"),
-        )
-        .add_item(
-            CustomMenuItem::new("zoom_out".to_string(), "Zoom Out").accelerator("CmdOrCtrl+-"),
-        )
-        .add_item(
-            CustomMenuItem::new("toggle_sidebar".to_string(), "Toggle Sidebar")
-                .accelerator("CmdOrCtrl+b"),
-        )
-        .add_item(
-            CustomMenuItem::new("focus_url".to_string(), "Focus URL").accelerator("CmdOrCtrl+l"),
-        )
-        .add_item(
-            CustomMenuItem::new("new_request".to_string(), "New Request")
-                .accelerator("CmdOrCtrl+n"),
-        )
-        .add_item(
-            CustomMenuItem::new("duplicate_request".to_string(), "Duplicate Request")
-                .accelerator("CmdOrCtrl+d"),
-        )
-        .add_item(CustomMenuItem::new("new_window".to_string(), "New Window"));
+fn create_window(handle: &AppHandle<Wry>, url: Option<&str>) -> Window<Wry> {
+    let mut app_menu = window_menu::os_default("Yaak".to_string().as_str());
     if is_dev() {
-        test_menu = test_menu
-            .add_native_item(MenuItem::Separator)
-            .add_item(
-                CustomMenuItem::new("refresh".to_string(), "Refresh")
-                    .accelerator("CmdOrCtrl + Shift + r"),
-            )
-            .add_item(
-                CustomMenuItem::new("toggle_devtools".to_string(), "Open Devtools")
-                    .accelerator("CmdOrCtrl + Option + i"),
-            );
+        let submenu = Submenu::new(
+            "Developer",
+            Menu::new()
+                .add_item(
+                    CustomMenuItem::new("refresh".to_string(), "Refresh")
+                        .accelerator("CmdOrCtrl + Shift + r"),
+                )
+                .add_item(
+                    CustomMenuItem::new("toggle_devtools".to_string(), "Open Devtools")
+                        .accelerator("CmdOrCtrl + Option + i"),
+                ),
+        );
+        app_menu = app_menu.add_submenu(submenu);
     }
 
-    let submenu = Submenu::new("Test Menu", test_menu);
-
     let window_num = handle.windows().len();
     let window_id = format!("wnd_{}", window_num);
-    let menu = default_menu.add_submenu(submenu);
-    let win = tauri::WindowBuilder::new(handle, window_id, tauri::WindowUrl::App("".into()))
-        .menu(menu)
-        .fullscreen(false)
-        .resizable(true)
-        .inner_size(1100.0, 600.0)
-        .hidden_title(true)
-        .title(match is_dev() {
-            true => "Yaak Dev",
-            false => "Yaak",
-        })
-        .title_bar_style(TitleBarStyle::Overlay)
-        .build()
-        .expect("failed to build window");
+    let mut win_builder = tauri::WindowBuilder::new(
+        handle,
+        window_id,
+        WindowUrl::App(url.unwrap_or_default().into()),
+    )
+    .menu(app_menu)
+    .fullscreen(false)
+    .resizable(true)
+    .inner_size(1100.0, 600.0)
+    .position(
+        // Randomly offset so windows don't stack exactly
+        100.0 + random::<f64>() * 30.0,
+        100.0 + random::<f64>() * 30.0,
+    )
+    .title(match is_dev() {
+        true => "Yaak Dev",
+        false => "Yaak",
+    });
+
+    // Add macOS-only things
+    #[cfg(target_os = "macos")]
+    {
+        win_builder = win_builder
+            .hidden_title(true)
+            .title_bar_style(TitleBarStyle::Overlay);
+    }
+
+    let win = win_builder.build().expect("failed to build window");
 
     let win2 = win.clone();
     let handle2 = handle.clone();
     win.on_menu_event(move |event| match event.menu_item_id() {
-        "quit" => std::process::exit(0),
+        "quit" => exit(0),
         "close" => win2.close().unwrap(),
         "zoom_reset" => win2.emit("zoom", 0).unwrap(),
         "zoom_in" => win2.emit("zoom", 1).unwrap(),
         "zoom_out" => win2.emit("zoom", -1).unwrap(),
         "toggle_sidebar" => win2.emit("toggle_sidebar", true).unwrap(),
         "focus_url" => win2.emit("focus_url", true).unwrap(),
+        "focus_sidebar" => win2.emit("focus_sidebar", true).unwrap(),
         "send_request" => win2.emit("send_request", true).unwrap(),
         "new_request" => _ = win2.emit("new_request", true).unwrap(),
+        "toggle_settings" => _ = win2.emit("toggle_settings", true).unwrap(),
         "duplicate_request" => _ = win2.emit("duplicate_request", true).unwrap(),
         "refresh" => win2.eval("location.reload()").unwrap(),
-        "new_window" => _ = create_window(&handle2),
+        "new_window" => _ = create_window(&handle2, None),
         "toggle_devtools" => {
             if win2.is_devtools_open() {
                 win2.close_devtools();
@@ -686,7 +915,6 @@ fn create_window(handle: &AppHandle<Wry>) -> Window<Wry> {
     let win3 = win.clone();
     win.on_window_event(move |e| {
         let apply_offset = || {
-            #[cfg(target_os = "macos")]
             win3.position_traffic_lights();
         };
 
@@ -701,9 +929,7 @@ fn create_window(handle: &AppHandle<Wry>) -> Window<Wry> {
         }
     });
 
-    #[cfg(target_os = "macos")]
     win.position_traffic_lights();
-
     win
 }
 

src-tauri/src/models.rs

@@ -1,4 +1,5 @@
 use std::collections::HashMap;
+use std::fs;
 
 use rand::distributions::{Alphanumeric, DistString};
 use serde::{Deserialize, Serialize};
@@ -6,8 +7,8 @@ use sqlx::types::chrono::NaiveDateTime;
 use sqlx::types::{Json, JsonValue};
 use sqlx::{Pool, Sqlite};
 
-#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
+#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
 pub struct Workspace {
     pub id: String,
     pub model: String,
@@ -15,28 +16,60 @@ pub struct Workspace {
     pub updated_at: NaiveDateTime,
     pub name: String,
     pub description: String,
+    pub variables: Json<Vec<EnvironmentVariable>>,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub struct HttpRequestHeader {
-    #[serde(default)]
+#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
+pub struct Environment {
+    pub id: String,
+    pub workspace_id: String,
+    pub model: String,
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub name: String,
+    pub variables: Json<Vec<EnvironmentVariable>>,
+}
+
+fn default_enabled() -> bool {
+    true
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
+pub struct EnvironmentVariable {
+    #[serde(default = "default_enabled")]
     pub enabled: bool,
     pub name: String,
     pub value: String,
 }
 
-#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
+pub struct HttpRequestHeader {
+    #[serde(default = "default_enabled")]
+    pub enabled: bool,
+    pub name: String,
+    pub value: String,
+}
+
+fn default_http_request_method() -> String {
+    "GET".to_string()
+}
+
+#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
 pub struct HttpRequest {
-    pub id: String,
-    pub model: String,
     pub created_at: NaiveDateTime,
     pub updated_at: NaiveDateTime,
-    pub sort_priority: f64,
+    pub id: String,
     pub workspace_id: String,
+    pub folder_id: Option<String>,
+    pub model: String,
+    pub sort_priority: f64,
     pub name: String,
     pub url: String,
+    #[serde(default = "default_http_request_method")]
     pub method: String,
     pub body: Option<String>,
     pub body_type: Option<String>,
@@ -45,15 +78,28 @@ pub struct HttpRequest {
     pub headers: Json<Vec<HttpRequestHeader>>,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
+#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
+pub struct Folder {
+    pub created_at: NaiveDateTime,
+    pub updated_at: NaiveDateTime,
+    pub id: String,
+    pub workspace_id: String,
+    pub folder_id: Option<String>,
+    pub model: String,
+    pub name: String,
+    pub sort_priority: f64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
 pub struct HttpResponseHeader {
     pub name: String,
     pub value: String,
 }
 
 #[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
-#[serde(rename_all = "camelCase")]
+#[serde(default, rename_all = "camelCase")]
 pub struct HttpResponse {
     pub id: String,
     pub model: String,
@@ -63,15 +109,26 @@ pub struct HttpResponse {
     pub updated_at: NaiveDateTime,
     pub error: Option<String>,
     pub url: String,
+    pub content_length: Option<i64>,
     pub elapsed: i64,
     pub status: i64,
     pub status_reason: Option<String>,
-    pub body: String,
+    pub body: Option<Vec<u8>>,
+    pub body_path: Option<String>,
     pub headers: Json<Vec<HttpResponseHeader>>,
 }
 
-#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
+impl HttpResponse {
+    pub(crate) fn new() -> Self {
+        Self {
+            model: "http_response".to_string(),
+            ..Default::default()
+        }
+    }
+}
+
+#[derive(sqlx::FromRow, Debug, Clone, Serialize, Deserialize, Default)]
+#[serde(default, rename_all = "camelCase")]
 pub struct KeyValue {
     pub model: String,
     pub created_at: NaiveDateTime,
@@ -129,7 +186,8 @@ pub async fn find_workspaces(pool: &Pool<Sqlite>) -> Result<Vec<Workspace>, sqlx
     sqlx::query_as!(
         Workspace,
         r#"
-            SELECT id, model, created_at, updated_at, name, description
+            SELECT id, model, created_at, updated_at, name, description,
+                variables AS "variables!: sqlx::types::Json<Vec<EnvironmentVariable>>"
             FROM workspaces
         "#,
     )
@@ -141,7 +199,8 @@ pub async fn get_workspace(id: &str, pool: &Pool<Sqlite>) -> Result<Workspace, s
     sqlx::query_as!(
         Workspace,
         r#"
-            SELECT id, model, created_at, updated_at, name, description
+            SELECT id, model, created_at, updated_at, name, description,
+                variables AS "variables!: sqlx::types::Json<Vec<EnvironmentVariable>>"
             FROM workspaces WHERE id = ?
         "#,
         id,
@@ -151,9 +210,7 @@ pub async fn get_workspace(id: &str, pool: &Pool<Sqlite>) -> Result<Workspace, s
 }
 
 pub async fn delete_workspace(id: &str, pool: &Pool<Sqlite>) -> Result<Workspace, sqlx::Error> {
-    let workspace = get_workspace(id, pool)
-        .await
-        .expect("Failed to get request to delete");
+    let workspace = get_workspace(id, pool).await?;
     let _ = sqlx::query!(
         r#"
             DELETE FROM workspaces
@@ -163,92 +220,222 @@ pub async fn delete_workspace(id: &str, pool: &Pool<Sqlite>) -> Result<Workspace
     )
     .execute(pool)
     .await;
+
+    for r in find_responses_by_workspace_id(id, pool).await? {
+        delete_response(&r.id, pool).await?;
+    }
+
     Ok(workspace)
 }
 
-pub async fn create_workspace(
-    name: &str,
-    description: &str,
+pub async fn find_environments(
+    workspace_id: &str,
     pool: &Pool<Sqlite>,
-) -> Result<Workspace, sqlx::Error> {
-    let id = generate_id("wk");
-    sqlx::query!(
+) -> Result<Vec<Environment>, sqlx::Error> {
+    sqlx::query_as!(
+        Environment,
         r#"
-            INSERT INTO workspaces (id, name, description)
-            VALUES (?, ?, ?)
+            SELECT id, workspace_id, model, created_at, updated_at, name,
+                variables AS "variables!: sqlx::types::Json<Vec<EnvironmentVariable>>"
+            FROM environments
+            WHERE workspace_id = ?
+        "#,
+        workspace_id,
+    )
+    .fetch_all(pool)
+    .await
+}
+
+pub async fn delete_environment(id: &str, pool: &Pool<Sqlite>) -> Result<Environment, sqlx::Error> {
+    let env = get_environment(id, pool).await?;
+    let _ = sqlx::query!(
+        r#"
+            DELETE FROM environments
+            WHERE id = ?
         "#,
         id,
-        name,
-        description,
     )
     .execute(pool)
-    .await
-    .expect("Failed to insert new workspace");
+    .await;
 
-    get_workspace(&id, pool).await
+    Ok(env)
+}
+
+pub async fn upsert_environment(
+    pool: &Pool<Sqlite>,
+    environment: Environment,
+) -> Result<Environment, sqlx::Error> {
+    let id = match environment.id.as_str() {
+        "" => generate_id(Some("ev")),
+        _ => environment.id.to_string(),
+    };
+    let trimmed_name = environment.name.trim();
+    sqlx::query!(
+        r#"
+            INSERT INTO environments (
+                id,
+                workspace_id,
+                name,
+                variables
+            )
+            VALUES (?, ?, ?, ?)
+            ON CONFLICT (id) DO UPDATE SET
+               updated_at = CURRENT_TIMESTAMP,
+               name = excluded.name,
+               variables = excluded.variables
+        "#,
+        id,
+        environment.workspace_id,
+        trimmed_name,
+        environment.variables,
+    )
+    .execute(pool)
+    .await?;
+    get_environment(&id, pool).await
+}
+
+pub async fn get_environment(id: &str, pool: &Pool<Sqlite>) -> Result<Environment, sqlx::Error> {
+    sqlx::query_as!(
+        Environment,
+        r#"
+            SELECT
+                id,
+                model,
+                workspace_id,
+                created_at,
+                updated_at,
+                name,
+                variables AS "variables!: sqlx::types::Json<Vec<EnvironmentVariable>>"
+            FROM environments
+            WHERE id = ?
+        "#,
+        id,
+    )
+    .fetch_one(pool)
+    .await
+}
+
+pub async fn get_folder(id: &str, pool: &Pool<Sqlite>) -> Result<Folder, sqlx::Error> {
+    sqlx::query_as!(
+        Folder,
+        r#"
+            SELECT
+                id,
+                model,
+                workspace_id,
+                created_at,
+                updated_at,
+                folder_id,
+                name,
+                sort_priority
+            FROM folders
+            WHERE id = ?
+        "#,
+        id,
+    )
+    .fetch_one(pool)
+    .await
+}
+
+pub async fn find_folders(
+    workspace_id: &str,
+    pool: &Pool<Sqlite>,
+) -> Result<Vec<Folder>, sqlx::Error> {
+    sqlx::query_as!(
+        Folder,
+        r#"
+            SELECT
+                id,
+                model,
+                workspace_id,
+                created_at,
+                updated_at,
+                folder_id,
+                name,
+                sort_priority
+            FROM folders
+            WHERE workspace_id = ?
+        "#,
+        workspace_id,
+    )
+    .fetch_all(pool)
+    .await
+}
+
+pub async fn delete_folder(id: &str, pool: &Pool<Sqlite>) -> Result<Folder, sqlx::Error> {
+    let env = get_folder(id, pool).await?;
+    let _ = sqlx::query!(
+        r#"
+            DELETE FROM folders
+            WHERE id = ?
+        "#,
+        id,
+    )
+    .execute(pool)
+    .await;
+
+    Ok(env)
+}
+
+pub async fn upsert_folder(pool: &Pool<Sqlite>, r: Folder) -> Result<Folder, sqlx::Error> {
+    let id = match r.id.as_str() {
+        "" => generate_id(Some("fl")),
+        _ => r.id.to_string(),
+    };
+    let trimmed_name = r.name.trim();
+
+    sqlx::query!(
+        r#"
+            INSERT INTO folders (
+                id,
+                workspace_id,
+                folder_id,
+                name,
+                sort_priority
+            )
+            VALUES (?, ?, ?, ?, ?)
+            ON CONFLICT (id) DO UPDATE SET
+               updated_at = CURRENT_TIMESTAMP,
+               name = excluded.name,
+               folder_id = excluded.folder_id,
+               sort_priority = excluded.sort_priority
+        "#,
+        id,
+        r.workspace_id,
+        r.folder_id,
+        trimmed_name,
+        r.sort_priority,
+    )
+    .execute(pool)
+    .await?;
+
+    get_folder(&id, pool).await
 }
 
 pub async fn duplicate_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest, sqlx::Error> {
-    let existing = get_request(id, pool)
-        .await
-        .expect("Failed to get request to duplicate");
-
-    // TODO: Figure out how to make this better
-    let b2;
-    let body = match existing.body {
-        Some(b) => {
-            b2 = b;
-            Some(b2.as_str())
-        }
-        None => None,
-    };
-
-    upsert_request(
-        None,
-        existing.workspace_id.as_str(),
-        existing.name.as_str(),
-        existing.method.as_str(),
-        body,
-        existing.body_type,
-        existing.authentication.0,
-        existing.authentication_type,
-        existing.url.as_str(),
-        existing.headers.0,
-        existing.sort_priority + 0.001,
-        pool,
-    )
-    .await
+    let mut request = get_request(id, pool).await?.clone();
+    request.id = "".to_string();
+    upsert_request(pool, request).await
 }
 
 pub async fn upsert_request(
-    id: Option<&str>,
-    workspace_id: &str,
-    name: &str,
-    method: &str,
-    body: Option<&str>,
-    body_type: Option<String>,
-    authentication: HashMap<String, JsonValue>,
-    authentication_type: Option<String>,
-    url: &str,
-    headers: Vec<HttpRequestHeader>,
-    sort_priority: f64,
     pool: &Pool<Sqlite>,
+    r: HttpRequest,
 ) -> Result<HttpRequest, sqlx::Error> {
-    let generated_id;
-    let id = match id {
-        Some(v) => v,
-        None => {
-            generated_id = generate_id("rq");
-            generated_id.as_str()
-        }
+    let id = match r.id.as_str() {
+        "" => generate_id(Some("rq")),
+        _ => r.id.to_string(),
     };
-    let headers_json = Json(headers);
-    let auth_json = Json(authentication);
+    let headers_json = Json(r.headers);
+    let auth_json = Json(r.authentication);
+    let trimmed_name = r.name.trim();
+
     sqlx::query!(
         r#"
             INSERT INTO http_requests (
                 id,
                 workspace_id,
+                folder_id,
                 name,
                 url,
                 method,
@@ -259,10 +446,11 @@ pub async fn upsert_request(
                 headers,
                 sort_priority
             )
-            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
             ON CONFLICT (id) DO UPDATE SET
                updated_at = CURRENT_TIMESTAMP,
                name = excluded.name,
+               folder_id = excluded.folder_id,
                method = excluded.method,
                headers = excluded.headers,
                body = excluded.body,
@@ -273,21 +461,22 @@ pub async fn upsert_request(
                sort_priority = excluded.sort_priority
         "#,
         id,
-        workspace_id,
-        name,
-        url,
-        method,
-        body,
-        body_type,
+        r.workspace_id,
+        r.folder_id,
+        trimmed_name,
+        r.url,
+        r.method,
+        r.body,
+        r.body_type,
         auth_json,
-        authentication_type,
+        r.authentication_type,
         headers_json,
-        sort_priority,
+        r.sort_priority,
     )
     .execute(pool)
-    .await
-    .expect("Failed to insert new request");
-    get_request(id, pool).await
+    .await?;
+
+    get_request(&id, pool).await
 }
 
 pub async fn find_requests(
@@ -301,6 +490,7 @@ pub async fn find_requests(
                 id,
                 model,
                 workspace_id,
+                folder_id,
                 created_at,
                 updated_at,
                 name,
@@ -329,6 +519,7 @@ pub async fn get_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest, s
                 id,
                 model,
                 workspace_id,
+                folder_id,
                 created_at,
                 updated_at,
                 name,
@@ -350,9 +541,11 @@ pub async fn get_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest, s
 }
 
 pub async fn delete_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest, sqlx::Error> {
-    let req = get_request(id, pool)
-        .await
-        .expect("Failed to get request to delete");
+    let req = get_request(id, pool).await?;
+
+    // DB deletes will cascade but this will delete the files
+    delete_all_responses(id, pool).await?;
+
     let _ = sqlx::query!(
         r#"
             DELETE FROM http_requests
@@ -372,14 +565,14 @@ pub async fn create_response(
     url: &str,
     status: i64,
     status_reason: Option<&str>,
-    body: &str,
+    content_length: Option<i64>,
+    body: Option<Vec<u8>>,
+    body_path: Option<&str>,
     headers: Vec<HttpResponseHeader>,
     pool: &Pool<Sqlite>,
 ) -> Result<HttpResponse, sqlx::Error> {
-    let req = get_request(request_id, pool)
-        .await
-        .expect("Failed to get request");
-    let id = generate_id("rp");
+    let req = get_request(request_id, pool).await?;
+    let id = generate_id(Some("rp"));
     let headers_json = Json(headers);
     sqlx::query!(
         r#"
@@ -391,10 +584,12 @@ pub async fn create_response(
                 url,
                 status,
                 status_reason,
+                content_length,
                 body,
+                body_path,
                 headers
             )
-            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?);
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
         "#,
         id,
         request_id,
@@ -403,57 +598,112 @@ pub async fn create_response(
         url,
         status,
         status_reason,
+        content_length,
         body,
+        body_path,
         headers_json,
     )
     .execute(pool)
-    .await
-    .expect("Failed to insert new response");
+    .await?;
 
     get_response(&id, pool).await
 }
 
+pub async fn cancel_pending_responses(pool: &Pool<Sqlite>) -> Result<(), sqlx::Error> {
+    sqlx::query!(
+        r#"
+            UPDATE http_responses
+            SET (elapsed, status_reason) = (-1, 'Cancelled')
+            WHERE elapsed = 0;
+        "#,
+    )
+    .execute(pool)
+    .await?;
+    Ok(())
+}
+
 pub async fn update_response_if_id(
-    response: HttpResponse,
+    response: &HttpResponse,
     pool: &Pool<Sqlite>,
 ) -> Result<HttpResponse, sqlx::Error> {
     if response.id == "" {
-        return Ok(response);
+        return Ok(response.clone());
     }
     return update_response(response, pool).await;
 }
 
-pub async fn update_response(
-    response: HttpResponse,
+pub async fn upsert_workspace(
     pool: &Pool<Sqlite>,
-) -> Result<HttpResponse, sqlx::Error> {
-    let headers_json = Json(response.headers);
+    workspace: Workspace,
+) -> Result<Workspace, sqlx::Error> {
+    let id = match workspace.id.as_str() {
+        "" => generate_id(Some("wk")),
+        _ => workspace.id.to_string(),
+    };
+    let trimmed_name = workspace.name.trim();
     sqlx::query!(
         r#"
-            UPDATE http_responses SET (elapsed, url, status, status_reason, body, error, headers, updated_at) =
-            (?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;
+            INSERT INTO workspaces (id, name, description, variables)
+            VALUES (?, ?, ?, ?)
+            ON CONFLICT (id) DO UPDATE SET
+               updated_at = CURRENT_TIMESTAMP,
+               name = excluded.name,
+               description = excluded.description,
+               variables = excluded.variables
+        "#,
+        id,
+        trimmed_name,
+        workspace.description,
+        workspace.variables,
+    )
+    .execute(pool)
+    .await?;
+
+    get_workspace(&id, pool).await
+}
+
+pub async fn update_response(
+    response: &HttpResponse,
+    pool: &Pool<Sqlite>,
+) -> Result<HttpResponse, sqlx::Error> {
+    let headers_json = Json(&response.headers);
+    sqlx::query!(
+        r#"
+            UPDATE http_responses SET (
+                elapsed,
+                url,
+                status,
+                status_reason,
+                content_length,
+                body,
+                body_path,
+                error,
+                headers,
+                updated_at
+            ) = (?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;
         "#,
         response.elapsed,
         response.url,
         response.status,
         response.status_reason,
+        response.content_length,
         response.body,
+        response.body_path,
         response.error,
         headers_json,
         response.id,
     )
     .execute(pool)
-    .await
-    .expect("Failed to update response");
+    .await?;
     get_response(&response.id, pool).await
 }
 
 pub async fn get_response(id: &str, pool: &Pool<Sqlite>) -> Result<HttpResponse, sqlx::Error> {
-    sqlx::query_as_unchecked!(
+    sqlx::query_as!(
         HttpResponse,
         r#"
-            SELECT id, model, workspace_id, request_id, updated_at, created_at,
-                status, status_reason, body, elapsed, url, error,
+            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,
+                status, status_reason, content_length, body, body_path, elapsed, error,
                 headers AS "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>"
             FROM http_responses
             WHERE id = ?
@@ -471,12 +721,12 @@ pub async fn find_responses(
     sqlx::query_as!(
         HttpResponse,
         r#"
-            SELECT id, model, workspace_id, request_id, updated_at,
-                created_at, status, status_reason, body, elapsed, url, error,
+            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,
+                status, status_reason, content_length, body, body_path, elapsed, error,
                 headers AS "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>"
             FROM http_responses
             WHERE request_id = ?
-            ORDER BY created_at ASC
+            ORDER BY created_at DESC
         "#,
         request_id,
     )
@@ -484,10 +734,35 @@ pub async fn find_responses(
     .await
 }
 
+pub async fn find_responses_by_workspace_id(
+    workspace_id: &str,
+    pool: &Pool<Sqlite>,
+) -> Result<Vec<HttpResponse>, sqlx::Error> {
+    sqlx::query_as!(
+        HttpResponse,
+        r#"
+            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,
+                status, status_reason, content_length, body, body_path, elapsed, error,
+                headers AS "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>"
+            FROM http_responses
+            WHERE workspace_id = ?
+            ORDER BY created_at DESC
+        "#,
+        workspace_id,
+    )
+    .fetch_all(pool)
+    .await
+}
+
 pub async fn delete_response(id: &str, pool: &Pool<Sqlite>) -> Result<HttpResponse, sqlx::Error> {
-    let resp = get_response(id, pool)
-        .await
-        .expect("Failed to get response to delete");
+    let resp = get_response(id, pool).await?;
+
+    // Delete the body file if it exists
+    if let Some(p) = resp.body_path.clone() {
+        if let Err(e) = fs::remove_file(p) {
+            println!("Failed to delete body file: {}", e);
+        };
+    }
 
     let _ = sqlx::query!(
         r#"
@@ -506,22 +781,16 @@ pub async fn delete_all_responses(
     request_id: &str,
     pool: &Pool<Sqlite>,
 ) -> Result<(), sqlx::Error> {
-    let _ = sqlx::query!(
-        r#"
-            DELETE FROM http_responses
-            WHERE request_id = ?
-        "#,
-        request_id,
-    )
-    .execute(pool)
-    .await;
-
+    for r in find_responses(request_id, pool).await? {
+        delete_response(&r.id, pool).await?;
+    }
     Ok(())
 }
 
-pub fn generate_id(prefix: &str) -> String {
-    format!(
-        "{prefix}_{}",
-        Alphanumeric.sample_string(&mut rand::thread_rng(), 10)
-    )
+pub fn generate_id(prefix: Option<&str>) -> String {
+    let id = Alphanumeric.sample_string(&mut rand::thread_rng(), 10);
+    return match prefix {
+        None => id,
+        Some(p) => format!("{p}_{id}"),
+    };
 }

src-tauri/src/plugin.rs

@@ -0,0 +1,187 @@
+use std::fs;
+
+use boa_engine::builtins::promise::PromiseState;
+use boa_engine::{
+    js_string,
+    module::{ModuleLoader, SimpleModuleLoader},
+    property::Attribute,
+    Context, JsArgs, JsNativeError, JsValue, Module, NativeFunction, Source,
+};
+use boa_runtime::Console;
+use serde::{Deserialize, Serialize};
+use serde_json::json;
+use sqlx::{Pool, Sqlite};
+use tauri::AppHandle;
+
+use crate::models::{self, Environment, Folder, HttpRequest, Workspace};
+
+pub fn run_plugin_hello(app_handle: &AppHandle, plugin_name: &str) {
+    run_plugin(app_handle, plugin_name, "hello", &[]);
+}
+
+#[derive(Default, Debug, Deserialize, Serialize)]
+pub struct ImportedResources {
+    workspaces: Vec<Workspace>,
+    environments: Vec<Environment>,
+    folders: Vec<Folder>,
+    requests: Vec<HttpRequest>,
+}
+
+pub async fn run_plugin_import(
+    app_handle: &AppHandle,
+    pool: &Pool<Sqlite>,
+    plugin_name: &str,
+    file_path: &str,
+) -> ImportedResources {
+    let file = fs::read_to_string(file_path)
+        .expect(format!("Unable to read file {}", file_path.to_string()).as_str());
+    let file_contents = file.as_str();
+    let result_json = run_plugin(
+        app_handle,
+        plugin_name,
+        "pluginHookImport",
+        &[js_string!(file_contents).into()],
+    );
+    let resources: ImportedResources =
+        serde_json::from_value(result_json).expect("failed to parse result json");
+    let mut imported_resources = ImportedResources::default();
+
+    println!("Importing resources");
+    for w in resources.workspaces {
+        println!("Importing workspace: {:?}", w);
+        let x = models::upsert_workspace(&pool, w)
+            .await
+            .expect("Failed to create workspace");
+        imported_resources.workspaces.push(x.clone());
+        println!("Imported workspace: {}", x.name);
+    }
+
+    for e in resources.environments {
+        println!("Importing environment: {:?}", e);
+        let x = models::upsert_environment(&pool, e)
+            .await
+            .expect("Failed to create environment");
+        imported_resources.environments.push(x.clone());
+        println!("Imported environment: {}", x.name);
+    }
+
+    for f in resources.folders {
+        println!("Importing folder: {:?}", f);
+        let x = models::upsert_folder(&pool, f)
+            .await
+            .expect("Failed to create folder");
+        imported_resources.folders.push(x.clone());
+        println!("Imported folder: {}", x.name);
+    }
+
+    for r in resources.requests {
+        println!("Importing request: {:?}", r);
+        let x = models::upsert_request(&pool, r)
+            .await
+            .expect("Failed to create request");
+        imported_resources.requests.push(x.clone());
+        println!("Imported request: {}", x.name);
+    }
+
+    imported_resources
+}
+
+fn run_plugin(
+    app_handle: &AppHandle,
+    plugin_name: &str,
+    entrypoint: &str,
+    js_args: &[JsValue],
+) -> serde_json::Value {
+    let plugin_dir = app_handle
+        .path_resolver()
+        .resolve_resource("plugins")
+        .expect("failed to resolve plugin directory resource")
+        .join(plugin_name);
+    let plugin_index_file = plugin_dir.join("out/index.js");
+
+    println!("Plugin dir={:?} file={:?}", plugin_dir, plugin_index_file);
+
+    // Module loader for the specific plugin
+    let loader = &SimpleModuleLoader::new(plugin_dir).expect("failed to create module loader");
+    let dyn_loader: &dyn ModuleLoader = loader;
+
+    let context = &mut Context::builder()
+        .module_loader(dyn_loader)
+        .build()
+        .expect("failed to create context");
+
+    add_runtime(context);
+    add_globals(context);
+
+    let source = Source::from_filepath(&plugin_index_file).expect("Error opening file");
+
+    // Can also pass a `Some(realm)` if you need to execute the module in another realm.
+    let module = Module::parse(source, None, context).expect("failed to parse module");
+
+    // Insert parsed entrypoint into the module loader
+    // TODO: Is this needed if loaded from file already?
+    loader.insert(plugin_index_file, module.clone());
+
+    let promise_result = module
+        .load_link_evaluate(context)
+        .expect("failed to evaluate module");
+
+    // Very important to push forward the job queue after queueing promises.
+    context.run_jobs();
+
+    // Checking if the final promise didn't return an error.
+    match promise_result.state().expect("failed to get promise state") {
+        PromiseState::Pending => {
+            panic!("Promise was pending");
+        }
+        PromiseState::Fulfilled(v) => {
+            assert_eq!(v, JsValue::undefined())
+        }
+        PromiseState::Rejected(err) => {
+            panic!("Failed to link: {}", err.display());
+        }
+    }
+
+    let namespace = module.namespace(context);
+
+    let result = namespace
+        .get(js_string!(entrypoint), context)
+        .expect("failed to get entrypoint")
+        .as_callable()
+        .cloned()
+        .ok_or_else(|| JsNativeError::typ().with_message("export wasn't a function!"))
+        .expect("Failed to get entrypoint")
+        .call(&JsValue::undefined(), js_args, context)
+        .expect("Failed to call entrypoint");
+
+    match result.is_undefined() {
+        true => json!(null), // to_json doesn't work with undefined (yet)
+        false => result
+            .to_json(context)
+            .expect("failed to convert result to json"),
+    }
+}
+
+fn add_runtime(context: &mut Context<'_>) {
+    let console = Console::init(context);
+    context
+        .register_global_property(js_string!(Console::NAME), console, Attribute::all())
+        .expect("the console builtin shouldn't exist");
+}
+
+fn add_globals(context: &mut Context<'_>) {
+    context
+        .register_global_builtin_callable(
+            "sayHello",
+            1,
+            NativeFunction::from_fn_ptr(|_, args, context| {
+                let value: String = args
+                    .get_or_undefined(0)
+                    .try_js_into(context)
+                    .expect("failed to convert arg");
+                println!("Hello {}!", value);
+                Ok(value.into())
+            }),
+        )
+        .expect("failed to register global");
+}

src-tauri/src/render.rs

@@ -0,0 +1,32 @@
+use crate::models::{Environment, Workspace};
+use std::collections::HashMap;
+use tauri::regex::Regex;
+
+pub fn render(template: &str, workspace: &Workspace, environment: Option<&Environment>) -> String {
+    let mut map = HashMap::new();
+    let workspace_variables = &workspace.variables.0;
+    for variable in workspace_variables {
+        if !variable.enabled || variable.value.is_empty() {
+            continue;
+        }
+        map.insert(variable.name.as_str(), variable.value.as_str());
+    }
+
+    if let Some(e) = environment {
+        let environment_variables = &e.variables.0;
+        for variable in environment_variables {
+            if !variable.enabled || variable.value.is_empty() {
+                continue;
+            }
+            map.insert(variable.name.as_str(), variable.value.as_str());
+        }
+    }
+
+    Regex::new(r"\$\{\[\s*([^]\s]+)\s*]}")
+        .expect("Failed to create regex")
+        .replace_all(template, |caps: &tauri::regex::Captures| {
+            let key = caps.get(1).unwrap().as_str();
+            map.get(key).unwrap_or(&"")
+        })
+        .to_string()
+}

src-tauri/src/runtime.js

@@ -1,16 +0,0 @@
-(function (globalThis) {
-  // Deno.core.print(Object.keys(Deno.core).join('\n'));
-
-  function argsToMessage(...args) {
-    return args.map((arg) => JSON.stringify(arg)).join(' ');
-  }
-
-  globalThis.console = {
-    log: (...args) => {
-      Deno.core.print(`[log]: ${argsToMessage(...args)}\n`, false);
-    },
-    error: (...args) => {
-      Deno.core.print(`[err]: ${argsToMessage(...args)}\n`, true);
-    },
-  };
-})(globalThis);

src-tauri/src/runtime.rs

@@ -1,121 +0,0 @@
-use std::rc::Rc;
-
-use deno_ast::{MediaType, ParseParams, SourceTextInfo};
-use deno_core::error::AnyError;
-use deno_core::futures::FutureExt;
-use deno_core::{op, Extension, JsRuntime, ModuleCode, ModuleSource, ModuleType, RuntimeOptions};
-use futures::executor;
-
-pub fn run_plugin_sync(file_path: &str) -> Result<(), AnyError> {
-    executor::block_on(run_plugin(file_path))
-}
-
-pub async fn run_plugin(file_path: &str) -> Result<(), AnyError> {
-    let extension = Extension::builder("runtime")
-        .ops(vec![op_hello::decl()])
-        .build();
-
-    // Initialize a runtime instance
-    let mut runtime = JsRuntime::new(RuntimeOptions {
-        module_loader: Some(Rc::new(TsModuleLoader)),
-        extensions: vec![extension],
-        ..Default::default()
-    });
-
-    runtime
-        .execute_script("<runtime>", include_str!("runtime.js"))
-        .expect("Failed to execute runtime.js");
-
-    let current_dir = &std::env::current_dir().expect("Unable to get CWD");
-    let main_module =
-        deno_core::resolve_path(file_path, current_dir).expect("Failed to resolve path");
-    let mod_id = runtime
-        .load_main_module(&main_module, None)
-        .await
-        .expect("Failed to load main module");
-    let result = runtime.mod_evaluate(mod_id);
-    runtime
-        .run_event_loop(false)
-        .await
-        .expect("Failed to run event loop");
-    result.await?
-}
-
-#[op]
-async fn op_hello(name: String) -> Result<String, AnyError> {
-    let contents = format!("Hello {} from Rust!", name);
-    println!("{}", contents);
-    Ok(contents)
-}
-
-struct TsModuleLoader;
-
-impl deno_core::ModuleLoader for TsModuleLoader {
-    fn resolve(
-        &self,
-        specifier: &str,
-        referrer: &str,
-        _kind: deno_core::ResolutionKind,
-    ) -> Result<deno_core::ModuleSpecifier, AnyError> {
-        deno_core::resolve_import(specifier, referrer).map_err(|e| e.into())
-    }
-
-    fn load(
-        &self,
-        module_specifier: &deno_core::ModuleSpecifier,
-        _maybe_referrer: Option<deno_core::ModuleSpecifier>,
-        _is_dyn_import: bool,
-    ) -> std::pin::Pin<Box<deno_core::ModuleSourceFuture>> {
-        let module_specifier = module_specifier.clone();
-        async move {
-            let path = module_specifier
-                .to_file_path()
-                .expect("Failed to convert to file path");
-
-            // Determine what the MediaType is (this is done based on the file
-            // extension) and whether transpiling is required.
-            let media_type = MediaType::from_path(&path);
-            let (module_type, should_transpile) = match media_type {
-                MediaType::JavaScript | MediaType::Mjs | MediaType::Cjs => {
-                    (ModuleType::JavaScript, false)
-                }
-                MediaType::Jsx => (ModuleType::JavaScript, true),
-                MediaType::TypeScript
-                | MediaType::Mts
-                | MediaType::Cts
-                | MediaType::Dts
-                | MediaType::Dmts
-                | MediaType::Dcts
-                | MediaType::Tsx => (ModuleType::JavaScript, true),
-                MediaType::Json => (ModuleType::Json, false),
-                _ => panic!("Unknown extension {:?}", path.extension()),
-            };
-
-            // Read the file, transpile if necessary.
-            let code = std::fs::read_to_string(&path)?;
-            let code = if should_transpile {
-                let parsed = deno_ast::parse_module(ParseParams {
-                    specifier: module_specifier.to_string(),
-                    text_info: SourceTextInfo::from_string(code),
-                    media_type,
-                    capture_tokens: false,
-                    scope_analysis: false,
-                    maybe_syntax: None,
-                })?;
-                parsed.transpile(&Default::default())?.text
-            } else {
-                code
-            };
-
-            // Load and return module.
-            let module = ModuleSource {
-                code: ModuleCode::from(code),
-                module_type,
-                module_url_specified: module_specifier.to_string(),
-                module_url_found: module_specifier.to_string(),
-            };
-            Ok(module)
-        }
-        .boxed_local()
-    }
-}

src-tauri/src/window_ext.rs

@@ -1,13 +1,18 @@
 use tauri::{Runtime, Window};
 
-const TRAFFIC_LIGHT_OFFSET_X: f64 = 10.0;
+const TRAFFIC_LIGHT_OFFSET_X: f64 = 13.0;
 const TRAFFIC_LIGHT_OFFSET_Y: f64 = 18.0;
 
-pub trait WindowExt {
+pub trait TrafficLightWindowExt {
     fn position_traffic_lights(&self);
 }
 
-impl<R: Runtime> WindowExt for Window<R> {
+impl<R: Runtime> TrafficLightWindowExt for Window<R> {
+    #[cfg(not(target_os = "macos"))]
+    fn position_traffic_lights(&self) {
+        // No-op
+    }
+
     #[cfg(target_os = "macos")]
     fn position_traffic_lights(&self) {
         use cocoa::appkit::{NSView, NSWindow, NSWindowButton};

src-tauri/src/window_menu.rs

@@ -0,0 +1,119 @@
+use tauri::{AboutMetadata, CustomMenuItem, Menu, MenuItem, Submenu};
+
+pub fn os_default(#[allow(unused)] app_name: &str) -> Menu {
+    let mut menu = Menu::new();
+    #[cfg(target_os = "macos")]
+    {
+        menu = menu.add_submenu(Submenu::new(
+            app_name,
+            Menu::new()
+                .add_native_item(MenuItem::About(
+                    app_name.to_string(),
+                    AboutMetadata::default(),
+                ))
+                .add_native_item(MenuItem::Separator)
+                .add_native_item(MenuItem::Services)
+                .add_native_item(MenuItem::Separator)
+                .add_native_item(MenuItem::Hide)
+                .add_native_item(MenuItem::HideOthers)
+                .add_native_item(MenuItem::ShowAll)
+                .add_native_item(MenuItem::Separator)
+                .add_native_item(MenuItem::Quit),
+        ));
+    }
+
+    let mut file_menu = Menu::new();
+    file_menu = file_menu.add_native_item(MenuItem::CloseWindow);
+    #[cfg(not(target_os = "macos"))]
+    {
+        file_menu = file_menu.add_native_item(MenuItem::Quit);
+    }
+    menu = menu.add_submenu(Submenu::new("File", file_menu));
+
+    #[cfg(not(target_os = "linux"))]
+    let mut edit_menu = Menu::new();
+    #[cfg(target_os = "macos")]
+    {
+        edit_menu = edit_menu.add_native_item(MenuItem::Undo);
+        edit_menu = edit_menu.add_native_item(MenuItem::Redo);
+        edit_menu = edit_menu.add_native_item(MenuItem::Separator);
+    }
+    #[cfg(not(target_os = "linux"))]
+    {
+        edit_menu = edit_menu.add_native_item(MenuItem::Cut);
+        edit_menu = edit_menu.add_native_item(MenuItem::Copy);
+        edit_menu = edit_menu.add_native_item(MenuItem::Paste);
+    }
+    #[cfg(target_os = "macos")]
+    {
+        edit_menu = edit_menu.add_native_item(MenuItem::SelectAll);
+    }
+    #[cfg(not(target_os = "linux"))]
+    {
+        menu = menu.add_submenu(Submenu::new("Edit", edit_menu));
+    }
+    let mut view_menu = Menu::new();
+    #[cfg(target_os = "macos")]
+    {
+        view_menu = view_menu
+            .add_native_item(MenuItem::EnterFullScreen)
+            .add_native_item(MenuItem::Separator);
+    }
+    view_menu = view_menu
+        .add_item(
+            CustomMenuItem::new("zoom_reset".to_string(), "Zoom to Actual Size")
+                .accelerator("CmdOrCtrl+0"),
+        )
+        .add_item(
+            CustomMenuItem::new("zoom_in".to_string(), "Zoom In").accelerator("CmdOrCtrl+Plus"),
+        )
+        .add_item(
+            CustomMenuItem::new("zoom_out".to_string(), "Zoom Out").accelerator("CmdOrCtrl+-"),
+        )
+        .add_native_item(MenuItem::Separator)
+        .add_item(
+            CustomMenuItem::new("toggle_sidebar".to_string(), "Toggle Sidebar")
+                .accelerator("CmdOrCtrl+b"),
+        )
+        .add_item(
+            CustomMenuItem::new("focus_sidebar".to_string(), "Focus Sidebar")
+                .accelerator("CmdOrCtrl+1"),
+        )
+        .add_item(
+            CustomMenuItem::new("toggle_settings".to_string(), "Toggle Settings")
+                .accelerator("CmdOrCtrl+,"),
+        )
+        .add_item(
+            CustomMenuItem::new("focus_url".to_string(), "Focus URL").accelerator("CmdOrCtrl+l"),
+        );
+    menu = menu.add_submenu(Submenu::new("View", view_menu));
+
+    let mut window_menu = Menu::new();
+    window_menu = window_menu.add_native_item(MenuItem::Minimize);
+    #[cfg(target_os = "macos")]
+    {
+        window_menu = window_menu.add_native_item(MenuItem::Zoom);
+        window_menu = window_menu.add_native_item(MenuItem::Separator);
+    }
+    window_menu = window_menu.add_native_item(MenuItem::CloseWindow);
+    menu = menu.add_submenu(Submenu::new("Window", window_menu));
+
+    menu = menu.add_submenu(Submenu::new(
+        "Workspace",
+        Menu::new()
+            .add_item(
+                CustomMenuItem::new("send_request".to_string(), "Send Request")
+                    .accelerator("CmdOrCtrl+r"),
+            )
+            .add_item(
+                CustomMenuItem::new("new_request".to_string(), "New Request")
+                    .accelerator("CmdOrCtrl+n"),
+            )
+            .add_item(
+                CustomMenuItem::new("duplicate_request".to_string(), "Duplicate Request")
+                    .accelerator("CmdOrCtrl+d"),
+            ),
+    ));
+
+    menu
+}

src-tauri/tauri.conf.json

@@ -8,15 +8,43 @@
   },
   "package": {
     "productName": "Yaak",
-    "version": "2023.0.12"
+    "version": "2023.2.0"
   },
   "tauri": {
     "windows": [],
+    "cli": {
+      "description": "Yaak CLI",
+      "longDescription": "This is the Yaak CLI, yo",
+      "beforeHelp": "u can use it to build, develop and manage your Yaak application.",
+      "afterHelp": "Have fun!",
+      "args": [],
+      "subcommands": {
+        "import": {
+          "args": [{
+            "name": "file",
+            "short": "f",
+            "takesValue": true
+          }]
+        },
+        "hello": {}
+      }
+    },
     "allowlist": {
       "all": false,
+      "os": {
+        "all": true
+      },
+      "protocol": {
+        "assetScope": [
+          "$APPDATA/responses/*"
+        ],
+        "asset": true
+      },
       "fs": {
+        "readFile": true,
         "scope": [
-          "$RESOURCE/*"
+          "$RESOURCE/*",
+          "$APPDATA/responses/*"
         ]
       },
       "shell": {
@@ -25,6 +53,10 @@
       },
       "window": {
         "startDragging": true
+      },
+      "dialog": {
+        "all": false,
+        "open": true
       }
     },
     "bundle": {
@@ -40,13 +72,20 @@
         "icons/icon.ico"
       ],
       "identifier": "co.schier.yaak",
-      "longDescription": "",
+      "longDescription": "The best cross-platform visual API client",
       "resources": [
-        "plugins/*",
-        "migrations/*"
+        "migrations/*",
+        "plugins/*"
+      ],
+      "shortDescription": "The best API client",
+      "targets": [
+        "deb",
+        "appimage",
+        "nsis",
+        "app",
+        "dmg",
+        "updater"
       ],
-      "shortDescription": "",
-      "targets": "all",
       "deb": {
         "depends": []
       },

src-web/components/App.tsx

@@ -5,8 +5,6 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { HelmetProvider } from 'react-helmet-async';
 import { AppRouter } from './AppRouter';
-import { DialogProvider } from './DialogContext';
-import { TauriListeners } from './TauriListeners';
 
 const queryClient = new QueryClient({
   logger: undefined,
@@ -25,13 +23,10 @@ export function App() {
       <MotionConfig transition={{ duration: 0.1 }}>
         <HelmetProvider>
           <DndProvider backend={HTML5Backend}>
-            <DialogProvider>
               <Suspense>
                 <AppRouter />
-                <TauriListeners />
                 {/*<ReactQueryDevtools initialIsOpen={false} />*/}
               </Suspense>
-            </DialogProvider>
           </DndProvider>
         </HelmetProvider>
       </MotionConfig>

src-web/components/AppRouter.tsx

@@ -1,13 +1,19 @@
-import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
-import { routePaths } from '../hooks/useRoutes';
-import RouteError from './RouteError';
+import { createBrowserRouter, Navigate, Outlet, RouterProvider } from 'react-router-dom';
+import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
+import { useRecentRequests } from '../hooks/useRecentRequests';
+import { useRequests } from '../hooks/useRequests';
+import { GlobalHooks } from './GlobalHooks';
 import Workspace from './Workspace';
 import Workspaces from './Workspaces';
+import { DialogProvider } from './DialogContext';
+import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
+import RouteError from './RouteError';
 
 const router = createBrowserRouter([
   {
     path: '/',
     errorElement: <RouteError />,
+    element: <Layout />,
     children: [
       {
         path: '/',
@@ -18,12 +24,16 @@ const router = createBrowserRouter([
         element: <Workspaces />,
       },
       {
-        path: routePaths.workspace({ workspaceId: ':workspaceId' }),
-        element: <Workspace />,
+        path: routePaths.workspace({
+          workspaceId: ':workspaceId',
+          environmentId: ':environmentId',
+        }),
+        element: <WorkspaceOrRedirect />,
       },
       {
         path: routePaths.request({
           workspaceId: ':workspaceId',
+          environmentId: ':environmentId',
           requestId: ':requestId',
         }),
         element: <Workspace />,
@@ -35,3 +45,37 @@ const router = createBrowserRouter([
 export function AppRouter() {
   return <RouterProvider router={router} />;
 }
+
+function WorkspaceOrRedirect() {
+  const recentRequests = useRecentRequests();
+  const activeEnvironmentId = useActiveEnvironmentId();
+  const requests = useRequests();
+  const request = requests.find((r) => r.id === recentRequests[0]);
+  const routes = useAppRoutes();
+
+  if (request === undefined) {
+    return <Workspace />;
+  }
+
+  const { id: requestId, workspaceId } = request;
+  const environmentId = activeEnvironmentId ?? undefined;
+
+  return (
+    <Navigate
+      to={routes.paths.request({
+        workspaceId,
+        environmentId,
+        requestId,
+      })}
+    />
+  );
+}
+
+function Layout() {
+  return (
+    <DialogProvider>
+      <Outlet />
+      <GlobalHooks />
+    </DialogProvider>
+  );
+}

src-web/components/BasicAuth.tsx

@@ -14,6 +14,7 @@ export function BasicAuth({ requestId, authentication }: Props) {
   return (
     <VStack className="my-2" space={2}>
       <Input
+        useTemplating
         label="Username"
         name="username"
         size="sm"
@@ -26,6 +27,7 @@ export function BasicAuth({ requestId, authentication }: Props) {
         }}
       />
       <Input
+        useTemplating
         label="Password"
         name="password"
         size="sm"

src-web/components/BearerAuth.tsx

@@ -14,6 +14,9 @@ export function BearerAuth({ requestId, authentication }: Props) {
   return (
     <VStack className="my-2" space={2}>
       <Input
+        useTemplating
+        autocompleteVariables
+        type="password"
         label="Token"
         name="token"
         size="sm"

src-web/components/DialogContext.tsx

@@ -45,13 +45,21 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <DialogContext.Provider value={state}>
       {children}
-      {dialogs.map(({ id, render, ...props }) => (
-        <Dialog open key={id} onClose={() => actions.hide(id)} {...props}>
-          {render({ hide: () => actions.hide(id) })}
-        </Dialog>
+      {dialogs.map((props: DialogEntry) => (
+        <DialogInstance key={props.id} {...props} />
       ))}
     </DialogContext.Provider>
   );
 };
 
+function DialogInstance({ id, render, ...props }: DialogEntry) {
+  const { actions } = useContext(DialogContext);
+  const children = render({ hide: () => actions.hide(id) });
+  return (
+    <Dialog open onClose={() => actions.hide(id)} {...props}>
+      {children}
+    </Dialog>
+  );
+}
+
 export const useDialog = () => useContext(DialogContext).actions;

src-web/components/DropMarker.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import React, { memo } from 'react';
 
 interface Props {
@@ -9,7 +9,7 @@ export const DropMarker = memo(
   function DropMarker({ className }: Props) {
     return (
       <div
-        className={classnames(
+        className={classNames(
           className,
           'relative w-full h-0 overflow-visible pointer-events-none',
         )}

src-web/components/EnvironmentActionsDropdown.tsx

@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import { memo, useCallback, useMemo } from 'react';
+import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+import { useEnvironments } from '../hooks/useEnvironments';
+import type { ButtonProps } from './core/Button';
+import { Button } from './core/Button';
+import type { DropdownItem } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
+import { Icon } from './core/Icon';
+import { useDialog } from './DialogContext';
+import { EnvironmentEditDialog } from './EnvironmentEditDialog';
+
+type Props = {
+  className?: string;
+} & Pick<ButtonProps, 'forDropdown' | 'leftSlot'>;
+
+export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdown({
+  className,
+  ...buttonProps
+}: Props) {
+  const environments = useEnvironments();
+  const activeEnvironment = useActiveEnvironment();
+  const dialog = useDialog();
+  const routes = useAppRoutes();
+
+  const showEnvironmentDialog = useCallback(() => {
+    dialog.show({
+      title: 'Manage Environments',
+      render: () => <EnvironmentEditDialog initialEnvironment={activeEnvironment} />,
+    });
+  }, [dialog, activeEnvironment]);
+
+  const items: DropdownItem[] = useMemo(
+    () => [
+      ...environments.map(
+        (e) => ({
+          key: e.id,
+          label: e.name,
+          rightSlot: e.id === activeEnvironment?.id ? <Icon icon="check" /> : undefined,
+          onSelect: async () => {
+            if (e.id !== activeEnvironment?.id) {
+              routes.setEnvironment(e);
+            } else {
+              routes.setEnvironment(null);
+            }
+          },
+        }),
+        [activeEnvironment?.id],
+      ),
+      ...((environments.length > 0
+        ? [{ type: 'separator', label: 'Environments' }]
+        : []) as DropdownItem[]),
+      {
+        key: 'edit',
+        label: 'Manage Environments',
+        leftSlot: <Icon icon="gear" />,
+        onSelect: showEnvironmentDialog,
+      },
+    ],
+    [activeEnvironment, environments, routes, showEnvironmentDialog],
+  );
+
+  return (
+    <Dropdown items={items}>
+      <Button
+        size="sm"
+        className={classNames(
+          className,
+          'text-gray-800 !px-2 truncate',
+          activeEnvironment == null && 'text-opacity-disabled italic',
+        )}
+        {...buttonProps}
+      >
+        {activeEnvironment?.name ?? 'No Environment'}
+      </Button>
+    </Dropdown>
+  );
+});

src-web/components/EnvironmentEditDialog.tsx

@@ -0,0 +1,238 @@
+import classNames from 'classnames';
+import { useCallback, useMemo, useState } from 'react';
+import { useWindowSize } from 'react-use';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
+import { useDeleteEnvironment } from '../hooks/useDeleteEnvironment';
+import { useEnvironments } from '../hooks/useEnvironments';
+import { usePrompt } from '../hooks/usePrompt';
+import { useUpdateEnvironment } from '../hooks/useUpdateEnvironment';
+import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
+import type { Environment, Workspace } from '../lib/models';
+import { Button } from './core/Button';
+import type { DropdownItem } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
+import type {
+  GenericCompletionConfig,
+  GenericCompletionOption,
+} from './core/Editor/genericCompletion';
+import { Icon } from './core/Icon';
+import { IconButton } from './core/IconButton';
+import { InlineCode } from './core/InlineCode';
+import type { PairEditorProps } from './core/PairEditor';
+import { PairEditor } from './core/PairEditor';
+import { HStack, VStack } from './core/Stacks';
+
+interface Props {
+  initialEnvironment: Environment | null;
+}
+
+export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string | null>(
+    initialEnvironment?.id ?? null,
+  );
+  const environments = useEnvironments();
+  const createEnvironment = useCreateEnvironment();
+  const activeWorkspace = useActiveWorkspace();
+
+  const windowSize = useWindowSize();
+  const showSidebar = windowSize.width > 500;
+
+  const selectedEnvironment = useMemo(
+    () => environments.find((e) => e.id === selectedEnvironmentId) ?? null,
+    [environments, selectedEnvironmentId],
+  );
+
+  return (
+    <div
+      className={classNames(
+        'h-full grid gap-x-8 grid-rows-[minmax(0,1fr)]',
+        showSidebar ? 'grid-cols-[auto_minmax(0,1fr)]' : 'grid-cols-[minmax(0,1fr)]',
+      )}
+    >
+      {showSidebar && (
+        <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[250px] pr-3 border-r border-gray-100 -ml-2">
+          <div className="min-w-0 h-full w-full overflow-y-scroll">
+            <SidebarButton
+              active={selectedEnvironment == null}
+              onClick={() => setSelectedEnvironmentId(null)}
+            >
+              Base Environment
+            </SidebarButton>
+            <div className="ml-3 pl-2 border-l border-highlight">
+              {environments.map((e) => (
+                <SidebarButton
+                  key={e.id}
+                  active={selectedEnvironment?.id === e.id}
+                  onClick={() => setSelectedEnvironmentId(e.id)}
+                >
+                  {e.name}
+                </SidebarButton>
+              ))}
+            </div>
+          </div>
+          <Button
+            size="sm"
+            className="w-full text-center"
+            color="gray"
+            justify="center"
+            onClick={() => createEnvironment.mutate()}
+          >
+            New Environment
+          </Button>
+        </aside>
+      )}
+      {activeWorkspace != null ? (
+        <EnvironmentEditor environment={selectedEnvironment} workspace={activeWorkspace} />
+      ) : (
+        <div className="flex w-full h-full items-center justify-center text-gray-400 italic">
+          select an environment
+        </div>
+      )}
+    </div>
+  );
+};
+
+const EnvironmentEditor = function ({
+  environment,
+  workspace,
+}: {
+  environment: Environment | null;
+  workspace: Workspace;
+}) {
+  const environments = useEnvironments();
+  const updateEnvironment = useUpdateEnvironment(environment?.id ?? 'n/a');
+  const updateWorkspace = useUpdateWorkspace(workspace.id);
+  const deleteEnvironment = useDeleteEnvironment(environment);
+  const variables = environment == null ? workspace.variables : environment.variables;
+  const handleChange = useCallback<PairEditorProps['onChange']>(
+    (variables) => {
+      if (environment != null) {
+        updateEnvironment.mutate({ variables });
+      } else {
+        updateWorkspace.mutate({ variables });
+      }
+    },
+    [updateWorkspace, updateEnvironment, environment],
+  );
+
+  // Gather a list of env names from other environments, to help the user get them aligned
+  const nameAutocomplete = useMemo<GenericCompletionConfig>(() => {
+    const otherEnvironments = environments.filter((e) => e.id !== environment?.id);
+    const allVariableNames =
+      environment == null
+        ? [
+            // Nothing to autocomplete if we're in the base environment
+          ]
+        : [
+            ...workspace.variables.map((v) => v.name),
+            ...otherEnvironments.flatMap((e) => e.variables.map((v) => v.name)),
+          ];
+
+    // Filter out empty strings and variables that already exist
+    const variableNames = allVariableNames.filter(
+      (name) => name != '' && !variables.find((v) => v.name === name),
+    );
+    const uniqueVariableNames = [...new Set(variableNames)];
+    const options = uniqueVariableNames.map(
+      (name): GenericCompletionOption => ({
+        label: name,
+        type: 'constant',
+      }),
+    );
+    return { options };
+  }, [environments, variables, workspace, environment]);
+
+  const prompt = usePrompt();
+  const items = useMemo<DropdownItem[] | null>(
+    () =>
+      environment == null
+        ? null
+        : [
+            {
+              key: 'rename',
+              label: 'Rename',
+              leftSlot: <Icon icon="pencil" size="sm" />,
+              onSelect: async () => {
+                const name = await prompt({
+                  title: 'Rename Environment',
+                  description: (
+                    <>
+                      Enter a new name for <InlineCode>{environment.name}</InlineCode>
+                    </>
+                  ),
+                  name: 'name',
+                  label: 'Name',
+                  defaultValue: environment.name,
+                });
+                updateEnvironment.mutate({ name });
+              },
+            },
+            {
+              key: 'delete',
+              variant: 'danger',
+              label: 'Delete',
+              leftSlot: <Icon icon="trash" size="sm" />,
+              onSelect: () => deleteEnvironment.mutate(),
+            },
+          ],
+    [deleteEnvironment, updateEnvironment, prompt, environment],
+  );
+
+  const validateName = useCallback((name: string) => {
+    // Empty just means the variable doesn't have a name yet, and is unusable
+    if (name === '') return true;
+    return name.match(/^[a-z_][a-z0-9_]*$/i) != null;
+  }, []);
+
+  return (
+    <VStack space={2}>
+      <HStack space={2} className="justify-between">
+        <h1 className="text-xl">{environment?.name ?? 'Base Environment'}</h1>
+        {items != null && (
+          <Dropdown items={items}>
+            <IconButton icon="gear" title="Environment Actions" size="sm" className="!h-auto w-8" />
+          </Dropdown>
+        )}
+      </HStack>
+      <PairEditor
+        nameAutocomplete={nameAutocomplete}
+        nameAutocompleteVariables={false}
+        namePlaceholder="VAR_NAME"
+        valuePlaceholder="variable value"
+        nameValidate={validateName}
+        valueAutocompleteVariables={false}
+        forceUpdateKey={environment?.id ?? workspace?.id ?? 'n/a'}
+        pairs={variables}
+        onChange={handleChange}
+      />
+    </VStack>
+  );
+};
+
+function SidebarButton({
+  children,
+  className,
+  active,
+  onClick,
+}: {
+  className?: string;
+  children: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      tabIndex={active ? 0 : -1}
+      onClick={onClick}
+      className={classNames(
+        className,
+        'flex items-center text-sm text-left w-full mb-1 h-xs rounded px-2',
+        'text-gray-600 hocus:text-gray-800 focus:bg-highlightSecondary outline-none',
+        active && '!text-gray-900',
+      )}
+    >
+      {children}
+    </button>
+  );
+}

src-web/components/GlobalHooks.tsx

@@ -1,21 +1,45 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { appWindow } from '@tauri-apps/api/window';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useEffectOnce } from 'react-use';
 import { keyValueQueryKey } from '../hooks/useKeyValue';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
+import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
+import { useRecentRequests } from '../hooks/useRecentRequests';
+import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
 import { requestsQueryKey } from '../hooks/useRequests';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { responsesQueryKey } from '../hooks/useResponses';
-import { useTauriEvent } from '../hooks/useTauriEvent';
 import { workspacesQueryKey } from '../hooks/useWorkspaces';
+import { trackPage } from '../lib/analytics';
 import { DEFAULT_FONT_SIZE } from '../lib/constants';
 import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
 import type { HttpRequest, HttpResponse, Model, Workspace } from '../lib/models';
 import { modelsEq } from '../lib/models';
+import { setPathname } from '../lib/persistPathname';
+
+export function GlobalHooks() {
+  // Include here so they always update, even
+  // if no component references them
+  useRecentWorkspaces();
+  useRecentEnvironments();
+  useRecentRequests();
 
-export function TauriListeners() {
   const queryClient = useQueryClient();
   const { wasUpdatedExternally } = useRequestUpdateKey(null);
 
-  useTauriEvent<Model>('created_model', ({ payload, windowLabel }) => {
+  // Listen for location changes and update the pathname
+  const location = useLocation();
+  useEffect(() => {
+    setPathname(location.pathname).catch(console.error);
+  }, [location.pathname]);
+
+  useEffectOnce(() => {
+    trackPage('/');
+  });
+
+  useListenToTauriEvent<Model>('created_model', ({ payload, windowLabel }) => {
     if (shouldIgnoreEvent(payload, windowLabel)) return;
 
     const queryKey =
@@ -30,18 +54,17 @@ export function TauriListeners() {
         : null;
 
     if (queryKey === null) {
-      if (payload.model) {
-        console.log('Unrecognized created model:', payload);
-      }
+      console.log('Unrecognized created model:', payload);
       return;
     }
 
     if (!shouldIgnoreModel(payload)) {
-      queryClient.setQueryData<Model[]>(queryKey, (values) => [...(values ?? []), payload]);
+      // Order newest first
+      queryClient.setQueryData<Model[]>(queryKey, (values) => [payload, ...(values ?? [])]);
     }
   });
 
-  useTauriEvent<Model>('updated_model', ({ payload, windowLabel }) => {
+  useListenToTauriEvent<Model>('updated_model', ({ payload, windowLabel }) => {
     if (shouldIgnoreEvent(payload, windowLabel)) return;
 
     const queryKey =
@@ -56,9 +79,7 @@ export function TauriListeners() {
         : null;
 
     if (queryKey === null) {
-      if (payload.model) {
-        console.log('Unrecognized updated model:', payload);
-      }
+      console.log('Unrecognized updated model:', payload);
       return;
     }
 
@@ -73,7 +94,7 @@ export function TauriListeners() {
     }
   });
 
-  useTauriEvent<Model>('deleted_model', ({ payload, windowLabel }) => {
+  useListenToTauriEvent<Model>('deleted_model', ({ payload, windowLabel }) => {
     if (shouldIgnoreEvent(payload, windowLabel)) return;
 
     if (shouldIgnoreModel(payload)) return;
@@ -88,7 +109,7 @@ export function TauriListeners() {
       queryClient.setQueryData(keyValueQueryKey(payload), undefined);
     }
   });
-  useTauriEvent<number>('zoom', ({ payload: zoomDelta, windowLabel }) => {
+  useListenToTauriEvent<number>('zoom', ({ payload: zoomDelta, windowLabel }) => {
     if (windowLabel !== appWindow.label) return;
     const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
 
@@ -115,7 +136,8 @@ const shouldIgnoreEvent = (payload: Model, windowLabel: string) =>
   windowLabel === appWindow.label && payload.model !== 'http_response';
 
 const shouldIgnoreModel = (payload: Model) => {
-  if (payload.model === 'http_response') return false;
-  if (payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC) return false;
-  return true;
+  if (payload.model === 'key_value') {
+    return payload.namespace === NAMESPACE_NO_SYNC;
+  }
+  return false;
 };

src-web/components/GraphQLEditor.tsx

@@ -6,6 +6,7 @@ import type { HttpRequest } from '../lib/models';
 import { Button } from './core/Button';
 import type { EditorProps } from './core/Editor';
 import { Editor, formatGraphQL } from './core/Editor';
+import { FormattedError } from './core/FormattedError';
 import { Separator } from './core/Separator';
 import { useDialog } from './DialogContext';
 
@@ -24,8 +25,7 @@ interface GraphQLBody {
 
 export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEditorProps }: Props) {
   const editorViewRef = useRef<EditorView>(null);
-  const introspection = useIntrospectGraphQL(baseRequest);
-
+  const { schema, isLoading, error, refetch } = useIntrospectGraphQL(baseRequest);
   const { query, variables } = useMemo<GraphQLBody>(() => {
     if (defaultValue === undefined) {
       return { query: '', variables: {} };
@@ -65,8 +65,8 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
   // Refetch the schema when the URL changes
   useEffect(() => {
     if (editorViewRef.current === null) return;
-    updateSchema(editorViewRef.current, introspection.data);
-  }, [introspection.data]);
+    updateSchema(editorViewRef.current, schema);
+  }, [schema]);
 
   const dialog = useDialog();
 
@@ -81,22 +81,38 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
         placeholder="..."
         ref={editorViewRef}
         actions={
-          (introspection.error || introspection.isLoading) && (
+          (error || isLoading) && (
             <Button
               size="xs"
-              color={introspection.error ? 'danger' : 'gray'}
-              isLoading={introspection.isLoading}
+              color={error ? 'danger' : 'gray'}
+              isLoading={isLoading}
               onClick={() => {
                 dialog.show({
                   title: 'Introspection Failed',
                   size: 'sm',
+                  id: 'introspection-failed',
                   render: () => (
-                    <div className="whitespace-pre-wrap">{introspection.error?.message}</div>
+                    <div className="whitespace-pre-wrap">
+                      <FormattedError>{error ?? 'unknown'}</FormattedError>
+                      <div className="w-full mt-3">
+                        <Button
+                          onClick={() => {
+                            dialog.hide('introspection-failed');
+                            refetch();
+                          }}
+                          className="ml-auto"
+                          color="secondary"
+                          size="sm"
+                        >
+                          Try Again
+                        </Button>
+                      </div>
+                    </div>
                   ),
                 });
               }}
             >
-              {introspection.error ? 'Introspection Failed' : 'Introspecting'}
+              {error ? 'Introspection Failed' : 'Introspecting'}
             </Button>
           )
         }
@@ -111,6 +127,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
         onChange={handleChangeVariables}
         placeholder="{}"
         useTemplating
+        autocompleteVariables
         {...extraEditorProps}
       />
     </div>

src-web/components/HeaderEditor.tsx

@@ -17,6 +17,8 @@ type Props = {
 export function HeaderEditor({ headers, onChange, forceUpdateKey }: Props) {
   return (
     <PairEditor
+      valueAutocompleteVariables
+      nameAutocompleteVariables
       pairs={headers}
       onChange={onChange}
       forceUpdateKey={forceUpdateKey}
@@ -63,5 +65,7 @@ const validateHttpHeader = (v: string) => {
     return true;
   }
 
-  return v.match(/^[a-zA-Z0-9-_]+$/) !== null;
+  // Template strings are not allowed so we replace them with a valid example string
+  const withoutTemplateStrings = v.replace(/\$\{\[\s*[^\]\s]+\s*]}/gi, '123');
+  return withoutTemplateStrings.match(/^[a-zA-Z0-9-_]+$/) !== null;
 };

src-web/components/ImageView.tsx

@@ -1,9 +0,0 @@
-interface Props {
-  data: string;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function ImageView({ data }: Props) {
-  // const dataUri = `data:image/png;base64,${window.btoa(data)}`;
-  return <div>Image preview not supported until binary response support is added</div>;
-}

src-web/components/Overlay.tsx

@@ -1,7 +1,7 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
-import type { ReactNode } from 'react';
 import { motion } from 'framer-motion';
+import type { ReactNode } from 'react';
 import { Portal } from './Portal';
 
 interface Props {
@@ -10,6 +10,7 @@ interface Props {
   open: boolean;
   onClose?: () => void;
   zIndex?: keyof typeof zIndexes;
+  variant?: 'default' | 'transparent';
 }
 
 const zIndexes: Record<number, string> = {
@@ -20,24 +21,32 @@ const zIndexes: Record<number, string> = {
   50: 'z-50',
 };
 
-export function Overlay({ zIndex = 30, open, onClose, portalName, children }: Props) {
+export function Overlay({
+  variant = 'default',
+  zIndex = 30,
+  open,
+  onClose,
+  portalName,
+  children,
+}: Props) {
   return (
     <Portal name={portalName}>
       {open && (
-        <FocusTrap>
+        <FocusTrap> 
           <motion.div
-            className={classnames('fixed inset-0', zIndexes[zIndex])}
+            className={classNames('fixed inset-0', zIndexes[zIndex])}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
           >
             <div
               aria-hidden
               onClick={onClose}
-              className="absolute inset-0 bg-gray-600/60 dark:bg-black/50"
+              className={classNames(
+                'absolute inset-0',
+                variant === 'default' && 'bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm',
+              )}
             />
-            {/* Add region to still be able to drag the window */}
-            <div data-tauri-drag-region className="absolute top-0 left-0 right-0 h-md" />
-            {children}
+            <div className="bg-red-100">{children}</div>
           </motion.div>
         </FocusTrap>
       )}

src-web/components/RecentRequestsDropdown.tsx

@@ -0,0 +1,105 @@
+import classNames from 'classnames';
+import { useMemo, useRef } from 'react';
+import { useKey, useKeyPressEvent } from 'react-use';
+import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
+import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+import { useRecentRequests } from '../hooks/useRecentRequests';
+import { useRequests } from '../hooks/useRequests';
+import type { ButtonProps } from './core/Button';
+import { Button } from './core/Button';
+import type { DropdownItem, DropdownRef } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
+
+export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'className'>) {
+  const dropdownRef = useRef<DropdownRef>(null);
+  const activeRequest = useActiveRequest();
+  const activeWorkspaceId = useActiveWorkspaceId();
+  const activeEnvironmentId = useActiveEnvironmentId();
+  const requests = useRequests();
+  const routes = useAppRoutes();
+  const allRecentRequestIds = useRecentRequests();
+  const recentRequestIds = useMemo(() => allRecentRequestIds.slice(1), [allRecentRequestIds]);
+
+  // Toggle the menu on Cmd+k
+  useKey('k', (e) => {
+    if (e.metaKey) {
+      e.preventDefault();
+      dropdownRef.current?.toggle(0);
+    }
+  });
+
+  // Handle key-up
+  useKeyPressEvent('Control', undefined, () => {
+    dropdownRef.current?.select?.();
+  });
+
+  useKey(
+    'Tab',
+    (e) => {
+      if (!e.ctrlKey || recentRequestIds.length === 0) return;
+
+      if (!dropdownRef.current?.isOpen) {
+        dropdownRef.current?.open(e.shiftKey ? -1 : 0);
+        return;
+      }
+
+      if (e.shiftKey) dropdownRef.current?.prev?.();
+      else dropdownRef.current?.next?.();
+    },
+    undefined,
+    [recentRequestIds.length],
+  );
+
+  const items = useMemo<DropdownItem[]>(() => {
+    if (activeWorkspaceId === null) return [];
+
+    const recentRequestItems: DropdownItem[] = [];
+    for (const id of recentRequestIds) {
+      const request = requests.find((r) => r.id === id);
+      if (request === undefined) continue;
+
+      recentRequestItems.push({
+        key: request.id,
+        label: request.name,
+        // leftSlot: <CountBadge className="!ml-0 px-0 w-5" count={recentRequestItems.length + 1} />,
+        onSelect: () => {
+          routes.navigate('request', {
+            requestId: request.id,
+            environmentId: activeEnvironmentId ?? undefined,
+            workspaceId: activeWorkspaceId,
+          });
+        },
+      });
+    }
+
+    // No recent requests to show
+    if (recentRequestItems.length === 0) {
+      return [
+        {
+          label: 'No recent requests',
+          disabled: true,
+        },
+      ] as DropdownItem[];
+    }
+
+    return recentRequestItems.slice(0, 20);
+  }, [activeWorkspaceId, activeEnvironmentId, recentRequestIds, requests, routes]);
+
+  return (
+    <Dropdown ref={dropdownRef} items={items}>
+      <Button
+        data-tauri-drag-region
+        size="sm"
+        className={classNames(
+          className,
+          'text-gray-800 text-sm truncate pointer-events-auto',
+          activeRequest === null && 'text-opacity-disabled italic',
+        )}
+      >
+        {activeRequest?.name ?? 'No Request'}
+      </Button>
+    </Dropdown>
+  );
+}

src-web/components/RecentResponsesDropdown.tsx

@@ -0,0 +1,64 @@
+import { useDeleteResponse } from '../hooks/useDeleteResponse';
+import { useDeleteResponses } from '../hooks/useDeleteResponses';
+import type { HttpResponse } from '../lib/models';
+import { Dropdown } from './core/Dropdown';
+import { pluralize } from '../lib/pluralize';
+import { HStack } from './core/Stacks';
+import { StatusTag } from './core/StatusTag';
+import { Icon } from './core/Icon';
+import { IconButton } from './core/IconButton';
+
+interface Props {
+  responses: HttpResponse[];
+  activeResponse: HttpResponse;
+  onPinnedResponse: (r: HttpResponse) => void;
+}
+
+export const RecentResponsesDropdown = function ResponsePane({
+  activeResponse,
+  responses,
+  onPinnedResponse,
+}: Props) {
+  const deleteResponse = useDeleteResponse(activeResponse?.id ?? null);
+  const deleteAllResponses = useDeleteResponses(activeResponse?.requestId);
+
+  return (
+    <Dropdown
+      items={[
+        {
+          key: 'clear-single',
+          label: 'Clear Response',
+          onSelect: deleteResponse.mutate,
+          disabled: responses.length === 0,
+        },
+        {
+          key: 'clear-all',
+          label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
+          onSelect: deleteAllResponses.mutate,
+          hidden: responses.length <= 1,
+          disabled: responses.length === 0,
+        },
+        { type: 'separator', label: 'History' },
+        ...responses.slice(0, 20).map((r) => ({
+          key: r.id,
+          label: (
+            <HStack space={2} alignItems="center">
+              <StatusTag className="text-xs" response={r} />
+              <span>&bull;</span> <span className="font-mono text-xs">{r.elapsed}ms</span>
+            </HStack>
+          ),
+          leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+          onSelect: () => onPinnedResponse(r),
+        })),
+      ]}
+    >
+      <IconButton
+        title="Show response history"
+        icon="triangleDown"
+        className="ml-auto"
+        size="sm"
+        iconSize="md"
+      />
+    </Dropdown>
+  );
+};

src-web/components/RequestActionsDropdown.tsx

@@ -1,42 +1,53 @@
-import type { HTMLAttributes, ReactElement } from 'react';
-import React from 'react';
+import { useRef } from 'react';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
-import { useTheme } from '../hooks/useTheme';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
+import type { DropdownProps, DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { HotKey } from './core/HotKey';
 import { Icon } from './core/Icon';
 
 interface Props {
-  requestId: string;
-  children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
+  requestId: string | null;
+  children: DropdownProps['children'];
 }
 
 export function RequestActionsDropdown({ requestId, children }: Props) {
   const deleteRequest = useDeleteRequest(requestId);
   const duplicateRequest = useDuplicateRequest({ id: requestId, navigateAfter: true });
-  const { appearance, toggleAppearance } = useTheme();
+  const dropdownRef = useRef<DropdownRef>(null);
+
+  useListenToTauriEvent('toggle_settings', () => {
+    dropdownRef.current?.toggle();
+  });
+
+  // TODO: Put this somewhere better
+  useListenToTauriEvent('duplicate_request', () => {
+    duplicateRequest.mutate();
+  });
+
+  if (requestId == null) {
+    return null;
+  }
 
   return (
     <Dropdown
+      ref={dropdownRef}
       items={[
         {
+          key: 'duplicate',
           label: 'Duplicate',
           onSelect: duplicateRequest.mutate,
           leftSlot: <Icon icon="copy" />,
-          rightSlot: <HotKey>⌘D</HotKey>,
+          rightSlot: <HotKey modifier="Meta" keyName="D" />,
         },
         {
+          key: 'delete',
           label: 'Delete',
           onSelect: deleteRequest.mutate,
+          variant: 'danger',
           leftSlot: <Icon icon="trash" />,
         },
-        { type: 'separator', label: 'Yaak Settings' },
-        {
-          label: appearance === 'dark' ? 'Light Theme' : 'Dark Theme',
-          onSelect: toggleAppearance,
-          leftSlot: <Icon icon={appearance === 'dark' ? 'sun' : 'moon'} />,
-        },
       ]}
     >
       {children}

src-web/components/RequestPane.tsx

@@ -1,12 +1,13 @@
 import { invoke } from '@tauri-apps/api';
 import { appWindow } from '@tauri-apps/api/window';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
+import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { useTauriEvent } from '../hooks/useTauriEvent';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
 import type { HttpHeader, HttpRequest } from '../lib/models';
@@ -42,6 +43,7 @@ const useActiveTab = createGlobalState<string>('body');
 export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
   const activeRequest = useActiveRequest();
   const activeRequestId = activeRequest?.id ?? null;
+  const activeEnvironmentId = useActiveEnvironmentId();
   const updateRequest = useUpdateRequest(activeRequestId);
   const [activeTab, setActiveTab] = useActiveTab();
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
@@ -86,7 +88,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                   // Force update header editor so any changed headers are reflected
                   setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
 
-                  await updateRequest.mutate(patch);
+                  updateRequest.mutate(patch);
                 },
               },
             },
@@ -123,7 +125,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                       token: authentication.token ?? '',
                     };
                   }
-                  await updateRequest.mutate({ authenticationType, authentication });
+                  updateRequest.mutate({ authenticationType, authentication });
                 },
               },
             },
@@ -140,19 +142,22 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
     [updateRequest],
   );
 
-  useTauriEvent(
+  useListenToTauriEvent(
     'send_request',
     async ({ windowLabel }) => {
       if (windowLabel !== appWindow.label) return;
-      await invoke('send_request', { requestId: activeRequestId });
+      await invoke('send_request', {
+        requestId: activeRequestId,
+        environmentId: activeEnvironmentId,
+      });
     },
-    [activeRequestId],
+    [activeRequestId, activeEnvironmentId],
   );
 
   return (
     <div
       style={style}
-      className={classnames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
+      className={classNames(className, 'h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}
     >
       {activeRequest && (
         <>
@@ -162,7 +167,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
             label="Request"
             onChangeValue={setActiveTab}
             tabs={tabs}
-            tabListClassName="mt-2"
+            tabListClassName="mt-2 !mb-1.5"
           >
             <TabContent value="auth">
               {activeRequest.authenticationType === AUTH_TYPE_BASIC ? (
@@ -202,6 +207,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 <Editor
                   forceUpdateKey={forceUpdateKey}
                   useTemplating
+                  autocompleteVariables
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
@@ -214,6 +220,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 <Editor
                   forceUpdateKey={forceUpdateKey}
                   useTemplating
+                  autocompleteVariables
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}

src-web/components/RequestResponse.tsx

@@ -1,8 +1,9 @@
 import useResizeObserver from '@react-hook/resize-observer';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
-import { useKeyValue } from '../hooks/useKeyValue';
+import { useLocalStorage } from 'react-use';
+import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
 import { clamp } from '../lib/clamp';
 import { RequestPane } from './RequestPane';
 import { ResizeHandle } from './ResizeHandle';
@@ -24,10 +25,10 @@ const STACK_VERTICAL_WIDTH = 650;
 export const RequestResponse = memo(function RequestResponse({ style }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [vertical, setVertical] = useState<boolean>(false);
-  const widthKv = useKeyValue<number>({ key: 'body_width', defaultValue: DEFAULT });
-  const heightKv = useKeyValue<number>({ key: 'body_height', defaultValue: DEFAULT });
-  const width = widthKv.value ?? DEFAULT;
-  const height = heightKv.value ?? DEFAULT;
+  const [widthRaw, setWidth] = useLocalStorage<number>(`body_width::${useActiveWorkspaceId()}`);
+  const [heightRaw, setHeight] = useLocalStorage<number>(`body_height::${useActiveWorkspaceId()}`);
+  const width = widthRaw ?? DEFAULT;
+  const height = heightRaw ?? DEFAULT;
   const [isResizing, setIsResizing] = useState<boolean>(false);
   const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
     null,
@@ -63,8 +64,8 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
   };
 
   const handleReset = useCallback(
-    () => (vertical ? heightKv.set(DEFAULT) : widthKv.set(DEFAULT)),
-    [heightKv, vertical, widthKv],
+    () => (vertical ? setHeight(DEFAULT) : setWidth(DEFAULT)),
+    [setHeight, vertical, setWidth],
   );
 
   const handleResizeStart = useCallback(
@@ -89,7 +90,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
               MIN_HEIGHT_PX,
               maxHeightPx,
             );
-            heightKv.set(newHeightPx / containerRect.height);
+            setHeight(newHeightPx / containerRect.height);
           } else {
             const maxWidthPx = containerRect.width - MIN_WIDTH_PX;
             const newWidthPx = clamp(
@@ -97,7 +98,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
               MIN_WIDTH_PX,
               maxWidthPx,
             );
-            widthKv.set(newWidthPx / containerRect.width);
+            setWidth(newWidthPx / containerRect.width);
           }
         },
         up: (e: MouseEvent) => {
@@ -110,7 +111,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
       document.documentElement.addEventListener('mouseup', moveState.current.up);
       setIsResizing(true);
     },
-    [width, height, vertical, heightKv, widthKv],
+    [width, height, vertical, setHeight, setWidth],
   );
 
   return (
@@ -119,7 +120,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
       <ResizeHandle
         style={drag}
         isResizing={isResizing}
-        className={classnames(vertical ? 'translate-y-0.5' : 'translate-x-0.5')}
+        className={classNames(vertical ? 'translate-y-0.5' : 'translate-x-0.5')}
         onResizeStart={handleResizeStart}
         onReset={handleReset}
         side={vertical ? 'top' : 'left'}

src-web/components/ResizeHandle.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 import React from 'react';
 
@@ -28,7 +28,7 @@ export function ResizeHandle({
       aria-hidden
       draggable
       style={style}
-      className={classnames(
+      className={classNames(
         className,
         'group z-10 flex',
         vertical ? 'w-full h-3 cursor-row-resize' : 'h-full w-3 cursor-col-resize',
@@ -45,7 +45,7 @@ export function ResizeHandle({
       {/* Show global overlay with cursor style to ensure cursor remains the same when moving quickly */}
       {isResizing && (
         <div
-          className={classnames(
+          className={classNames(
             'fixed -left-20 -right-20 -top-20 -bottom-20',
             vertical && 'cursor-row-resize',
             !vertical && 'cursor-col-resize',

src-web/components/ResponseHeaders.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { HttpResponse } from '../lib/models';
 import { HStack } from './core/Stacks';
 
@@ -14,7 +14,7 @@ export function ResponseHeaders({ headers }: Props) {
           <HStack
             space={3}
             key={i}
-            className={classnames(i > 0 ? 'border-t border-highlightSecondary py-1' : 'pb-1')}
+            className={classNames(i > 0 ? 'border-t border-highlightSecondary py-1' : 'pb-1')}
           >
             <dd className="w-1/3 text-violet-600 select-text cursor-text">{h.name}</dd>
             <dt className="w-2/3 select-text cursor-text break-all">{h.value}</dt>

src-web/components/ResponsePane.tsx

@@ -1,30 +1,29 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { CSSProperties } from 'react';
-import { memo, useEffect, useMemo, useState } from 'react';
+import { useCallback, memo, useEffect, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
 import { useActiveRequestId } from '../hooks/useActiveRequestId';
-import { useDeleteResponse } from '../hooks/useDeleteResponse';
-import { useDeleteResponses } from '../hooks/useDeleteResponses';
+import { useLatestResponse } from '../hooks/useLatestResponse';
+import { useResponseContentType } from '../hooks/useResponseContentType';
 import { useResponses } from '../hooks/useResponses';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
-import { tryFormatJson } from '../lib/formatters';
 import type { HttpResponse } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
-import { pluralize } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { CountBadge } from './core/CountBadge';
-import { Dropdown } from './core/Dropdown';
-import { Editor } from './core/Editor';
-import { Icon } from './core/Icon';
-import { IconButton } from './core/IconButton';
+import { DurationTag } from './core/DurationTag';
+import { SizeTag } from './core/SizeTag';
 import { HStack } from './core/Stacks';
 import { StatusTag } from './core/StatusTag';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
-import { Webview } from './core/Webview';
 import { EmptyStateText } from './EmptyStateText';
-import { ImageView } from './ImageView';
 import { ResponseHeaders } from './ResponseHeaders';
+import { CsvViewer } from './responseViewers/CsvViewer';
+import { ImageViewer } from './responseViewers/ImageViewer';
+import { TextViewer } from './responseViewers/TextViewer';
+import { WebPageViewer } from './responseViewers/WebPageViewer';
+import { RecentResponsesDropdown } from './RecentResponsesDropdown';
 
 interface Props {
   style?: CSSProperties;
@@ -36,24 +35,22 @@ const useActiveTab = createGlobalState<string>('body');
 export const ResponsePane = memo(function ResponsePane({ style, className }: Props) {
   const [pinnedResponseId, setPinnedResponseId] = useState<string | null>(null);
   const activeRequestId = useActiveRequestId();
+  const latestResponse = useLatestResponse(activeRequestId);
   const responses = useResponses(activeRequestId);
   const activeResponse: HttpResponse | null = pinnedResponseId
     ? responses.find((r) => r.id === pinnedResponseId) ?? null
-    : responses[responses.length - 1] ?? null;
-  const [viewMode, toggleViewMode] = useResponseViewMode(activeResponse?.requestId);
-  const deleteResponse = useDeleteResponse(activeResponse?.id ?? null);
-  const deleteAllResponses = useDeleteResponses(activeResponse?.requestId);
+    : latestResponse ?? null;
+  const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
   const [activeTab, setActiveTab] = useActiveTab();
 
   // Unset pinned response when a new one comes in
   useEffect(() => setPinnedResponseId(null), [responses.length]);
 
-  const contentType = useMemo(
-    () =>
-      activeResponse?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ??
-      'text/plain',
-    [activeResponse],
-  );
+  const contentType = useResponseContentType(activeResponse);
+
+  const handlePinnedResponse = useCallback((r: HttpResponse) => {
+    setPinnedResponseId(r.id);
+  }, [setPinnedResponseId])
 
   const tabs: TabItem[] = useMemo(
     () => [
@@ -62,7 +59,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
         label: 'Preview',
         options: {
           value: viewMode,
-          onChange: toggleViewMode,
+          onChange: setViewMode,
           items: [
             { label: 'Pretty', value: 'pretty' },
             { label: 'Raw', value: 'raw' },
@@ -81,16 +78,13 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
         value: 'headers',
       },
     ],
-    [activeResponse?.headers, toggleViewMode, viewMode],
+    [activeResponse?.headers, setViewMode, viewMode],
   );
 
-  // Don't render until we know the view mode
-  if (viewMode === undefined) return null;
-
   return (
     <div
       style={style}
-      className={classnames(
+      className={classNames(
         className,
         'bg-gray-50 max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1',
         'dark:bg-gray-100 rounded-md border border-highlight',
@@ -102,8 +96,8 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
         <>
           <HStack
             alignItems="center"
-            className={classnames(
-              'italic text-gray-700 text-sm w-full flex-shrink-0',
+            className={classNames(
+              'text-gray-700 text-sm w-full flex-shrink-0',
               // Remove a bit of space because the tabs have lots too
               '-mb-1.5',
             )}
@@ -111,89 +105,57 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
             {activeResponse && (
               <HStack alignItems="center" className="w-full">
                 <div className="whitespace-nowrap px-3">
-                  <StatusTag response={activeResponse} />
-                  {activeResponse.elapsed > 0 && <>&nbsp;&bull;&nbsp;{activeResponse.elapsed}ms</>}
-                  {activeResponse.body.length > 0 && (
-                    <>&nbsp;&bull;&nbsp;{(activeResponse.body.length / 1000).toFixed(1)} KB</>
-                  )}
+                  <HStack space={2}>
+                    <StatusTag showReason response={activeResponse} />
+                    {activeResponse.elapsed > 0 && (
+                      <>
+                        <span>&bull;</span>
+                        <DurationTag millis={activeResponse.elapsed} />
+                      </>
+                    )}
+                    {!!activeResponse.contentLength && (
+                      <>
+                        <span>&bull;</span>
+                        <SizeTag contentLength={activeResponse.contentLength} />
+                      </>
+                    )}
+                  </HStack>
                 </div>
 
-                <Dropdown
-                  items={[
-                    {
-                      label: 'Clear Response',
-                      onSelect: deleteResponse.mutate,
-                      disabled: responses.length === 0,
-                    },
-                    {
-                      label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
-                      onSelect: deleteAllResponses.mutate,
-                      hidden: responses.length <= 1,
-                      disabled: responses.length === 0,
-                    },
-                    { type: 'separator', label: 'History' },
-                    ...responses.slice(0, 10).map((r) => ({
-                      label: r.status + ' - ' + r.elapsed + ' ms',
-                      leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
-                      onSelect: () => setPinnedResponseId(r.id),
-                    })),
-                  ]}
-                >
-                  <IconButton
-                    title="Show response history"
-                    icon="triangleDown"
-                    className="ml-auto"
-                    size="sm"
-                    iconSize="md"
-                  />
-                </Dropdown>
+                <RecentResponsesDropdown
+                  responses={responses}
+                  activeResponse={activeResponse}
+                  onPinnedResponse={handlePinnedResponse}
+                />
               </HStack>
             )}
           </HStack>
 
-          {
-            <Tabs
-              value={activeTab}
-              onChangeValue={setActiveTab}
-              label="Response"
-              tabs={tabs}
-              className="ml-3 mr-1"
-              tabListClassName="mt-1.5"
-            >
-              <TabContent value="headers">
-                <ResponseHeaders headers={activeResponse?.headers ?? []} />
-              </TabContent>
-              <TabContent value="body">
-                {!activeResponse.body ? (
-                  <EmptyStateText>No Response</EmptyStateText>
-                ) : viewMode === 'pretty' && contentType.includes('html') ? (
-                  <Webview
-                    body={activeResponse.body}
-                    contentType={contentType}
-                    url={activeResponse.url}
-                  />
-                ) : viewMode === 'pretty' && contentType.includes('json') ? (
-                  <Editor
-                    readOnly
-                    forceUpdateKey={`pretty::${activeResponse.updatedAt}`}
-                    className="bg-gray-50 dark:!bg-gray-100"
-                    defaultValue={tryFormatJson(activeResponse?.body)}
-                    contentType={contentType}
-                  />
-                ) : contentType.startsWith('image') ? (
-                  <ImageView data={activeResponse?.body} />
-                ) : activeResponse?.body ? (
-                  <Editor
-                    readOnly
-                    forceUpdateKey={activeResponse.updatedAt}
-                    className="bg-gray-50 dark:!bg-gray-100"
-                    defaultValue={activeResponse?.body}
-                    contentType={contentType}
-                  />
-                ) : null}
-              </TabContent>
-            </Tabs>
-          }
+          <Tabs
+            value={activeTab}
+            onChangeValue={setActiveTab}
+            label="Response"
+            tabs={tabs}
+            className="ml-3 mr-1"
+            tabListClassName="mt-1.5"
+          >
+            <TabContent value="headers">
+              <ResponseHeaders headers={activeResponse?.headers ?? []} />
+            </TabContent>
+            <TabContent value="body">
+              {!activeResponse.contentLength ? (
+                <EmptyStateText>Empty Body</EmptyStateText>
+              ) : viewMode === 'pretty' && contentType?.includes('html') ? (
+                <WebPageViewer response={activeResponse} />
+              ) : contentType?.startsWith('image') ? (
+                <ImageViewer className="pb-2" response={activeResponse} />
+              ) : contentType?.match(/csv|tab-separated/) ? (
+                <CsvViewer className="pb-2" response={activeResponse} />
+              ) : (
+                <TextViewer response={activeResponse} pretty={viewMode === 'pretty'} />
+              )}
+            </TabContent>
+          </Tabs>
         </>
       )}
     </div>

src-web/components/RouteError.tsx

@@ -1,22 +1,29 @@
 import { useRouteError } from 'react-router-dom';
+import { useAppRoutes } from '../hooks/useAppRoutes';
 import { Button } from './core/Button';
+import { FormattedError } from './core/FormattedError';
 import { Heading } from './core/Heading';
 import { VStack } from './core/Stacks';
 
 export default function RouteError() {
   const error = useRouteError();
+  console.log("Error", error);
   const stringified = JSON.stringify(error);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const message = (error as any).message ?? stringified;
+  const routes = useAppRoutes();
   return (
     <div className="flex items-center justify-center h-full">
-      <VStack space={5} className="max-w-[30rem] !h-auto">
+      <VStack space={5} className="max-w-[50rem] !h-auto">
         <Heading>Route Error 🔥</Heading>
-        <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
-          {message}
-        </pre>
+        <FormattedError>{message}</FormattedError>
         <VStack space={2}>
-          <Button to="/" color="primary">
+          <Button
+            color="primary"
+            onClick={() => {
+              routes.navigate('workspaces');
+            }}
+          >
             Go Home
           </Button>
           <Button color="secondary" onClick={() => window.location.reload()}>

src-web/components/Sidebar.tsx

@@ -1,18 +1,35 @@
-import classnames from 'classnames';
-import type { ForwardedRef, KeyboardEvent } from 'react';
-import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import type { ForwardedRef, ReactNode } from 'react';
+import React, { forwardRef, Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
-import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useDeleteRequest } from '../hooks/useDeleteRequest';
+import { useKey, useKeyPressEvent } from 'react-use';
+import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
+import { useActiveRequestId } from '../hooks/useActiveRequestId';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+import { useCreateFolder } from '../hooks/useCreateFolder';
+import { useCreateRequest } from '../hooks/useCreateRequest';
+import { useDeleteAnyRequest } from '../hooks/useDeleteAnyRequest';
+import { useDeleteFolder } from '../hooks/useDeleteFolder';
+import { useFolders } from '../hooks/useFolders';
+import { useKeyValue } from '../hooks/useKeyValue';
 import { useLatestResponse } from '../hooks/useLatestResponse';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
+import { usePrompt } from '../hooks/usePrompt';
 import { useRequests } from '../hooks/useRequests';
+import { useSendAnyRequest } from '../hooks/useSendAnyRequest';
+import { useSidebarHidden } from '../hooks/useSidebarHidden';
+import { useUpdateAnyFolder } from '../hooks/useUpdateAnyFolder';
 import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
-import type { HttpRequest } from '../lib/models';
+import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
+import type { Folder, HttpRequest, Workspace } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
-import { Button } from './core/Button';
+import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
+import { IconButton } from './core/IconButton';
+import { InlineCode } from './core/InlineCode';
 import { VStack } from './core/Stacks';
 import { StatusTag } from './core/StatusTag';
 import { DropMarker } from './DropMarker';
@@ -25,124 +42,468 @@ enum ItemTypes {
   REQUEST = 'request',
 }
 
-export const Sidebar = memo(function Sidebar({ className }: Props) {
-  const sidebarRef = useRef<HTMLDivElement>(null);
-  const unorderedRequests = useRequests();
-  const activeRequest = useActiveRequest();
-  const requests = useMemo(
-    () => [...unorderedRequests].sort((a, b) => a.sortPriority - b.sortPriority),
-    [unorderedRequests],
-  );
+interface TreeNode {
+  item: Workspace | Folder | HttpRequest;
+  children: TreeNode[];
+  depth: number;
+}
 
-  return (
-    <div className="relative h-full">
-      <div
-        ref={sidebarRef}
-        className={classnames(className, 'h-full relative grid grid-rows-[minmax(0,1fr)_auto]')}
-      >
-        <VStack
-          as="ul"
-          className="relative py-3 overflow-y-auto overflow-x-visible"
-          draggable={false}
-        >
-          <SidebarItems activeRequestId={activeRequest?.id} requests={requests} />
-        </VStack>
-      </div>
-    </div>
-  );
-});
-
-function SidebarItems({
-  requests,
-  activeRequestId,
-}: {
-  requests: HttpRequest[];
-  activeRequestId?: string;
-}) {
+export function Sidebar({ className }: Props) {
+  const { hidden } = useSidebarHidden();
+  const createRequest = useCreateRequest();
+  const sidebarRef = useRef<HTMLLIElement>(null);
+  const activeRequestId = useActiveRequestId();
+  const activeEnvironmentId = useActiveEnvironmentId();
+  const requests = useRequests();
+  const folders = useFolders();
+  const deleteAnyRequest = useDeleteAnyRequest();
+  const activeWorkspace = useActiveWorkspace();
+  const routes = useAppRoutes();
+  const [hasFocus, setHasFocus] = useState<boolean>(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [selectedTree, setSelectedTree] = useState<TreeNode | null>(null);
+  const updateAnyRequest = useUpdateAnyRequest();
+  const updateAnyFolder = useUpdateAnyFolder();
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [hoveredTree, setHoveredTree] = useState<TreeNode | null>(null);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-  const updateRequest = useUpdateAnyRequest();
+  const collapsed = useKeyValue<Record<string, boolean>>({
+    key: ['sidebar_collapsed', activeWorkspace?.id ?? 'n/a'],
+    defaultValue: {},
+    namespace: NAMESPACE_NO_SYNC,
+  });
+
+  const { tree, treeParentMap, selectableRequests } = useMemo<{
+    tree: TreeNode | null;
+    treeParentMap: Record<string, TreeNode>;
+    selectableRequests: { id: string; index: number; tree: TreeNode }[];
+  }>(() => {
+    const treeParentMap: Record<string, TreeNode> = {};
+    const selectableRequests: { id: string; index: number; tree: TreeNode }[] = [];
+    if (activeWorkspace == null) {
+      return { tree: null, treeParentMap, selectableRequests };
+    }
+
+    let selectableRequestIndex = 0;
+
+    // Put requests and folders into a tree structure
+    const next = (node: TreeNode): TreeNode => {
+      const childItems = [...requests, ...folders].filter((f) =>
+        node.item.model === 'workspace' ? f.folderId == null : f.folderId === node.item.id,
+      );
+
+      childItems.sort((a, b) => a.sortPriority - b.sortPriority);
+      const depth = node.depth + 1;
+      for (const item of childItems) {
+        treeParentMap[item.id] = node;
+        node.children.push(next({ item, children: [], depth }));
+        if (item.model === 'http_request') {
+          selectableRequests.push({ id: item.id, index: selectableRequestIndex++, tree: node });
+        }
+      }
+      return node;
+    };
+
+    const tree = next({ item: activeWorkspace, children: [], depth: 0 });
+
+    return { tree, treeParentMap, selectableRequests };
+  }, [activeWorkspace, requests, folders]);
+
+  // TODO: Move these listeners to a central place
+  useListenToTauriEvent('new_request', async () => createRequest.mutate({}));
+
+  const focusActiveRequest = useCallback(
+    (args: { forced?: { id: string; tree: TreeNode }; noFocusSidebar?: boolean } = {}) => {
+      const { forced, noFocusSidebar } = args;
+      const tree = forced?.tree ?? treeParentMap[activeRequestId ?? 'n/a'] ?? null;
+      const children = tree?.children ?? [];
+      const id = forced?.id ?? children.find((m) => m.item.id === activeRequestId)?.item.id ?? null;
+      if (id == null) {
+        return;
+      }
+
+      setSelectedId(id);
+      setSelectedTree(tree);
+      setHasFocus(true);
+      if (!noFocusSidebar) {
+        sidebarRef.current?.focus();
+      }
+    },
+    [activeRequestId, treeParentMap],
+  );
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      const tree = treeParentMap[id ?? 'n/a'] ?? null;
+      const children = tree?.children ?? [];
+      const node = children.find((m) => m.item.id === id) ?? null;
+      if (node == null || tree == null || node.item.model === 'workspace') {
+        return;
+      }
+
+      const { item } = node;
+
+      if (item.model === 'folder') {
+        collapsed.set((c) => ({ ...c, [item.id]: !c[item.id] }));
+      } else {
+        routes.navigate('request', {
+          requestId: id,
+          workspaceId: item.workspaceId,
+          environmentId: activeEnvironmentId ?? undefined,
+        });
+        setSelectedId(id);
+        setSelectedTree(tree);
+        focusActiveRequest({ forced: { id, tree } });
+      }
+    },
+    [treeParentMap, collapsed, routes, activeEnvironmentId, focusActiveRequest],
+  );
+
+  const handleClearSelected = useCallback(() => {
+    setSelectedId(null);
+    setSelectedTree(null);
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    if (hasFocus) return;
+    focusActiveRequest({ noFocusSidebar: true });
+  }, [focusActiveRequest, hasFocus]);
+
+  const handleBlur = useCallback(() => setHasFocus(false), []);
+
+  const handleDeleteKey = useCallback(
+    (e: KeyboardEvent) => {
+      if (!hasFocus) return;
+      e.preventDefault();
+
+      const selected = selectableRequests.find((r) => r.id === selectedId);
+      if (selected == null) return;
+      deleteAnyRequest.mutate(selected.id);
+    },
+    [deleteAnyRequest, hasFocus, selectableRequests, selectedId],
+  );
+
+  useKeyPressEvent('Backspace', handleDeleteKey);
+  useKeyPressEvent('Delete', handleDeleteKey);
+
+  useListenToTauriEvent(
+    'focus_sidebar',
+    () => {
+      if (hidden || hasFocus) return;
+      // Select 0 index on focus if none selected
+      focusActiveRequest(
+        selectedTree != null && selectedId != null
+          ? { forced: { id: selectedId, tree: selectedTree } }
+          : undefined,
+      );
+    },
+    [focusActiveRequest, hidden, activeRequestId],
+  );
+
+  useKeyPressEvent('Enter', (e) => {
+    if (!hasFocus) return;
+    const selected = selectableRequests.find((r) => r.id === selectedId);
+    if (!selected || selected.id === activeRequestId || activeWorkspace == null) {
+      return;
+    }
+
+    e.preventDefault();
+    routes.navigate('request', {
+      requestId: selected.id,
+      workspaceId: activeWorkspace?.id,
+      environmentId: activeEnvironmentId ?? undefined,
+    });
+  });
+
+  useKey(
+    'ArrowUp',
+    () => {
+      if (!hasFocus) return;
+      const i = selectableRequests.findIndex((r) => r.id === selectedId);
+      const newSelectable = selectableRequests[i - 1];
+      if (newSelectable == null) {
+        return;
+      }
+
+      setSelectedId(newSelectable.id);
+      setSelectedTree(newSelectable.tree);
+    },
+    undefined,
+    [hasFocus, selectableRequests, selectedId, setSelectedId, setSelectedTree],
+  );
+
+  useKey(
+    'ArrowDown',
+    () => {
+      if (!hasFocus) return;
+      const i = selectableRequests.findIndex((r) => r.id === selectedId);
+      const newSelectable = selectableRequests[i + 1];
+      if (newSelectable == null) {
+        return;
+      }
+
+      setSelectedId(newSelectable.id);
+      setSelectedTree(newSelectable.tree);
+    },
+    undefined,
+    [hasFocus, selectableRequests, selectedId, setSelectedId, setSelectedTree],
+  );
 
   const handleMove = useCallback<DraggableSidebarItemProps['onMove']>(
     (id, side) => {
-      const dragIndex = requests.findIndex((r) => r.id === id);
-      setHoveredIndex(side === 'above' ? dragIndex : dragIndex + 1);
+      const hoveredTree = treeParentMap[id] ?? null;
+      const dragIndex = hoveredTree?.children.findIndex((n) => n.item.id === id) ?? -99;
+      const hoveredIndex = dragIndex + (side === 'above' ? 0 : 1);
+      setHoveredTree(hoveredTree);
+      setHoveredIndex(hoveredIndex);
     },
-    [requests],
+    [treeParentMap],
   );
 
+  const handleDragStart = useCallback<DraggableSidebarItemProps['onDragStart']>((id: string) => {
+    setDraggingId(id);
+  }, []);
+
   const handleEnd = useCallback<DraggableSidebarItemProps['onEnd']>(
-    (requestId) => {
-      if (hoveredIndex === null) return;
-      setHoveredIndex(null);
+    async (itemId) => {
+      setHoveredTree(null);
+      handleClearSelected();
 
-      const index = requests.findIndex((r) => r.id === requestId);
-      const request = requests[index];
-      if (request === undefined) return;
+      if (hoveredTree == null || hoveredIndex == null) {
+        return;
+      }
 
-      const newRequests = requests.filter((r) => r.id !== requestId);
-      if (hoveredIndex > index) newRequests.splice(hoveredIndex - 1, 0, request);
-      else newRequests.splice(hoveredIndex, 0, request);
+      const parentTree = treeParentMap[itemId] ?? null;
+      const index = parentTree?.children.findIndex((n) => n.item.id === itemId) ?? -1;
+      const child = parentTree?.children[index ?? -1];
+      if (child == null || parentTree == null) return;
 
-      const beforePriority = newRequests[hoveredIndex - 1]?.sortPriority ?? 0;
-      const afterPriority = newRequests[hoveredIndex + 1]?.sortPriority ?? 0;
+      const movedToDifferentTree = hoveredTree.item.id !== parentTree.item.id;
+      const movedUpInSameTree = !movedToDifferentTree && hoveredIndex < index;
 
+      const newChildren = hoveredTree.children.filter((c) => c.item.id !== itemId);
+      if (movedToDifferentTree || movedUpInSameTree) {
+        // Moving up or into a new tree is simply inserting before the hovered item
+        newChildren.splice(hoveredIndex, 0, child);
+      } else {
+        // Moving down has to account for the fact that the original item will be removed
+        newChildren.splice(hoveredIndex - 1, 0, child);
+      }
+
+      const prev = newChildren[hoveredIndex - 1]?.item;
+      const next = newChildren[hoveredIndex + 1]?.item;
+      const beforePriority = prev == null || prev.model === 'workspace' ? 0 : prev.sortPriority;
+      const afterPriority = next == null || next.model === 'workspace' ? 0 : next.sortPriority;
+
+      const folderId = hoveredTree.item.model === 'folder' ? hoveredTree.item.id : null;
       const shouldUpdateAll = afterPriority - beforePriority < 1;
+
       if (shouldUpdateAll) {
-        newRequests.forEach(({ id }, i) => {
-          const sortPriority = i * 1000;
-          const update = (r: HttpRequest) => ({ ...r, sortPriority });
-          updateRequest.mutate({ id, update });
-        });
+        await Promise.all(
+          newChildren.map((child, i) => {
+            const sortPriority = i * 1000;
+            if (child.item.model === 'folder') {
+              const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
+              return updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
+            } else if (child.item.model === 'http_request') {
+              const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
+              return updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
+            }
+          }),
+        );
       } else {
         const sortPriority = afterPriority - (afterPriority - beforePriority) / 2;
-        const update = (r: HttpRequest) => ({ ...r, sortPriority });
-        updateRequest.mutate({ id: requestId, update });
+        if (child.item.model === 'folder') {
+          const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
+          await updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
+        } else if (child.item.model === 'http_request') {
+          const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
+          await updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
+        }
       }
+      setDraggingId(null);
     },
-    [hoveredIndex, requests, updateRequest],
+    [
+      hoveredIndex,
+      hoveredTree,
+      handleClearSelected,
+      treeParentMap,
+      updateAnyFolder,
+      updateAnyRequest,
+    ],
   );
 
+  if (tree == null) {
+    return null;
+  }
+
+  if (collapsed.value == null) {
+    return null;
+  }
+
   return (
-    <>
-      {requests.map((r, i) => (
-        <Fragment key={r.id}>
-          {hoveredIndex === i && <DropMarker />}
+    <aside
+      aria-hidden={hidden}
+      ref={sidebarRef}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      tabIndex={hidden ? -1 : 0}
+      className={classNames(
+        className,
+        'h-full pb-3 overflow-y-scroll overflow-x-visible hide-scrollbars pt-2',
+      )}
+    >
+      <SidebarItems
+        treeParentMap={treeParentMap}
+        selectedId={selectedId}
+        selectedTree={selectedTree}
+        collapsed={collapsed.value}
+        tree={tree}
+        focused={hasFocus}
+        draggingId={draggingId}
+        onSelect={handleSelect}
+        hoveredIndex={hoveredIndex}
+        hoveredTree={hoveredTree}
+        handleMove={handleMove}
+        handleEnd={handleEnd}
+        handleDragStart={handleDragStart}
+      />
+    </aside>
+  );
+}
+
+interface SidebarItemsProps {
+  tree: TreeNode;
+  focused: boolean;
+  draggingId: string | null;
+  selectedId: string | null;
+  selectedTree: TreeNode | null;
+  treeParentMap: Record<string, TreeNode>;
+  hoveredTree: TreeNode | null;
+  hoveredIndex: number | null;
+  handleMove: (id: string, side: 'above' | 'below') => void;
+  handleEnd: (id: string) => void;
+  handleDragStart: (id: string) => void;
+  onSelect: (requestId: string) => void;
+  collapsed: Record<string, boolean>;
+}
+
+function SidebarItems({
+  tree,
+  focused,
+  selectedId,
+  selectedTree,
+  draggingId,
+  onSelect,
+  treeParentMap,
+  collapsed,
+  hoveredTree,
+  hoveredIndex,
+  handleEnd,
+  handleMove,
+  handleDragStart,
+}: SidebarItemsProps) {
+  return (
+    <VStack
+      as="ul"
+      role="menu"
+      aria-orientation="vertical"
+      dir="ltr"
+      className={classNames(
+        tree.depth > 0 && 'border-l border-highlight',
+        tree.depth === 0 && 'ml-0',
+        tree.depth >= 1 && 'ml-[1.3em]',
+      )}
+    >
+      {tree.children.map((child, i) => (
+        <Fragment key={child.item.id}>
+          {hoveredIndex === i && hoveredTree?.item.id === tree.item.id && <DropMarker />}
           <DraggableSidebarItem
-            key={r.id}
-            requestId={r.id}
-            requestName={r.name}
-            workspaceId={r.workspaceId}
-            active={r.id === activeRequestId}
+            selected={selectedId === child.item.id}
+            itemId={child.item.id}
+            itemName={child.item.name}
+            itemModel={child.item.model}
             onMove={handleMove}
             onEnd={handleEnd}
-          />
+            onSelect={onSelect}
+            onDragStart={handleDragStart}
+            useProminentStyles={focused}
+            collapsed={collapsed}
+            child={child}
+          >
+            {child.item.model === 'folder' &&
+              !collapsed[child.item.id] &&
+              draggingId !== child.item.id && (
+                <SidebarItems
+                  treeParentMap={treeParentMap}
+                  tree={child}
+                  collapsed={collapsed}
+                  draggingId={draggingId}
+                  hoveredTree={hoveredTree}
+                  hoveredIndex={hoveredIndex}
+                  focused={focused}
+                  selectedId={selectedId}
+                  selectedTree={selectedTree}
+                  onSelect={onSelect}
+                  handleMove={handleMove}
+                  handleEnd={handleEnd}
+                  handleDragStart={handleDragStart}
+                />
+              )}
+          </DraggableSidebarItem>
         </Fragment>
       ))}
-      {hoveredIndex === requests.length && <DropMarker />}
-    </>
+      {hoveredIndex === tree.children.length && hoveredTree?.item.id === tree.item.id && (
+        <DropMarker />
+      )}
+    </VStack>
   );
 }
 
 type SidebarItemProps = {
   className?: string;
-  requestId: string;
-  requestName: string;
-  workspaceId: string;
-  active?: boolean;
+  itemId: string;
+  itemName: string;
+  itemModel: string;
+  useProminentStyles?: boolean;
+  selected?: boolean;
+  onSelect: (id: string) => void;
+  draggable?: boolean;
+  children?: ReactNode;
+  collapsed: Record<string, boolean>;
+  child: TreeNode;
 };
 
-const _SidebarItem = forwardRef(function SidebarItem(
-  { className, requestName, requestId, workspaceId, active }: SidebarItemProps,
+const SidebarItem = forwardRef(function SidebarItem(
+  {
+    children,
+    className,
+    itemName,
+    itemId,
+    itemModel,
+    useProminentStyles,
+    selected,
+    onSelect,
+    collapsed,
+    child,
+  }: SidebarItemProps,
   ref: ForwardedRef<HTMLLIElement>,
 ) {
-  const latestResponse = useLatestResponse(requestId);
-  const updateRequest = useUpdateRequest(requestId);
-  const deleteRequest = useDeleteRequest(requestId);
+  const sendAnyRequest = useSendAnyRequest();
+  const createRequest = useCreateRequest();
+  const createFolder = useCreateFolder();
+  const deleteRequest = useDeleteFolder(itemId);
+  const latestResponse = useLatestResponse(itemId);
+  const updateRequest = useUpdateRequest(itemId);
+  const updateAnyFolder = useUpdateAnyFolder();
+  const prompt = usePrompt();
   const [editing, setEditing] = useState<boolean>(false);
+  const activeRequestId = useActiveRequestId();
+  const isActive = activeRequestId === itemId;
 
   const handleSubmitNameEdit = useCallback(
-    async (el: HTMLInputElement) => {
-      await updateRequest.mutate((r) => ({ ...r, name: el.value }));
+    (el: HTMLInputElement) => {
+      updateRequest.mutate((r) => ({ ...r, name: el.value }));
       setEditing(false);
     },
     [updateRequest],
@@ -153,28 +514,13 @@ const _SidebarItem = forwardRef(function SidebarItem(
     el?.select();
   }, []);
 
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLElement>) => {
-      // Hitting enter on active request during keyboard nav will start edit
-      if (active && e.key === 'Enter') {
-        e.preventDefault();
-        setEditing(true);
-      }
-      if (active && (e.key === 'Backspace' || e.key === 'Delete')) {
-        e.preventDefault();
-        deleteRequest.mutate();
-      }
-    },
-    [active, deleteRequest],
-  );
-
   const handleInputKeyDown = useCallback(
-    async (e: KeyboardEvent<HTMLInputElement>) => {
+    async (e: React.KeyboardEvent<HTMLInputElement>) => {
       e.stopPropagation();
       switch (e.key) {
         case 'Enter':
           e.preventDefault();
-          await handleSubmitNameEdit(e.currentTarget);
+          handleSubmitNameEdit(e.currentTarget);
           break;
         case 'Escape':
           e.preventDefault();
@@ -185,36 +531,127 @@ const _SidebarItem = forwardRef(function SidebarItem(
     [handleSubmitNameEdit],
   );
 
+  const handleStartEditing = useCallback(() => {
+    if (itemModel !== 'http_request') return;
+    setEditing(true);
+  }, [setEditing, itemModel]);
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      handleSubmitNameEdit(e.currentTarget);
+    },
+    [handleSubmitNameEdit],
+  );
+
+  const handleSelect = useCallback(() => {
+    onSelect(itemId);
+  }, [onSelect, itemId]);
+
   return (
-    <li ref={ref} className={classnames(className, 'block group/item px-2 pb-0.5')}>
-      <div className="relative">
-        <Button
-          tabIndex={0}
-          color="custom"
-          size="xs"
-          to={`/workspaces/${workspaceId}/requests/${requestId}`}
-          draggable={false} // Item should drag, not the link
-          onDoubleClick={() => setEditing(true)}
-          justify="start"
-          onKeyDown={handleKeyDown}
-          className={classnames(
+    <li ref={ref}>
+      <div className={classNames(className, 'block relative group/item px-2 pb-0.5')}>
+        {itemModel === 'folder' && (
+          <Dropdown
+            items={[
+              {
+                key: 'sendAll',
+                label: 'Send All',
+                leftSlot: <Icon icon="paperPlane" />,
+                onSelect: () => {
+                  for (const { item } of child.children) {
+                    if (item.model === 'http_request') {
+                      sendAnyRequest.mutate(item.id);
+                    }
+                  }
+                },
+              },
+              { type: 'separator', label: itemName },
+              {
+                key: 'rename',
+                label: 'Rename',
+                leftSlot: <Icon icon="pencil" />,
+                onSelect: async () => {
+                  const name = await prompt({
+                    title: 'Rename Folder',
+                    description: (
+                      <>
+                        Enter a new name for <InlineCode>{itemName}</InlineCode>
+                      </>
+                    ),
+                    name: 'name',
+                    label: 'Name',
+                    defaultValue: itemName,
+                  });
+                  updateAnyFolder.mutate({ id: itemId, update: (f) => ({ ...f, name }) });
+                },
+              },
+              {
+                key: 'deleteFolder',
+                label: 'Delete',
+                variant: 'danger',
+                leftSlot: <Icon icon="trash" />,
+                onSelect: () => deleteRequest.mutate(),
+              },
+              { type: 'separator' },
+              {
+                key: 'createRequest',
+                label: 'New Request',
+                leftSlot: <Icon icon="plus" />,
+                onSelect: () => createRequest.mutate({ folderId: itemId, sortPriority: -1 }),
+              },
+              {
+                key: 'createFolder',
+                label: 'New Folder',
+                leftSlot: <Icon icon="plus" />,
+                onSelect: () => createFolder.mutate({ folderId: itemId, sortPriority: -1 }),
+              },
+            ]}
+          >
+            <IconButton
+              title="Folder options"
+              size="xs"
+              icon="dotsV"
+              className="ml-auto !bg-transparent absolute right-2 opacity-0 group-hover/item:opacity-70 transition-opacity"
+            />
+          </Dropdown>
+        )}
+        <button
+          // tabIndex={-1} // Will prevent drag-n-drop
+          onClick={handleSelect}
+          disabled={editing}
+          onDoubleClick={handleStartEditing}
+          data-active={isActive}
+          data-selected={selected}
+          className={classNames(
+            'w-full flex items-center text-sm h-xs px-2 rounded-md transition-colors',
             editing && 'ring-1 focus-within:ring-focus',
-            active
-              ? 'bg-highlight text-gray-900'
-              : 'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
+            isActive && 'bg-highlightSecondary text-gray-800',
+            !isActive &&
+              'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
+            selected && useProminentStyles && '!bg-violet-400/20 text-gray-950',
           )}
         >
+          {itemModel === 'folder' && (
+            <Icon
+              size="sm"
+              icon="chevronRight"
+              className={classNames(
+                '-ml-0.5 mr-2 transition-transform',
+                !collapsed[itemId] && 'transform rotate-90',
+              )}
+            />
+          )}
           {editing ? (
             <input
               ref={handleFocus}
-              defaultValue={requestName}
+              defaultValue={itemName}
               className="bg-transparent outline-none w-full"
-              onBlur={(e) => handleSubmitNameEdit(e.currentTarget)}
+              onBlur={handleBlur}
               onKeyDown={handleInputKeyDown}
             />
           ) : (
-            <span className={classnames('truncate', !requestName && 'text-gray-400 italic')}>
-              {requestName || 'New Request'}
+            <span className={classNames('truncate', !itemName && 'text-gray-400 italic')}>
+              {itemName || 'New Request'}
             </span>
           )}
           {latestResponse && (
@@ -226,44 +663,48 @@ const _SidebarItem = forwardRef(function SidebarItem(
               )}
             </div>
           )}
-        </Button>
+        </button>
       </div>
+      {children}
     </li>
   );
 });
-const SidebarItem = memo(_SidebarItem);
 
 type DraggableSidebarItemProps = SidebarItemProps & {
   onMove: (id: string, side: 'above' | 'below') => void;
   onEnd: (id: string) => void;
+  onDragStart: (id: string) => void;
+  children?: ReactNode;
+  child?: TreeNode;
 };
 
 type DragItem = {
   id: string;
-  workspaceId: string;
-  requestName: string;
+  itemName: string;
 };
 
-const DraggableSidebarItem = memo(function DraggableSidebarItem({
-  requestName,
-  requestId,
-  workspaceId,
-  active,
+function DraggableSidebarItem({
+  itemName,
+  itemId,
+  itemModel,
+  child,
   onMove,
   onEnd,
+  onDragStart,
+  ...props
 }: DraggableSidebarItemProps) {
   const ref = useRef<HTMLLIElement>(null);
 
   const [, connectDrop] = useDrop<DragItem, void>(
     {
       accept: ItemTypes.REQUEST,
-      hover: (item, monitor) => {
+      hover: (_, monitor) => {
         if (!ref.current) return;
         const hoverBoundingRect = ref.current?.getBoundingClientRect();
         const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
         const clientOffset = monitor.getClientOffset();
         const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
-        onMove(requestId, hoverClientY < hoverMiddleY ? 'above' : 'below');
+        onMove(itemId, hoverClientY < hoverMiddleY ? 'above' : 'below');
       },
     },
     [onMove],
@@ -272,25 +713,29 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
   const [{ isDragging }, connectDrag] = useDrag<DragItem, unknown, { isDragging: boolean }>(
     () => ({
       type: ItemTypes.REQUEST,
-      item: () => ({ id: requestId, requestName, workspaceId }),
+      item: () => {
+        onDragStart(itemId);
+        return { id: itemId, itemName };
+      },
       collect: (m) => ({ isDragging: m.isDragging() }),
       options: { dropEffect: 'move' },
-      end: () => onEnd(requestId),
+      end: () => onEnd(itemId),
     }),
     [onEnd],
   );
 
-  connectDrag(ref);
-  connectDrop(ref);
+  connectDrag(connectDrop(ref));
 
   return (
     <SidebarItem
       ref={ref}
-      className={classnames(isDragging && 'opacity-20')}
-      requestName={requestName}
-      requestId={requestId}
-      workspaceId={workspaceId}
-      active={active}
+      draggable
+      className={classNames(isDragging && 'opacity-20')}
+      itemName={itemName}
+      itemId={itemId}
+      itemModel={itemModel}
+      child={child}
+      {...props}
     />
   );
-});
+}

src-web/components/SidebarActions.tsx

@@ -1,43 +1,43 @@
-import { memo, useCallback } from 'react';
-import { useActiveRequestId } from '../hooks/useActiveRequestId';
+import { memo } from 'react';
+import { useCreateFolder } from '../hooks/useCreateFolder';
 import { useCreateRequest } from '../hooks/useCreateRequest';
-import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
-import { useTauriEvent } from '../hooks/useTauriEvent';
+import { Dropdown } from './core/Dropdown';
 import { IconButton } from './core/IconButton';
+import { HStack } from './core/Stacks';
 
-export const SidebarActions = memo(function SidebarDisplayToggle() {
+export const SidebarActions = memo(function SidebarActions() {
+  const createRequest = useCreateRequest();
+  const createFolder = useCreateFolder();
   const { hidden, toggle } = useSidebarHidden();
-  const activeRequestId = useActiveRequestId();
-  const createRequest = useCreateRequest({ navigateAfter: true });
-  const duplicateRequest = useDuplicateRequest({ id: activeRequestId, navigateAfter: true });
-  const handleCreateRequest = useCallback(() => {
-    createRequest.mutate({});
-  }, [createRequest]);
-  useTauriEvent('new_request', () => {
-    createRequest.mutate({});
-  });
-  // TODO: Put this somewhere better
-  useTauriEvent('duplicate_request', () => {
-    duplicateRequest.mutate();
-  });
 
   return (
-    <>
-      <IconButton
-        onClick={toggle}
-        className="pointer-events-auto"
-        size="sm"
-        title="Show sidebar"
-        icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
-      />
-      <IconButton
-        onClick={handleCreateRequest}
-        className="pointer-events-auto"
-        size="sm"
-        title="Show sidebar"
-        icon="plusCircle"
-      />
-    </>
+    <HStack>
+      {hidden && (
+        <IconButton
+          onClick={toggle}
+          className="pointer-events-auto"
+          size="sm"
+          title="Show sidebar"
+          icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
+        />
+      )}
+      <Dropdown
+        items={[
+          {
+            key: 'create-request',
+            label: 'Create Request',
+            onSelect: () => createRequest.mutate({}),
+          },
+          {
+            key: 'create-folder',
+            label: 'Create Folder',
+            onSelect: () => createFolder.mutate({}),
+          },
+        ]}
+      >
+        <IconButton size="sm" icon="plusCircle" title="Add Resource" />
+      </Dropdown>
+    </HStack>
   );
 });

src-web/components/UrlBar.tsx

@@ -1,11 +1,11 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import type { FormEvent } from 'react';
-import { memo, useCallback, useRef } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useSendRequest } from '../hooks/useSendRequest';
-import { useTauriEvent } from '../hooks/useTauriEvent';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import type { HttpRequest } from '../lib/models';
 import { IconButton } from './core/IconButton';
@@ -20,6 +20,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
   const inputRef = useRef<EditorView>(null);
   const sendRequest = useSendRequest(requestId);
   const updateRequest = useUpdateRequest(requestId);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
   const handleMethodChange = useCallback(
     (method: string) => updateRequest.mutate({ method }),
     [updateRequest],
@@ -34,27 +35,30 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
   const handleSubmit = useCallback(
     async (e: FormEvent) => {
       e.preventDefault();
-      sendRequest();
+      sendRequest.mutate();
     },
     [sendRequest],
   );
 
-  useTauriEvent('focus_url', () => {
+  useListenToTauriEvent('focus_url', () => {
     inputRef.current?.focus();
   });
 
   return (
-    <form onSubmit={handleSubmit} className={classnames('url-bar', className)}>
+    <form onSubmit={handleSubmit} className={classNames('url-bar', className)}>
       <Input
+        autocompleteVariables
         ref={inputRef}
-        size="sm"
+        size={isFocused ? 'auto' : 'sm'}
         hideLabel
         useTemplating
         contentType="url"
-        className="px-0"
+        className="px-0 py-0.5"
         name="url"
         label="Enter URL"
         forceUpdateKey={updateKey}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
         containerClassName="shadow shadow-gray-100 dark:shadow-gray-50"
         onChange={handleUrlChange}
         defaultValue={url}
@@ -63,7 +67,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
           <RequestMethodDropdown
             method={method}
             onChange={handleMethodChange}
-            className="mx-0.5 h-full my-1"
+            className="!h-auto mx-0.5 my-0.5"
           />
         }
         rightSlot={
@@ -72,10 +76,9 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
             iconSize="sm"
             title="Send Request"
             type="submit"
-            className="w-8 mr-0.5"
+            className="!h-auto w-8 mr-0.5 my-0.5"
             icon={loading ? 'update' : 'paperPlane'}
             spin={loading}
-            disabled={loading}
           />
         }
       />

src-web/components/Workspace.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type {
   CSSProperties,
@@ -6,11 +6,12 @@ import type {
   MouseEvent as ReactMouseEvent,
   ReactNode,
 } from 'react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowSize } from 'react-use';
+import { useOsInfo } from '../hooks/useOsInfo';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useSidebarWidth } from '../hooks/useSidebarWidth';
-import { useTauriEvent } from '../hooks/useTauriEvent';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { WINDOW_FLOATING_SIDEBAR_WIDTH } from '../lib/constants';
 import { Button } from './core/Button';
 import { HStack } from './core/Stacks';
@@ -27,8 +28,8 @@ const body = { gridArea: 'body' };
 const drag = { gridArea: 'drag' };
 
 export default function Workspace() {
-  const { set: setWidth, value: width, reset: resetWidth } = useSidebarWidth();
-  const { show, hide, hidden, toggle } = useSidebarHidden();
+  const { setWidth, width, resetWidth } = useSidebarWidth();
+  const { hide, show, hidden, toggle } = useSidebarHidden();
 
   const windowSize = useWindowSize();
   const [floating, setFloating] = useState<boolean>(false);
@@ -37,20 +38,13 @@ export default function Workspace() {
     null,
   );
 
-  useTauriEvent('toggle_sidebar', toggle);
+  useListenToTauriEvent('toggle_sidebar', toggle);
 
   // float/un-float sidebar on window resize
   useEffect(() => {
     const shouldHide = windowSize.width <= WINDOW_FLOATING_SIDEBAR_WIDTH;
-    if (shouldHide && !hidden) {
-      setFloating(true);
-      hide();
-    } else if (!shouldHide && hidden) {
-      setFloating(false);
-      show();
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (shouldHide) setFloating(true);
+    else if (!shouldHide) setFloating(false);
   }, [windowSize.width]);
 
   const unsub = () => {
@@ -70,7 +64,14 @@ export default function Workspace() {
       moveState.current = {
         move: async (e: MouseEvent) => {
           e.preventDefault(); // Prevent text selection and things
-          setWidth(startWidth + (e.clientX - mouseStartX));
+          const newWidth = startWidth + (e.clientX - mouseStartX);
+          if (newWidth < 100) {
+            hide(); 
+            resetWidth();
+          } else  {
+            show();
+            setWidth(newWidth);
+          }
         },
         up: (e: MouseEvent) => {
           e.preventDefault();
@@ -82,7 +83,7 @@ export default function Workspace() {
       document.documentElement.addEventListener('mouseup', moveState.current.up);
       setIsResizing(true);
     },
-    [setWidth, width],
+    [setWidth, resetWidth, width, hide, show],
   );
 
   const sideWidth = hidden ? 0 : width;
@@ -112,26 +113,19 @@ export default function Workspace() {
   return (
     <div
       style={styles}
-      className={classnames(
+      className={classNames(
         'grid w-full h-full',
         // Animate sidebar width changes but only when not resizing
         // because it's too slow to animate on mouse move
         !isResizing && 'transition-all',
       )}
     >
-      <HeaderSize
-        data-tauri-drag-region
-        className="w-full bg-gray-50 border-b border-b-highlight text-gray-900"
-        style={head}
-      >
-        <WorkspaceHeader className="pointer-events-none" />
-      </HeaderSize>
       {floating ? (
-        <Overlay open={!hidden} portalName="sidebar" onClose={hide}>
+        <Overlay open={!hidden} portalName="sidebar" onClose={hide} zIndex={10}>
           <motion.div
             initial={{ opacity: 0, x: -10 }}
             animate={{ opacity: 1, x: 0 }}
-            className={classnames(
+            className={classNames(
               'absolute top-0 left-0 bottom-0 bg-gray-100 border-r border-highlight w-[14rem]',
               'grid grid-rows-[auto_1fr]',
             )}
@@ -146,11 +140,8 @@ export default function Workspace() {
         </Overlay>
       ) : (
         <>
-          <div
-            style={side}
-            className={classnames('overflow-hidden bg-gray-100 border-r border-highlight')}
-          >
-            <Sidebar />
+          <div style={side} className={classNames('overflow-hidden bg-gray-100')}>
+            <Sidebar className="border-r border-highlight" />
           </div>
           <ResizeHandle
             className="-translate-x-3"
@@ -162,6 +153,13 @@ export default function Workspace() {
           />
         </>
       )}
+      <HeaderSize
+        data-tauri-drag-region
+        className="w-full bg-gray-50 border-b border-b-highlight text-gray-900"
+        style={head}
+      >
+        <WorkspaceHeader className="pointer-events-none" />
+      </HeaderSize>
       <RequestResponse style={body} />
     </div>
   );
@@ -172,11 +170,13 @@ interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 function HeaderSize({ className, ...props }: HeaderSizeProps) {
+  const platform = useOsInfo();
   return (
     <div
-      className={classnames(
+      className={classNames(
         className,
         'h-md pt-[1px] flex items-center w-full pr-3 pl-20 border-b',
+        platform?.osType === 'Darwin' && 'pl-20',
       )}
       {...props}
     />

src-web/components/WorkspaceActionsDropdown.tsx

@@ -1,70 +1,244 @@
-import classnames from 'classnames';
-import { memo, useMemo } from 'react';
+import { invoke } from '@tauri-apps/api';
+import { open } from '@tauri-apps/api/dialog';
+import classNames from 'classnames';
+import { memo, useCallback, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
-import { useRoutes } from '../hooks/useRoutes';
+import { usePrompt } from '../hooks/usePrompt';
+import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
+import { useTheme } from '../hooks/useTheme';
+import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { useWorkspaces } from '../hooks/useWorkspaces';
+import type { Environment, Folder, HttpRequest, Workspace } from '../lib/models';
+import { pluralize } from '../lib/pluralize';
+import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
+import { InlineCode } from './core/InlineCode';
+import { HStack, VStack } from './core/Stacks';
+import { useDialog } from './DialogContext';
 
-type Props = {
-  className?: string;
-};
+type Props = Pick<ButtonProps, 'className' | 'justify' | 'forDropdown' | 'leftSlot'>;
 
-export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ className }: Props) {
+export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
+  className,
+  ...buttonProps
+}: Props) {
   const workspaces = useWorkspaces();
   const activeWorkspace = useActiveWorkspace();
   const activeWorkspaceId = activeWorkspace?.id ?? null;
   const createWorkspace = useCreateWorkspace({ navigateAfter: true });
+  const updateWorkspace = useUpdateWorkspace(activeWorkspaceId);
   const deleteWorkspace = useDeleteWorkspace(activeWorkspace);
-  const routes = useRoutes();
+  const { appearance, toggleAppearance } = useTheme();
+  const dialog = useDialog();
+  const prompt = usePrompt();
+  const routes = useAppRoutes();
+
+  const importData = useCallback(async () => {
+    const selected = await open({
+      multiple: true,
+      filters: [
+        {
+          name: 'Export File',
+          extensions: ['json'],
+        },
+      ],
+    });
+    if (selected == null || selected.length === 0) return;
+    const imported: {
+      workspaces: Workspace[];
+      environments: Environment[];
+      folders: Folder[];
+      requests: HttpRequest[];
+    } = await invoke('import_data', {
+      filePaths: selected,
+    });
+    const importedWorkspace = imported.workspaces[0];
+
+    dialog.show({
+      title: 'Import Complete',
+      size: 'dynamic',
+      hideX: true,
+      render: ({ hide }) => {
+        const { workspaces, environments, folders, requests } = imported;
+        return (
+          <VStack space={3}>
+            <ul className="list-disc pl-6">
+              <li>
+                {workspaces.length} {pluralize('Workspace', workspaces.length)}
+              </li>
+              <li>
+                {environments.length} {pluralize('Environment', environments.length)}
+              </li>
+              <li>
+                {folders.length} {pluralize('Folder', folders.length)}
+              </li>
+              <li>
+                {requests.length} {pluralize('Request', requests.length)}
+              </li>
+            </ul>
+            <div>
+              <Button className="ml-auto" onClick={hide} color="primary">
+                Done
+              </Button>
+            </div>
+          </VStack>
+        );
+      },
+    });
+
+    if (importedWorkspace != null) {
+      routes.navigate('workspace', {
+        workspaceId: importedWorkspace.id,
+        environmentId: imported.environments[0]?.id,
+      });
+    }
+  }, [routes, dialog]);
 
   const items: DropdownItem[] = useMemo(() => {
-    const workspaceItems = workspaces.map((w) => ({
+    const workspaceItems: DropdownItem[] = workspaces.map((w) => ({
+      key: w.id,
       label: w.name,
-      leftSlot: activeWorkspaceId === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
-      onSelect: () => {
-        if (w.id === activeWorkspaceId) return;
-        routes.navigate('workspace', { workspaceId: w.id });
+      rightSlot: w.id === activeWorkspaceId ? <Icon icon="check" /> : undefined,
+      onSelect: async () => {
+        dialog.show({
+          id: 'open-workspace',
+          size: 'sm',
+          title: 'Open Workspace',
+          description: (
+            <>
+              Where would you like to open <InlineCode>{w.name}</InlineCode>?
+            </>
+          ),
+          render: ({ hide }) => {
+            return (
+              <HStack space={2} justifyContent="end" alignItems="center" className="mt-6">
+                <Button
+                  className="focus"
+                  color="gray"
+                  rightSlot={<Icon icon="openNewWindow" />}
+                  onClick={async () => {
+                    hide();
+                    const environmentId = (await getRecentEnvironments(w.id))[0];
+                    await invoke('new_window', {
+                      url: routes.paths.workspace({ workspaceId: w.id, environmentId }),
+                    });
+                  }}
+                >
+                  New Window
+                </Button>
+                <Button
+                  autoFocus
+                  className="focus"
+                  color="gray"
+                  onClick={async () => {
+                    hide();
+                    const environmentId = (await getRecentEnvironments(w.id))[0];
+                    routes.navigate('workspace', { workspaceId: w.id, environmentId });
+                  }}
+                >
+                  This Window
+                </Button>
+              </HStack>
+            );
+          },
+        });
       },
     }));
 
+    const activeWorkspaceItems: DropdownItem[] =
+      workspaces.length <= 1
+        ? []
+        : [
+            ...workspaceItems,
+            {
+              type: 'separator',
+              label: activeWorkspace?.name,
+            },
+          ];
+
     return [
-      ...workspaceItems,
+      ...activeWorkspaceItems,
       {
-        type: 'separator',
-        label: 'Actions',
+        key: 'rename',
+        label: 'Rename',
+        leftSlot: <Icon icon="pencil" />,
+        onSelect: async () => {
+          const name = await prompt({
+            title: 'Rename Workspace',
+            description: (
+              <>
+                Enter a new name for <InlineCode>{activeWorkspace?.name}</InlineCode>
+              </>
+            ),
+            name: 'name',
+            label: 'Name',
+            defaultValue: activeWorkspace?.name,
+          });
+          updateWorkspace.mutate({ name });
+        },
       },
       {
-        label: 'New Workspace',
-        leftSlot: <Icon icon="plus" />,
-        onSelect: () => createWorkspace.mutate({ name: 'New Workspace' }),
-      },
-      {
-        label: 'Delete Workspace',
+        key: 'delete',
+        label: 'Delete',
         leftSlot: <Icon icon="trash" />,
         onSelect: deleteWorkspace.mutate,
+        variant: 'danger',
+      },
+      { type: 'separator' },
+      {
+        key: 'create-workspace',
+        label: 'Create Workspace',
+        leftSlot: <Icon icon="plus" />,
+        onSelect: async () => {
+          const name = await prompt({
+            name: 'name',
+            label: 'Name',
+            defaultValue: 'My Workspace',
+            title: 'Create Workspace',
+          });
+          createWorkspace.mutate({ name });
+        },
+      },
+      {
+        key: 'import',
+        label: 'Import Data',
+        onSelect: importData,
+        leftSlot: <Icon icon="download" />,
+      },
+      {
+        key: 'appearance',
+        label: 'Toggle Theme',
+        onSelect: toggleAppearance,
+        leftSlot: <Icon icon={appearance === 'dark' ? 'sun' : 'moon'} />,
       },
     ];
   }, [
-    workspaces,
-    activeWorkspaceId,
-    routes,
-    createWorkspace,
-    confirm,
     activeWorkspace?.name,
-    deleteWorkspace,
+    activeWorkspaceId,
+    appearance,
+    createWorkspace,
+    deleteWorkspace.mutate,
+    dialog,
+    importData,
+    prompt,
+    routes,
+    toggleAppearance,
+    updateWorkspace,
+    workspaces,
   ]);
 
   return (
     <Dropdown items={items}>
       <Button
         size="sm"
-        className={classnames(className, 'text-gray-800 !px-2 truncate')}
-        forDropdown
+        className={classNames(className, 'text-gray-800 !px-2 truncate')}
+        {...buttonProps}
       >
         {activeWorkspace?.name}
       </Button>

src-web/components/WorkspaceHeader.tsx

@@ -1,8 +1,12 @@
-import classnames from 'classnames';
-import { memo } from 'react';
+import classNames from 'classnames';
+import React, { memo } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
+import { EnvironmentActionsDropdown } from './EnvironmentActionsDropdown';
+import { RecentRequestsDropdown } from './RecentRequestsDropdown';
 import { RequestActionsDropdown } from './RequestActionsDropdown';
 import { SidebarActions } from './SidebarActions';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
@@ -13,31 +17,40 @@ interface Props {
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
   const activeRequest = useActiveRequest();
+  const activeWorkspace = useActiveWorkspace();
 
   return (
     <HStack
       justifyContent="center"
       alignItems="center"
-      className={classnames(className, 'w-full h-full')}
+      className={classNames(className, 'w-full h-full')}
     >
       <HStack space={0.5} className="flex-1 pointer-events-none" alignItems="center">
         <SidebarActions />
-        <WorkspaceActionsDropdown className="pointer-events-auto" />
+        <HStack alignItems="center">
+          <WorkspaceActionsDropdown
+            leftSlot={
+              <div className="w-4 h-4 leading-4 rounded text-[0.8em] bg-[#1B88DE] bg-opacity-80 text-white mr-1">
+                {activeWorkspace?.name[0]?.toUpperCase()}
+              </div>
+            }
+          />
+          <Icon icon="chevronRight" className="text-gray-900 text-opacity-disabled" />
+          <EnvironmentActionsDropdown className="w-auto pointer-events-auto" />
+        </HStack>
       </HStack>
-      <div className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none">
-        {activeRequest?.name}
+      <div className="pointer-events-none">
+        <RecentRequestsDropdown />
       </div>
       <div className="flex-1 flex justify-end -mr-2 pointer-events-none">
-        {activeRequest && (
-          <RequestActionsDropdown requestId={activeRequest?.id}>
-            <IconButton
-              size="sm"
-              title="Request Options"
-              icon="gear"
-              className="pointer-events-auto"
-            />
-          </RequestActionsDropdown>
-        )}
+        <RequestActionsDropdown requestId={activeRequest?.id ?? null}>
+          <IconButton
+            size="sm"
+            title="Request Options"
+            icon="gear"
+            className="pointer-events-auto"
+          />
+        </RequestActionsDropdown>
       </div>
     </HStack>
   );

src-web/components/Workspaces.tsx

@@ -1,16 +1,25 @@
 import { Navigate } from 'react-router-dom';
-import { useRoutes } from '../hooks/useRoutes';
+import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import { Heading } from './core/Heading';
+import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
 
 export default function Workspaces() {
-  const routes = useRoutes();
+  const routes = useAppRoutes();
+  const recentWorkspaceIds = useRecentWorkspaces();
   const workspaces = useWorkspaces();
-  const workspace = workspaces[0];
 
-  if (workspace === undefined) {
+  const loading = workspaces.length === 0 && recentWorkspaceIds.length === 0;
+  if (loading) {
+    return null;
+  }
+
+  const workspaceId = recentWorkspaceIds[0] ?? workspaces[0]?.id ?? null;
+
+  if (workspaceId === null) {
     return <Heading>There are no workspaces</Heading>;
   }
 
-  return <Navigate to={routes.paths.workspace({ workspaceId: workspace.id })} />;
+  // TODO: Somehow get recent environmentId for the workspace in here too
+  return <Navigate to={routes.paths.workspace({ workspaceId })} />;
 }

src-web/components/core/Banner.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 interface Props {
@@ -9,7 +9,7 @@ export function Banner({ children, className }: Props) {
   return (
     <div>
       <div
-        className={classnames(
+        className={classNames(
           className,
           'border border-red-500 bg-red-300/10 text-red-800 px-3 py-2 rounded select-auto cursor-text',
         )}

src-web/components/core/Button.tsx

@@ -1,7 +1,6 @@
-import classnames from 'classnames';
-import type { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef, memo, useMemo } from 'react';
-import { Link } from 'react-router-dom';
 import { Icon } from './Icon';
 
 const colorStyles = {
@@ -15,8 +14,8 @@ const colorStyles = {
   danger: 'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
 };
 
-export type ButtonProps = HTMLAttributes<HTMLElement> & {
-  to?: string;
+export type ButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  innerClassName?: string;
   color?: keyof typeof colorStyles;
   isLoading?: boolean;
   size?: 'sm' | 'md' | 'xs';
@@ -25,30 +24,38 @@ export type ButtonProps = HTMLAttributes<HTMLElement> & {
   forDropdown?: boolean;
   disabled?: boolean;
   title?: string;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const _Button = forwardRef<any, ButtonProps>(function Button(
+const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   {
-    to,
     isLoading,
     className,
+    innerClassName,
     children,
     forDropdown,
     color,
+    type = 'button',
     justify = 'center',
     size = 'md',
+    leftSlot,
+    rightSlot,
+    disabled,
     ...props
   }: ButtonProps,
   ref,
 ) {
   const classes = useMemo(
     () =>
-      classnames(
+      classNames(
         className,
-        'outline-none whitespace-nowrap',
-        'focus-visible-or-class:ring',
-        'rounded-md flex items-center',
+        'max-w-full min-w-0', // Help with truncation
+        'whitespace-nowrap outline-none',
+        'flex-shrink-0 flex items-center',
+        'focus-visible-or-class:ring rounded-md',
+        disabled ? 'pointer-events-none opacity-disabled' : 'pointer-events-auto',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
@@ -56,25 +63,29 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         size === 'sm' && 'h-sm px-2.5 text-sm',
         size === 'xs' && 'h-xs px-2 text-sm',
       ),
-    [color, size, justify, className],
+    [className, disabled, color, justify, size],
   );
 
-  if (typeof to === 'string') {
-    return (
-      <Link ref={ref} to={to} className={classes} {...props}>
+  return (
+    <button ref={ref} type={type} className={classes} disabled={disabled} {...props}>
+      {isLoading ? (
+        <Icon icon="update" size={size} className="animate-spin mr-1" />
+      ) : leftSlot ? (
+        <div className="mr-1">{leftSlot}</div>
+      ) : null}
+      <div
+        className={classNames(
+          'max-w-[15em] truncate w-full',
+          justify === 'start' ? 'text-left' : 'text-center',
+          innerClassName,
+        )}
+      >
         {children}
-        {forDropdown && <Icon icon="chevronDown" className="ml-1 -mr-1" />}
-      </Link>
-    );
-  } else {
-    return (
-      <button ref={ref} className={classes} {...props}>
-        {isLoading && <Icon icon="update" size={size} className="animate-spin mr-1" />}
-        {children}
-        {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}
-      </button>
-    );
-  }
+      </div>
+      {rightSlot && <div className="ml-1">{rightSlot}</div>}
+      {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}
+    </button>
+  );
 });
 
 export const Button = memo(_Button);

src-web/components/core/Checkbox.tsx

@@ -1,15 +1,16 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import { useCallback } from 'react';
 import { Icon } from './Icon';
 
 interface Props {
   checked: boolean;
+  title: string;
   onChange: (checked: boolean) => void;
   disabled?: boolean;
   className?: string;
 }
 
-export function Checkbox({ checked, onChange, className, disabled }: Props) {
+export function Checkbox({ checked, onChange, className, disabled, title }: Props) {
   const handleClick = useCallback(() => {
     onChange(!checked);
   }, [onChange, checked]);
@@ -20,7 +21,8 @@ export function Checkbox({ checked, onChange, className, disabled }: Props) {
       aria-checked={checked ? 'true' : 'false'}
       disabled={disabled}
       onClick={handleClick}
-      className={classnames(
+      title={title}
+      className={classNames(
         className,
         'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',
         'focus:border-focus',

src-web/components/core/CountBadge.tsx

@@ -1,17 +1,21 @@
+import classNames from 'classnames';
+
 interface Props {
   count: number;
+  className?: string;
 }
 
-export function CountBadge({ count }: Props) {
+export function CountBadge({ count, className }: Props) {
   if (count === 0) return null;
   return (
-    <>
-      <div
-        aria-hidden
-        className="opacity-70 border border-highlight text-3xs rounded mb-0.5 px-1 ml-1 h-4 font-mono"
-      >
-        {count}
-      </div>
-    </>
+    <div
+      aria-hidden
+      className={classNames(
+        className,
+        'opacity-70 border border-highlight text-3xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
+      )}
+    >
+      {count}
+    </div>
   );
 }

src-web/components/core/Dialog.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
@@ -11,7 +11,7 @@ export interface DialogProps {
   children: ReactNode;
   open: boolean;
   onClose: () => void;
-  title: ReactNode;
+  title?: ReactNode;
   description?: ReactNode;
   className?: string;
   size?: 'sm' | 'md' | 'full' | 'dynamic';
@@ -51,17 +51,29 @@ export function Dialog({
           <motion.div
             initial={{ top: 5, scale: 0.97 }}
             animate={{ top: 0, scale: 1 }}
-            className={classnames(
+            className={classNames(
               className,
+              'gap-2 grid grid-rows-[auto_minmax(0,1fr)]',
               'relative bg-gray-50 pointer-events-auto',
-              'max-h-[80vh] p-5 rounded-lg overflow-auto',
-              'dark:border border-gray-200 shadow-md shadow-black/10',
-              size === 'sm' && 'w-[25rem]',
-              size === 'md' && 'w-[45rem]',
-              size === 'full' && 'w-[80vw]',
+              'p-5 rounded-lg overflow-auto',
+              'dark:border border-highlight shadow shadow-black/10',
+              'max-w-[90vw] max-h-[calc(100vh-8em)]',
+              size === 'sm' && 'w-[25rem] max-h-[80vh]',
+              size === 'md' && 'w-[45rem] max-h-[80vh]',
+              size === 'full' && 'w-[100vw] h-[100vh]',
               size === 'dynamic' && 'min-w-[30vw] max-w-[80vw]',
             )}
           >
+            {title ? (
+              <Heading className="text-xl font-semibold w-full" id={titleId}>
+                {title}
+              </Heading>
+            ) : (
+              <span />
+            )}
+            {description && <p id={descriptionId}>{description}</p>}
+            <div className="h-full w-full">{children}</div>
+            {/*Put close at the end so that it's the last thing to be tabbed to*/}
             {!hideX && (
               <IconButton
                 onClick={onClose}
@@ -72,11 +84,6 @@ export function Dialog({
                 className="ml-auto absolute right-1 top-1"
               />
             )}
-            <Heading className="text-xl font-semibold w-full" id={titleId}>
-              {title}
-            </Heading>
-            {description && <p id={descriptionId}>{description}</p>}
-            <div className="mt-6">{children}</div>
           </motion.div>
         </div>
       </div>

src-web/components/core/Dropdown.tsx

@@ -1,10 +1,27 @@
-import classnames from 'classnames';
-import FocusTrap from 'focus-trap-react';
+import classNames from 'classnames';
 import { motion } from 'framer-motion';
-import type { CSSProperties, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
-import { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useKeyPressEvent } from 'react-use';
-import { Portal } from '../Portal';
+import type {
+  CSSProperties,
+  FocusEvent as ReactFocusEvent,
+  HTMLAttributes,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useKey, useKeyPressEvent, useWindowSize } from 'react-use';
+import { Overlay } from '../Overlay';
+import { Button } from './Button';
 import { Separator } from './Separator';
 import { VStack } from './Stacks';
 
@@ -15,8 +32,10 @@ export type DropdownItemSeparator = {
 
 export type DropdownItem =
   | {
+      key: string;
       type?: 'default';
-      label: string;
+      label: ReactNode;
+      variant?: 'danger';
       disabled?: boolean;
       hidden?: boolean;
       leftSlot?: ReactNode;
@@ -30,21 +49,55 @@ export interface DropdownProps {
   items: DropdownItem[];
 }
 
-export function Dropdown({ children, items }: DropdownProps) {
+export interface DropdownRef {
+  isOpen: boolean;
+  open: (activeIndex?: number) => void;
+  toggle: (activeIndex?: number) => void;
+  close?: () => void;
+  next?: () => void;
+  prev?: () => void;
+  select?: () => void;
+}
+
+export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown(
+  { children, items }: DropdownProps,
+  ref,
+) {
   const [open, setOpen] = useState<boolean>(false);
-  const ref = useRef<HTMLButtonElement>(null);
+  const [defaultSelectedIndex, setDefaultSelectedIndex] = useState<number>();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<Omit<DropdownRef, 'open'>>(null);
+
+  useImperativeHandle(ref, () => ({
+    ...menuRef.current,
+    isOpen: open,
+    toggle(activeIndex?: number) {
+      if (!open) this.open(activeIndex);
+      else setOpen(false);
+    },
+    open(activeIndex?: number) {
+      if (activeIndex === undefined) {
+        setDefaultSelectedIndex(undefined);
+      } else {
+        setDefaultSelectedIndex(activeIndex >= 0 ? activeIndex : items.length + activeIndex);
+      }
+      setOpen(true);
+    },
+  }));
+
   const child = useMemo(() => {
     const existingChild = Children.only(children);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const props: any = {
       ...existingChild.props,
-      ref,
+      ref: buttonRef,
       'aria-haspopup': 'true',
       onClick:
         existingChild.props?.onClick ??
         ((e: MouseEvent<HTMLButtonElement>) => {
           e.preventDefault();
           e.stopPropagation();
+          setDefaultSelectedIndex(undefined);
           setOpen((o) => !o);
         }),
     };
@@ -53,37 +106,50 @@ export function Dropdown({ children, items }: DropdownProps) {
 
   const handleClose = useCallback(() => {
     setOpen(false);
-    ref.current?.focus();
+    buttonRef.current?.focus();
   }, []);
 
   useEffect(() => {
-    ref.current?.setAttribute('aria-expanded', open.toString());
+    buttonRef.current?.setAttribute('aria-expanded', open.toString());
   }, [open]);
 
+  const windowSize = useWindowSize();
   const triggerRect = useMemo(() => {
+    if (!windowSize) return null; // No-op to TS happy with this dep
     if (!open) return null;
-    return ref.current?.getBoundingClientRect();
-  }, [open]);
+    return buttonRef.current?.getBoundingClientRect();
+  }, [open, windowSize]);
 
   return (
     <>
       {child}
       {open && triggerRect && (
-        <Menu items={items} triggerRect={triggerRect} onClose={handleClose} />
+        <Menu
+          ref={menuRef}
+          defaultSelectedIndex={defaultSelectedIndex}
+          items={items}
+          triggerRect={triggerRect}
+          onClose={handleClose}
+        />
       )}
     </>
   );
-}
+});
 
 interface MenuProps {
   className?: string;
+  defaultSelectedIndex?: number;
   items: DropdownProps['items'];
   triggerRect: DOMRect;
   onClose: () => void;
 }
 
-function Menu({ className, items, onClose, triggerRect }: MenuProps) {
+const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuProps>(function Menu(
+  { className, items, onClose, triggerRect, defaultSelectedIndex }: MenuProps,
+  ref,
+) {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(defaultSelectedIndex ?? null);
   const [menuStyles, setMenuStyles] = useState<CSSProperties>({});
 
   // Calculate the max height so we can scroll
@@ -94,13 +160,23 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
     setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
   }, []);
 
+  // Close menu on space bar
+  const handleMenuKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === ' ') {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
   useKeyPressEvent('Escape', (e) => {
     e.preventDefault();
     onClose();
   });
 
-  useKeyPressEvent('ArrowUp', (e) => {
-    e.preventDefault();
+  const handlePrev = useCallback(() => {
     setSelectedIndex((currIndex) => {
       let nextIndex = (currIndex ?? 0) - 1;
       const maxTries = items.length;
@@ -115,10 +191,9 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
       }
       return nextIndex;
     });
-  });
+  }, [items]);
 
-  useKeyPressEvent('ArrowDown', (e) => {
-    e.preventDefault();
+  const handleNext = useCallback(() => {
     setSelectedIndex((currIndex) => {
       let nextIndex = (currIndex ?? -1) + 1;
       const maxTries = items.length;
@@ -133,8 +208,44 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
       }
       return nextIndex;
     });
+  }, [items]);
+
+  useKey('ArrowUp', (e) => {
+    e.preventDefault();
+    handlePrev();
   });
 
+  useKey('ArrowDown', (e) => {
+    e.preventDefault();
+    handleNext();
+  });
+
+  const handleSelect = useCallback(
+    (i: DropdownItem) => {
+      onClose();
+      setSelectedIndex(null);
+      if (i.type !== 'separator') {
+        i.onSelect?.();
+      }
+    },
+    [onClose],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      close: onClose,
+      prev: handlePrev,
+      next: handleNext,
+      select: () => {
+        const item = items[selectedIndex ?? -1] ?? null;
+        if (!item) return;
+        handleSelect(item);
+      },
+    }),
+    [handleNext, handlePrev, handleSelect, items, onClose, selectedIndex],
+  );
+
   const { containerStyles, triangleStyles } = useMemo<{
     containerStyles: CSSProperties;
     triangleStyles: CSSProperties;
@@ -153,17 +264,6 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
     return { containerStyles, triangleStyles };
   }, [triggerRect]);
 
-  const handleSelect = useCallback(
-    (i: DropdownItem) => {
-      onClose();
-      setSelectedIndex(null);
-      if (i.type !== 'separator') {
-        i.onSelect?.();
-      }
-    },
-    [onClose],
-  );
-
   const handleFocus = useCallback(
     (i: DropdownItem) => {
       const index = items.findIndex((item) => item === i) ?? null;
@@ -172,65 +272,64 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
     [items],
   );
 
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  if (items.length === 0) return null;
 
   return (
-    <Portal name="dropdown">
-      <FocusTrap>
-        <div>
-          <div tabIndex={-1} aria-hidden className="fixed inset-0" onClick={onClose} />
-          <motion.div
-            tabIndex={0}
-            initial={{ opacity: 0, y: -5, scale: 0.98 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            role="menu"
-            aria-orientation="vertical"
-            dir="ltr"
-            ref={containerRef}
-            style={containerStyles}
-            className={classnames(className, 'outline-none mt-1 pointer-events-auto fixed z-50')}
-          >
-            <span
-              aria-hidden
-              style={triangleStyles}
-              className="bg-gray-50 absolute rotate-45 border-gray-200 border-t border-l"
-            />
-            {containerStyles && (
-              <VStack
-                space={0.5}
-                ref={initMenu}
-                style={menuStyles}
-                className={classnames(
-                  className,
-                  'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
-                  'border-gray-200 overflow-auto mb-1 mx-0.5',
-                )}
-              >
-                {items.map((item, i) => {
-                  if (item.type === 'separator') {
-                    return <Separator key={i} className="my-1.5" label={item.label} />;
-                  }
-                  if (item.hidden) {
-                    return null;
-                  }
-                  return (
-                    <MenuItem
-                      focused={i === selectedIndex}
-                      onFocus={handleFocus}
-                      onSelect={handleSelect}
-                      key={i + item.label}
-                      item={item}
-                    />
-                  );
-                })}
-              </VStack>
-            )}
-          </motion.div>
-        </div>
-      </FocusTrap>
-    </Portal>
+    <Overlay open variant="transparent" portalName="dropdown" zIndex={50}>
+      <div>
+        <div tabIndex={-1} aria-hidden className="fixed inset-0 z-30" onClick={onClose} />
+        <motion.div
+          tabIndex={0}
+          onKeyDown={handleMenuKeyDown}
+          initial={{ opacity: 0, y: -5, scale: 0.98 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          role="menu"
+          aria-orientation="vertical"
+          dir="ltr"
+          ref={containerRef}
+          style={containerStyles}
+          className={classNames(className, 'outline-none mt-1 pointer-events-auto fixed z-50')}
+        >
+          <span
+            aria-hidden
+            style={triangleStyles}
+            className="bg-gray-50 absolute rotate-45 border-gray-200 border-t border-l"
+          />
+          {containerStyles && (
+            <VStack
+              space={0.5}
+              ref={initMenu}
+              style={menuStyles}
+              className={classNames(
+                className,
+                'h-auto bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 py-1.5 border',
+                'border-gray-200 overflow-auto mb-1 mx-0.5',
+              )}
+            >
+              {items.map((item, i) => {
+                if (item.type === 'separator') {
+                  return <Separator key={i} className="my-1.5" label={item.label} />;
+                }
+                if (item.hidden) {
+                  return null;
+                }
+                return (
+                  <MenuItem
+                    focused={i === selectedIndex}
+                    onFocus={handleFocus}
+                    onSelect={handleSelect}
+                    key={item.key}
+                    item={item}
+                  />
+                );
+              })}
+            </VStack>
+          )}
+        </motion.div>
+      </div>
+    </Overlay>
   );
-}
+});
 
 interface MenuItemProps {
   className?: string;
@@ -242,7 +341,13 @@ interface MenuItemProps {
 
 function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: MenuItemProps) {
   const handleClick = useCallback(() => onSelect?.(item), [item, onSelect]);
-  const handleFocus = useCallback(() => onFocus?.(item), [item, onFocus]);
+  const handleFocus = useCallback(
+    (e: ReactFocusEvent<HTMLButtonElement>) => {
+      e.stopPropagation(); // Don't trigger focus on any parents
+      return onFocus?.(item);
+    },
+    [item, onFocus],
+  );
 
   const initRef = useCallback(
     (el: HTMLButtonElement | null) => {
@@ -257,23 +362,35 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
   if (item.type === 'separator') return <Separator className="my-1.5" />;
 
   return (
-    <button
+    <Button
       ref={initRef}
+      size="xs"
       tabIndex={-1}
       onMouseEnter={(e) => e.currentTarget.focus()}
       onMouseLeave={(e) => e.currentTarget.blur()}
+      disabled={item.disabled}
       onFocus={handleFocus}
       onClick={handleClick}
-      className={classnames(
+      justify="start"
+      leftSlot={item.leftSlot && <div className="pr-2 flex justify-start">{item.leftSlot}</div>}
+      rightSlot={item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>}
+      className={classNames(
         className,
-        'min-w-[8rem] outline-none px-2 mx-1.5 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap',
+        'min-w-[8rem] outline-none px-2 mx-1.5 flex text-sm text-gray-700 whitespace-nowrap',
         'focus:bg-highlight focus:text-gray-900 rounded',
+        item.variant === 'danger' && 'text-red-600',
       )}
+      innerClassName="!text-left"
       {...props}
     >
-      {item.leftSlot && <div className="w-6">{item.leftSlot}</div>}
-      <div>{item.label}</div>
-      {item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>}
-    </button>
+      <div
+        className={classNames(
+          // Add padding on right when no right slot, for some visual balance
+          !item.rightSlot && 'pr-4',
+        )}
+      >
+        {item.label}
+      </div>
+    </Button>
   );
 }

src-web/components/core/DurationTag.tsx

@@ -0,0 +1,25 @@
+interface Props {
+  millis: number;
+}
+
+export function DurationTag({ millis }: Props) {
+  let num;
+  let unit;
+
+  if (millis > 1000 * 60) {
+    num = millis / 1000 / 60;
+    unit = 'min';
+  } else if (millis > 1000) {
+    num = millis / 1000;
+    unit = 's';
+  } else {
+    num = millis;
+    unit = 'ms';
+  }
+
+  return (
+    <span title={`${millis} milliseconds`}>
+      {Math.round(num * 10) / 10} {unit}
+    </span>
+  );
+}

src-web/components/core/Editor/Editor.css

@@ -1,203 +1,221 @@
 .cm-wrapper {
-    @apply h-full overflow-hidden;
+  @apply h-full overflow-hidden;
+
+  .cm-editor {
+    @apply w-full block text-base;
+
+    * {
+      @apply cursor-text;
+      @apply caret-transparent !important;
+    }
+
+    .cm-cursor {
+      @apply border-gray-800 !important;
+    }
+
+    &.cm-focused {
+      outline: none !important;
+    }
+
+    .cm-content {
+      @apply py-0;
+    }
+
+    .cm-line {
+      @apply text-gray-800 pl-1 pr-1.5;
+    }
+
+    .cm-placeholder {
+      @apply text-placeholder;
+    }
+
+    .cm-scroller {
+      /* Inherit line-height from outside */
+      line-height: inherit;
+    }
+
+    /* Don't show selection on blurred input */
+    .cm-selectionBackground {
+      @apply bg-transparent;
+    }
+    &.cm-focused .cm-selectionBackground {
+      @apply bg-selection;
+    }
+
+    /* Style gutters */
+    .cm-gutters {
+      @apply border-0 text-gray-500/50;
+
+      .cm-gutterElement {
+        @apply cursor-default;
+      }
+    }
+
+    .placeholder-widget {
+      @apply text-xs text-gray-800 dark:text-gray-900 px-1 rounded cursor-default dark:shadow;
+
+      /* NOTE: Background and border are translucent so we can see text selection through it */
+      @apply bg-gray-300/40 border border-gray-300 border-opacity-40;
+
+      /* Bring above on hover */
+      @apply hover:z-10 relative;
+
+      -webkit-text-security: none;
+
+      &.placeholder-widget-error {
+        @apply bg-red-300/40 border-red-300/80 border-opacity-40 hover:border-red-300 hover:bg-red-300/50;
+      }
+    }
+  }
+
+  &.cm-singleline {
+    .cm-editor {
+      @apply w-full h-auto;
+    }
+
+    .cm-scroller {
+      @apply font-mono text-[0.8rem] overflow-hidden;
+    }
+
+    .cm-line {
+      @apply px-2 overflow-hidden;
+    }
+  }
+
+  &.cm-multiline {
+    &.cm-full-height {
+      @apply relative;
+
+      .cm-editor {
+        @apply inset-0 absolute;
+        position: absolute !important;
+      }
+    }
 
     .cm-editor {
-        @apply w-full block text-base;
-
-        * {
-            @apply cursor-text;
-        }
-
-        &.cm-focused {
-            outline: none !important;
-        }
-
-        .cm-content {
-            @apply py-0;
-        }
-
-        .cm-line {
-            @apply text-gray-800 pl-1 pr-1.5;
-        }
-
-        .cm-placeholder {
-            @apply text-placeholder;
-        }
-
-        .cm-scroller {
-            /* Inherit line-height from outside */
-            line-height: inherit;
-        }
-
-        /* Don't show selection on blurred input */
-        .cm-selectionBackground {
-            @apply bg-transparent;
-        }
-        &.cm-focused .cm-selectionBackground {
-            @apply bg-selection;
-        }
-
-        /* Style gutters */
-        .cm-gutters {
-            @apply border-0 text-gray-500/50 opacity-95;
-
-            .cm-gutterElement {
-                @apply cursor-default;
-            }
-        }
-
-        .placeholder-widget {
-            @apply text-xs text-gray-800 dark:text-gray-900 px-1 rounded cursor-default dark:shadow;
-
-            /* NOTE: Background and border are translucent so we can see text selection through it */
-            @apply bg-gray-300/40 border border-gray-300 border-opacity-40 hover:border-opacity-80;
-
-            /* Bring above on hover */
-            @apply hover:z-10 relative;
-        }
+      @apply h-full;
     }
 
-    &.cm-singleline {
-        .cm-editor {
-            @apply w-full h-auto;
-        }
+    .cm-scroller {
+      @apply font-mono text-[0.75rem];
 
-        .cm-scroller {
-            @apply font-mono text-[0.8rem] overflow-hidden;
-        }
-
-        .cm-line {
-            @apply px-2 overflow-hidden;
-        }
-    }
-
-    &.cm-multiline {
-        &.cm-full-height {
-            @apply relative;
-
-            .cm-editor {
-                @apply inset-0 absolute;
-                position: absolute !important;
-            }
-        }
-
-        .cm-editor {
-            @apply h-full;
-        }
-
-        .cm-scroller {
-            @apply font-mono text-[0.75rem];
-
-            /*
+      /*
              * Round corners or they'll stick out of the editor bounds of editor is rounded.
              * Could potentially be pushed up from the editor like we do with bg color but this
              * is probably fine.
              */
-            @apply rounded-lg;
-        }
+      @apply rounded-lg;
     }
+  }
 }
 
 /* Obscure text for password fields */
 .cm-wrapper.cm-obscure-text .cm-line {
-    -webkit-text-security: disc;
+  -webkit-text-security: disc;
 }
 
 .cm-editor .cm-gutterElement {
-    @apply flex items-center;
-    transition: color var(--transition-duration);
+  @apply flex items-center;
+  transition: color var(--transition-duration);
 }
 
 .cm-editor .fold-gutter-icon {
-    @apply pt-[0.25em] pl-[0.4em] px-[0.4em] h-4 cursor-pointer rounded;
+  @apply pt-[0.25em] pl-[0.4em] px-[0.4em] h-4 cursor-pointer rounded;
 }
 
 .cm-editor .fold-gutter-icon::after {
-    @apply block w-1.5 h-1.5 border-transparent -rotate-45
+  @apply block w-1.5 h-1.5 border-transparent -rotate-45
     border-l border-b border-l-[currentColor] border-b-[currentColor] content-[''];
 }
 
 .cm-editor .fold-gutter-icon[data-open] {
-    @apply pt-[0.38em] pl-[0.3em];
+  @apply pt-[0.38em] pl-[0.3em];
 }
 
 .cm-editor .fold-gutter-icon[data-open]::after {
-    @apply rotate-[-135deg];
+  @apply rotate-[-135deg];
 }
 
 .cm-editor .fold-gutter-icon:hover {
-    @apply text-gray-900 bg-gray-300/50;
+  @apply text-gray-900 bg-gray-300/50;
 }
 
 .cm-editor .cm-foldPlaceholder {
-    @apply px-2 border border-gray-400/50 bg-gray-300/50 cursor-default;
-    @apply hover:text-gray-800 hover:border-gray-400;
+  @apply px-2 border border-gray-400/50 bg-gray-300/50 cursor-default;
+  @apply hover:text-gray-800 hover:border-gray-400;
 }
 
 .cm-editor .cm-activeLineGutter {
-    @apply bg-transparent;
+  @apply bg-transparent;
 }
 
 .cm-wrapper:not(.cm-readonly) .cm-editor {
-    &.cm-focused .cm-activeLineGutter {
-        @apply text-gray-600;
-    }
+  &.cm-focused .cm-activeLineGutter {
+    @apply text-gray-600;
+  }
 
-    .cm-cursor {
-        @apply border-l-2 border-gray-800;
-    }
+  .cm-cursor {
+    @apply border-l-2 border-gray-800;
+  }
 }
 
 .cm-singleline .cm-editor {
-    .cm-content {
-        @apply  h-full flex items-center;
+  .cm-content {
+    @apply h-full flex items-center;
+
+    /* Break characters on line wrapping mode, useful for URL field.
+     * We can make this dynamic if we need it to be configurable later
+     */
+    &.cm-lineWrapping {
+      @apply break-all;
     }
+  }
 }
 
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip {
-    @apply shadow-lg bg-gray-50 rounded text-gray-700 border border-gray-200 z-50 pointer-events-auto text-sm;
+  @apply shadow-lg bg-gray-50 rounded text-gray-700 border border-gray-200 z-50 pointer-events-auto text-[0.75rem];
 
-    &.cm-completionInfo-right {
-        @apply ml-1;
+  &.cm-completionInfo-right {
+    @apply ml-1 -mt-0.5 text-sm;
+  }
+
+  &.cm-completionInfo-right-narrow {
+    @apply ml-1;
+  }
+
+  * {
+    @apply transition-none;
+  }
+
+  &.cm-tooltip-autocomplete {
+    & > ul {
+      @apply p-1 max-h-[40vh];
     }
 
-    &.cm-completionInfo-right-narrow {
-        @apply ml-1;
+    & > ul > li {
+      @apply cursor-default px-2 rounded-sm text-gray-600 h-7 flex items-center;
     }
 
-    * {
-        @apply transition-none;
+    & > ul > li[aria-selected] {
+      @apply bg-highlight text-gray-900;
     }
 
-    &.cm-tooltip-autocomplete {
-        & > ul {
-            @apply p-1 max-h-[40vh];
-        }
-
-        & > ul > li {
-            @apply cursor-default px-2 rounded-sm text-gray-600 h-7 flex items-center;
-        }
-
-        & > ul > li[aria-selected] {
-            @apply bg-highlight text-gray-900;
-        }
-
-        .cm-completionIcon {
-            @apply text-sm flex items-center pb-0.5 flex-shrink-0;
-        }
-
-        .cm-completionLabel {
-            @apply text-gray-700;
-        }
-
-        .cm-completionDetail {
-            @apply ml-auto pl-6;
-        }
+    .cm-completionIcon {
+      @apply text-sm flex items-center pb-0.5 mr-2 flex-shrink-0;
     }
+
+    .cm-completionLabel {
+      @apply text-gray-700;
+    }
+
+    .cm-completionDetail {
+      @apply ml-auto pl-6;
+    }
+  }
 }
 
 /* Add default icon. Needs low priority so it can be overwritten */
 .cm-completionIcon::after {
-    content: '𝑥';
+  content: '𝑥';
 }

src-web/components/core/Editor/Editor.tsx

@@ -2,10 +2,12 @@ import { defaultKeymap } from '@codemirror/commands';
 import { Compartment, EditorState, Transaction } from '@codemirror/state';
 import type { ViewUpdate } from '@codemirror/view';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject, ReactNode } from 'react';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { useActiveEnvironment } from '../../../hooks/useActiveEnvironment';
+import { useActiveWorkspace } from '../../../hooks/useActiveWorkspace';
 import { IconButton } from '../IconButton';
 import { HStack } from '../Stacks';
 import './Editor.css';
@@ -24,20 +26,23 @@ export interface EditorProps {
   type?: 'text' | 'password';
   className?: string;
   heightMode?: 'auto' | 'full';
-  contentType?: string;
+  contentType?: string | null;
   forceUpdateKey?: string;
   autoFocus?: boolean;
-  defaultValue?: string;
+  autoSelect?: boolean;
+  defaultValue?: string | null;
   placeholder?: string;
   tooltipContainer?: HTMLElement;
   useTemplating?: boolean;
   onChange?: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
   singleLine?: boolean;
   wrapLines?: boolean;
   format?: (v: string) => string;
   autocomplete?: GenericCompletionConfig;
+  autocompleteVariables?: boolean;
   actions?: ReactNode;
 }
 
@@ -48,6 +53,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     heightMode,
     contentType,
     autoFocus,
+    autoSelect,
     placeholder,
     useTemplating,
     defaultValue,
@@ -55,15 +61,22 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     onChange,
     onFocus,
     onBlur,
+    onKeyDown,
     className,
     singleLine,
     format,
     autocomplete,
+    autocompleteVariables,
     actions,
     wrapLines,
   }: EditorProps,
   ref,
 ) {
+  const e = useActiveEnvironment();
+  const w = useActiveWorkspace();
+  const environment = autocompleteVariables ? e : null;
+  const workspace = autocompleteVariables ? w : null;
+
   const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
   useImperativeHandle(ref, () => cm.current?.view);
 
@@ -85,6 +98,12 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     handleBlur.current = onBlur;
   }, [onBlur]);
 
+  // Use ref so we can update the onChange handler without re-initializing the editor
+  const handleKeyDown = useRef<EditorProps['onKeyDown']>(onKeyDown);
+  useEffect(() => {
+    handleKeyDown.current = onKeyDown;
+  }, [onKeyDown]);
+
   // Update placeholder
   const placeholderCompartment = useRef(new Compartment());
   useEffect(() => {
@@ -108,9 +127,15 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   useEffect(() => {
     if (cm.current === null) return;
     const { view, languageCompartment } = cm.current;
-    const ext = getLanguageExtension({ contentType, useTemplating, autocomplete });
+    const ext = getLanguageExtension({
+      contentType,
+      environment,
+      workspace,
+      useTemplating,
+      autocomplete,
+    });
     view.dispatch({ effects: languageCompartment.reconfigure(ext) });
-  }, [contentType, autocomplete, useTemplating]);
+  }, [contentType, autocomplete, useTemplating, environment, workspace]);
 
   useEffect(() => {
     if (cm.current === null) return;
@@ -131,7 +156,13 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     let view: EditorView;
     try {
       const languageCompartment = new Compartment();
-      const langExt = getLanguageExtension({ contentType, useTemplating, autocomplete });
+      const langExt = getLanguageExtension({
+        contentType,
+        useTemplating,
+        autocomplete,
+        environment,
+        workspace,
+      });
 
       const state = EditorState.create({
         doc: `${defaultValue ?? ''}`,
@@ -146,6 +177,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
           }),
         ],
       });
@@ -153,7 +185,12 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
       view = new EditorView({ state, parent: container });
       cm.current = { view, languageCompartment };
       syncGutterBg({ parent: container, className });
-      if (autoFocus) view.focus();
+      if (autoFocus) {
+        view.focus();
+      }
+      if (autoSelect) {
+        view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
+      }
     } catch (e) {
       console.log('Failed to initialize Codemirror', e);
     }
@@ -164,7 +201,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   const cmContainer = (
     <div
       ref={initEditorRef}
-      className={classnames(
+      className={classNames(
         className,
         'cm-wrapper text-base bg-gray-50',
         type === 'password' && 'cm-obscure-text',
@@ -194,10 +231,14 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
             onClick={() => {
               if (cm.current === null) return;
               const { doc } = cm.current.view.state;
-              const insert = format(doc.toString());
+              const formatted = format(doc.toString());
               // Update editor and blur because the cursor will reset anyway
-              cm.current.view.dispatch({ changes: { from: 0, to: doc.length, insert } });
+              cm.current.view.dispatch({
+                changes: { from: 0, to: doc.length, insert: formatted },
+              });
               cm.current.view.contentDOM.blur();
+              // Fire change event
+              onChange?.(formatted);
             }}
           />
         </HStack>
@@ -215,11 +256,13 @@ function getExtensions({
   onChange,
   onFocus,
   onBlur,
+  onKeyDown,
 }: Pick<EditorProps, 'singleLine' | 'readOnly'> & {
   container: HTMLDivElement | null;
   onChange: MutableRefObject<EditorProps['onChange']>;
   onFocus: MutableRefObject<EditorProps['onFocus']>;
   onBlur: MutableRefObject<EditorProps['onBlur']>;
+  onKeyDown: MutableRefObject<EditorProps['onKeyDown']>;
 }) {
   // TODO: Ensure tooltips render inside the dialog if we are in one.
   const parent =
@@ -233,30 +276,16 @@ function getExtensions({
     keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
     ...(singleLine ? [singleLineExt()] : []),
     ...(!singleLine ? [multiLineExtensions] : []),
-    ...(readOnly ? [EditorState.readOnly.of(true)] : []),
-    ...(singleLine
-      ? [
-          EditorView.domEventHandlers({
-            focus: (e, view) => {
-              // select all text on focus, like a regular input does
-              view.dispatch({ selection: { anchor: 0, head: view.state.doc.length } });
-            },
-            keydown: (e) => {
-              // Submit nearest form on enter if there is one
-              if (e.key === 'Enter') {
-                const el = e.currentTarget as HTMLElement;
-                const form = el.closest('form');
-                form?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
-              }
-            },
-          }),
-        ]
+    ...(readOnly
+      ? [EditorState.readOnly.of(true), EditorView.contentAttributes.of({ tabindex: '-1' })]
       : []),
 
     // Handle onFocus
+    // NOTE: These *must* be anonymous functions so the references update properly
     EditorView.domEventHandlers({
-      focus: onFocus.current,
-      blur: onBlur.current,
+      focus: () => onFocus.current?.(),
+      blur: () => onBlur.current?.(),
+      keydown: (e) => onKeyDown.current?.(e),
     }),
 
     // Handle onChange

src-web/components/core/Editor/extensions.ts

@@ -5,7 +5,6 @@ import {
   completionKeymap,
 } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { xml } from '@codemirror/lang-xml';
@@ -33,6 +32,7 @@ import {
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import { graphql, graphqlLanguageSupport } from 'cm6-graphql';
+import type { Environment, Workspace } from '../../../lib/models';
 import type { EditorProps } from './index';
 import { text } from './text/extension';
 import { twig } from './twig/extension';
@@ -86,7 +86,7 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
   'application/graphql': graphqlLanguageSupport(),
   'application/json': json(),
   'application/javascript': javascript(),
-  'text/html': html(),
+  'text/html': xml(), // HTML as xml because HTML is oddly slow
   'application/xml': xml(),
   'text/xml': xml(),
   url: url(),
@@ -95,32 +95,36 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
 export function getLanguageExtension({
   contentType,
   useTemplating = false,
+  environment,
+  workspace,
   autocomplete,
-}: Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete'>) {
-  if (contentType === 'application/graphql') {
+}: { environment: Environment | null; workspace: Workspace | null } & Pick<
+  EditorProps,
+  'contentType' | 'useTemplating' | 'autocomplete'
+>) {
+  const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
+  if (justContentType === 'application/graphql') {
     return graphql();
   }
-  const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
   const base = syntaxExtensions[justContentType] ?? text();
   if (!useTemplating) {
-    return base ? base : [];
+    return base;
   }
 
-  return twig(base, autocomplete);
+  return twig(base, environment, workspace, autocomplete);
 }
 
 export const baseExtensions = [
   highlightSpecialChars(),
   history(),
-  drawSelection(),
   dropCursor(),
+  drawSelection(),
   bracketMatching(),
   // TODO: Figure out how to debounce showing of autocomplete in a good way
   // debouncedAutocompletionDisplay({ millis: 1000 }),
   // autocompletion({ closeOnBlur: true, interactionDelay: 200, activateOnTyping: false }),
   autocompletion({
     // closeOnBlur: false,
-    interactionDelay: 200,
     compareCompletions: (a, b) => {
       // Don't sort completions at all, only on boost
       return (a.boost ?? 0) - (b.boost ?? 0);