Prettier and start of env editor

.husky/.gitignore

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

.husky/pre-commit

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

package.json

@@ -13,7 +13,8 @@
     "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",
@@ -72,6 +73,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",
@@ -81,5 +84,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"
   }
 }

src-web/components/WorkspaceHeader.tsx

@@ -9,12 +9,16 @@ import { SidebarActions } from './SidebarActions';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
 import { Button } from './core/Button';
 import { useDialog } from './DialogContext';
+import { useEnvironments } from '../hooks/useEnvironments';
+import type { Environment } from '../lib/models';
+import { Editor } from './core/Editor';
 
 interface Props {
   className?: string;
 }
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
+  const environments = useEnvironments();
   const activeRequest = useActiveRequest();
   const dialog = useDialog();
 
@@ -29,8 +33,13 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <WorkspaceActionsDropdown className="pointer-events-auto" />
         <Button onClick={() => {
           dialog.show({
-            title: 'Testing',
-            render: () => <div>These are THE environments</div>
+            title: 'Environments',
+            render: () => <EnvironmentList
+              environments={environments}
+              onChange={data => {
+                console.log('data', data);
+              }}
+            />
           })
         }}>
           Environments
@@ -54,3 +63,27 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
     </HStack>
   );
 });
+
+interface EnvironmentListProps {
+  environments: Environment[];
+  onChange: (data: string) => void;
+}
+
+const EnvironmentList = function({ environments, onChange }: EnvironmentListProps) {
+  // For some reason useActiveWorkspaceId() doesn't work in modals (?)
+  return <ul className="inline">
+    {environments.map(e => (
+      <li key={e.id}>
+        <div>
+          {e.name}
+        </div>
+        <Editor
+          contentType="application/json"
+          className='w-full h-[400px] !bg-gray-50'
+          defaultValue={JSON.stringify(e.data, null, 2)}
+          onChange={onChange}
+        />
+      </li>
+    ))}
+  </ul>
+};