fix(ceremony): save progress on state

ceremony/src/lib/client/index.ts

@@ -1,20 +1,21 @@
 import { get, post } from "$lib/client/http.ts"
-import type { ContributeBody, Status } from "$lib/client/types.ts"
+import type { ContributeBody, ClientStatus } from "$lib/client/types.ts"
 import { user } from "$lib/stores/user.svelte.ts"
 import { getQueuePayloadId } from "$lib/supabase/queries.ts"
 
-export const start = async (): Promise<Status | undefined> => {
+export const start = async (): Promise<ClientStatus | undefined> => {
   const userId = user?.session?.user.id
+  const email = user?.session?.user?.email
 
   if (!userId) {
-    console.error("User not logged in")
+    console.log("User not logged in")
     return
   }
 
   const { data, error } = await getQueuePayloadId(userId)
 
   if (error) {
-    console.error("Error fetching payload_id:", error)
+    console.log("Error fetching payload_id:", error)
     return
   }
 
@@ -29,21 +30,35 @@ export const start = async (): Promise<Status | undefined> => {
     jwt: user?.session?.access_token,
     supabaseProject: import.meta.env.VITE_SUPABASE_URL,
     apiKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
-    bucket: import.meta.env.VITE_BUCKET_ID
+    bucket: import.meta.env.VITE_BUCKET_ID,
+    userEmail: email
   }
 
-  return post<Status>("contribute", {}, contributeBody)
+  return post<ClientStatus>("contribute", {}, contributeBody)
 }
 
-export const checkStatus = async (): Promise<{ status: Status }> => {
+
+export const checkState = async (): Promise<string> => {
   try {
-    const status = await get<Status>("contribute", {})
-    if (status === undefined) {
-      throw new Error("Status is undefined. Is the client up?")
+    const response = await get<any>("contribute", {});
+    console.log(response);
+
+    if (typeof response === 'string') {
+      return response;
     }
-    return { status }
+
+    if (response && typeof response.status === 'string') {
+      return response.status;
+    }
+
+    if (Array.isArray(response) && typeof response[0] === 'string') {
+      return response[0];
+    }
+
+    throw new Error("Invalid response format. Status is undefined.");
   } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    throw new Error(`Error fetching status: ${errorMessage}`)
+    console.log('Error fetching status:', error);
+    return 'offline';
   }
-}
+};
+

ceremony/src/lib/client/types.ts

@@ -1,5 +1,5 @@
-export interface Status {
-  status: "idle" | "initializing" | "contributionStarted" | "contributionEnded" | "successful"
+export interface ClientStatus {
+  status: "idle" | "initializing" | "contributionStarted" | "contributionEnded" | "successful" | "offline"
   downloadStarted?: string
   downloading?: {
     file: string
@@ -18,9 +18,5 @@ export interface ContributeBody {
   apiKey: string
   contributorId: string
   payloadId: string
-}
-
-export interface QueueData {
-  id: string
-  joined: string
-}
+  userEmail: string
+}

ceremony/src/lib/components/Ceremony.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type {ContributorState} from "$lib/stores/state.svelte.ts";
+  import H1 from "$lib/components/typography/H1.svelte";
+  import H4 from "$lib/components/typography/H4.svelte";
+
+  type Props = {
+    contributor: ContributorState;
+  };
+
+  let {contributor}: Props = $props();
+
+  $effect(() => {
+    console.log(contributor.state)
+    if (contributor?.contributionState === 'contribute') {
+
+    }
+  })
+
+</script>
+
+
+<div class="p-8 bg-gradient-to-t from-transparent via-black/50 to-transparent backdrop-blur w-full flex items-center justify-center flex-col h-48">
+
+  {#if contributor.state === 'inQueue'}
+    <H1>{contributor.ctx.queuePosition} / {contributor.ctx.queueCount}</H1>
+    <H4>{contributor.ctx.estimatedTime} minutes left (est.).</H4>
+  {/if}
+
+
+</div>

ceremony/src/lib/components/Install.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">
-import { toast } from "svelte-sonner"
-import H1 from "$lib/components/typography/H1.svelte"
-import Button from "$lib/components/Button.svelte"
+  import {toast} from "svelte-sonner"
+  import H1 from "$lib/components/typography/H1.svelte"
+  import Button from "$lib/components/Button.svelte"
 
-let command = "docker run -p 4919:4919 -it haitlahcen/union-mpc-cli:latest"
-const copy = () => {
-  navigator.clipboard.writeText(command)
-  toast.success("Copied to clipboard", { position: "bottom-right" })
-}
+  let command = "docker run -p 4919:4919 -it haitlahcen/union-mpc-cli:latest"
+  const copy = () => {
+    navigator.clipboard.writeText(command)
+    toast.success("Copied to clipboard", {position: "bottom-right"})
+  }
 </script>
 
-<div class="p-8  bg-gradient-to-t from-transparent via-black/50 to-transparent backdrop-blur w-full flex items-center flex-col">
-  <H1 class="text-center mb-4" >Install client</H1>
-  <code class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-black text-white p-4 pl-6 font-mono">
+<code class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-black text-white p-4 pl-6 font-mono">
     <span class="flex gap-4">
         <span class="shrink-0 text-union-accent-500">
             $
@@ -23,15 +21,14 @@ const copy = () => {
         </span>
     </span>
 
-    <Button onclick={copy} class="!bg-transparent text-neutral-500">
-      <svg class="shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg"
-           viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path>
-        <path
-                d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z">
-        </path>
-      </svg>
-    </Button>
-  </code>
-</div>
+  <Button onclick={copy} class="!bg-transparent text-neutral-500">
+    <svg class="shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg"
+         viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path>
+      <path
+              d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z">
+      </path>
+    </svg>
+  </Button>
+</code>
 

ceremony/src/lib/components/typography/H3.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 let { children, class: className = "", ...props } = $props()
 </script>
-<h3 class={`text-union-heading-primary text-2xl font-bold font-supermolot mb-3 ${className}`} {...props}>
+<h3 class={`text-union-heading-primary text-2xl font-bold font-supermolot uppercase ${className}`} {...props}>
   {@render children()}
 </h3>

ceremony/src/lib/components/typography/H4.svelte

@@ -2,6 +2,6 @@
 let { children, class: className = "", ...props } = $props()
 </script>
 
-<h4 class={`text-union-heading-primary text-xl font-bold font-supermolot mb-2.5 ${className}`} {...props}>
+<h4 class={`text-union-heading-primary text-xl font-bold font-supermolot uppercase ${className}`} {...props}>
   {@render children()}
 </h4>

ceremony/src/lib/layout/Navbar/index.svelte

@@ -42,8 +42,6 @@ async function logout() {
       <div class="hidden md:block">
         {#if user.session}
           <div class="flex items-center gap-4">
-
-            <NavLink href="/app">Contribute</NavLink>
             <Button onclick={logout}>{"Log out"}</Button>
           </div>
         {:else}
@@ -65,9 +63,6 @@ async function logout() {
       <div class="md:hidden mt-4 w-full bg-black">
         <div class="flex flex-col divide-y divide-white/50">
           {#if user.session}
-            <NavLink class="py-2" href="/app">Dashboard</NavLink>
-            <NavLink class="py-2" href="/app/client">Client</NavLink>
-            <NavLink class="py-2" href="/app/install">Install</NavLink>
             <Button class="py-2" onclick={logout}>{"Log out"}</Button>
           {:else}
             <NavLink class="p-2" href="/auth/login">Log in</NavLink>