wip

2026-09-27 09:35:47 -04:00 · 2024-11-02 17:54:30 +01:00
parent 5128784c2a
commit 1cfaef7683
15 changed files with 788 additions and 1078 deletions
@@ -101,7 +101,7 @@ app.get(tags.path, async (c) => {
  }

  const { data: tags, error } = await supabase
-    .from("blog_tags")
+    .from("tags")
    .select("name, slug")
    .eq("blog_id", blogId);

@@ -27,6 +27,7 @@
    "@next/mdx": "^14.2.15",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
@@ -79,6 +80,7 @@
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.1",
+    "date-fns": "^3.6.0",
    "dotenv": "^16.4.4",
    "embla-carousel-react": "^8.0.0",
    "formidable": "^3.5.1",
@@ -98,6 +100,7 @@
    "react": "18.2.0",
    "react-confetti": "^6.1.0",
    "react-datetime-picker": "^5.6.0",
+    "react-day-picker": "^8.10.1",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.9",
    "react-icons": "^4.8.0",
@@ -13,7 +13,7 @@ export const useBlogTags = ({ blogId }: UseTags) => {
    queryKey: ["tags"],
    queryFn: async () => {
      const { data, error } = await sb
-        .from("blog_tags")
+        .from("tags")
        .select("*")
        .eq("blog_id", blogId);
      if (error) {
@@ -37,7 +37,7 @@ export const useCreateBlogTag = () => {
      slug: string;
      blog_id: string;
    }) => {
-      const { data, error } = await sb.from("blog_tags").insert(category);
+      const { data, error } = await sb.from("tags").insert(category);
      if (error) {
        throw error;
      }
@@ -21,6 +21,7 @@ import { useRouter } from "next/router";
 import { Label } from "../ui/label";
 import Spinner from "../Spinner";
 import { IS_DEV } from "@/lib/constants";
+import { EditorDateInput } from "../ui/editor-date-input";

 type Tag = {
  id: string;
@@ -90,20 +91,20 @@ const EditorSettings = (props: Props) => {
    ).toISOString();
  }

-  useEffect(() => {
-    try {
-      const date = publishedAtToDate();
+  // useEffect(() => {
+  //   try {
+  //     const date = publishedAtToDate();

-      props.onChange({
-        tags: selectedTags,
-        metadata,
-        category_id: props.category_id || null,
-        published_at: date,
-      });
-    } catch (error) {
-      toast.error("Invalid date");
-    }
-  }, [publishedAt]);
+  //     props.onChange({
+  //       tags: selectedTags,
+  //       metadata,
+  //       category_id: props.category_id || null,
+  //       published_at: date,
+  //     });
+  //   } catch (error) {
+  //     toast.error("Invalid date");
+  //   }
+  // }, [publishedAt]);

  function addMetadata() {
    setMetadata([...metadata, { key: "", value: "" }]);
@@ -240,107 +241,7 @@ const EditorSettings = (props: Props) => {

      <EditorSettingsSection>
        <h2>Published date</h2>
-        <div className="flex gap-4">
-          <div>
-            <label className="text-xs text-zinc-500" htmlFor="date">
-              Date
-            </label>
-            <div className="flex gap-1">
-              <Input
-                type="number"
-                name="day"
-                placeholder="Day"
-                className="w-14 rounded-r-sm"
-                min="1"
-                max="31"
-                value={publishedAt.day}
-                onChange={(e) => {
-                  setPublishedAt({
-                    ...publishedAt,
-                    day: parseInt(e.target.value),
-                  });
-                }}
-              />
-              <Select
-                value={publishedAt.month.toString()}
-                onValueChange={(e) => {
-                  setPublishedAt({
-                    ...publishedAt,
-                    month: parseInt(e),
-                  });
-                }}
-              >
-                <SelectTrigger className="w-[120px] rounded-sm">
-                  <SelectValue placeholder="Month" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="0">January</SelectItem>
-                  <SelectItem value="1">February</SelectItem>
-                  <SelectItem value="2">March</SelectItem>
-                  <SelectItem value="3">April</SelectItem>
-                  <SelectItem value="4">May</SelectItem>
-                  <SelectItem value="5">June</SelectItem>
-                  <SelectItem value="6">July</SelectItem>
-                  <SelectItem value="7">August</SelectItem>
-                  <SelectItem value="8">September</SelectItem>
-                  <SelectItem value="9">October</SelectItem>
-                  <SelectItem value="10">November</SelectItem>
-                  <SelectItem value="11">December</SelectItem>
-                </SelectContent>
-              </Select>
-              <Input
-                type="number"
-                name="year"
-                placeholder="Year"
-                className="w-20 rounded-l-sm"
-                value={publishedAt.year}
-                onChange={(e) => {
-                  setPublishedAt({
-                    ...publishedAt,
-                    year: parseInt(e.target.value),
-                  });
-                }}
-              />
-            </div>
-          </div>
-          <div>
-            <label className="text-xs text-zinc-500" htmlFor="time">
-              Time
-            </label>
-            <div className="flex gap-1">
-              <Input
-                type="number"
-                name="hour"
-                placeholder="Hour"
-                className="w-14 rounded-r-sm"
-                min="0"
-                max="23"
-                value={publishedAt.hour}
-                onChange={(e) => {
-                  setPublishedAt({
-                    ...publishedAt,
-                    hour: parseInt(e.target.value),
-                  });
-                }}
-              />
-              <Input
-                type="number"
-                name="minute"
-                placeholder="Minute"
-                className="w-14 rounded-l-sm"
-                min="0"
-                max="59"
-                value={publishedAt.minute}
-                onChange={(e) => {
-                  setPublishedAt({
-                    ...publishedAt,
-                    minute: parseInt(e.target.value),
-                  });
-                }}
-              />
-            </div>
-          </div>
-        </div>
+        <EditorDateInput value={publishedAt} onChange={setPublishedAt} />
      </EditorSettingsSection>

      {IS_DEV && (
@@ -1,8 +1,19 @@
 /* eslint-disable @next/next/no-img-element */
 import { EditorContent, useEditor } from "@tiptap/react";
+import { motion, AnimatePresence } from "framer-motion";
 import React, { useEffect, useState } from "react";
 import { Button } from "../ui/button";
-import { SaveIcon, Settings2, List, CornerUpLeft, Tag, X } from "lucide-react";
+import {
+  SaveIcon,
+  Settings2,
+  List,
+  CornerUpLeft,
+  Tag,
+  X,
+  ChevronUp,
+  Copy,
+  Info,
+} from "lucide-react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { ImagePicker } from "../Images/ImagePicker";
@@ -23,6 +34,7 @@ import {
  DropdownMenuTrigger,
  DropdownMenuSeparator,
 } from "../ui/dropdown-menu";
+import { Calendar } from "../ui/calendar";
 import { usePostsQuery } from "@/queries/posts";
 import { IoClose } from "react-icons/io5";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
@@ -44,6 +56,14 @@ import { Dialog, DialogContent } from "../ui/dialog";
 import { getHostedBlogUrl } from "@/utils/get-hosted-blog-url";
 import { useCategories } from "@/queries/categories";
 import Image from "next/image";
+import { EditorDateInput } from "../ui/editor-date-input";
+import { EditorCategoryPicker } from "./editor-category-picker";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";

 const formSchema = z.object({
  title: z.string(),
@@ -101,13 +121,11 @@ export const ZendoEditor = (props: Props) => {
  const [published, setPublished] = React.useState(
    props.post?.published || false
  );
-  const { data: categories, isLoading: categoriesLoading } =
+  const { data: categories, isLoading: isCategoriesLoading } =
    useCategories(blogId);
-  const selectedCategory = categories?.find(
-    (c) => c.id === getValues("category_id")
-  );

  const [metadata, setMetadata] = React.useState(props.post?.metadata || []);
+  console.log(props.tags);
  const [tags, setTags] = React.useState(props.tags || []);
  const [publishedAt, setPublishedAt] = React.useState<string | undefined>(
    props.post?.published_at || ""
@@ -290,6 +308,10 @@ export const ZendoEditor = (props: Props) => {
    titleEl.style.height = titleEl?.scrollHeight + "px";
  }, [title]);

+  const [showPublishedAtDropdown, setShowPublishedAtDropdown] = useState(false);
+
+  const [showPropertyList, setShowPropertyList] = useState(true);
+
  return (
    <div className="min-h-screen pb-24">
      <form
@@ -400,7 +422,11 @@ export const ZendoEditor = (props: Props) => {
                <Settings2 size={16} /> Settings
              </Button>
            </SheetTrigger>
-            <SheetContent hideClose className="bg-zinc-50">
+            <SheetContent
+              hideClose
+              className="overflow-y-auto bg-zinc-50"
+              tabIndex={-1}
+            >
              <EditorSettings
                title={title}
                metadata={metadata as any}
@@ -447,23 +473,7 @@ export const ZendoEditor = (props: Props) => {
        )}

        <div className="mx-auto w-full max-w-3xl px-8 pb-2">
-          <div className="flex w-full items-end justify-between gap-4 pt-1 transition-all">
-            <label
-              className="group flex w-full flex-col items-start justify-center gap-1"
-              htmlFor="slug"
-            >
-              <span className="mx-2 text-xs text-zinc-400 opacity-0 transition-all group-focus-within:opacity-100">
-                Slug
-              </span>
-              <input
-                required
-                placeholder="a-great-title"
-                type="text"
-                {...register("slug")}
-                className="w-full rounded-lg border border-transparent bg-transparent p-1 font-mono text-sm text-zinc-500 outline-none transition-all hover:bg-white focus:bg-zinc-100"
-                autoComplete="off"
-              />
-            </label>
+          <div className="mt-8 flex w-full items-end justify-between gap-4  transition-all">
            <ImagePicker
              open={showImagePicker}
              onOpenChange={setShowImagePicker}
@@ -476,7 +486,7 @@ export const ZendoEditor = (props: Props) => {
            >
              <Button
                variant={"ghost"}
-                className="text-zinc-600 hover:bg-white"
+                className="px-0 text-zinc-500 hover:bg-white"
              >
                <span className="flex gap-1.5 whitespace-nowrap !text-xs">
                  <BsFillImageFill className="h-4 w-4 text-zinc-400" />
@@ -498,68 +508,175 @@ export const ZendoEditor = (props: Props) => {
              }
            }}
            className="mt-1 w-full overflow-hidden
-            rounded-xl bg-transparent p-1 text-4xl font-medium text-zinc-700 outline-none"
+            rounded-xl bg-transparent text-4xl font-semibold text-zinc-900 outline-none"
          />
-          <div className="group flex items-center gap-1">
-            <TagPicker
-              allTags={blogTags.data || []}
-              selectedTags={tags}
-              onChange={(newTags) => {
-                setTags(newTags);
-              }}
-              blogId={blogId}
-              open={showTagPicker}
-              onOpenChange={setShowTagPicker}
-            >
-              <div></div>
-            </TagPicker>
-            {tags.length > 0 && (
-              <div className="flex flex-wrap items-center gap-1">
-                {tags.map((tag) => (
-                  <span
-                    key={tag.id}
-                    className="flex rounded-full bg-zinc-100 font-mono text-xs font-medium"
-                  >
-                    <div className="p-1 pl-2 pr-0">
-                      {blogTags.data?.find((t) => t.id === tag.id)?.name}
-                    </div>
-                    <button
-                      tabIndex={-1}
+          <AnimatePresence>
+            {showPropertyList && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+                className="mt-6 grid grid-cols-4 gap-2 gap-y-2 overflow-hidden text-zinc-500"
+              >
+                <EditorPropLabel tooltip="The slug is a unique identifier for your post, used in the URL.">
+                  Slug
+                </EditorPropLabel>
+                <EditorPropValue>
+                  <div className="flex w-full items-center gap-1 py-1 pl-3 pr-1">
+                    <textarea
+                      className="field-sizinc w-full resize-none truncate bg-transparent font-mono outline-none"
+                      rows={1}
+                      value={slug}
+                      onChange={(e) => {
+                        setValue("slug", e.target.value);
+                      }}
+                    />
+                    <Button
+                      variant={"ghost"}
+                      size="icon"
                      onClick={() => {
-                        setTags(tags.filter((t) => t.id !== tag.id));
+                        navigator.clipboard.writeText(slug);
+                        toast.success("Copied to clipboard");
                      }}
-                      className="rounded-full p-1 pr-2"
                    >
-                      <X size="10" />
-                    </button>
-                  </span>
-                ))}
-              </div>
+                      <Copy size={16} />
+                    </Button>
+                  </div>
+                </EditorPropValue>
+                <EditorPropLabel tooltip="The date your post was published.">
+                  Published at
+                </EditorPropLabel>
+                <EditorPropValue
+                  onClick={() => setShowPublishedAtDropdown(true)}
+                  className="relative"
+                >
+                  <DropdownMenu
+                    onOpenChange={setShowPublishedAtDropdown}
+                    open={showPublishedAtDropdown}
+                    modal={false}
+                  >
+                    <DropdownMenuTrigger className="w-full px-3 py-1 text-left">
+                      {publishedAt
+                        ? new Date(publishedAt).toLocaleDateString("en-US", {
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                          })
+                        : "Empty"}
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                      <Calendar
+                        mode="single"
+                        selected={
+                          publishedAt ? new Date(publishedAt) : undefined
+                        }
+                        onSelect={(date) => {
+                          setPublishedAt(date?.toISOString() || "");
+                          setShowPublishedAtDropdown(false);
+                        }}
+                        initialFocus
+                      />
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </EditorPropValue>
+                <EditorPropLabel tooltip="A short description of your post. Recommended to be 155 characters or less.">
+                  Excerpt
+                </EditorPropLabel>
+                <EditorPropValue>
+                  <textarea
+                    className="field-size-zinc w-full resize-none bg-transparent px-3 py-1 font-mono text-sm outline-none"
+                    rows={3}
+                    onChange={(e) => {
+                      setValue("excerpt", e.target.value);
+                    }}
+                    value={watch("excerpt") || ""}
+                  />
+                  {watch("excerpt") && (
+                    <div className="absolute -bottom-4 right-2 text-xs text-zinc-400 opacity-0 transition-all group-focus-within:opacity-100">
+                      {(watch("excerpt") || "").length}/155
+                    </div>
+                  )}
+                </EditorPropValue>
+                <EditorPropLabel tooltip="Posts can have one category. Good for organizing your posts and creating more pages in your blog.">
+                  Category
+                </EditorPropLabel>
+                <EditorPropValue>
+                  <EditorCategoryPicker
+                    isLoading={isCategoriesLoading}
+                    categories={categories || []}
+                    onChange={(e) => {
+                      setValue("category_id", e);
+                    }}
+                    value={watch("category_id")}
+                  />
+                </EditorPropValue>
+                <EditorPropLabel tooltip="Posts can have multiple tags. Good for finding related posts.">
+                  Tags
+                </EditorPropLabel>
+                <EditorPropValue onClick={() => setShowTagPicker(true)}>
+                  <div className="flex items-center gap-1 px-3 py-1">
+                    {JSON.stringify(tags.length)}
+                    <TagPicker
+                      allTags={blogTags.data || []}
+                      selectedTags={tags}
+                      onChange={(newTags) => {
+                        setTags(newTags);
+                      }}
+                      blogId={blogId}
+                      open={showTagPicker}
+                      onOpenChange={setShowTagPicker}
+                    >
+                      <div className="mt-6"></div>
+                    </TagPicker>
+                    {tags.length === 0 && "Select some tags"}
+                    {tags.length > 0 && (
+                      <div className="flex flex-wrap items-center gap-1">
+                        {tags.map((tag) => (
+                          <span
+                            key={tag.id}
+                            className="flex items-center rounded-md bg-zinc-100 font-mono text-xs font-medium"
+                          >
+                            <div className="p-1 pl-2 pr-0">
+                              {
+                                blogTags.data?.find((t) => t.id === tag.id)
+                                  ?.name
+                              }
+                            </div>
+                            <button
+                              tabIndex={-1}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setTags(tags.filter((t) => t.id !== tag.id));
+                              }}
+                              className="rounded-full p-1 pr-2"
+                            >
+                              <X size="12" />
+                            </button>
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </EditorPropValue>
+              </motion.div>
            )}
-            <button
-              tabIndex={-1}
-              onClick={() => {
-                setShowTagPicker(true);
-              }}
-              className={cn(
-                "flex items-center gap-1 whitespace-nowrap rounded-md px-1.5 py-1 text-xs text-zinc-400 opacity-0 transition-all hover:text-zinc-700 group-hover:opacity-100",
-                {
-                  "opacity-100": tags.length === 0,
-                }
-              )}
-            >
-              <Tag size="14" className="text-zinc-300" />
-              Add tags
-            </button>
-          </div>
+          </AnimatePresence>

-          <div className="mt-4 text-sm text-zinc-800">
-            <textarea
-              {...register("excerpt")}
-              className="w-full resize-none rounded-lg p-1.5 outline-none transition-all focus:bg-zinc-100"
-              placeholder="Excerpt"
+          <Button
+            variant={"ghost"}
+            className="px-0 opacity-50 hover:opacity-100"
+            onClick={() => setShowPropertyList(!showPropertyList)}
+          >
+            {showPropertyList ? "Hide properties" : "Show properties"}
+            <ChevronUp
+              className={cn(
+                "transition-all",
+                showPropertyList ? "" : "rotate-180"
+              )}
+              size={16}
            />
-          </div>
+          </Button>
        </div>
        <div
          className="group cursor-text"
@@ -612,3 +729,50 @@ export const ZendoEditor = (props: Props) => {
    </div>
  );
 };
+
+function EditorPropLabel({
+  children,
+  tooltip,
+}: {
+  children: React.ReactNode;
+  tooltip: string;
+}) {
+  return (
+    <div className="col-span-1 flex items-start gap-1 py-1 font-medium">
+      <div className="flex items-center gap-1">
+        {children}
+        <TooltipProvider>
+          <Tooltip delayDuration={300}>
+            <TooltipTrigger asChild>
+              <Info size={15} className="text-zinc-400" />
+            </TooltipTrigger>
+            <TooltipContent className="max-w-xs text-xs">
+              {tooltip}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    </div>
+  );
+}
+function EditorPropValue({
+  children,
+  onClick,
+  className,
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "group relative col-span-3 flex cursor-pointer items-center rounded-lg transition-all hover:bg-zinc-100/60 hover:text-zinc-800",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
@@ -0,0 +1,93 @@
+import { Category } from "@zenblog/types";
+import Spinner from "../Spinner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Plus, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CreateCategoryDialog } from "@/pages/blogs/[blogId]/categories";
+import { useState } from "react";
+
+export function EditorCategoryPicker({
+  isLoading,
+  categories,
+  onChange,
+  value,
+}: {
+  isLoading: boolean;
+  categories: {
+    id: number;
+    name: string;
+    slug: string;
+  }[];
+  onChange: (value: number | null) => void;
+  value: number | null;
+}) {
+  const [open, setOpen] = useState(false);
+  const hasCategory = value !== null;
+  const selectedCategory = categories.find((c) => c.id === value);
+  return (
+    <>
+      <CreateCategoryDialog open={open} setOpen={setOpen} />
+      {isLoading ? (
+        <div className="flex items-center justify-center">
+          <Spinner />
+        </div>
+      ) : (
+        <DropdownMenu modal={false}>
+          <div className="flex items-center">
+            <DropdownMenuTrigger className="w-full py-1 pl-3 pr-1 text-left">
+              {hasCategory ? selectedCategory?.name : "Select a category"}
+            </DropdownMenuTrigger>
+            {hasCategory && (
+              <button
+                className="p-1 text-zinc-500 hover:text-zinc-700"
+                onClick={() => onChange(null)}
+              >
+                <X size={15} />
+              </button>
+            )}
+          </div>
+          <DropdownMenuContent className="w-80" align="start">
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="flex items-center justify-between p-0 pl-2 text-xs">
+                Categories
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setOpen(true)}
+                >
+                  <Plus />
+                </Button>
+              </DropdownMenuLabel>
+              {categories?.map((category) => (
+                <DropdownMenuItem
+                  className={cn(
+                    value === category.id && "bg-zinc-100 text-orange-500"
+                  )}
+                  key={category.id + "-category"}
+                  onClick={() => onChange(category.id)}
+                >
+                  {category.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </>
+  );
+}
@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-slate-100/50 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-slate-800/50 dark:[&:has([aria-selected])]:bg-slate-800",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-slate-900 text-slate-50 hover:bg-slate-900 hover:text-slate-50 focus:bg-slate-900 focus:text-slate-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50 dark:hover:text-slate-900 dark:focus:bg-slate-50 dark:focus:text-slate-900",
+        day_today:
+          "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50",
+        day_outside:
+          "day-outside text-slate-500 opacity-50 aria-selected:bg-slate-100/50 aria-selected:text-slate-500 aria-selected:opacity-30 dark:text-slate-400 dark:aria-selected:bg-slate-800/50 dark:aria-selected:text-slate-400",
+        day_disabled: "text-slate-500 opacity-50 dark:text-slate-400",
+        day_range_middle:
+          "aria-selected:bg-slate-100 aria-selected:text-slate-900 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mx-1.5 max-h-[300px] min-w-[8rem] overflow-hidden overflow-y-auto rounded-xl border bg-white p-1.5 shadow-sm",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mx-1.5 max-h-[320px] min-w-[8rem] overflow-hidden overflow-y-auto rounded-xl border bg-white p-1.5 shadow-sm",
        className
      )}
      {...props}
@@ -0,0 +1,128 @@
+import { Input } from "./input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+type Value = {
+  day: number;
+  month: number;
+  year: number;
+  hour: number;
+  minute: number;
+};
+
+export function EditorDateInput({
+  value,
+  onChange,
+}: {
+  value: Value;
+  onChange: (value: Value) => void;
+}) {
+  return (
+    <div className="flex gap-4">
+      <div>
+        <label className="text-xs text-zinc-500" htmlFor="date">
+          Date
+        </label>
+        <div className="flex gap-1">
+          <Input
+            type="number"
+            name="day"
+            placeholder="Day"
+            className="w-14 rounded-r-sm"
+            min="1"
+            max="31"
+            value={value.day}
+            onChange={(e) => {
+              onChange({
+                ...value,
+                day: parseInt(e.target.value),
+              });
+            }}
+          />
+          <Select
+            value={value.month.toString()}
+            onValueChange={(e) => {
+              onChange({
+                ...value,
+                month: parseInt(e),
+              });
+            }}
+          >
+            <SelectTrigger className="w-[120px] rounded-sm">
+              <SelectValue placeholder="Month" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">January</SelectItem>
+              <SelectItem value="1">February</SelectItem>
+              <SelectItem value="2">March</SelectItem>
+              <SelectItem value="3">April</SelectItem>
+              <SelectItem value="4">May</SelectItem>
+              <SelectItem value="5">June</SelectItem>
+              <SelectItem value="6">July</SelectItem>
+              <SelectItem value="7">August</SelectItem>
+              <SelectItem value="8">September</SelectItem>
+              <SelectItem value="9">October</SelectItem>
+              <SelectItem value="10">November</SelectItem>
+              <SelectItem value="11">December</SelectItem>
+            </SelectContent>
+          </Select>
+          <Input
+            type="number"
+            name="year"
+            placeholder="Year"
+            className="w-20 rounded-l-sm"
+            value={value.year}
+            onChange={(e) => {
+              onChange({
+                ...value,
+                year: parseInt(e.target.value),
+              });
+            }}
+          />
+        </div>
+      </div>
+      <div>
+        <label className="text-xs text-zinc-500" htmlFor="time">
+          Time
+        </label>
+        <div className="flex gap-1">
+          <Input
+            type="number"
+            name="hour"
+            placeholder="Hour"
+            className="w-14 rounded-r-sm"
+            min="0"
+            max="23"
+            value={value.hour}
+            onChange={(e) => {
+              onChange({
+                ...value,
+                hour: parseInt(e.target.value),
+              });
+            }}
+          />
+          <Input
+            type="number"
+            name="minute"
+            placeholder="Minute"
+            className="w-14 rounded-l-sm"
+            min="0"
+            max="59"
+            value={value.minute}
+            onChange={(e) => {
+              onChange({
+                ...value,
+                minute: parseInt(e.target.value),
+              });
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/table";
 import { useBlogId } from "@/hooks/use-blog-id";
 import AppLayout, { Section } from "@/layouts/AppLayout";
+import { generateSlug } from "@/lib/utils/slugs";
 import {
  useCategoriesWithPostCount,
  useCreateCategory,
@@ -32,22 +33,28 @@ import {
  useUpdateCategoryMutation,
 } from "@/queries/categories";
 import { MoreHorizontal, Plus } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";

-export function CreateCategoryDialog() {
+export function CreateCategoryDialog({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
  const createCategory = useCreateCategory();
  const blogId = useBlogId();
-  const [open, setOpen] = useState(false);
+
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+
+  useEffect(() => {
+    setSlug(generateSlug(name));
+  }, [name]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" variant={"outline"}>
-          <Plus size={16} />
-          <div>Create category</div>
-        </Button>
-      </DialogTrigger>
      <DialogContent className="!max-w-sm">
        <DialogHeader>
          <DialogTitle>Create category</DialogTitle>
@@ -57,14 +64,11 @@ export function CreateCategoryDialog() {
          onSubmit={async (e) => {
            e.preventDefault();
            e.stopPropagation();
-            const formData = new FormData(e.target as HTMLFormElement);
-            const name = formData.get("name");
-            const slug = formData.get("slug");

            try {
              await createCategory.mutateAsync({
-                name: name as string,
-                slug: slug as string,
+                name,
+                slug,
                blog_id: blogId,
              });
              toast.success("Category created");
@@ -75,9 +79,23 @@ export function CreateCategoryDialog() {
          }}
        >
          <Label htmlFor="name">Name</Label>
-          <Input id="name" name="name" placeholder="Technology" />
+          <Input
+            id="name"
+            name="name"
+            placeholder="Technology"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
          <Label htmlFor="slug">Slug</Label>
-          <Input id="slug" name="slug" placeholder="technology" />
+          <Input
+            id="slug"
+            name="slug"
+            className="disabled:cursor-not-allowed disabled:opacity-50"
+            disabled={!name}
+            placeholder="technology"
+            value={slug}
+            onChange={(e) => setSlug(e.target.value)}
+          />
          <div className="flex justify-end">
            <Button type="submit">Create</Button>
          </div>
@@ -102,14 +120,20 @@ export default function CategoriesPage() {

  const [deleteCategoryOpen, setDeleteCategoryOpen] = useState(false);
  const deleteCategory = useDeleteCategoryMutation(blogId);
-
+  const [open, setOpen] = useState(false);
  return (
    <AppLayout
      title="Categories"
      loading={isLoading}
-      actions={<CreateCategoryDialog />}
+      actions={
+        <Button size="sm" variant={"outline"} onClick={() => setOpen(true)}>
+          <Plus size={16} />
+          <div>Create category</div>
+        </Button>
+      }
      description="Posts can have one category."
    >
+      <CreateCategoryDialog open={open} setOpen={setOpen} />
      <Section>
        <Table>
          <TableHeader>
@@ -23,17 +23,18 @@ export default function Post() {
  } = usePostQuery(postSlug, blogId);

  const tagsQuery = usePostTags({ blogId, postId: post?.data?.id || "" });
-
+  console.log("tagsquery", tagsQuery.data);
  const tags =
    tagsQuery.data?.map((tagRes) => {
      return {
-        id: tagRes.blog_tags?.id || "",
-        name: tagRes.blog_tags?.name || "",
-        slug: tagRes.blog_tags?.slug || "",
+        id: tagRes.tags?.id || "",
+        name: tagRes.tags?.name || "",
+        slug: tagRes.tags?.slug || "",
      };
    }) || [];

  const filteredTags = tags.filter((tag) => tag.id === undefined);
+  console.log("filteredTags", filteredTags);

  if (isLoading || tagsQuery.isLoading || isRefetching) {
    return (
@@ -37,7 +37,7 @@ export function useDeleteTagMutation(blogId: string) {
  return useMutation({
    mutationFn: async (tagId: string) => {
      const res = await supa
-        .from("blog_tags")
+        .from("tags")
        .delete()
        .eq("id", tagId)
        .eq("blog_id", blogId);
@@ -60,7 +60,7 @@ export function useUpdateTagMutation(blogId: string) {

  return useMutation({
    mutationFn: async (tag: { id: string; name: string; slug: string }) => {
-      const res = await supa.from("blog_tags").update(tag).eq("id", tag.id);
+      const res = await supa.from("tags").update(tag).eq("id", tag.id);

      if (res.error) {
        throw new Error(res.error.message);
@@ -89,8 +89,9 @@ export function usePostTags({
    queryFn: async () => {
      const { data } = await supa
        .from("post_tags")
-        .select("blog_tags(*)")
-        .eq("post_id", postId);
+        .select("tags(id, name, slug)")
+        .eq("post_id", postId)
+        .eq("tags.blog_id", blogId);

      return data;
    },
@@ -1,855 +0,0 @@
-export type Json =
-  | string
-  | number
-  | boolean
-  | null
-  | { [key: string]: Json | undefined }
-  | Json[]
-
-export type Database = {
-  public: {
-    Tables: {
-      authors: {
-        Row: {
-          bio: string | null
-          created_at: string
-          id: string
-          name: string
-          slug: string
-          twitter: string | null
-          updated_at: string
-          website: string | null
-        }
-        Insert: {
-          bio?: string | null
-          created_at?: string
-          id?: string
-          name: string
-          slug: string
-          twitter?: string | null
-          updated_at?: string
-          website?: string | null
-        }
-        Update: {
-          bio?: string | null
-          created_at?: string
-          id?: string
-          name?: string
-          slug?: string
-          twitter?: string | null
-          updated_at?: string
-          website?: string | null
-        }
-        Relationships: []
-      }
-      blog_authors: {
-        Row: {
-          author_id: string
-          blog_id: string
-          id: number
-        }
-        Insert: {
-          author_id: string
-          blog_id: string
-          id?: number
-        }
-        Update: {
-          author_id?: string
-          blog_id?: string
-          id?: number
-        }
-        Relationships: [
-          {
-            foreignKeyName: "blog_authors_author_id_fkey"
-            columns: ["author_id"]
-            isOneToOne: false
-            referencedRelation: "authors"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "blog_authors_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      blog_tags: {
-        Row: {
-          blog_id: string
-          created_at: string
-          description: string | null
-          id: string
-          name: string
-          slug: string
-          updated_at: string
-        }
-        Insert: {
-          blog_id: string
-          created_at?: string
-          description?: string | null
-          id?: string
-          name: string
-          slug: string
-          updated_at?: string
-        }
-        Update: {
-          blog_id?: string
-          created_at?: string
-          description?: string | null
-          id?: string
-          name?: string
-          slug?: string
-          updated_at?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "blog_tags_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      blogs: {
-        Row: {
-          access_token: string | null
-          created_at: string
-          description: string
-          emoji: string
-          id: string
-          instagram: string
-          order: Database["public"]["Enums"]["blog_sort_order"]
-          slug: string
-          theme: string
-          title: string
-          twitter: string
-          updated_at: string
-          user_id: string
-          website: string
-        }
-        Insert: {
-          access_token?: string | null
-          created_at?: string
-          description?: string
-          emoji: string
-          id?: string
-          instagram?: string
-          order?: Database["public"]["Enums"]["blog_sort_order"]
-          slug: string
-          theme?: string
-          title: string
-          twitter?: string
-          updated_at?: string
-          user_id?: string
-          website?: string
-        }
-        Update: {
-          access_token?: string | null
-          created_at?: string
-          description?: string
-          emoji?: string
-          id?: string
-          instagram?: string
-          order?: Database["public"]["Enums"]["blog_sort_order"]
-          slug?: string
-          theme?: string
-          title?: string
-          twitter?: string
-          updated_at?: string
-          user_id?: string
-          website?: string
-        }
-        Relationships: []
-      }
-      categories: {
-        Row: {
-          blog_id: string
-          created_at: string
-          id: number
-          name: string
-          slug: string
-        }
-        Insert: {
-          blog_id: string
-          created_at?: string
-          id?: number
-          name?: string
-          slug?: string
-        }
-        Update: {
-          blog_id?: string
-          created_at?: string
-          id?: number
-          name?: string
-          slug?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "categories_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      feedback: {
-        Row: {
-          created_at: string
-          feedback: string | null
-          id: number
-          type: string
-          user_email: string | null
-        }
-        Insert: {
-          created_at?: string
-          feedback?: string | null
-          id?: number
-          type?: string
-          user_email?: string | null
-        }
-        Update: {
-          created_at?: string
-          feedback?: string | null
-          id?: number
-          type?: string
-          user_email?: string | null
-        }
-        Relationships: []
-      }
-      homepage_signup: {
-        Row: {
-          created_at: string | null
-          email: string
-          id: number
-          invited: boolean
-          name: string
-        }
-        Insert: {
-          created_at?: string | null
-          email: string
-          id?: number
-          invited?: boolean
-          name: string
-        }
-        Update: {
-          created_at?: string | null
-          email?: string
-          id?: number
-          invited?: boolean
-          name?: string
-        }
-        Relationships: []
-      }
-      post_authors: {
-        Row: {
-          author_id: string
-          id: number
-          post_id: string
-        }
-        Insert: {
-          author_id: string
-          id?: number
-          post_id: string
-        }
-        Update: {
-          author_id?: string
-          id?: number
-          post_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "post_authors_author_id_fkey"
-            columns: ["author_id"]
-            isOneToOne: false
-            referencedRelation: "authors"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "post_authors_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "post_authors_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts_v4"
-            referencedColumns: ["post_id"]
-          },
-          {
-            foreignKeyName: "post_authors_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts_v5"
-            referencedColumns: ["post_id"]
-          },
-          {
-            foreignKeyName: "post_authors_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts_v6"
-            referencedColumns: ["post_id"]
-          },
-        ]
-      }
-      post_tags: {
-        Row: {
-          blog_id: string
-          created_at: string
-          id: number
-          post_id: string
-          tag_id: string
-        }
-        Insert: {
-          blog_id: string
-          created_at?: string
-          id?: number
-          post_id: string
-          tag_id: string
-        }
-        Update: {
-          blog_id?: string
-          created_at?: string
-          id?: number
-          post_id?: string
-          tag_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "post_tags_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "post_tags_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "post_tags_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts_v4"
-            referencedColumns: ["post_id"]
-          },
-          {
-            foreignKeyName: "post_tags_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts_v5"
-            referencedColumns: ["post_id"]
-          },
-          {
-            foreignKeyName: "post_tags_post_id_fkey"
-            columns: ["post_id"]
-            isOneToOne: false
-            referencedRelation: "posts_v6"
-            referencedColumns: ["post_id"]
-          },
-          {
-            foreignKeyName: "post_tags_tag_id_fkey"
-            columns: ["tag_id"]
-            isOneToOne: false
-            referencedRelation: "blog_tags"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "post_tags_tag_id_fkey"
-            columns: ["tag_id"]
-            isOneToOne: false
-            referencedRelation: "tag_usage_count_v2"
-            referencedColumns: ["tag_id"]
-          },
-        ]
-      }
-      posts: {
-        Row: {
-          blog_id: string
-          category_id: number | null
-          content: Json
-          cover_image: string | null
-          created_at: string
-          deleted: boolean
-          excerpt: string
-          html_content: string
-          id: string
-          metadata: Json[] | null
-          published: boolean
-          published_at: string | null
-          slug: string
-          title: string
-          updated_at: string
-          user_id: string
-        }
-        Insert: {
-          blog_id: string
-          category_id?: number | null
-          content?: Json
-          cover_image?: string | null
-          created_at?: string
-          deleted?: boolean
-          excerpt?: string
-          html_content?: string
-          id?: string
-          metadata?: Json[] | null
-          published?: boolean
-          published_at?: string | null
-          slug: string
-          title: string
-          updated_at?: string
-          user_id?: string
-        }
-        Update: {
-          blog_id?: string
-          category_id?: number | null
-          content?: Json
-          cover_image?: string | null
-          created_at?: string
-          deleted?: boolean
-          excerpt?: string
-          html_content?: string
-          id?: string
-          metadata?: Json[] | null
-          published?: boolean
-          published_at?: string | null
-          slug?: string
-          title?: string
-          updated_at?: string
-          user_id?: string
-        }
-        Relationships: [
-          {
-            foreignKeyName: "posts_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "posts_category_id_fkey"
-            columns: ["category_id"]
-            isOneToOne: false
-            referencedRelation: "categories"
-            referencedColumns: ["id"]
-          },
-          {
-            foreignKeyName: "posts_category_id_fkey"
-            columns: ["category_id"]
-            isOneToOne: false
-            referencedRelation: "category_post_count"
-            referencedColumns: ["category_id"]
-          },
-        ]
-      }
-      prices: {
-        Row: {
-          created_at: string
-          id: number
-          price: Json
-          stripe_price_id: string
-        }
-        Insert: {
-          created_at?: string
-          id?: number
-          price: Json
-          stripe_price_id: string
-        }
-        Update: {
-          created_at?: string
-          id?: number
-          price?: Json
-          stripe_price_id?: string
-        }
-        Relationships: []
-      }
-      products: {
-        Row: {
-          created_at: string
-          id: number
-          product: Json
-          stripe_product_id: string
-        }
-        Insert: {
-          created_at?: string
-          id?: number
-          product: Json
-          stripe_product_id: string
-        }
-        Update: {
-          created_at?: string
-          id?: number
-          product?: Json
-          stripe_product_id?: string
-        }
-        Relationships: []
-      }
-      subscriptions: {
-        Row: {
-          created_at: string
-          plan: string | null
-          status: string
-          stripe_subscription_id: string
-          subscription: Json
-          user_id: string
-        }
-        Insert: {
-          created_at?: string
-          plan?: string | null
-          status: string
-          stripe_subscription_id: string
-          subscription: Json
-          user_id: string
-        }
-        Update: {
-          created_at?: string
-          plan?: string | null
-          status?: string
-          stripe_subscription_id?: string
-          subscription?: Json
-          user_id?: string
-        }
-        Relationships: []
-      }
-      teams: {
-        Row: {
-          created_at: string
-          id: number
-          name: string
-          owner_id: string | null
-          ref: string | null
-        }
-        Insert: {
-          created_at?: string
-          id?: number
-          name: string
-          owner_id?: string | null
-          ref?: string | null
-        }
-        Update: {
-          created_at?: string
-          id?: number
-          name?: string
-          owner_id?: string | null
-          ref?: string | null
-        }
-        Relationships: []
-      }
-    }
-    Views: {
-      category_post_count: {
-        Row: {
-          category_id: number | null
-          category_name: string | null
-          category_slug: string | null
-          created_at: string | null
-          post_count: number | null
-        }
-        Relationships: []
-      }
-      posts_v4: {
-        Row: {
-          abstract: string | null
-          blog_id: string | null
-          blog_slug: string | null
-          content: Json | null
-          cover_image: string | null
-          created_at: string | null
-          deleted: boolean | null
-          html_content: string | null
-          metadata: Json[] | null
-          post_id: string | null
-          published: boolean | null
-          published_at: string | null
-          slug: string | null
-          subscription_status: string | null
-          tags: string[] | null
-          title: string | null
-          updated_at: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "posts_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      posts_v5: {
-        Row: {
-          blog_id: string | null
-          blog_slug: string | null
-          category_name: string | null
-          category_slug: string | null
-          content: Json | null
-          cover_image: string | null
-          created_at: string | null
-          deleted: boolean | null
-          excerpt: string | null
-          html_content: string | null
-          metadata: Json[] | null
-          post_id: string | null
-          published: boolean | null
-          published_at: string | null
-          slug: string | null
-          subscription_status: string | null
-          tags: string[] | null
-          title: string | null
-          updated_at: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "posts_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      posts_v6: {
-        Row: {
-          blog_id: string | null
-          blog_slug: string | null
-          category: Json | null
-          content: Json | null
-          cover_image: string | null
-          created_at: string | null
-          deleted: boolean | null
-          excerpt: string | null
-          html_content: string | null
-          metadata: Json[] | null
-          post_id: string | null
-          published: boolean | null
-          published_at: string | null
-          slug: string | null
-          subscription_status: string | null
-          tags: string[] | null
-          title: string | null
-          updated_at: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "posts_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      posts_v7: {
-        Row: {
-          blog_id: string | null
-          category: Json | null
-          content: Json | null
-          cover_image: string | null
-          created_at: string | null
-          deleted: boolean | null
-          excerpt: string | null
-          html_content: string | null
-          metadata: Json[] | null
-          published: boolean | null
-          published_at: string | null
-          slug: string | null
-          subscription_status: string | null
-          tags: Json[] | null
-          title: string | null
-          updated_at: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "posts_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-      tag_usage_count_v2: {
-        Row: {
-          blog_id: string | null
-          created_at: string | null
-          post_count: number | null
-          slug: string | null
-          tag_id: string | null
-          tag_name: string | null
-          updated_at: string | null
-        }
-        Relationships: [
-          {
-            foreignKeyName: "blog_tags_blog_id_fkey"
-            columns: ["blog_id"]
-            isOneToOne: false
-            referencedRelation: "blogs"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-    }
-    Functions: {
-      generate_random_string: {
-        Args: {
-          length: number
-        }
-        Returns: string
-      }
-      generate_slug: {
-        Args: {
-          title: string
-        }
-        Returns: string
-      }
-      get_blog_post: {
-        Args: {
-          p_blog_id: string
-          p_slug: string
-        }
-        Returns: {
-          title: string
-          html_content: string
-          slug: string
-          category_name: string
-          category_slug: string
-          tags: Json
-          abstract: string
-          published_at: string
-        }[]
-      }
-      get_posts_by_blog: {
-        Args: {
-          p_blog_id: string
-          p_limit: number
-          p_offset: number
-        }
-        Returns: Json
-      }
-      is_blog_owner: {
-        Args: {
-          blog_id: string
-          given_user_id: string
-        }
-        Returns: boolean
-      }
-      requesting_user_id: {
-        Args: Record<PropertyKey, never>
-        Returns: string
-      }
-    }
-    Enums: {
-      blog_sort_order: "asc" | "desc"
-    }
-    CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-}
-
-type PublicSchema = Database[Extract<keyof Database, "public">]
-
-export type Tables<
-  PublicTableNameOrOptions extends
-    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
-    | { schema: keyof Database },
-  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-        Database[PublicTableNameOrOptions["schema"]]["Views"])
-    : never = never,
-> = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
-      Row: infer R
-    }
-    ? R
-    : never
-  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
-        PublicSchema["Views"])
-    ? (PublicSchema["Tables"] &
-        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
-        Row: infer R
-      }
-      ? R
-      : never
-    : never
-
-export type TablesInsert<
-  PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
-    | { schema: keyof Database },
-  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
-> = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Insert: infer I
-    }
-    ? I
-    : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Insert: infer I
-      }
-      ? I
-      : never
-    : never
-
-export type TablesUpdate<
-  PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
-    | { schema: keyof Database },
-  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
-> = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Update: infer U
-    }
-    ? U
-    : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Update: infer U
-      }
-      ? U
-      : never
-    : never
-
-export type Enums<
-  PublicEnumNameOrOptions extends
-    | keyof PublicSchema["Enums"]
-    | { schema: keyof Database },
-  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
-    : never = never,
-> = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
-  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
-    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
-    : never
-
-export type CompositeTypes<
-  PublicCompositeTypeNameOrOptions extends
-    | keyof PublicSchema["CompositeTypes"]
-    | { schema: keyof Database },
-  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
-    schema: keyof Database
-  }
-    ? keyof Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
-    : never = never,
-> = PublicCompositeTypeNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
-  : PublicCompositeTypeNameOrOptions extends keyof PublicSchema["CompositeTypes"]
-    ? PublicSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
-    : never
@@ -158,6 +158,7 @@
        "@next/mdx": "^14.2.15",
        "@radix-ui/react-accordion": "^1.1.2",
        "@radix-ui/react-checkbox": "^1.0.4",
+        "@radix-ui/react-collapsible": "^1.1.1",
        "@radix-ui/react-dialog": "^1.1.2",
        "@radix-ui/react-dropdown-menu": "^2.0.6",
        "@radix-ui/react-label": "^2.0.2",
@@ -210,6 +211,7 @@
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
        "cmdk": "^0.2.1",
+        "date-fns": "^3.6.0",
        "dotenv": "^16.4.4",
        "embla-carousel-react": "^8.0.0",
        "formidable": "^3.5.1",
@@ -229,6 +231,7 @@
        "react": "18.2.0",
        "react-confetti": "^6.1.0",
        "react-datetime-picker": "^5.6.0",
+        "react-day-picker": "^8.10.1",
        "react-dom": "18.2.0",
        "react-hook-form": "^7.43.9",
        "react-icons": "^4.8.0",
@@ -417,6 +420,170 @@
      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
    },
+    "apps/web/node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.1.tgz",
+      "integrity": "sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/web/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "apps/web/node_modules/@radix-ui/react-dialog": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
@@ -908,6 +1075,15 @@
        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
      }
    },
+    "apps/web/node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "apps/web/node_modules/depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",