Apply Proxy Setting

.oxlintrc.json

@@ -50,6 +50,7 @@
       "error",
       { "allowSeparatedGroups": true, "ignoreDeclarationSort": true }
     ],
+    "oxc/no-rest-spread-properties": "off",
     "import/consistent-type-specifier-style": "off",
     "import/exports-last": "off",
     "import/group-exports": "off",

packages/graphql/src/index.ts

@@ -101,8 +101,8 @@ const fillOptions = (opt: YogaServerOptions): Required<YogaServerOptions> => ({
     opt?.origins ??
     new Set([
       "https://drfed.org",
-      "http://localhost:5173",
-      "http://0.0.0.0:5173",
+      "http://localhost:3000",
+      "http://0.0.0.0:3000",
     ]),
 });
 

packages/web/.oxlintrc.json

@@ -30,6 +30,7 @@
     "typescript/strict-void-return": "off",
     "typescript/no-non-null-assertion": "off",
     "unicorn/filename-case": "off",
-    "unicorn/prefer-query-selector": "off"
+    "unicorn/prefer-query-selector": "off",
+    "promise/avoid-new": "off"
   }
 }

packages/web/env.d.ts

@@ -1,7 +1,3 @@
-interface ImportMetaEnv {
-  readonly VITE_DRFED_URL: string;
-}
-
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }

packages/web/package.json

@@ -47,15 +47,16 @@
   },
   "dependencies": {
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.0",
-    "@solidjs/start": "2.0.0-alpha.2",
-    "@solidjs/vite-plugin-nitro-2": "^0.1.0",
+    "@solidjs/router": "^1.0.0",
+    "@solidjs/start": "2.0.0-rc.10",
+    "nitro": "3.0.260610-beta",
     "relay-runtime": "^21.0.1",
     "solid-js": "^1.9.5",
     "solid-relay": "1.0.0-beta.27",
-    "vite": "^7.0.0"
+    "vite": "^8.2.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^10.5.0",
     "@types/relay-runtime": "^20.1.1",
     "eslint-plugin-solid": "^0.14.5",
     "relay-compiler": "^21.0.1",

packages/web/src/RelayEnviroment.ts → packages/web/src/RelayEnvironment.ts

@@ -35,7 +35,13 @@ const fetchFn: FetchFunction = async (params, variables) => {
   if (accessToken !== undefined) {
     headers.Authorization = `Bearer ${accessToken}`;
   }
-  const response = await fetch(import.meta.env.VITE_DRFED_URL, {
+
+  const url = new URL(
+    "/graphql",
+    event?.request.url ?? globalThis.location.href,
+  );
+
+  const response = await fetch(url, {
     method: "POST",
     headers,
     body: JSON.stringify({

packages/web/src/app.css

@@ -121,8 +121,7 @@ input {
   border-color: var(--accent-soft);
 }
 
-.app-header a:focus-visible,
-.button:focus-visible {
+.app-header a:focus-visible {
   outline: 3px solid var(--accent-soft);
   outline-offset: 0.2rem;
 }
@@ -134,11 +133,11 @@ input {
   padding: clamp(2rem, 5vw, 4rem) var(--gutter);
 }
 
-.app-content > main:not(.auth-page) {
+.app-content > main:not(.form-page) {
   width: 100%;
 }
 
-.app-content > main:not(.auth-page) :is(h1, h2, p) {
+.app-content > main:not(.form-page) :is(h1, h2, p) {
   margin-top: 0;
 }
 
@@ -158,7 +157,7 @@ input {
   line-height: var(--leading-body);
 }
 
-.auth-page {
+.form-page {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -172,7 +171,7 @@ input {
   box-shadow: var(--shadow-sm);
 }
 
-.auth-panel {
+.form-panel {
   max-width: 28rem;
   padding: clamp(1.5rem, 4vw, 2rem);
   width: 100%;
@@ -194,16 +193,35 @@ input {
   margin: 0;
 }
 
-.auth-panel form {
+.form-panel form {
   display: grid;
   gap: 1rem;
 }
 
 .field {
   display: grid;
+  gap: 0.5rem;
+}
+
+.field-heading {
+  align-items: baseline;
+  display: flex;
   font-size: 0.9rem;
   font-weight: 650;
-  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.field-status {
+  color: var(--ink-faint);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.field-status.required {
+  color: var(--accent-strong);
 }
 
 .field input {
@@ -228,6 +246,20 @@ input {
   outline: none;
 }
 
+.field input:read-only {
+  border-style: dashed;
+  color: var(--ink-soft);
+  cursor: default;
+  font-family: var(--font-mono);
+}
+
+.field-hint {
+  color: var(--ink-faint);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  margin: 0;
+}
+
 .button {
   align-items: center;
   border: 0;
@@ -240,6 +272,11 @@ input {
   padding: 0.75rem 1.1rem;
 }
 
+.button:focus-visible {
+  outline: 3px solid var(--accent-soft);
+  outline-offset: 0.2rem;
+}
+
 .button.primary {
   background: var(--accent);
   color: var(--on-accent);
@@ -270,10 +307,6 @@ input {
   border-left: 3px solid var(--danger);
 }
 
-.notice.success {
-  border-left: 3px solid var(--accent);
-}
-
 @media (max-width: 600px) {
   .app-header-inner {
     padding: 0 1rem;
@@ -301,7 +334,7 @@ input {
     padding: 1.5rem 1rem 3rem;
   }
 
-  .auth-page {
+  .form-page {
     align-items: flex-start;
     min-height: auto;
   }

packages/web/src/app.tsx

@@ -23,7 +23,7 @@ import "./drfed.css";
 import "./app.css";
 import { RelayEnvironmentProvider } from "solid-relay";
 
-import { createRelayEnvironment } from "./RelayEnviroment";
+import { createRelayEnvironment } from "./RelayEnvironment";
 
 export default function App() {
   const environment = createRelayEnvironment();