Start web app's initial route

bun.lock

@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "inline",
+      "dependencies": {
+        "zustand": "^5.0.9",
+      },
       "devDependencies": {
         "oxlint": "^0.16.0",
       },
@@ -1975,6 +1978,8 @@
 
     "zod": ["[email protected]", "", {}, "sha512-Od2bdMosahjSrSgJtakrwjMDb1zM1A3VIHCPGveZt/3/wlrTWBya2lmEh2OYe4OIu8mPTmmr0gnLHIWQXdtWBg=="],
 
+    "zustand": ["[email protected]", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg=="],
+
     "zwitch": ["[email protected]", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "@anthropic-ai/sdk/@types/node": ["@types/[email protected]", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-yvR7Q9LdPz2vGpmpJX5LolrgRdWvB67MJKDPSgIIzpFbaf9a1j/f5DnLp5VDyHGMR0QZHlTr1afsD87QCXFHKw=="],

desktop/bun.lock

@@ -4,7 +4,7 @@
     "": {
       "name": "@inline-chat/desktop",
       "dependencies": {
-        "electron": "^38.2.2",
+        "electron": "^39.2.6",
       },
     },
   },
@@ -49,7 +49,7 @@
 
     "detect-node": ["[email protected]", "", {}, "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="],
 
-    "electron": ["electron@38.2.2", "", { "dependencies": { "@electron/get": "^2.0.0", "@types/node": "^22.7.7", "extract-zip": "^2.0.1" }, "bin": { "electron": "cli.js" } }, "sha512-OXSaVNXDlonXDjMRsFNQo1j5tzTKwKXh5/m46IjAFccBcZJZMISI+EjSI07oexIuhvKM8AZLuFuihVn4YjWWrA=="],
+    "electron": ["electron@39.2.6", "", { "dependencies": { "@electron/get": "^2.0.0", "@types/node": "^22.7.7", "extract-zip": "^2.0.1" }, "bin": { "electron": "cli.js" } }, "sha512-dHBgTodWBZd+tL1Dt0PSh/CFLHeDkFCTKCTXu1dgPhlE9Z3k2zzlBQ9B2oW55CFsKanBDHiUomHJNw0XaSdQpA=="],
 
     "end-of-stream": ["[email protected]", "", { "dependencies": { "once": "^1.4.0" } }, "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg=="],
 

desktop/package.json

@@ -7,7 +7,7 @@
     "dev": "bun scripts/dev.ts"
   },
   "dependencies": {
-    "electron": "^38.2.2"
+    "electron": "^39.2.6"
   },
   "devDependencies": {}
 }

desktop/src/index.ts

@@ -6,8 +6,8 @@ app.whenReady().then(() => {
     height: 600,
     transparent: true,
     trafficLightPosition: {
-      x: 18,
-      y: 18,
+      x: 14,
+      y: 14,
     },
 
     frame: true,
@@ -17,5 +17,5 @@ app.whenReady().then(() => {
     titleBarStyle: "hidden",
     vibrancy: "popover",
   });
-  mainWindow.loadURL("http://localhost:8001");
+  mainWindow.loadURL("http://localhost:8001/app");
 });

package.json

@@ -17,5 +17,8 @@
   },
   "devDependencies": {
     "oxlint": "^0.16.0"
+  },
+  "dependencies": {
+    "zustand": "^5.0.9"
   }
 }

server/package.json

@@ -10,7 +10,6 @@
     "test": "bun test",
     "typecheck": "tsc --build",
     "db:migrate": "bun scripts/migrate.ts",
-    "eval:setup": "bun scripts/setup-willdo-eval-env.ts",
     "db:dangerously-reset-db": "bun scripts/reset-db.ts",
     "db:generate": "drizzle-kit generate --schema src/db/schema/index.ts --out drizzle --dialect postgresql --name",
     "db:push": "drizzle-kit push --schema src/db/schema/index.ts --dialect postgresql",

