Add datetime input

src/app.css

@@ -92,8 +92,21 @@
 
 /* tiptap */
 
+.input-editor, .chat-editor {
+  @apply p-1 -m-1 min-h-12;
+}
+
+
 .tiptap[contenteditable="true"] {
-  @apply max-h-[350px] overflow-y-auto rounded-box bg-base-300 p-2 px-4;
+  @apply max-h-[350px] overflow-y-auto p-2 px-4;
+}
+
+.chat-editor .tiptap[contenteditable="true"] {
+  @apply rounded-box bg-base-300;
+}
+
+.input-editor .tiptap[contenteditable="true"] {
+  @apply input input-bordered p-[.65rem] h-auto;
 }
 
 .tiptap pre code {
@@ -111,3 +124,12 @@
 .link-content.link-content-selected {
   @apply bg-primary text-primary-content;
 }
+
+/* date input */
+
+.date-time-field {
+  @apply input input-bordered px-0 rounded;
+}
+.date-time-field input {
+  @apply !bg-inherit !border-none !text-inherit !w-full !h-full;
+}

src/app/components/ChatCompose.svelte

@@ -57,7 +57,7 @@
       <Icon icon="gallery-send" />
     {/if}
   </Button>
-  <div class="flex-grow overflow-hidden">
+  <div class="flex-grow overflow-hidden chat-editor">
     <EditorContent editor={$editor} />
   </div>
 </div>

src/app/components/EventCreate.svelte

@@ -10,9 +10,11 @@
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import {makeMention, makeIMeta} from "@app/commands"
   import {getNoteEditorOptions, addFile} from "@app/editor"
   import {pushModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
 
   export let url
 
@@ -23,6 +25,20 @@
   const uploading = writable(false)
 
   const sendMessage = () => {
+    if (!title) {
+      return pushToast({
+        theme: "error",
+        message: "Please provide a title.",
+      })
+    }
+
+    if (!start || !end) {
+      return pushToast({
+        theme: "error",
+        message: "Please provide start and end times.",
+      })
+    }
+
     const json = $editor.getJSON()
     const kind = isAllDay ? EVENT_DATE : EVENT_TIME
     const mentionTags = findNodes(NProfileExtension.name, json).map(m =>
@@ -47,8 +63,8 @@
   let file: File
   let title = ""
   let location = ""
-  let start = ""
-  let end = ""
+  let start: Date
+  let end: Date
 
   onMount(() => {
     editor = createEditor(getNoteEditorOptions({uploading, sendMessage}))
@@ -71,9 +87,12 @@
     <div
       slot="input"
       class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
+      <div class="flex-grow overflow-hidden input-editor">
+        <EditorContent editor={$editor} />
+      </div>
       <Button
         data-tip="Add an image"
-        class="center h-10 w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200 tooltip"
+        class="btn center tooltip"
         on:click={() => addFile($editor)}>
         {#if $uploading}
           <span class="loading loading-spinner loading-xs"></span>
@@ -81,8 +100,17 @@
           <Icon icon="gallery-send" />
         {/if}
       </Button>
-      <div class="flex-grow overflow-hidden">
-        <EditorContent editor={$editor} />
+    </div>
+  </Field>
+  <Field>
+    <div slot="input" class="grid grid-cols-2 gap-2">
+      <div class="flex flex-col gap-1">
+        <strong>Start</strong>
+        <DateTimeInput bind:value={start} />
+      </div>
+      <div class="flex flex-col gap-1">
+        <strong>End</strong>
+        <DateTimeInput bind:value={end} />
       </div>
     </div>
   </Field>

src/app/editor.ts

@@ -149,7 +149,6 @@ export const getChatViewOptions = (content: string) => ({
 
 export const getNoteEditorOptions = ({uploading, sendMessage}: EditorOptions) => ({
   content: "",
-  autofocus: true,
   extensions: [
     Document,
     Dropcursor,

src/lib/components/DateTimeInput.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import {DateInput} from "date-picker-svelte"
+  import {formatTimestamp} from '@welshman/app'
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
+
+  export let initialValue: Date | undefined = undefined
+  export let value: Date | undefined = initialValue
+
+  const init = () => {
+    if (!value) {
+      value = new Date()
+      value.setMinutes(0, 0, 0)
+    }
+  }
+
+  const clear = () => {
+    value = undefined
+  }
+</script>
+
+<label class="relative">
+  <DateInput format="yyyy-MM-dd HH:mm" placeholder="" bind:value />
+  <div class="absolute top-0 h-12 right-2 flex gap-2 items-center cursor-pointer">
+    {#if value}
+      <Button on:click={clear} class="h-5">
+        <Icon icon="close-circle" />
+      </Button>
+    {:else}
+      <Button on:click={init} class="h-5">
+        <Icon icon="calendar-minimalistic" />
+      </Button>
+    {/if}
+  </div>
+</label>

src/lib/components/ModalBox.svelte

@@ -1,38 +1,10 @@
-<script context="module" lang="ts">
-  import {emitter} from "@app/modal"
-
-  const modalHeight = tweened(0, {
-    duration: 700,
-    easing: quintOut,
-  })
-
-  emitter.on("close", () => modalHeight.set(0))
-</script>
-
 <script lang="ts">
-  import {onMount} from "svelte"
-  import {quintOut} from "svelte/easing"
-  import {tweened} from "svelte/motion"
+  import {fly} from "@lib/transition"
 
   export let component
   export let props = {}
-
-  let box: HTMLElement
-  let content: HTMLElement
-  let naturalHeight = 0
-
-  onMount(() => {
-    naturalHeight = content.clientHeight + 48
-    modalHeight.set(naturalHeight)
-  })
 </script>
 
-<div
-  class="modal-box"
-  bind:this={box}
-  style={`height: ${$modalHeight}px`}
-  class:overflow-hidden={$modalHeight !== naturalHeight}>
-  <div bind:this={content}>
-    <svelte:component this={component} {...props} />
-  </div>
+<div class="modal-box" transition:fly={{duration: 100}}>
+  <svelte:component this={component} {...props} />
 </div>

src/routes/spaces/[nrelay]/+layout.svelte

@@ -70,7 +70,7 @@
         {#if showMenu}
           <Popover hideOnClick onClose={toggleMenu}>
             <ul
-              transition:fly|local
+              transition:fly
               class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
               {#if $userMembership?.topicsByUrl.has(url)}
                 <li class="text-error">
@@ -92,29 +92,29 @@
         {/if}
       </div>
       <div class="my-3 h-px bg-base-200" />
-      <div in:fly|local>
+      <div in:fly>
         <SecondaryNavItem href={makeSpacePath(url)}>
           <Icon icon="chat-round" /> Chat
         </SecondaryNavItem>
       </div>
-      <div in:fly|local={{delay: getDelay(true)}}>
+      <div in:fly={{delay: getDelay(true)}}>
         <SecondaryNavItem href={makeSpacePath(url, "threads")}>
           <Icon icon="notes-minimalistic" /> Threads
         </SecondaryNavItem>
       </div>
-      <div in:fly|local={{delay: getDelay()}}>
+      <div in:fly={{delay: getDelay()}}>
         <SecondaryNavItem href={makeSpacePath(url, "calendar")}>
           <Icon icon="calendar-minimalistic" /> Calendar
         </SecondaryNavItem>
       </div>
       {#if rooms.length > 0}
-        <div transition:slide|local={{delay: getDelay()}}>
+        <div transition:slide={{delay: getDelay()}}>
           <div class="h-2" />
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         </div>
       {/if}
       {#each rooms as topic, i (topic)}
-        <div transition:slide|local={{delay: getDelay()}}>
+        <div transition:slide={{delay: getDelay()}}>
           <SecondaryNavItem href={makeSpacePath(url, topic)}>
             <Icon icon="hashtag" />
             {topic}
@@ -122,7 +122,7 @@
         </div>
       {/each}
       {#if otherRooms.length > 0}
-        <div transition:slide|local={{delay: getDelay()}}>
+        <div transition:slide={{delay: getDelay()}}>
           <div class="h-2" />
           <SecondaryNavHeader>
             {#if rooms.length > 0}
@@ -134,14 +134,14 @@
         </div>
       {/if}
       {#each otherRooms as topic, i (topic)}
-        <div transition:slide|local={{delay: getDelay()}}>
+        <div transition:slide={{delay: getDelay()}}>
           <SecondaryNavItem href={makeSpacePath(url, topic)}>
             <Icon icon="hashtag" />
             {topic}
           </SecondaryNavItem>
         </div>
       {/each}
-      <div in:fly|local={{delay: getDelay()}}>
+      <div in:fly={{delay: getDelay()}}>
         <SecondaryNavItem on:click={addRoom}>
           <Icon icon="add-circle" />
           Create room