Feature/backdate (#258)

* added capability to backdate post on published docs

* componentize Date Picker, add Time Picker, mock up date and time pickers
in publish show and update flow

* wire up backdating posts from the publish flow. still broken from update
button

* wire up updating pubish date on published post

* just bold some stuff

* open calendars to corrent months and times by default

actions/publishToPublication.ts

···
   tags,
   cover_image,
   entitiesToDelete,
+  publishedAt,
 }: {
   root_entity: string;
   publication_uri?: string;
···
   tags?: string[];
   cover_image?: string | null;
   entitiesToDelete?: string[];
+  publishedAt?: string;
 }): Promise<PublishResult> {
   let identity = await getIdentityData();
   if (!identity || !identity.atp_did) {
···
     credentialSession.did!,
   );
 
-  let existingRecord =
-    (draft?.documents?.data as PubLeafletDocument.Record | undefined) || {};
+  let existingRecord = draft?.documents?.data as
+    | PubLeafletDocument.Record
+    | undefined;
 
   // Extract theme for standalone documents (not for publications)
   let theme: PubLeafletPublication.Theme | undefined;
···
   }
 
   let record: PubLeafletDocument.Record = {
-    publishedAt: new Date().toISOString(),
-    ...existingRecord,
     $type: "pub.leaflet.document",
     author: credentialSession.did!,
     ...(publication_uri && { publication: publication_uri }),
···
         };
       }
     }),
+    publishedAt:
+      publishedAt || existingRecord?.publishedAt || new Date().toISOString(),
   };
 
   // Keep the same rkey if updating an existing document

app/[leaflet_id]/actions/PublishButton.tsx

···
 import { DotLoader } from "components/utils/DotLoader";
 import { PubLeafletPublication } from "lexicons/api";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useIsMobile } from "src/hooks/isMobile";
 import { useReplicache, useEntity } from "src/replicache";
 import { useSubscribe } from "src/replicache/useSubscribe";
···
 import { moveLeafletToPublication } from "actions/publications/moveLeafletToPublication";
 import { AddTiny } from "components/Icons/AddTiny";
 import { OAuthErrorMessage, isOAuthSessionError } from "components/OAuthError";
+import { useLocalPublishedAt } from "components/Pages/Backdater";
 
 export const PublishButton = (props: { entityID: string }) => {
   let { data: pub } = useLeafletPublicationData();
···
     tx.get<string | null>("publication_cover_image"),
   );
 
+  // Get local published at from Replicache (session-only state, not persisted to DB)
+  let publishedAt = useLocalPublishedAt((s) =>
+    pub?.doc ? s[pub?.doc] : undefined,
+  );
+
   return (
     <ActionButton
       primary
···
           description: currentDescription,
           tags: currentTags,
           cover_image: coverImage,
+          publishedAt: publishedAt?.toISOString(),
         });
         setIsLoading(false);
         mutate();