web/src/components/largeButton/LargeButton.tsx

@@ -0,0 +1,40 @@
+import * as stylex from "@stylexjs/stylex"
+import { colors } from "~/theme/tokens.stylex"
+import { FileRouteTypes } from "~/routeTree.gen"
+import { Link } from "@tanstack/react-router"
+
+type LargeButtonProps =
+  | ({ to: React.ComponentProps<typeof Link>["to"] } & Omit<React.ComponentProps<typeof Link>, "to">) // link variant
+  | React.ButtonHTMLAttributes<HTMLButtonElement> // button variant
+
+export const LargeButton = (props: LargeButtonProps) => {
+  if ("to" in props) {
+    return <Link {...props} {...stylex.props(styles.largeButton)} />
+  }
+
+  return <button {...stylex.props(styles.largeButton)} {...props} />
+}
+
+const styles = stylex.create({
+  largeButton: {
+    backgroundColor: colors.accent,
+    color: colors.primaryText,
+    height: 40,
+    lineHeight: "40px",
+    borderRadius: 14,
+    paddingLeft: 32,
+    paddingRight: 32,
+    fontSize: 18,
+    fontWeight: 500,
+    cursor: "pointer",
+
+    ":hover": {
+      backgroundColor: colors.accent,
+      opacity: 0.9,
+    },
+    ":active": {
+      backgroundColor: colors.accent,
+      opacity: 1,
+    },
+  },
+})

web/src/components/largeTextField/LargeTextField.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import * as stylex from "@stylexjs/stylex"
+import { colors } from "~/theme/tokens.stylex"
+
+type LargeTextFieldProps = React.InputHTMLAttributes<HTMLInputElement>
+
+export const LargeTextField = React.forwardRef<HTMLInputElement, LargeTextFieldProps>(
+  ({ type = "text", ...props }, ref) => {
+    return <input ref={ref} type={type} {...stylex.props(styles.input)} {...props} />
+  },
+)
+
+LargeTextField.displayName = "LargeTextField"
+
+const styles = stylex.create({
+  input: {
+    width: "100%",
+    maxWidth: 420,
+    height: 44,
+    borderRadius: 12,
+    border: `1px solid ${colors.lineColor}`,
+    paddingLeft: 14,
+    paddingRight: 14,
+    fontSize: 16,
+    color: colors.primaryText,
+    backgroundColor: colors.primaryBg,
+    transitionProperty: "border-color, box-shadow, transform",
+    transitionDuration: "120ms",
+
+    ":focus-visible": {
+      outline: "none",
+      borderColor: colors.accent,
+      boxShadow: `0 0 0 3px rgba(0, 0, 0, 0.06)`,
+      transform: "translateY(-1px)",
+    },
+  },
+})

web/src/components/primitives/primitives.tsx

@@ -0,0 +1,3 @@
+export const Spacer = ({ h, w }: { h?: number; w?: number }) => {
+  return <div style={{ height: h ? `${h}px` : undefined, width: w ? `${w}px` : undefined }} />
+}

web/src/landing/index.tsx

@@ -5,7 +5,7 @@ import * as stylex from "@stylexjs/stylex"
 import { useEffect, useRef, useState } from "react"
 import { AnimatePresence, motion } from "motion/react"
 
