feat: add submit flow + progress bar

env.example

@@ -50,6 +50,14 @@ LARK_UI_PORT=5173
 PUBLIC_API_URL=http://localhost:3000
 VITE_API_URL=http://localhost:3002
 
+# Cloudflare R2 Configuration
+R2_ENDPOINT=https://your-account-id.r2.cloudflarestorage.com
+R2_REGION=auto
+R2_ACCESS_KEY_ID=your_r2_access_key_id
+R2_SECRET_ACCESS_KEY=your_r2_secret_access_key
+R2_BUCKET=your_r2_bucket_name
+R2_PUBLIC_BASE_URL=https://cdn.midnigh.leafd.dev
+
 # Datadog Configuration (optional)
 DD_AGENT_HOST=localhost
 DD_TRACE_AGENT_PORT=8126

lark-ui/Dockerfile

@@ -5,14 +5,21 @@ RUN corepack enable && corepack prepare pnpm@latest --activate
 
 FROM base AS deps
 WORKDIR /app
-COPY lark-ui/package.json lark-ui/pnpm-lock.yaml* ./
+COPY pnpm-workspace.yaml pnpm-lock.yaml ./
+COPY lark-ui/package.json ./lark-ui/
+COPY owl-api/package.json ./owl-api/
+COPY gateway/package.json ./gateway/
 RUN pnpm install --frozen-lockfile
 
 FROM base AS builder
 WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
-COPY lark-ui/ .
-RUN pnpm run build
+COPY pnpm-workspace.yaml pnpm-lock.yaml ./
+COPY lark-ui/package.json ./lark-ui/
+COPY owl-api/package.json ./owl-api/
+COPY gateway/package.json ./gateway/
+COPY lark-ui/ ./lark-ui/
+RUN pnpm install --frozen-lockfile
+RUN pnpm --filter lark-ui run build
 
 FROM base AS runner
 WORKDIR /app
@@ -23,9 +30,10 @@ ENV HOST=0.0.0.0
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 sveltekit
 
-COPY --from=builder --chown=sveltekit:nodejs /app/build ./build
-COPY --from=builder --chown=sveltekit:nodejs /app/package.json ./package.json
-COPY --from=deps --chown=sveltekit:nodejs /app/node_modules ./node_modules
+COPY --from=builder /app/node_modules /app/node_modules
+COPY --from=builder --chown=sveltekit:nodejs /app/lark-ui ./lark-ui
+
+WORKDIR /app/lark-ui
 
 USER sveltekit
 

lark-ui/package.json

@@ -30,6 +30,7 @@
 		]
 	},
 	"dependencies": {
-		"@tailwindcss/vite": "^4.1.14"
+		"@tailwindcss/vite": "^4.1.14",
+		"posthog-js": "^1.292.0"
 	}
 }

lark-ui/src/app.css

@@ -8,8 +8,10 @@
   overscroll-behavior: none;
 }
 
