redesign editor, fix type errors

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

@@ -174,7 +174,7 @@ export function EditorMenu({ editor }: { editor: Editor | null }) {
   return (
     <div
       tabIndex={-1}
-      className="flex max-w-full overflow-x-auto border-b bg-white p-1.5"
+      className="flex max-w-full overflow-x-auto bg-white p-1.5"
     >
       <DropdownMenu>
         <DropdownMenuTrigger tabIndex={-1} asChild>

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

@@ -372,7 +372,7 @@ export const ZendoEditor = (props: Props) => {
               type="checkbox"
               id="published"
               {...register("published")}
-              className="h-4 w-4 rounded-lg border-none bg-transparent p-2 text-zinc-800 outline-none transition-all hover:bg-zinc-50 focus-visible:bg-zinc-100"
+              className="h-4 w-4 rounded-lg border-none border-zinc-200 bg-transparent p-2 text-zinc-800 outline-none transition-all hover:bg-zinc-50 focus-visible:bg-zinc-100"
             />
             Publish
           </Label>
@@ -422,7 +422,7 @@ export const ZendoEditor = (props: Props) => {
           </div>
         )}
 
-        <div className="px-8 pb-2">
+        <div className="px-8 pb-2 pt-1.5">
           <div className="flex w-full items-end justify-between gap-4 transition-all">
             <label
               className="group flex w-full flex-col items-start justify-center gap-1"
@@ -436,7 +436,7 @@ export const ZendoEditor = (props: Props) => {
                 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-700 outline-none transition-all hover:bg-white focus:bg-zinc-100"
+                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>
@@ -448,6 +448,7 @@ export const ZendoEditor = (props: Props) => {
                 setShowImagePicker(false);
               }}
               onCancel={() => {}}
+              showFooter={false}
             >
               <Button
                 variant={"ghost"}
@@ -480,6 +481,7 @@ export const ZendoEditor = (props: Props) => {
                       {blogTags.data?.find((t) => t.id === tag.id)?.name}
                     </div>
                     <button
+                      tabIndex={-1}
                       onClick={() => {
                         setTags(tags.filter((t) => t.id !== tag.id));
                       }}
@@ -500,6 +502,7 @@ export const ZendoEditor = (props: Props) => {
               }}
             >
               <button
+                tabIndex={-1}
                 className={cn(
                   "flex items-center gap-1 rounded-md px-1.5 py-1 text-xs text-zinc-400 opacity-0 transition-all hover:text-zinc-700 group-hover:opacity-100",
                   {
@@ -514,7 +517,7 @@ export const ZendoEditor = (props: Props) => {
           </div>
         </div>
         <div className="group">
-          <div className="sticky top-10 z-10">
+          <div className="sticky top-10 z-10 border-b px-3">
             <EditorMenu editor={editor} />
           </div>
           <div

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

@@ -39,14 +39,15 @@ export function ImagePicker({
   onCancel,
   open,
   onOpenChange,
+  showFooter = true,
 }: PropsWithChildren<{
   onSelect: (image: Image) => void;
   onCancel: () => void;
   open: boolean;
   ref?: any;
   onOpenChange: (value: boolean) => void;
+  showFooter?: boolean;
 }>) {
-  const api = createAPIClient();
   const router = useRouter();
   const { blogId } = router.query as any;
   const [selectedImage, setSelectedImage] = useState<Image | null>(null);
@@ -90,6 +91,7 @@ export function ImagePicker({
                       )}
                       onClick={() => {
                         setSelectedImage(image);
+                        onSelect(image);
                       }}
                     >
                       <div className="relative w-full">
@@ -128,28 +130,30 @@ export function ImagePicker({
                     </button>
                   ))}
                 </div>
-                <DialogFooter>
-                  <div className="flex gap-2">
-                    <Button
-                      type="button"
-                      variant="secondary"
-                      onClick={onCancel}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      type="button"
-                      onClick={() => {
-                        if (!selectedImage) {
-                          return;
-                        }
-                        onSelect(selectedImage);
-                      }}
-                    >
-                      Save
-                    </Button>
-                  </div>
-                </DialogFooter>
+                {showFooter && (
+                  <DialogFooter>
+                    <div className="flex gap-2">
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={onCancel}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        type="button"
+                        onClick={() => {
+                          if (!selectedImage) {
+                            return;
+                          }
+                          onSelect(selectedImage);
+                        }}
+                      >
+                        Save
+                      </Button>
+                    </div>
+                  </DialogFooter>
+                )}
               </div>
             </TabsContent>
             <TabsContent value="upload">

apps/web/src/components/Tags/TagPicker.tsx

@@ -21,7 +21,7 @@ export function TagPicker({
 }: PropsWithChildren<Props>) {
   return (
     <Dialog>
-      <DialogTrigger>{children}</DialogTrigger>
+      <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent>
         <h2 className="font-medium">Select tags</h2>
         <div className="grid grid-cols-3 gap-2">

apps/web/src/pages/blogs/[blogId]/post/[postSlug].tsx

@@ -64,7 +64,7 @@ export default function Post() {
             const newTags = data?.tags?.map((tag) => ({
               tag_id: tag.id,
               blog_id: blogId,
-              post_id: post.id,
+              post_id: post.data.id,
             }));
 
             if (newTags) {
@@ -73,7 +73,7 @@ export default function Post() {
                 sb
                   .from("post_tags")
                   .delete()
-                  .match({ post_id: post.id, blog_id: blogId })
+                  .match({ post_id: post.data.id, blog_id: blogId })
                   .not("tag_id", "in", currentTagIds),
 
                 sb.from("post_tags").upsert(newTags, {
@@ -104,8 +104,8 @@ export default function Post() {
             toast.error("Failed to save post");
           }
         }}
-        post={post}
-        tags={post.post_tags || []}
+        post={post.data}
+        tags={tags.data || []}
       />
 
       {/* <Dialog open={showPubDialog} onOpenChange={setShowPubDialog}>

apps/web/src/pages/blogs/index.tsx

@@ -81,6 +81,7 @@ export default function Dashboard() {
                         }}
                         title="Settings"
                         aria-label="Settings"
+                        className="text-zinc-400 opacity-0 transition-all group-hover:opacity-100"
                       >
                         <Settings size="24" />
                       </Button>