wip(desktop): progress

packages/desktop/src/pages/home.tsx

@@ -1,21 +1,63 @@
 import { useGlobalSync } from "@/context/global-sync"
-import { base64Encode } from "@opencode-ai/util/encode"
-import { For } from "solid-js"
-import { A } from "@solidjs/router"
+import { For, Match, Switch } from "solid-js"
 import { Button } from "@opencode-ai/ui/button"
-import { getFilename } from "@opencode-ai/util/path"
+import { Logo } from "@opencode-ai/ui/logo"
+import { useLayout } from "@/context/layout"
+import { useNavigate } from "@solidjs/router"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { Icon } from "@opencode-ai/ui/icon"
 
 export default function Home() {
+  const navigate = useNavigate()
   const sync = useGlobalSync()
+  const layout = useLayout()
+
+  function openProject(directory: string) {
+    layout.projects.open(directory)
+    navigate(`/${base64Encode(directory)}`)
+  }
+
   return (
-    <div class="flex flex-col gap-3">
-      <For each={sync.data.projects}>
-        {(project) => (
-          <Button as={A} href={base64Encode(project.worktree)}>
-            {getFilename(project.worktree)}
-          </Button>
-        )}
-      </For>
+    <div class="mx-auto mt-55">
+      <Logo class="w-xl opacity-12" />
+      <Switch>
+        <Match when={sync.data.projects.length > 0}>
+          <div class="mt-20 w-full flex flex-col gap-4">
+            <div class="flex gap-2 items-center justify-between pl-3">
+              <div class="text-14-medium text-text-strong">Recent projects</div>
+              <Button icon="folder-add-left" size="normal" class="pl-2 pr-3">
+                Open project
+              </Button>
+            </div>
+            <ol class="flex flex-col gap-2">
+              <For each={sync.data.projects.slice(0, 5)}>
+                {(project) => (
+                  <Button
+                    size="large"
+                    variant="ghost"
+                    class="text-14-mono text-left justify-between px-3"
+                    onClick={() => openProject(project.worktree)}
+                  >
+                    {project.worktree}
+                    <div class="text-14-regular text-text-weak">10m ago</div>
+                  </Button>
+                )}
+              </For>
+            </ol>
+          </div>
+        </Match>
+        <Match when={true}>
+          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
+            <Icon name="folder-add-left" size="large" />
+            <div class="flex flex-col gap-1 items-center justify-center">
+              <div class="text-14-medium text-text-strong">No recent projects</div>
+              <div class="text-12-regular text-text-weak">Get started by opening a local project</div>
+            </div>
+            <div />
+            <Button class="px-3">Open project</Button>
+          </div>
+        </Match>
+      </Switch>
     </div>
   )
 }