✨ Planning Publish

pkg/view/src/components/PostPublish.tsx

@@ -2,6 +2,7 @@ import { createSignal, Show } from "solid-js";
 import { getAtk, useUserinfo } from "../stores/userinfo.tsx";
 
 import styles from "./PostPublish.module.css";
+import { closeModel, openModel } from "../scripts/modals.ts";
 
 export default function PostPublish(props: {
   replying?: any,
@@ -33,6 +34,7 @@ export default function PostPublish(props: {
         alias: data.alias ?? crypto.randomUUID().replace(/-/g, ""),
         title: data.title,
         content: data.content,
+        published_at: data.published_at ? new Date(data.published_at as string) : new Date(),
         repost_to: props.reposting?.id,
         reply_to: props.replying?.id
       })
@@ -96,23 +98,38 @@ export default function PostPublish(props: {
       </div>
 
       <Show when={props.reposting}>
-        <div role="alert" class="px-5 py-3 bg-base-200">
+        <div role="alert" class="bg-base-200 flex justify-between">
+          <div class="px-5 py-3">
             <i class="fa-solid fa-circle-info me-3"></i>
             You are reposting a post from <b>{props.reposting?.author?.name}</b>
           </div>
+          <button type="reset" class="btn btn-ghost w-12" disabled={submitting()}>
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
       </Show>
       <Show when={props.replying}>
-        <div role="alert" class="px-5 py-3 bg-base-200">
+        <div role="alert" class="bg-base-200 flex justify-between">
+          <div class="px-5 py-3">
             <i class="fa-solid fa-circle-info me-3"></i>
             You are replying a post from <b>{props.replying?.author?.name}</b>
           </div>
+          <button type="reset" class="btn btn-ghost w-12" disabled={submitting()}>
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
       </Show>
       <Show when={props.editing}>
-        <div role="alert" class="px-5 py-3 bg-base-200">
+        <div role="alert" class="bg-base-200 flex justify-between">
+          <div class="px-5 py-3">
             <i class="fa-solid fa-circle-info me-3"></i>
             You are editing a post published at{" "}
             <b>{new Date(props.editing?.created_at).toLocaleString()}</b>
           </div>
+          <button type="reset" class="btn btn-ghost w-12" disabled={submitting()}>
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
       </Show>
 
       <textarea name="content" value={props.editing?.content ?? ""}
@@ -120,16 +137,16 @@ export default function PostPublish(props: {
                 placeholder="What's happend?!" />
 
       <div id="publish-actions" class="flex justify-between border-y border-base-200">
-        <div>
+        <div class="flex">
-          <button type="button" class="btn btn-ghost">
+          <button type="button" class="btn btn-ghost w-12">
             <i class="fa-solid fa-paperclip"></i>
           </button>
+          <button type="button" class="btn btn-ghost w-12" onClick={() => openModel("#planning-publish")}>
+            <i class="fa-solid fa-calendar-day"></i>
+          </button>
         </div>
 
         <div>
-          <button type="reset" class="btn btn-ghost w-12" disabled={submitting()}>
-            <i class="fa-solid fa-xmark"></i>
-          </button>
           <button type="submit" class="btn btn-primary" disabled={submitting()}>
             <Show when={submitting()} fallback={props.editing ? "Save changes" : "Post a post"}>
               <span class="loading"></span>
@@ -137,6 +154,28 @@ export default function PostPublish(props: {
           </button>
         </div>
       </div>
+
+      <dialog id="planning-publish" class="modal">
+        <div class="modal-box">
+          <h3 class="font-bold text-lg mx-1">Planning Publish</h3>
+          <label class="form-control w-full mt-3">
+            <div class="label">
+              <span class="label-text">Published At</span>
+            </div>
+            <input name="published_at" type="datetime-local" placeholder="Pick a date"
+                   class="input input-bordered w-full" />
+            <div class="label">
+              <span class="label-text-alt">
+                Before this time, your post will not be visible for everyone.
+                You can modify this plan on Creator Hub.
+              </span>
+            </div>
+          </label>
+          <div class="modal-action">
+            <button type="button" class="btn" onClick={() => closeModel("#planning-publish")}>Close</button>
+          </div>
+        </div>
+      </dialog>
     </form>
   );
 }

pkg/view/src/pages/global.tsx

@@ -24,6 +24,18 @@ export default function DashboardPage() {
     }
   }
 
+  function setMeta(data: any, field: string, scroll = true) {
+    const meta: { [id: string]: any } = {
+      reposting: null,
+      replying: null,
+      editing: null
+    };
+    meta[field] = data;
+    setPublishMeta(meta);
+
+    if (scroll) window.scroll({ top: 0, behavior: "smooth" });
+  }
+
   const [publishMeta, setPublishMeta] = createStore<any>({
     replying: null,
     reposting: null,
@@ -49,7 +61,7 @@ export default function DashboardPage() {
         replying={publishMeta.replying}
         reposting={publishMeta.reposting}
         editing={publishMeta.editing}
-        onReset={() => setPublishMeta({ reposting: null, replying: null, editing: null })}
+        onReset={() => setMeta(null, "none", false)}
         onPost={() => readPosts()}
         onError={setError}
       />
@@ -58,9 +70,9 @@ export default function DashboardPage() {
         info={info()}
         onUpdate={readPosts}
         onError={setError}
-        onRepost={(item) => setPublishMeta({ reposting: item, replying: null, editing: null })}
+        onRepost={(item) => setMeta(item, "reposting")}
-        onReply={(item) => setPublishMeta({ reposting: null, replying: item, editing: null })}
+        onReply={(item) => setMeta(item, "replying")}
-        onEdit={(item) => setPublishMeta({ reposting: null, replying: null, editing: item })}
+        onEdit={(item) => setMeta(item, "editing")}
       />
     </>
   );

pkg/view/src/scripts/modals.ts

@@ -0,0 +1,7 @@
+export function openModel(selector: string) {
+  document.querySelector<HTMLDialogElement>(selector)?.showModal()
+}
+
+export function closeModel(selector: string) {
+  document.querySelector<HTMLDialogElement>(selector)?.close()
+}