fix: fix select bug

apps/backend/src/modules/auth/otp.service.ts

@@ -1,4 +1,4 @@
-import { generateTOTP, verifyTOTP } from "@oslojs/otp"
+import { createTOTPKeyURI, generateTOTP, verifyTOTP } from "@oslojs/otp"
 import { singleton } from "@undb/di"
 import { type IMailService, injectMailService } from "@undb/mail"
 import { injectQueryBuilder, type IQueryBuilder } from "@undb/persistence/server"
@@ -8,13 +8,18 @@ import { Lucia } from "lucia"
 import { decodeHex, encodeHex } from "oslo/encoding"
 import { injectLucia } from "./auth.provider"
 
+interface ISendOtpResponse {
+  keyURI: string
+}
+
 export interface IOtpService {
-  sendOtp(email: string): Promise<void>
+  sendOtp(email: string): Promise<ISendOtpResponse>
   verifyOtp(email: string, otp: string): Promise<string>
 }
 
 const OTP_EXPIRES_IN = 60 * 10
 const OTP_DIGITS = 6
+const OTP_ISSUER = "undb"
 
 @singleton()
 export class OtpService implements IOtpService {
@@ -31,8 +36,11 @@ export class OtpService implements IOtpService {
     private readonly userService: IUserService,
   ) {}
 
-  public async sendOtp(email: string): Promise<void> {
-    await this.userService.findOneOrCreateByEmail(email)
+  public async sendOtp(email: string): Promise<ISendOtpResponse> {
+    const user = await this.userService.findOneByEmail(email)
+    if (user.isNone()) {
+      throw new Error("User not found")
+    }
 
     const secret = new Uint8Array(20)
     const key = crypto.getRandomValues(secret)
@@ -45,6 +53,12 @@ export class OtpService implements IOtpService {
       .where((eb) => eb.eb("undb_user.email", "=", email))
       .execute()
 
+    const issuer = OTP_ISSUER
+    const accountName = email
+    const intervalInSeconds = OTP_EXPIRES_IN
+    const digits = OTP_DIGITS
+    const uri = createTOTPKeyURI(issuer, accountName, key, intervalInSeconds, digits)
+
     await this.mailService.send({
       to: email,
       subject: "One-time password - undb",
@@ -56,6 +70,10 @@ export class OtpService implements IOtpService {
         otp: totp,
       },
     })
+
+    return {
+      keyURI: uri,
+    }
   }
 
   /**

apps/frontend/src/lib/components/blocks/base/create-base-button.svelte

@@ -7,12 +7,12 @@
 </script>
 
 {#if $hasPermission("base:create")}
-  <Button class="w-48" on:click={() => toggleModal(CREATE_BASE_MODAL)} {...$$restProps}>
+  <Button class="w-52" on:click={() => toggleModal(CREATE_BASE_MODAL)} {...$$restProps}>
     <CirclePlusIcon class="mr-2 size-4" />
     {$LL.base.createBase()}
   </Button>
-  <Button class="w-48" on:click={() => toggleModal(IMPORT_TEMPLATE_MODAL)} {...$$restProps}>
-    <PackageIcon class="mr-2 size-4" />
+  <Button class="w-52" on:click={() => toggleModal(IMPORT_TEMPLATE_MODAL)} {...$$restProps}>
+    <PackageIcon class="mr-2 size-4 shrink-0" />
     {$LL.base.importFromTemplate()}
   </Button>
 {/if}

apps/frontend/src/lib/components/blocks/create-table/create-table.svelte

@@ -11,15 +11,18 @@
   import { goto } from "$app/navigation"
   import { FieldIdVo } from "@undb/table"
   import { CREATE_TABLE_MODAL, closeModal } from "$lib/store/modal.store"
-  import { baseId, currentBase, currentBaseId } from "$lib/store/base.store"
+  import { baseId, currentBaseId } from "$lib/store/base.store"
   import { getNextName } from "@undb/utils"
   import { getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   const dataService = getDataService()
 
   const schema = createTableCommand.omit({ baseId: true })
   export let tableNames: string[]
 
+  const isPlayground = getIsPlayground()
+
   const mutation = createMutation({
     mutationFn: dataService.table.createTable,
     mutationKey: ["createTable"],

apps/frontend/src/lib/components/blocks/field-options/select-field-option.svelte

@@ -102,7 +102,19 @@
         >
           {#each option.options as o (o.id)}
             <div class="flex gap-1">
-              <OptionEditor {disabled} bind:color={o.color} bind:name={o.name} />
+              <OptionEditor
+                {disabled}
+                color={o.color}
+                name={o.name}
+                onNameChange={(name) => {
+                  o.name = name
+                  option.options = [...option.options]
+                }}
+                onColorChange={(color) => {
+                  o.color = color
+                  option.options = [...option.options]
+                }}
+              />
 
               <div class="inline-flex items-center">
                 <button {disabled} type="button" class="handler">

apps/frontend/src/lib/components/blocks/option/option-editor.svelte

@@ -2,13 +2,30 @@
   import type { IColors, IOptionName } from "@undb/table"
   import { Input } from "$lib/components/ui/input"
   import ColorPicker from "$lib/components/ui/color-picker/color-picker.svelte"
+  import type { Props } from "$lib/components/ui/color-picker"
 
   export let color: IColors
   export let name: IOptionName
   export let disabled: boolean = false
+
+  export let onColorChange: Props["onColorChange"] = undefined
+  export let onNameChange: ((name: string) => void) | undefined = undefined
 </script>
 
 <div class="flex flex-1 items-center gap-2">
-  <ColorPicker {disabled} bind:value={color} onColorChange={(value) => (color = value)} />
-  <Input {disabled} class="bg-background text-xs" bind:value={name} autofocus />
+  <ColorPicker
+    {disabled}
+    bind:value={color}
+    onColorChange={(value) => {
+      onColorChange?.(value)
+      color = value
+    }}
+  />
+  <Input
+    {disabled}
+    class="bg-background text-xs"
+    bind:value={name}
+    autofocus
+    on:input={(v) => onNameChange?.(v.target.value)}
+  />
 </div>