Intial work on New Chroma

app/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

app/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/api/net.ts

@@ -0,0 +1,87 @@
+import * as pb_1 from "google-protobuf";
+
+export type FetchRequest = NonNullable<Parameters<typeof $fetch<Blob>>[0]>;
+export type FetchOptions = NonNullable<Parameters<typeof $fetch<Blob>>[1]>;
+
+function createOptions(
+  baseURL: string,
+  token?: string,
+  options?: FetchOptions,
+): FetchOptions {
+  return {
+    ...options,
+    baseURL,
+    headers: {
+      "Content-Type": "application/protobuf",
+      ...(token && { Authorization: token }),
+      ...options?.headers,
+      Accept: "application/protobuf",
+    },
+  };
+}
+
+export default {
+  retrieve: async function <R extends pb_1.Message>(
+    ty: typeof pb_1.Message,
+    request: FetchRequest,
+    baseURL: string,
+    token?: string,
+    options?: FetchOptions,
+  ): Promise<R> {
+    const response = await $fetch<Blob>(
+      request,
+      createOptions(baseURL, token, options),
+    );
+
+    return ty.deserializeBinary(
+      new Uint8Array(await response.arrayBuffer()),
+    ) as R;
+  },
+  upload: async function <R extends pb_1.Message>(
+    ty: typeof pb_1.Message,
+    request: FetchRequest,
+    baseURL: string,
+    token?: string,
+    options?: FetchOptions,
+    onProgress?: (progress: number) => void,
+  ): Promise<R> {
+    return new Promise((resolve, reject) => {
+      const opts = createOptions(baseURL, token, options);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open(opts.method || "post", `${opts.baseURL}/${request}`, true);
+      xhr.responseType = "arraybuffer";
+
+      for (const [name, value] of Object.entries(opts.headers!)) {
+        xhr.setRequestHeader(name, value);
+      }
+
+      xhr.upload.onprogress = function (event) {
+        if (!event.lengthComputable || !onProgress) return;
+        onProgress((event.loaded / event.total) * 100);
+      };
+
+      xhr.onload = function () {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve(ty.deserializeBinary(new Uint8Array(xhr.response)) as R);
+        } else {
+          reject(new Error(`Upload failed with status: ${xhr.status}`));
+        }
+      };
+
+      xhr.onerror = function () {
+        reject(new Error("Upload failed due to a network error"));
+      };
+
+      xhr.send(opts.body as any);
+    });
+  },
+  send: async function (
+    request: FetchRequest,
+    baseURL: string,
+    token?: string,
+    options?: FetchOptions,
+  ): Promise<Response> {
+    return await $fetch(request, createOptions(baseURL, token, options));
+  },
+};

app/app.vue

@@ -0,0 +1,20 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage :keepalive="{ include: 'index' }" />
+  </NuxtLayout>
+</template>
+
+<style lang="postcss">
+html,
+body {
+  @apply h-full;
+}
+
+body {
+  @apply bg-gray-100 dark:bg-gray-900 dark:text-white;
+}
+
+#__nuxt {
+  @apply min-h-full flex flex-col justify-stretch;
+}
+</style>

app/assets/css/style.css

@@ -0,0 +1,134 @@
+/* Change the focus style of every element to a blue border */
+:focus,
+:focus-visible {
+    @apply outline outline-4 outline-blue-300 dark:outline-blue-900;
+}
+
+/* Button styles */
+.button {
+    @apply px-5 py-2.5;
+    @apply inline-flex items-center justify-center  gap-x-2;
+    @apply rounded-lg;
+    @apply font-medium text-sm text-gray-900 dark:text-white;
+    @apply bg-gray-200 dark:bg-gray-800;
+
+    &-sm {
+        @apply py-2;
+        @apply rounded;
+    }
+
+    &:not(:disabled):hover {
+        @apply bg-gray-300 dark:bg-gray-700;
+    }
+
+    &:disabled {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+
+    &-primary {
+        @apply text-white bg-blue-700 dark:bg-blue-600;
+
+        &:not(:disabled):hover,
+        &:focus,
+        &:focus-visible {
+            @apply bg-blue-800 dark:bg-blue-700;
+        }
+
+        &:disabled {
+            @apply bg-blue-200 dark:bg-blue-900;
+            @apply text-gray-50 dark:text-gray-500;
+        }
+    }
+
+    &-secondary {
+        @apply border border-gray-300 dark:border-gray-600;
+        @apply bg-white dark:bg-gray-900;
+        @apply dark:text-gray-300;
+
+        &:not(:disabled):hover {
+            @apply bg-gray-200 dark:bg-gray-800;
+            @apply dark:text-white;
+        }
+
+        &:focus,
+        &:focus-visible {
+            @apply border-blue-300 dark:border-blue-700;
+        }
+    }
+
+    &-error {
+        @apply text-white bg-red-500 dark:bg-red-700;
+
+        &:not(:disabled):hover,
+        &:focus,
+        &:focus-visible {
+            @apply bg-red-800 dark:bg-red-600;
+        }
+
+        &:disabled {
+            @apply bg-red-200 dark:bg-red-900;
+            @apply text-gray-50 dark:text-gray-400;
+        }
+    }
+}
+
+/* Form styles */
+.form-group {
+    @apply block mb-3;
+}
+
+.form-label {
+    @apply block w-full mb-2;
+}
+
+/* Input styles */
+.form-input {
+    .form-group & {
+        @apply mb-2;
+    }
+
+    @apply block w-full p-2;
+    @apply bg-white dark:bg-gray-700;
+    @apply rounded;
+    @apply border border-gray-300 dark:border-gray-600;
+    @apply text-sm text-gray-900 dark:text-white dark:placeholder-gray-400;
+
+    &:not(:disabled):hover {
+        @apply border-gray-400 dark:border-gray-500;
+    }
+
+    &:focus,
+    &:focus-visible {
+        @apply border-blue-300 dark:border-blue-700;
+    }
+
+    &:disabled {
+        @apply text-gray-400 dark:text-gray-500;
+        @apply bg-gray-50 dark:bg-gray-800;
+        @apply border-gray-200 dark:border-gray-800;
+    }
+}
+
+/* Loading skeleton styles */
+.skeleton {
+    @apply animate-pulse;
+
+    & .skeleton-block,
+    & .skeleton-text::before {
+        @apply block;
+        @apply rounded;
+        @apply !bg-gray-200 dark:!bg-gray-700;
+    }
+
+    & .skeleton-text {
+        @apply !select-none !text-transparent;
+        @apply relative;
+        @apply inline-block;
+
+        &::before {
+            @apply content-[''];
+            @apply absolute;
+            @apply top-1 bottom-1 left-0 right-0;
+        }
+    }
+}