fix toasts and published

apps/web/src/components/Editor/ZendoEditor.tsx

@@ -47,7 +47,6 @@ import { Checkbox } from "../ui/checkbox";
 
 const formSchema = z.object({
   title: z.string(),
-  published: z.boolean(),
   slug: z.string(),
   cover_image: z.string().nullable(),
   content: z.any(),
@@ -84,7 +83,6 @@ export const ZendoEditor = (props: Props) => {
       defaultValues: {
         title: props.post?.title || "",
         slug: props.post?.slug || "",
-        published: props.post?.published || false,
         cover_image: props.post?.cover_image || "",
       },
     });
@@ -92,6 +90,9 @@ export const ZendoEditor = (props: Props) => {
   const blogId = (router.query.blogId as string) || "demo";
   const subscription = useSubscriptionQuery();
   const blogTags = useBlogTags({ blogId });
+  const [published, setPublished] = React.useState(
+    props.post?.published || false
+  );
 
   const [metadata, setMetadata] = React.useState(props.post?.metadata || []);
   const [tags, setTags] = React.useState(props.tags || []);
@@ -182,7 +183,7 @@ export const ZendoEditor = (props: Props) => {
       title: data.title,
       slug: data.slug,
       cover_image: data.cover_image || "",
-      published: data.published,
+      published,
       published_at: publishedAt || new Date().toISOString(),
       metadata,
       tags,
@@ -199,7 +200,7 @@ export const ZendoEditor = (props: Props) => {
     setHasChanges(props.post?.title !== getValues("title"));
     setHasChanges(props.post?.metadata !== metadata);
     setHasChanges(props.post?.cover_image !== getValues("cover_image"));
-    setHasChanges(props.post?.published !== getValues("published"));
+    setHasChanges(props.post?.published !== published);
     setHasChanges(props.post?.slug !== getValues("slug"));
 
     editor?.on("transaction", (ctx) => {
@@ -218,6 +219,7 @@ export const ZendoEditor = (props: Props) => {
     props.post?.slug,
     getValues,
     metadata,
+    published,
   ]);
 
   useEffect(() => {
@@ -365,7 +367,14 @@ export const ZendoEditor = (props: Props) => {
           )}
         </div>
         <div className="actions">
-          <Checkbox id="published" {...register("published")} />
+          <Checkbox
+            id="published"
+            defaultChecked={published}
+            onCheckedChange={(e) => {
+              setPublished(e);
+            }}
+            checked={published}
+          />
           <Label
             className="flex cursor-pointer items-center py-1.5 text-xs  font-medium text-zinc-600 transition-all hover:text-zinc-800"
             htmlFor="published"

apps/web/src/components/Images/ImagePicker.tsx

@@ -157,16 +157,15 @@ export function ImagePicker({
               </div>
             </TabsContent>
             <TabsContent value="upload">
-              <div>
-                <ImageUploader
-                  onSuccessfulUpload={() => {
-                    media.refetch();
-                    toast.success("Image uploaded");
-                    setTab("images");
-                  }}
-                  blogId={blogId}
-                />
-              </div>
+              <ImageUploader
+                className="w-full max-w-full"
+                onSuccessfulUpload={() => {
+                  media.refetch();
+                  toast.success("Image uploaded");
+                  setTab("images");
+                }}
+                blogId={blogId}
+              />
             </TabsContent>
           </Tabs>
         </div>

apps/web/src/components/Images/ImageUploader.tsx

@@ -12,8 +12,13 @@ import { nanoid } from "nanoid";
 type Props = {
   blogId: string;
   onSuccessfulUpload?: () => void;
+  className?: string;
 };
-export const ImageUploader = ({ blogId, onSuccessfulUpload }: Props) => {
+export const ImageUploader = ({
+  blogId,
+  onSuccessfulUpload,
+  className,
+}: Props) => {
   const [image, setImage] = useState(null as File | null);
   const [createObjectURL, setCreateObjectURL] = useState<string | null>(null);
   const [imageInfo, setImageInfo] = useState<any>(null);
@@ -140,10 +145,14 @@ export const ImageUploader = ({ blogId, onSuccessfulUpload }: Props) => {
 
   return (
     <div
-      className={cn("", {
-        "w-full": image,
-        "w-[360px]": !image,
-      })}
+      className={cn(
+        "",
+        {
+          "w-full": image,
+          "w-[360px]": !image,
+        },
+        className
+      )}
     >
       <h2 className="mb-2 flex gap-1.5 font-medium">
         <ImageIcon className="text-orange-500" size="22" /> Upload media

apps/web/src/pages/_app.tsx

@@ -50,24 +50,12 @@ function MyApp({ Component, pageProps }: AppProps) {
               <Toaster
                 position="bottom-center"
                 toastOptions={{
-                  // style: {
-                  //   background: "red",
-                  //   borderRadius: "12px",
-                  //   backgroundColor: "#333333",
-                  //   color: "white",
-                  //   padding: "10px 12px",
-                  //   border: "none",
-                  // },
-                  unstyled: true,
-                  classNames: {
-                    toast:
-                      "px-3 py-1.5 rounded-xl text-white flex gap-1 items-center justify-center",
-                    title: "font-medium",
-                    icon: "flex items-center justify-center",
-                    error: "bg-red-500",
-                    success: "bg-zinc-800",
-                    info: "bg-blue-500",
-                    warning: "bg-yellow-600",
+                  style: {
+                    borderRadius: "12px",
+                    backgroundColor: "#333333",
+                    color: "white",
+                    padding: "10px 12px",
+                    border: "none",
                   },
                 }}
               />