ignore: cloud styles

cloud/app/src/routes/index.css

@@ -78,35 +78,78 @@
 
   [data-component="cta"] {
     border-top: 2px solid var(--color-border);
-    display: flex;
+    display: grid;
-    justify-content: flex-start;
+    grid-template-columns: auto 1fr auto;
     align-items: stretch;
 
-    @media (max-width: 50rem) {
+    & > div + div {
-      flex-direction: column;
+      border-left: 2px solid var(--color-border);
     }
 
-    [data-slot="left"] {
+    [data-slot="left"],
-      flex: 0 0 auto;
+    [data-slot="right"] {
       text-align: center;
       line-height: 1.4;
-      padding: var(--vertical-padding) var(--padding);
+      padding: var(--vertical-padding) 2rem;
       text-transform: uppercase;
 
-      @media (max-width: 50rem) {
+      @media (max-width: 30rem) {
         padding-bottom: calc(var(--vertical-padding) + 4px);
       }
+
+      @media (max-width: 30rem) {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+      }
     }
 
-    [data-slot="right"] {
+    [data-slot="center"] {
-      flex: 1;
       padding: var(--vertical-padding) 1rem;
-      border-left: 2px solid var(--color-border);
+    }
 
-      @media (max-width: 50rem) {
+    @media (max-width: 55rem) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto auto;
+
+      [data-slot="left"] {
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      [data-slot="right"] {
+        grid-column: 2;
+        grid-row: 1;
+      }
+
+      [data-slot="center"] {
+        grid-column: 1 / -1;
+        grid-row: 2;
         border-left: none;
         border-top: 2px solid var(--color-border);
       }
+
+      @media (max-width: 22rem) {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
+
+        [data-slot="left"] {
+          grid-column: 1;
+          grid-row: 1;
+        }
+
+        [data-slot="right"] {
+          grid-column: 1;
+          grid-row: 2;
+          border-top: 2px solid var(--color-border);
+          border-left: none;
+        }
+
+        [data-slot="center"] {
+          grid-column: 1;
+          grid-row: 3;
+        }
+      }
     }
 
     [data-slot="command"] {
@@ -125,12 +168,12 @@
         @media (max-width: 24rem) {
           font-size: 0.875rem;
         }
-        @media (max-width: 30rem) {
+        @media (max-width: 64rem) {
           [data-slot="protocol"] {
             display: none;
           }
         }
-        @media (max-width: 43rem) {
+        @media (max-width: 38rem) {
           text-align: center;
           span:first-child {
             display: block;
@@ -305,7 +348,8 @@
       min-height: 0;
       overflow: hidden;
 
-      & > div, figcaption {
+      & > div,
+      figcaption {
         display: flex;
         align-items: center;
       }
@@ -403,7 +447,7 @@
   }
 
   [data-component="copy-status"] {
-    @media (max-width: 43rem) {
+    @media (max-width: 38rem) {
       display: none;
     }
 

cloud/app/src/routes/index.tsx

@@ -7,7 +7,7 @@ import IMG_SPLASH from "../asset/lander/screenshot-splash.png"
 import IMG_VSCODE from "../asset/lander/screenshot-vscode.png"
 import IMG_GITHUB from "../asset/lander/screenshot-github.png"
 import { IconCopy, IconCheck } from "../component/icon"
-import { createAsync, query, redirect, RouteDefinition } from "@solidjs/router"
+import { A, createAsync, query, redirect } from "@solidjs/router"
 import { getActor, withActor } from "~/context/auth"
 import { Account } from "@opencode/cloud-core/account.js"
 
@@ -23,18 +23,18 @@ function CopyStatus() {
 const isLoggedIn = query(async () => {
   "use server"
   const actor = await getActor()
-  console.log(actor)
   if (actor.type === "account") {
     const workspaces = await withActor(() => Account.workspaces())
-    throw redirect("/" + workspaces[0].id)
+    return workspaces[0].id
+    // throw redirect("/" + workspaces[0].id)
   }
-  return
+  return false
 }, "isLoggedIn")
 
 
 
 export default function Home() {
-  createAsync(() => isLoggedIn(), {
+  const workspaceId = createAsync(() => isLoggedIn(), {
     deferStream: true,
   })
   onMount(() => {
@@ -71,7 +71,7 @@ export default function Home() {
           <div data-slot="left">
             <a href="/docs">Get Started</a>
           </div>
-          <div data-slot="right">
+          <div data-slot="center">
             <button data-copy data-slot="command">
               <span>
                 <span>curl -fsSL&nbsp;</span>
@@ -82,6 +82,12 @@ export default function Home() {
               <CopyStatus />
             </button>
           </div>
+          <div data-slot="right">
+            {workspaceId()
+              ? <A href={`/workspace/${workspaceId()}`}>Dashboard</A>
+              : <A href="/auth/authorize">Login</A>
+            }
+          </div>
         </section>
 
         <section data-component="features">