) => (
+
+);
diff --git a/pkg/grid/src/favicon.svg b/pkg/grid/src/favicon.svg
new file mode 100644
index 000000000..de4aeddc1
--- /dev/null
+++ b/pkg/grid/src/favicon.svg
@@ -0,0 +1,15 @@
+
diff --git a/pkg/grid/src/logic/useTreaty.ts b/pkg/grid/src/logic/useTreaty.ts
new file mode 100644
index 000000000..69f2428bf
--- /dev/null
+++ b/pkg/grid/src/logic/useTreaty.ts
@@ -0,0 +1,28 @@
+import clipboardCopy from 'clipboard-copy';
+import { useCallback } from 'react';
+import { useMutation, useQuery } from 'react-query';
+import { useParams } from 'react-router-dom';
+import { installDocket, requestTreaty, treatyKey } from '../state/docket';
+
+export function useTreaty() {
+ const { ship, desk } = useParams<{ ship: string; desk: string }>();
+ const { data: treaty } = useQuery(treatyKey([ship, desk]), () => requestTreaty(ship, desk));
+ const { mutate, ...installStatus } = useMutation(() => installDocket(ship, desk));
+
+ const copyApp = useCallback(async () => {
+ clipboardCopy(`${ship}/${desk}`);
+ }, [ship, desk]);
+
+ const installApp = useCallback(() => {
+ mutate();
+ }, []);
+
+ return {
+ ship,
+ desk,
+ treaty,
+ installStatus,
+ installApp,
+ copyApp
+ };
+}
diff --git a/pkg/grid/src/logic/useWaitForProps.ts b/pkg/grid/src/logic/useWaitForProps.ts
new file mode 100644
index 000000000..278bb57b5
--- /dev/null
+++ b/pkg/grid/src/logic/useWaitForProps.ts
@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export function useWaitForProps(props: P, timeout = 0) {
+ const [mainResolve, setMainResolve] = useState<() => void>(() => () => {});
+ const [ready, setReady] = useState<(p: P) => boolean | undefined>();
+
+ useEffect(() => {
+ if (typeof ready === 'function' && ready(props)) {
+ mainResolve();
+ }
+ }, [props, ready, mainResolve]);
+
+ /**
+ * Waits until some predicate is true
+ *
+ * @param r - Predicate to wait for
+ * @returns A promise that resolves when `r` returns true, or rejects if the
+ * waiting times out
+ *
+ */
+ const waiter = useCallback(
+ (r: (props: P) => boolean) => {
+ setReady(() => r);
+ return new Promise((resolve, reject) => {
+ setMainResolve(() => resolve);
+ if (timeout > 0) {
+ setTimeout(() => {
+ reject(new Error('Timed out'));
+ }, timeout);
+ }
+ });
+ },
+ [setMainResolve, setReady, timeout]
+ );
+
+ return waiter;
+}
diff --git a/pkg/grid/src/main.tsx b/pkg/grid/src/main.tsx
new file mode 100644
index 000000000..ed91dc168
--- /dev/null
+++ b/pkg/grid/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './app';
+import './styles/index.css';
+
+ReactDOM.render(
+
+
+ ,
+ document.getElementById('app')
+);
diff --git a/pkg/grid/src/nav/Help.tsx b/pkg/grid/src/nav/Help.tsx
new file mode 100644
index 000000000..f340e7656
--- /dev/null
+++ b/pkg/grid/src/nav/Help.tsx
@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import { useNavStore } from './Nav';
+
+export const Help = () => {
+ const select = useNavStore((state) => state.select);
+
+ useEffect(() => {
+ select('Help and Support');
+ }, []);
+
+ return (
+
+
Recent Apps
+
+
+
Recent Developers
+
+
+
Recent Apps
+
+
+
Recent Developers
+
+
+ {!copied && fjuhl}
+ {copied && 'copied!'}
+
+
+
+
+
+
+ {showOverlay && open && (
+
+ )}
+
+ );
+};
diff --git a/pkg/grid/src/nav/SystemPreferences.tsx b/pkg/grid/src/nav/SystemPreferences.tsx
new file mode 100644
index 000000000..2eaa65618
--- /dev/null
+++ b/pkg/grid/src/nav/SystemPreferences.tsx
@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import { useNavStore } from './Nav';
+
+export const SystemPreferences = () => {
+ const select = useNavStore((state) => state.select);
+
+ useEffect(() => {
+ select('System Preferences');
+ }, []);
+
+ return (
+
+
Recent Apps
+
+
+
Recent Developers
+
+
+ Loading...
+
+ );
+ }
+
+ return (
+
+
+
+ {installed && (
+
+ Open App
+
+ )}
+ {!installed && (
+
+ {installStatus.isIdle && 'Get App'}
+ {installStatus.isLoading && (
+ <>
+
+ Installing...
+
+ )}
+
+ )}
+
+ Copy App Link
+
+
+
+
+
+
+
+ Software developed by
+
+
+ {count} result{count === 1 ? '' : 's'}
+
+
+ {data && (
+
+ {data.map((app) => (
+ -
+ preloadApp(app)}
+ >
+
+ {app.img && (
+
+ )}
+
+
{app.title}
+ {app.info &&
{app.info}
}
+
+ ))}
+
+ )}
+
That's it!
+
+
Recent Apps
+
+
+
Recent Developers
+
+
+
+
Searching Software Providers
+
+ {count} result{count === 1 ? '' : 's'}
+
+
+ {data && (
+
+ )}
+
That's it!
+
+
+
+
+ {isLoading && Loading...}
+ {isSuccess && (
+
+ {charges &&
+ map(charges, (charge, desk) => )}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+ {!active && Suspended}
+
+ {img && (
+
+ )}
+
- { e.preventDefault(); setTimeout(() => setOpen(false), 0) }}>App Info
+ */}
+ - {
+ e.preventDefault();
+ setTimeout(() => setOpen(false), 0);
+ }}
+ >
+ App Info
+
+
+
+
+ {active && (
+ - {
+ e.preventDefault();
+ setTimeout(() => setOpen(false), 0);
+ }}
+ >
+ Suspend App
+
+ )}
+ {!active && - mutate()}>Resume App
}
+ - {
+ e.preventDefault();
+ setTimeout(() => setOpen(false), 0);
+ }}
+ >
+ Remove App
+
+
+
+
+
+ );
+};
diff --git a/pkg/grid/src/vite-env.d.ts b/pkg/grid/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/pkg/grid/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/pkg/grid/tailwind.config.js b/pkg/grid/tailwind.config.js
new file mode 100644
index 000000000..65122483b
--- /dev/null
+++ b/pkg/grid/tailwind.config.js
@@ -0,0 +1,74 @@
+const colors = require('tailwindcss/colors');
+
+module.exports = {
+ mode: 'jit',
+ purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ darkMode: false, // or 'media' or 'class'
+ theme: {
+ extend: {
+ colors: {
+ transparent: "transparent",
+ white: "#FFFFFF",
+ black: "#000000",
+ gray: {
+ ...colors.trueGray,
+ 100: "#F2F2F2",
+ 200: "#CCCCCC",
+ 300: "#B3B3B3",
+ 400: "#808080",
+ 500: "#666666",
+ },
+ blue: {
+ 100: "#E9F5FF",
+ 200: "#D3EBFF",
+ 300: "#BCE2FF",
+ 400: "#219DFF",
+ },
+ red: {
+ 100: "#FFF6F5",
+ 200: "#FFC6C3",
+ 400: "#FF4136",
+ },
+ green: {
+ 100: "#E6F5F0",
+ 200: "#B3E2D1",
+ 400: "#009F65",
+ },
+ yellow: {
+ 100: "#FFF9E6",
+ 200: "#FFEEB3",
+ 300: "#FFDD66",
+ 400: "#FFC700",
+ },
+ },
+ fontFamily: {
+ sans: [
+ '"Inter"',
+ '"Inter UI"',
+ "-apple-system",
+ "BlinkMacSystemFont",
+ '"San Francisco"',
+ '"Helvetica Neue"',
+ "Arial",
+ "sans-serif",
+ ],
+ mono: [
+ '"Source Code Pro"',
+ '"Roboto mono"',
+ '"Courier New"',
+ "monospace",
+ ],
+ },
+ minWidth: theme => theme('spacing'),
+ },
+ },
+ variants: {
+ extend: {
+ opacity: ['hover-none']
+ },
+ },
+ plugins: [
+ require('@tailwindcss/aspect-ratio'),
+ require('tailwindcss-touch')()
+ ],
+}
diff --git a/pkg/grid/tsconfig.json b/pkg/grid/tsconfig.json
new file mode 100644
index 000000000..013e6c54f
--- /dev/null
+++ b/pkg/grid/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": false,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react"
+ },
+ "include": ["./src"]
+}
diff --git a/pkg/grid/vite.config.ts b/pkg/grid/vite.config.ts
new file mode 100644
index 000000000..c151b2398
--- /dev/null
+++ b/pkg/grid/vite.config.ts
@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import analyze from 'rollup-plugin-analyzer';
+import { visualizer } from 'rollup-plugin-visualizer';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+ base: mode === 'mock' ? undefined : '/apps/grid/',
+ server:
+ mode === 'mock'
+ ? undefined
+ : {
+ proxy: {
+ '^((?!/apps/grid).)*$': {
+ target: 'http://localhost:8080'
+ }
+ }
+ },
+ build:
+ mode !== 'profile'
+ ? undefined
+ : {
+ rollupOptions: {
+ plugins: [
+ analyze({
+ limit: 20
+ }),
+ visualizer()
+ ]
+ }
+ },
+ plugins: [reactRefresh()]
+}));