-body {
+html, body {
   background-color: #F24B4B;
+
+  min-height: 100%;
 }
 
 ::-webkit-scrollbar {

lark-ui/src/lib/BottomNavigation.svelte

@@ -1,10 +1,23 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-    import { getReferralCode } from './auth';
-
-  const { onboarding = false, currentTab = 'create' } = $props();
+    import { onMount } from 'svelte';
+  import { getReferralCode, type User } from './auth';
+  import { getHourCounts } from './auth';
+
+  type Tab = 'create' | 'explore' | 'shop' | 'settings';
+
+  const { page, onboarding = false, user }: {
+    page: string;
+    onboarding?: boolean;
+    user?: User;
+  } = $props();
 
-  let activeTab = $state(currentTab);
+  let activeTab = $derived.by(() => {
+    if (page.startsWith('/app/projects')) return 'create';
+    if (page.startsWith('/app/settings')) return 'settings';
+    return 'create';
+  });
+
   let shakingTab = $state('');
 
   let referralPopover = $state(false);
@@ -31,7 +44,7 @@
   }
 
   function navigateTo(tab: string) {
-    if (onboarding && (tab === 'explore' || tab === 'shop')) {
+    if ((tab === 'explore' || tab === 'shop')) {
       handleLockedClick(tab);
       return;
     }
@@ -49,83 +62,165 @@
         break;
     }
   }
+
+
 </script>
 
 <div class="bottom-navigation">
-  <div class="nav-tabs">
-    <button 
-      class="nav-item" 
-      class:active={activeTab === 'create'}
-      onclick={() => navigateTo('create')}
-      role="tab"
-      aria-selected={activeTab === 'create'}
-      class:enabled={true}
-    >
-      Create
-    </button>
-    <button 
-      class="nav-item {true ? 'disabled' : 'enabled'}" 
-      class:active={activeTab === 'explore'}
-      class:shake={shakingTab === 'explore'}
-      role="tab"
-      aria-selected={activeTab === 'explore'}
-    >
-      Explore
-      <!-- {#if onboarding} -->
-        <img class="lock" src="/icons/lock.svg" alt="Lock" />
-      <!-- {/if} -->
-    </button>
-    <button 
-      class="nav-item {true ? 'disabled' : 'enabled'}" 
-      class:active={activeTab === 'shop'}
-      class:shake={shakingTab === 'shop'}
-      role="tab"
-      aria-selected={activeTab === 'shop'}
-    >
-      Shop
-      <!-- {#if onboarding} -->
-        <img class="lock" src="/icons/lock.svg" alt="Lock" />
-      <!-- {/if} -->
-    </button>
-  </div>
-  <div class="tray">
-    {#if !onboarding}
-      <!-- <img src="/icons/bell.svg" alt="Notification" /> -->
-      <button class="referral" onclick={showReferralPopover}>
-        {#if referralPopover}
-          <div class="referral-popover">
-            <p>Referral link copied to clipboard</p>
-          </div>
-        {/if}
-        <img src="/icons/link.svg" alt="Referral" />
+  <div class="bottom-nav-items">
+    <div class="nav-tabs">
+      <button 
+        class="nav-item" 
+        class:active={activeTab === 'create'}
+        onclick={() => navigateTo('create')}
+        role="tab"
+        aria-selected={activeTab === 'create'}
+        class:enabled={true}
+        class:shake={shakingTab === 'create'}
+      >
+        Create
+      </button>
+      <button 
+        class="nav-item {true ? 'disabled' : 'enabled'}" 
+        class:active={activeTab === 'explore'}
+        class:shake={shakingTab === 'explore'}
+        onclick={() => navigateTo('explore')}
+        role="tab"
+        aria-selected={activeTab === 'explore'}
+      >
+        Explore
+        <!-- {#if onboarding} -->
+          <img class="lock" src="/icons/lock.svg" alt="Lock" />
+        <!-- {/if} -->
       </button>
-      <a
-        class="settings"
-        class:active={activeTab === 'settings'}
-        href="/app/settings"
+      <button 
+        class="nav-item {true ? 'disabled' : 'enabled'}" 
+        class:active={activeTab === 'shop'}
+        class:shake={shakingTab === 'shop'}
+        onclick={() => navigateTo('shop')}
+        role="tab"
+        aria-selected={activeTab === 'shop'}
       >
-        <img src="/icons/settings.svg" alt="Settings" />
-      </a>
-    {/if}
+        Shop
+        <!-- {#if onboarding} -->
+          <img class="lock" src="/icons/lock.svg" alt="Lock" />
+        <!-- {/if} -->
+      </button>
+    </div>
+    <div class="tray">
+      {#if !onboarding}
+        <!-- <img src="/icons/bell.svg" alt="Notification" /> -->
+        <button class="referral" onclick={showReferralPopover}>
+          {#if referralPopover}
+            <div class="referral-popover">
+              <p>Referral link copied to clipboard</p>
+            </div>
+          {/if}
+          <img src="/icons/link.svg" alt="Referral" />
+        </button>
+        <a
+          class="settings"
+          class:active={activeTab === 'settings'}
+          href="/app/settings"
+        >
+          <img src="/icons/settings.svg" alt="Settings" />
+        </a>
+      {/if}
+    </div>
   </div>
 </div>
 
 <style>
+  .progress-bar {
+    height: 16px;
+
+    display: flex;
+  }
+
+  .approved-hours {
+    background: #1385F0;
+    height: 100%;
+    position: relative;
+  }
+
+  .tracked-hours {
+    background: #4F5B9C;
+    height: 100%;
+    position: relative;
+  }
+
+  .remaining-hours {
+    background: #5E5087;
+    height: 100%;
+    position: relative;
+  }
+
+  .marker {
+    position: absolute;
+    right: 0;
+    bottom: calc(100%);
+    transform: translateX(50%);
+
+    padding: 8px 12px;
+    background-image: url('/shapes/shape-popover-3.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    white-space: nowrap;
+  }
+
+  .marker p {
+    font-family: 'PT Sans', sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    color: white;
+    margin: 0;
+    margin-top: 12px;
+    margin-bottom: 1.25px;
+  }
+
+  .goal-marker {
+    position: absolute;
+    right: 0;
+    bottom: calc(100%);
+
+    padding: 8px 12px;
+    background-image: url('/shapes/shape-popover-4.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    white-space: nowrap;
+  }
+
+  .goal-marker p {
+    font-family: 'PT Sans', sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    color: white;
+    margin: 0;
+    margin-top: 12px;
+    margin-bottom: 5px;
+    rotate: -0.75deg;
+  }  
+
   .bottom-navigation {
     position: fixed;
+    z-index: 1000;
     bottom: 0;
     left: 0;
     right: 0;
+  }
+
+  .bottom-nav-items {
     background: #2D273F;
+    z-index: 200;
     height: 137px;
     padding: 0 120px;
-    z-index: 200;
-
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-  
+
   .nav-tabs {
     display: flex;
     gap: 60px;