chore: playground

undb-io · Dec 13, 2024 · 79669f7 · 79669f7
1 parent 4b56f67
commit 79669f7
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 83 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/create-base/create-base.svelte b/apps/frontend/src/lib/components/blocks/create-base/create-base.svelte
@@ -42,7 +42,7 @@
   const form = superForm(
     defaults(
       {
-        name: getNextName(baseNames, "base"),
+        name: getNextName(baseNames, "Base"),
       },
       zodClient(schema),
     ),

diff --git a/apps/frontend/src/lib/components/blocks/playground/playground-menubar.svelte b/apps/frontend/src/lib/components/blocks/playground/playground-menubar.svelte
@@ -7,24 +7,28 @@
     CREATE_TABLE_MODAL,
   } from "$lib/store/modal.store"
   import { Button } from "$lib/components/ui/button"
-  import { HardDriveIcon } from "lucide-svelte"
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
   import { LL } from "@undb/i18n/client"
   import { ImportIcon, ChevronDownIcon, CirclePlusIcon } from "lucide-svelte"
   import { type IBaseDTO } from "@undb/base"
-  import * as Select from "$lib/components/ui/select"
   import { page } from "$app/stores"
-  import { goto } from "$app/navigation"
+  import PlaygroundSpaceButton from "./playground-space-button.svelte"
+  import Logo from "$lib/images/logo.svg"
 
-  export let bases: IBaseDTO[]
+  type Props = {
+    bases: IBaseDTO[]
+    isLoggedIn: boolean
+  }
 
-  $: baseId = $page.params.baseId
-  $: selectedBase = bases.find((base) => base.id === baseId)
-  $: selectedValue = selectedBase ? { value: selectedBase.id, label: selectedBase.name } : undefined
+  let { bases, isLoggedIn }: Props = $props()
+
+  let baseId = $derived($page.params.baseId)
+  let selectedBase = $derived(bases.find((base) => base.id === baseId))
+  let selectedValue = $derived(selectedBase ? { value: selectedBase.id, label: selectedBase.name } : undefined)
 </script>
 
