Feat: add simple products landing page and simple table to workflow m…

…etrics

src/components/home/Authed.svelte

@@ -1,33 +1,34 @@
 <script lang="ts">
-  import { goto } from '$app/navigation'
-
-  import { sessionStore } from '../../stores'
+  import { projectsStore } from '$src/stores'
 </script>
 
-<div
-  class="min-h-[calc(100vh-128px)] md:min-h-[calc(100vh-160px)] pt-8 md:pt-16 flex flex-col items-start max-w-[690px] m-auto gap-10 pb-5 text-sm"
->
-  <h1 class="text-xl">Welcome, {$sessionStore.username.trimmed}!</h1>
+<h1 class="text-2xl mb-4">Projects</h1>
 
-  <div class="flex flex-col items-start justify-center gap-5">
-    <h2 class="text-lg">Photo Gallery Demo</h2>
-    <p>
-      The ODD SDK makes it easy to implement private, encrypted, user-owned
-      storage in your app. See it in action with our photo gallery demo.
-    </p>
-    <a class="btn btn-primary" href="/gallery">Try the Photo Gallery Demo</a>
-  </div>
+<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
+  {#each $projectsStore?.projects as project}
+    <div
+      class="flex flex-col border border-neutral-700 rounded-lg bg-white text-neutral-900 transition-colors hover:bg-orange-50"
+    >
+      <a href={`/projects/${project?.id}`}>
+        <div class="px-4 py-2">
+          <h3>{project?.name}</h3>
+          <p>{project?.uri}</p>
 
-  <div class="flex flex-col items-start justify-center gap-5">
-    <h2 class="text-lg">Device Connection Demo</h2>
-    <p>
-      With the ODD SDK, a user’s account lives only on their connected devices —
-      entirely under their control. It’s easy for them to connect as many
-      devices as they’d like. For recoverability, we recommend they always
-      connect at least two.
-    </p>
-    <button class="btn btn-primary" on:click={() => goto('/delegate-account')}>
-      Connect an additional device
-    </button>
-  </div>
+          <!-- <div class="flex flex-col gap-1 ml-auto sm:self-end w-fit mt-auto">
+            <div class="flex flex-row gap-4 items-center justify-center">
+              <div class="flex flex-col">
+                <p class="text-xs">Version</p>
+                <p class="">{project?.description}</p>
+              </div>
+            </div>
+          </div> -->
+        </div>
+        <div
+          class="w-full px-4 py-2 border-t border-neutral-700 self-end text-right"
+        >
+          <p class="text-xs">Last updated {project?.lastModifiedTime} ago</p>
+        </div>
+      </a>
+    </div>
+  {/each}
 </div>

src/components/nav/SidebarNav.svelte

@@ -12,7 +12,7 @@
 
   const navItemsUpper = [
     {
-      label: 'Home',
+      label: 'Projects',
       href: '/',
       icon: Home
     },

src/lib/auth/account.ts

@@ -131,7 +131,7 @@ export async function waitForDataRoot(username: string): Promise<void> {
   if (!reference) throw new Error('Program must be initialized to check for data root')
 
   let dataRoot = await reference.dataRoot.lookup(username)
-
+  console.log('dataRoot', dataRoot.toString())
   if (dataRoot.toString() !== EMPTY_CID) return
 
   return new Promise((resolve) => {
@@ -140,7 +140,7 @@ export async function waitForDataRoot(username: string): Promise<void> {
 
     const dataRootInterval = setInterval(async () => {
       dataRoot = await reference.dataRoot.lookup(username)
-
+      console.log('dataRoot', dataRoot.toString())
       if (dataRoot.toString() === EMPTY_CID && attempt < maxRetries) {
         attempt++
         return

src/lib/projects.ts

@@ -0,0 +1,16 @@
+
+
+export type ProjectsStore = {
+  loading: boolean
+  projects: Project[]
+}
+
+export type Project = {
+  id: string
+  name: string
+  slug: string
+  description: string
+  teams: string[]
+  uri: string
+  lastModifiedTime: string
+}

src/routes/link-device/+page.svelte

@@ -6,12 +6,11 @@
   import { addNotification } from '$lib/notifications'
   import { createAccountLinkingConsumer } from '$lib/auth/linking'
   import { loadAccount } from '$lib/auth/account'
-  import { sessionStore } from '../../stores'
+  import { sessionStore } from '$src/stores'
   import { waitForDataRoot } from '$lib/auth/account'
   import type { LinkDeviceView } from '$lib/views'
   import FilesystemActivity from '$components/common/FilesystemActivity.svelte'
   import LinkDevice from '$components/auth/link-device/LinkDevice.svelte'
-
   import { extractSearchParam } from '$lib/utils'
 
   let view: LinkDeviceView = 'link-device'

src/routes/projects/[id]/+page.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+
+  import { projectsStore } from '$src/stores'
+
+  $: project = $projectsStore?.projects?.find(
+    project => project?.id === $page.params.id
+  )
+</script>
+
+<div class="py-8">
+  {#if project}
+    <h1 class="text-xl mb-4">{project?.name}</h1>
+    <div class="flex flex-col md:flex-row gap-8">
+      <div class="">
+        <div class="markdown-body">
+          {project?.description}
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div class="">
+          <p>URI</p>
+          <p class="font-bold underline text-blue-600">
+            <a href={project?.uri} target="_blank" rel="noreferrer">
+              {project?.uri}
+            </a>
+          </p>
+        </div>
+        <div class="">
+          <p>Last modified</p>
+          <p class="font-bold">
+            {project?.lastModifiedTime} ago
+          </p>
+        </div>
+        <div class="">
+          <p>Teams</p>
+          <p class="font-bold">
+            {project?.teams}
+          </p>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

src/routes/projects/lib/project-mocks.ts

@@ -0,0 +1,47 @@
+export default [
+  {
+    id: '4cfbe3n5-7935-4bb6-b64b-67cb6787018f',
+    name: 'ODD App Template',
+    slug: 'odd-app-template',
+    description: 'This is a great project',
+    teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'],
+    uri: 'https://odd-app-template.ipvm.app/',
+    lastModifiedTime: '50 minutes'
+  },
+  {
+    id: 'baebfe64-02e7-4eb2-8700-da6f709b38b2',
+    name: 'WalletAuth',
+    slug: 'walletauth',
+    description: 'This is a great project',
+    teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'],
+    uri: 'https://odd-walletauth.ipvm.app/',
+    lastModifiedTime: '1 hour'
+  },
+  {
+    id: 'fd54f26f-3963-437f-bg04-b1d396013625',
+    name: 'Auth Lobby',
+    slug: 'auth-lobby',
+    description: 'This is a great project',
+    teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'],
+    uri: 'https://auth-lobby.ipvm.app/',
+    lastModifiedTime: '50 minutes'
+  },
+  {
+    id: '7aebf670-2405-4c15-9504-d37a26a046dc',
+    name: 'Ditto',
+    slug: 'ditto',
+    description: 'This is a great project',
+    teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'],
+    uri: 'https://ditto.ipvm.app/',
+    lastModifiedTime: '3 hours'
+  },
+  {
+    id: 'f890a3b0-45a1-4329-9d09-c4f488bde2bd',
+    name: 'Fund Ring',
+    slug: 'fundring',
+    description: 'This is a great project',
+    teams: ['e412ac32-c1d4-46d4-aef3-3e38a9dd8e32'],
+    uri: 'https://fundring.ipvm.app/',
+    lastModifiedTime: '1 day'
+  }
+]

src/routes/tasks/[slug]/+page.svelte → src/routes/tasks/[id]/+page.svelte

@@ -6,7 +6,7 @@
   import '$routes/tasks/styles/markdown-styles-light.css'
   import { tasksStore } from '$src/stores'
 
-  $: task = $tasksStore?.tasks?.find(task => task?.id === $page.params.slug)
+  $: task = $tasksStore?.tasks?.find(task => task?.id === $page.params.id)
 </script>
 
 <div class="py-8">

src/routes/workflows/[slug]/+page.svelte → src/routes/workflows/[id]/+page.svelte

@@ -5,9 +5,10 @@
 
   import { workflowsStore } from '$src/stores'
   import chartData from '$routes/workflows/lib/chart-mocks'
+  import Logs from '$routes/workflows/components/Logs.svelte'
 
   $: workflow = $workflowsStore?.workflows?.find(
-    workflow => workflow?.id === $page.params.slug
+    workflow => workflow?.id === $page.params.id
   )
 
   const chartValues = [0, 10, 5, 50, 20, 30, 0]
@@ -159,12 +160,12 @@
       </div>
     </div>
 
-    <div class="tabs mb-8">
+    <div class="tabs mb-8 border-b border-neutral-700 box-border">
       {#each tabs as tab}
         <button
           on:click={() => handleTabClick(tab)}
-          class="tab tab-bordered {activeTab === tab
-            ? 'tab-active'
+          class="tab {activeTab === tab
+            ? 'tab-active border-b border-neutral-700'
             : ''} capitalize"
         >
           {tab}
@@ -186,7 +187,9 @@
       {/if}
 
       {#if activeTab === tabs[2]}
-        <div class="">logs</div>
+        <div class="">
+          <Logs />
+        </div>
       {/if}
 
       {#if activeTab === tabs[3]}