-import "./styles/style.css"
+//import "./styles/style.css"
 
 const addTransitionEffect = () => {
   const style = document.createElement("style")

web/src/routes/__root.tsx

@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
-import stylesheet from "../styles/app.css?url"
+import stylesheet from "../styles/tailwind.css?url"
 import stylesheet2 from "../styles/stylex.css?url"
 import { type ReactNode } from "react"
 import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router"

web/src/routes/app/index.tsx

@@ -0,0 +1,29 @@
+import { createFileRoute, Link, Navigate } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { Fonts } from "~/theme/fonts"
+import { colors } from "~/theme/tokens.stylex"
+import { LargeButton } from "~/components/largeButton/LargeButton"
+import { useState } from "react"
+import { useAuthStore, useIsLoggedIn } from "~/store/auth"
+
+export const Route = createFileRoute("/app/")({
+  component: App,
+
+  head: () => ({
+    meta: [
+      {
+        title: "Inline",
+      },
+    ],
+  }),
+})
+
+function App() {
+  const isLoggedIn = useIsLoggedIn()
+
+  if (!isLoggedIn) {
+    return <Navigate to="/app/login/welcome" />
+  }
+
+  return <></>
+}

web/src/routes/app/login/email.tsx

@@ -0,0 +1,63 @@
+import { createFileRoute } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { LargeButton } from "~/components/largeButton/LargeButton"
+import { LargeTextField } from "~/components/largeTextField/LargeTextField"
+
+export const Route = createFileRoute("/app/login/email")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <>
+      <div {...stylex.props(styles.subheading)}>Continue via Email</div>
+
+      <LargeTextField placeholder="Enter your email" />
+
+      <LargeButton to="/app/login/code">Continue</LargeButton>
+    </>
+  )
+}
+
+const styles = stylex.create({
+  topBar: {
+    appRegion: "drag",
+    height: 42,
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+
+  content: {
+    height: "100%",
+
+    display: "flex",
+
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  logo: {
+    margin: "0 auto",
+    textAlign: "center",
+    width: 120,
+    filter: "invert(1)",
+  },
+
+  subheading: {
+    fontSize: 24,
+    maxWidth: 500,
+    margin: "0 auto",
+
+    opacity: 0.8,
+    textAlign: "center",
+    fontWeight: 500,
+
+    marginTop: 38,
+    marginBottom: 38,
+  },
+})

web/src/routes/app/login/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Link, Navigate, Outlet, useNavigate, useRouter } from "@tanstack/react-router"
+
+export const Route = createFileRoute("/app/login/")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <Navigate to="/app/login/welcome" />
+}

web/src/routes/app/login/route.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute, Link, Outlet, useNavigate, useRouter } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { useIsLoggedIn } from "~/store/auth"
+
+export const Route = createFileRoute("/app/login")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <>
+      <div {...stylex.props(styles.content)}>
+        <Outlet />
+      </div>
+    </>
+  )
+}
+
+const styles = stylex.create({
+  topBar: {
+    appRegion: "drag",
+    height: 42,
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+
+  content: {
+    height: "100%",
+
+    display: "flex",
+
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+})

web/src/routes/app/login/welcome.tsx

@@ -0,0 +1,66 @@
+import { createFileRoute } from "@tanstack/react-router"
+import * as stylex from "@stylexjs/stylex"
+import { LargeButton } from "~/components/largeButton/LargeButton"
+
+export const Route = createFileRoute("/app/login/welcome")({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <>
+      <div {...stylex.props(styles.logo)}>
+        <img src="/logotype-white.svg" alt="Inline" width="100%" />
+      </div>
+
+      <div {...stylex.props(styles.subheading)}>
+        Welcome to Inline — the next-gen work chat app designed for high-performance teams.
+      </div>
+
+      <LargeButton to="/app/login/email">Continue</LargeButton>
+    </>
+  )
+}
+
+const styles = stylex.create({
+  topBar: {
+    appRegion: "drag",
+    height: 42,
+    width: "100%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+
+  content: {
+    height: "100%",
+
+    display: "flex",
+
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+
+  logo: {
+    margin: "0 auto",
+    textAlign: "center",
+    width: 120,
+    filter: "invert(1)",
+  },
+
+  subheading: {
+    fontSize: 24,
+    maxWidth: 500,
+    margin: "0 auto",
+
+    opacity: 0.8,
+    textAlign: "center",
+    fontWeight: 500,
+
+    marginTop: 38,
+    marginBottom: 38,
+  },
+})