···
 
         toaster({
           content: (
-            <div>
+            <div className="font-bold">
               {pub.doc ? "Updated! " : "Published! "}
               <SpeedyLink className="underline" href={docUrl}>
                 See Published Post

app/[leaflet_id]/publish/PublishPost.tsx

···
 import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
 import { PubIcon } from "components/ActionBar/Publications";
 import { OAuthErrorMessage, isOAuthSessionError } from "components/OAuthError";
+import { DatePicker, TimePicker } from "components/DatePicker";
+import { Popover } from "components/Popover";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+import { Separator } from "react-aria-components";
+import { setHours, setMinutes } from "date-fns";
 
 type Props = {
   title: string;
···
   );
   let [localTags, setLocalTags] = useState<string[]>([]);
 
+  let [localPublishedAt, setLocalPublishedAt] = useState<Date | undefined>(
+    undefined,
+  );
   // Get cover image from Replicache
   let replicacheCoverImage = useSubscribe(rep, (tx) =>
     tx.get<string | null>("publication_cover_image"),
   );
 
   // Use Replicache tags only when we have a draft
-  const hasDraft = props.hasDraft;
-  const currentTags = hasDraft
+  const currentTags = props.hasDraft
     ? Array.isArray(replicacheTags)
       ? replicacheTags
       : []
···
 
   // Update tags via Replicache mutation or local state depending on context
   const handleTagsChange = async (newTags: string[]) => {
-    if (hasDraft) {
+    if (props.hasDraft) {
       await rep?.mutate.updatePublicationDraft({
         tags: newTags,
       });
···
       tags: currentTags,
       cover_image: replicacheCoverImage,
       entitiesToDelete: props.entitiesToDelete,
+      publishedAt: localPublishedAt?.toISOString() || new Date().toISOString(),
     });
 
     if (!result.success) {
···
             record={props.record}
           />
           <hr className="border-border" />
-          <ShareOptions
-            setShareOption={setShareOption}
-            shareOption={shareOption}
-            charCount={charCount}
-            setCharCount={setCharCount}
-            editorStateRef={editorStateRef}
-            {...props}
+
+          <BackdateOptions
+            publishedAt={localPublishedAt}
+            setPublishedAt={setLocalPublishedAt}
           />
           <hr className="border-border " />
+
           <div className="flex flex-col gap-2">
             <h4>Tags</h4>
             <TagSelector
···
               setSelectedTags={handleTagsChange}
             />
           </div>
+          <hr className="border-border" />
+          <ShareOptions
+            setShareOption={setShareOption}
+            shareOption={shareOption}
+            charCount={charCount}
+            setCharCount={setCharCount}
+            editorStateRef={editorStateRef}
+            {...props}
+          />
           <hr className="border-border mb-2" />
 
           <div className="flex flex-col gap-2">
···
   );
 };
 
+const BackdateOptions = (props: {
+  publishedAt: Date | undefined;
+  setPublishedAt: (date: Date | undefined) => void;
+}) => {
+  const formattedDate = useLocalizedDate(
+    props.publishedAt?.toISOString() || "",
+    {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true,
+    },
+  );
+
+  const [timeValue, setTimeValue] = useState<string>(() => {
+    const date = props.publishedAt || new Date();
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+  });
+
+  let currentTime = `${new Date().getHours().toString().padStart(2, "0")}:${new Date().getMinutes().toString().padStart(2, "0")}`;
+
+  const handleTimeChange = (time: string) => {
+    setTimeValue(time);
+    if (!props.publishedAt) return;
+
+    const [hours, minutes] = time.split(":").map((str) => parseInt(str, 10));
+    const newDate = setHours(setMinutes(props.publishedAt, minutes), hours);
+    const currentDate = new Date();
+
+    if (newDate > currentDate) {
+      props.setPublishedAt(currentDate);
+      setTimeValue(currentTime);
+    } else props.setPublishedAt(newDate);
+  };
+
+  const handleDateChange = (date: Date | undefined) => {
+    if (!date) {
+      props.setPublishedAt(undefined);
+      return;
+    }
+    const [hours, minutes] = timeValue
+      .split(":")
+      .map((str) => parseInt(str, 10));
+    const newDate = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      hours,
+      minutes,
+    );
+    const currentDate = new Date();
+    if (newDate > currentDate) {
+      props.setPublishedAt(currentDate);
+      setTimeValue(currentTime);
+    } else props.setPublishedAt(newDate);
+  };
+
+  return (
+    <div className="flex justify-between gap-2">
+      <h4>Publish Date</h4>
+      <Popover
+        className="w-64 px-2!"
+        trigger={
+          props.publishedAt ? (
+            <div className="text-secondary">{formattedDate}</div>
+          ) : (
+            <div className="text-tertiary italic">now</div>
+          )
+        }
+      >
+        <div className="flex flex-col gap-3">
+          <DatePicker
+            selected={props.publishedAt}
+            onSelect={handleDateChange}
+            disabled={(date) => date > new Date()}
+          />
+          <Separator className="border-border" />
+          <div className="flex gap-4 pb-1 items-center">
+            <TimePicker value={timeValue} onChange={handleTimeChange} />
+          </div>
+        </div>
+      </Popover>
+    </div>
+  );
+};
+
 const ShareOptions = (props: {
   shareOption: "quiet" | "bluesky";
   setShareOption: (option: typeof props.shareOption) => void;
···
 }) => {
   return (
     <div className="flex flex-col gap-2">
-      <h4>Notifications</h4>
+      <h4>Share and Notify</h4>
       <Radio
         checked={props.shareOption === "quiet"}
         onChange={(e) => {

components/Blocks/DateTimeBlock.tsx

···
 import { useEntity, useReplicache } from "src/replicache";
 import { BlockProps, BlockLayout } from "./Block";
-import { ChevronProps, DayPicker } from "react-day-picker";
 import { Popover } from "components/Popover";
 import { useEffect, useMemo, useState } from "react";
 import { useEntitySetContext } from "components/EntitySetProvider";
···
 import { Checkbox } from "components/Checkbox";
 import { useHasPageLoaded } from "components/InitialPageLoadProvider";
 import { useSpring, animated } from "@react-spring/web";
-import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 import { BlockCalendarSmall } from "components/Icons/BlockCalendarSmall";
+import { DatePicker } from "components/DatePicker";
 
 export function DateTimeBlock(props: BlockProps) {
   const [isClient, setIsClient] = useState(false);
···
       }
     >
       <div className="flex flex-col gap-3 ">
-        <DayPicker
-          components={{
-            Chevron: (props: ChevronProps) => <CustomChevron {...props} />,
-          }}
-          classNames={{
-            months: "relative",
-            month_caption:
-              "font-bold text-center w-full bg-border-light mb-2 py-1 rounded-md",
-            button_next:
-              "absolute right-0 top-1 p-1 text-secondary hover:text-accent-contrast  flex align-center",
-            button_previous:
-              "absolute left-0 top-1  p-1 text-secondary hover:text-accent-contrast rotate-180 flex align-center ",
-            chevron: "text-inherit",
-            month_grid: "w-full table-fixed",
-            weekdays: "text-secondary text-sm",
-            selected: "bg-accent-1! text-accent-2 rounded-md font-bold",
-
-            day: "h-[34px]  text-center rounded-md sm:hover:bg-border-light",
-            outside: "text-border",
-            today: "font-bold",
-          }}
-          mode="single"
+        <DatePicker
           selected={dateFact ? selectedDate : undefined}
           onSelect={handleDaySelect}
         />
···
   let spring = useSpring({ opacity: props.active ? 1 : 0 });
   return <animated.div style={spring}>{props.children}</animated.div>;
 };
-
-const CustomChevron = (props: ChevronProps) => {
-  return (
-    <div {...props} className="w-full  pointer-events-none">
-      <ArrowRightTiny />
-    </div>
-  );
-};

components/DatePicker.tsx

···
+import { ChevronProps, DayPicker as ReactDayPicker } from "react-day-picker";
+import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
+
+const CustomChevron = (props: ChevronProps) => {
+  return (
+    <div {...props} className="w-full pointer-events-none">
+      <ArrowRightTiny />
+    </div>
+  );
+};
+
+interface DayPickerProps {
+  selected: Date | undefined;
+  onSelect: (date: Date | undefined) => void;
+  disabled?: (date: Date) => boolean;
+}
+
+export const DatePicker = ({
+  selected,
+  onSelect,
+  disabled,
+}: DayPickerProps) => {
+  return (
+    <ReactDayPicker
+      components={{
+        Chevron: (props: ChevronProps) => <CustomChevron {...props} />,
+      }}
+      classNames={{
+        months: "relative",
+        month_caption:
+          "font-bold text-center w-full bg-border-light mb-2 py-1 rounded-md",
+        button_next:
+          "absolute right-0 top-1 p-1 text-secondary hover:text-accent-contrast flex align-center",
+        button_previous:
+          "absolute left-0 top-1 p-1 text-secondary hover:text-accent-contrast rotate-180 flex align-center",
+        chevron: "text-inherit",
+        month_grid: "w-full table-fixed",
+        weekdays: "text-secondary text-sm",
+        selected: "bg-accent-1! text-accent-2 rounded-md font-bold",
+        day: "h-[34px] text-center rounded-md sm:hover:bg-border-light",
+        outside: "text-tertiary",
+        today: "font-bold",
+        disabled: "text-border cursor-not-allowed hover:bg-transparent!",
+      }}
+      mode="single"
+      selected={selected}
+      defaultMonth={selected}
+      onSelect={onSelect}
+      disabled={disabled}
+    />
+  );
+};
+
+export const TimePicker = (props: {
+  value: string;
+  onChange: (time: string) => void;
+  className?: string;
+}) => {
+  let handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    props.onChange(e.target.value);
+  };
+
+  return (
+    <input
+      type="time"
+      value={props.value}
+      onChange={handleTimeChange}
+      className={`dateBlockTimeInput input-with-border bg-bg-page text-primary w-full ${props.className}`}
+    />
+  );
+};

components/Pages/Backdater.tsx

···
+"use client";
+import { DatePicker, TimePicker } from "components/DatePicker";
+import { useMemo, useState } from "react";
+import { timeAgo } from "src/utils/timeAgo";
+import { Popover } from "components/Popover";
+import { Separator } from "react-aria-components";
+import { useReplicache } from "src/replicache";
+import { create } from "zustand";
+
+export const useLocalPublishedAt = create<{ [uri: string]: Date }>(() => ({}));
+export const Backdater = (props: { publishedAt: string; docURI: string }) => {
+  let { rep } = useReplicache();
+  let localPublishedAtDate = useLocalPublishedAt((s) =>
+    s[props.docURI] ? s[props.docURI] : null,
+  );
+  let localPublishedAt = useMemo(
+    () => localPublishedAtDate || new Date(props.publishedAt),
+    [localPublishedAtDate, props.publishedAt],
+  );
+
+  let [timeValue, setTimeValue] = useState(
+    `${localPublishedAt.getHours().toString().padStart(2, "0")}:${localPublishedAt.getMinutes().toString().padStart(2, "0")}`,
+  );
+
+  let currentTime = `${new Date().getHours().toString().padStart(2, "0")}:${new Date().getMinutes().toString().padStart(2, "0")}`;
+
+  const handleTimeChange = async (time: string) => {
+    setTimeValue(time);
+    const [hours, minutes] = time.split(":").map((str) => parseInt(str, 10));
+    const newDate = new Date(localPublishedAt);
+    newDate.setHours(hours);
+    newDate.setMinutes(minutes);
+
+    let currentDate = new Date();
+    if (newDate > currentDate) {
+      useLocalPublishedAt.setState({ [props.docURI]: currentDate });
+      setTimeValue(currentTime);
+    } else {
+      useLocalPublishedAt.setState({ [props.docURI]: newDate });
+    }
+  };
+
+  const handleDateChange = async (date: Date | undefined) => {
+    if (!date) return;
+    const [hours, minutes] = timeValue
+      .split(":")
+      .map((str) => parseInt(str, 10));
+    const newDate = new Date(date);
+    newDate.setHours(hours);
+    newDate.setMinutes(minutes);
+
+    let currentDate = new Date();
+    if (newDate > currentDate) {
+      useLocalPublishedAt.setState({ [props.docURI]: currentDate });
+
+      setTimeValue(currentTime);
+    } else {
+      useLocalPublishedAt.setState({ [props.docURI]: newDate });
+    }
+  };
+
+  return (
+    <Popover
+      className="w-64 z-10 px-2!"
+      trigger={
+        <div className="underline">
+          {timeAgo(localPublishedAt.toISOString())}
+        </div>
+      }
+    >
+      <div className="flex flex-col gap-3">
+        <DatePicker
+          selected={localPublishedAt}
+          onSelect={handleDateChange}
+          disabled={(date) => date > new Date()}
+        />
+        <Separator className="border-border" />
+        <div className="flex gap-4 pb-1 items-center">
+          <TimePicker value={timeValue} onChange={handleTimeChange} />
+        </div>
+      </div>
+    </Popover>
+  );
+};

components/Pages/PublicationMetadata.tsx

···
 import { TagSelector } from "components/Tags";
 import { useIdentityData } from "components/IdentityProvider";
 import { PostHeaderLayout } from "app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader";
+import { Backdater } from "./Backdater";
+
 export const PublicationMetadata = () => {
   let { rep } = useReplicache();
   let { data: pub } = useLeafletPublicationData();
···
           {pub.doc ? (
             <div className="flex gap-2 items-center">
               <p className="text-sm text-tertiary">
-                Published {publishedAt && timeAgo(publishedAt)}
+                Published{" "}
+                {publishedAt && (
+                  <Backdater publishedAt={publishedAt} docURI={pub.doc} />
+                )}
               </p>
 
               <Link

src/replicache/mutations.ts

···
   description?: string;
   tags?: string[];
   cover_image?: string | null;
+  localPublishedAt?: string | null;
 }> = async (args, ctx) => {
   await ctx.runOnServer(async (serverCtx) => {
     console.log("updating");
···
     }
   });
   await ctx.runOnClient(async ({ tx }) => {
-    if (args.title !== undefined)
-      await tx.set("publication_title", args.title);
+    if (args.title !== undefined) await tx.set("publication_title", args.title);
     if (args.description !== undefined)
       await tx.set("publication_description", args.description);
     if (args.tags !== undefined) await tx.set("publication_tags", args.tags);
     if (args.cover_image !== undefined)
       await tx.set("publication_cover_image", args.cover_image);
+    if (args.localPublishedAt !== undefined)
+      await tx.set("publication_local_published_at", args.localPublishedAt);
   });
 };