-<div class="flex items-center gap-2 border-b p-2">
-  <Select.Root
+<div class="flex items-center justify-between gap-2 border-b p-2">
+  <!-- <Select.Root
     selected={selectedValue}
     onSelectedChange={async (v) => {
       if (v) {
@@ -44,73 +48,80 @@
         </Select.Item>
       {/each}
     </Select.Content>
-  </Select.Root>
+  </Select.Root> -->
+
+  <div class="flex items-center gap-2">
+    <img src={Logo} alt="" class="h-4 w-4 rounded-full" />
+       <div class="flex items-center gap-0">
+      <Button
+        size="xs"
+        variant="outline"
+        class="rounded-r-none"
+        on:click={() => {
+          openModal(IMPORT_TEMPLATE_MODAL)
+        }}
+      >
+        <ImportIcon class="mr-2 h-3 w-3" />
+        {$LL.base.importFromTemplate()}
+      </Button>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild let:builder>
+          <Button builders={[builder]} size="xs" variant="outline" class="rounded-l-none border-l-0">
+            <ChevronDownIcon class="h-3 w-3" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content class="w-40">
+          <DropdownMenu.Group>
+            <DropdownMenu.Item
+              class="text-xs"
+              on:click={() => {
+                openModal(CREATE_BASE_MODAL)
+              }}
+            >
+              <CirclePlusIcon class="mr-2 h-3 w-3" />
+              {$LL.base.createBase()}
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
 
-  <div class="flex items-center gap-0">
-    <Button
-      size="xs"
-      variant="outline"
-      class="rounded-r-none"
-      on:click={() => {
-        openModal(IMPORT_TEMPLATE_MODAL)
-      }}
-    >
-      <ImportIcon class="mr-2 h-3 w-3" />
-      {$LL.base.importFromTemplate()}
-    </Button>
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild let:builder>
-        <Button builders={[builder]} size="xs" variant="outline" class="rounded-l-none border-l-0">
-          <ChevronDownIcon class="h-3 w-3" />
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content class="w-40">
-        <DropdownMenu.Group>
-          <DropdownMenu.Item
-            class="text-xs"
-            on:click={() => {
-              openModal(CREATE_BASE_MODAL)
-            }}
-          >
-            <CirclePlusIcon class="mr-2 h-3 w-3" />
-            {$LL.base.createBase()}
-          </DropdownMenu.Item>
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <div class="flex items-center gap-0">
+      <Button
+        size="xs"
+        variant="outline"
+        class="rounded-r-none"
+        on:click={() => {
+          openModal(IMPORT_TABLE_MODAL)
+        }}
+      >
+        <ImportIcon class="mr-2 h-3 w-3" />
+        {$LL.table.common.import()}
+      </Button>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild let:builder>
+          <Button builders={[builder]} size="xs" variant="outline" class="rounded-l-none border-l-0">
+            <ChevronDownIcon class="h-3 w-3" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content class="w-40">
+          <DropdownMenu.Group>
+            <DropdownMenu.Item
+              class="text-xs"
+              on:click={() => {
+                openModal(CREATE_TABLE_MODAL)
+              }}
+            >
+              <CirclePlusIcon class="mr-2 h-3 w-3" />
+              {$LL.table.common.create()}
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
   </div>
 
-  <div class="flex items-center gap-0">
-    <Button
-      size="xs"
-      variant="outline"
-      class="rounded-r-none"
-      on:click={() => {
-        openModal(IMPORT_TABLE_MODAL)
-      }}
-    >
-      <ImportIcon class="mr-2 h-3 w-3" />
-      {$LL.table.common.import()}
-    </Button>
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild let:builder>
-        <Button builders={[builder]} size="xs" variant="outline" class="rounded-l-none border-l-0">
-          <ChevronDownIcon class="h-3 w-3" />
-        </Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content class="w-40">
-        <DropdownMenu.Group>
-          <DropdownMenu.Item
-            class="text-xs"
-            on:click={() => {
-              openModal(CREATE_TABLE_MODAL)
-            }}
-          >
-            <CirclePlusIcon class="mr-2 h-3 w-3" />
-            {$LL.table.common.create()}
-          </DropdownMenu.Item>
-        </DropdownMenu.Group>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+  <div class="flex items-center gap-2">
+    <PlaygroundSpaceButton size="xs" {isLoggedIn} />
   </div>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/playground/playground-space-button.svelte b/apps/frontend/src/lib/components/blocks/playground/playground-space-button.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Button, type Props as ButtonProps } from "$lib/components/ui/button"
+
+  type Props = {
+    isLoggedIn: boolean
+    size: ButtonProps["size"]
+  }
+
+  let { isLoggedIn, ...rest }: Props = $props()
+</script>
+
+{#if isLoggedIn}
+  <Button href="/" {...rest}>Go to space</Button>
+{:else}
+  <Button href="/login" {...rest}>Login</Button>
+{/if}
diff --git a/apps/frontend/src/lib/components/blocks/playground/playground.svelte b/apps/frontend/src/lib/components/blocks/playground/playground.svelte
@@ -3,15 +3,21 @@
   import { CREATE_BASE_MODAL, IMPORT_TEMPLATE_MODAL, toggleModal } from "$lib/store/modal.store"
   import { CirclePlusIcon, PackageIcon } from "lucide-svelte"
   import { LL } from "@undb/i18n/client"
+
+  type Props = {
+    isLoggedIn: boolean
+  }
+
+  let { isLoggedIn, ...rest }: Props = $props()
 </script>
 
 <main class="flex w-screen flex-1 items-center justify-center">
   <div class="flex flex-col space-y-2">
-    <Button class="w-48" on:click={() => toggleModal(CREATE_BASE_MODAL)} {...$$restProps}>
+    <Button class="w-48" on:click={() => toggleModal(CREATE_BASE_MODAL)} {...rest}>
       <CirclePlusIcon class="mr-2 size-4" />
       {$LL.base.createBase()}
     </Button>
-    <Button class="w-48" on:click={() => toggleModal(IMPORT_TEMPLATE_MODAL)} {...$$restProps}>
+    <Button class="w-48" on:click={() => toggleModal(IMPORT_TEMPLATE_MODAL)} {...rest}>
       <PackageIcon class="mr-2 size-4" />
       {$LL.base.importFromTemplate()}
     </Button>

diff --git a/apps/frontend/src/lib/components/blocks/template/template-list-sheet.svelte b/apps/frontend/src/lib/components/blocks/template/template-list-sheet.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
   import * as Sheet from "$lib/components/ui/sheet"
-  import { IMPORT_TEMPLATE_MODAL, isModalOpen, closeModal } from "$lib/store/modal.store"
+  import { IMPORT_TEMPLATE_MODAL, isModalOpen, closeModal, openModal } from "$lib/store/modal.store"
   import { PackageIcon } from "lucide-svelte"
   import TemplateList from "./template-list.svelte"
   import { LL } from "@undb/i18n/client"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { onMount } from "svelte"
+
+  let isPlayground = getIsPlayground()
+
+  onMount(() => {
+    if (isPlayground) {
+      openModal(IMPORT_TEMPLATE_MODAL)
+    }
+  })
 </script>
 
 <Sheet.Root

diff --git a/apps/frontend/src/routes/playground/+layout.svelte b/apps/frontend/src/routes/playground/+layout.svelte
@@ -3,6 +3,7 @@
   import { setIsPlayground } from "$lib/store/playground.svelte"
   import PlaygroundAlert from "$lib/components/blocks/playground/playground-alert.svelte"
   import type { LayoutData } from "./$types"
+  import  TemplateListSheet  from "$lib/components/blocks/template/template-list-sheet.svelte"
 
   export let data: LayoutData
 
@@ -22,6 +23,4 @@
   <CreateBaseDialog baseNames={[]} />
 {/await}
 
-{#await import("$lib/components/blocks/template/template-list-sheet.svelte") then { default: TemplateListSheet }}
-  <TemplateListSheet />
-{/await}
+<TemplateListSheet />
diff --git a/apps/frontend/src/routes/playground/+layout.ts b/apps/frontend/src/routes/playground/+layout.ts
@@ -8,10 +8,13 @@ export const load: LayoutLoad = async (event) => {
 
   const dataService = await new Registry().register(true, true)
 
+  const me = await event.fetch("/api/me")
+
   const bases = await dataService.base.listBases()
 
   return {
     bases,
     dataService,
+    me: me.redirected ? null : await me.json(),
   }
 }
diff --git a/apps/frontend/src/routes/playground/+page.svelte b/apps/frontend/src/routes/playground/+page.svelte
@@ -1,5 +1,14 @@
 <script lang="ts">
   import Playground from "$lib/components/blocks/playground/playground.svelte"
+  import type { PageData } from "./$types"
+
+  type Props = {
+    data: PageData
+  }
+
+  let { data }: Props = $props()
+
+  let isLoggedIn = $derived(!!data.me)
 </script>
 
-<Playground />
+<Playground {isLoggedIn} />
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/+layout.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/+layout.svelte
@@ -24,6 +24,7 @@
 
   export let data: PageData
 
+  $: isLoggedIn = !!data.me
   $: bases = data.bases
   $: base = data.base
   $: tables = data.tables
@@ -54,7 +55,7 @@
 </script>
 
 <main class="flex flex-1 flex-col overflow-hidden">
-  <PlaygroundMenubar {bases} />
+  <PlaygroundMenubar {bases} {isLoggedIn} />
   <Resizable.PaneGroup class="flex-1" direction="horizontal">
     <Resizable.Pane
       bind:pane={panelLeft}