fix(editor): move page icon above title for proper alignment (#189)

The emoji picker was rendered inline with the title, causing
misalignment between the title and editor content. Now the icon
renders as a block element above the title row. When no icon is set,
a small 'Add icon' button appears on hover.

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

src/components/page-icon.tsx

@@ -44,24 +44,44 @@ export function PageIcon({ pageId, initialIcon }: PageIconProps) {
     saveIcon(null);
   }, [saveIcon]);
 
+  if (icon) {
+    return (
+      <div className="mb-2">
+        <EmojiPicker
+          open={open}
+          onOpenChange={setOpen}
+          onSelect={handleSelect}
+          onRemove={handleRemove}
+          hasIcon
+        >
+          <button
+            className="flex h-10 w-10 items-center justify-center rounded-sm text-4xl leading-none hover:bg-white/[0.04]"
+            aria-label={`Page icon: ${icon}. Click to change`}
+          >
+            {icon}
+          </button>
+        </EmojiPicker>
+      </div>
+    );
+  }
+
   return (
-    <EmojiPicker
-      open={open}
-      onOpenChange={setOpen}
-      onSelect={handleSelect}
-      onRemove={handleRemove}
-      hasIcon={icon !== null}
-    >
-      <button
-        className="flex h-9 w-9 shrink-0 items-center justify-center text-muted-foreground hover:bg-white/[0.04]"
-        aria-label={icon ? `Page icon: ${icon}. Click to change` : "Add page icon"}
+    <div className="mb-1 opacity-0 group-hover/page-header:opacity-100 transition-opacity">
+      <EmojiPicker
+        open={open}
+        onOpenChange={setOpen}
+        onSelect={handleSelect}
+        onRemove={handleRemove}
+        hasIcon={false}
       >
-        {icon ? (
-          <span className="text-2xl leading-none">{icon}</span>
-        ) : (
-          <SmilePlus className="h-5 w-5 opacity-0 group-hover/page-icon:opacity-100" />
-        )}
-      </button>
-    </EmojiPicker>
+        <button
+          className="flex h-7 items-center gap-1 rounded-sm px-1.5 text-xs text-muted-foreground hover:bg-white/[0.04]"
+          aria-label="Add page icon"
+        >
+          <SmilePlus className="h-3.5 w-3.5" />
+          <span>Add icon</span>
+        </button>
+      </EmojiPicker>
+    </div>
   );
 }

src/components/page-view-client.tsx

@@ -30,19 +30,21 @@ export function PageViewClient({
 
   return (
     <div className="mx-auto max-w-3xl p-6">
-      <div className="group/page-icon flex items-start gap-2">
+      <div className="group/page-header">
         <PageIcon key={`icon-${pageId}`} pageId={pageId} initialIcon={pageIcon} />
-        <div className="min-w-0 flex-1">
-          <PageTitle key={pageId} pageId={pageId} initialTitle={pageTitle} />
+        <div className="flex items-start gap-2">
+          <div className="min-w-0 flex-1">
+            <PageTitle key={pageId} pageId={pageId} initialTitle={pageTitle} />
+          </div>
+          <PageMenu
+            pageId={pageId}
+            pageTitle={pageTitle}
+            workspaceId={workspaceId}
+            workspaceSlug={workspaceSlug}
+            userId={userId}
+            editorRef={editorRef}
+          />
         </div>
-        <PageMenu
-          pageId={pageId}
-          pageTitle={pageTitle}
-          workspaceId={workspaceId}
-          workspaceSlug={workspaceSlug}
-          userId={userId}
-          editorRef={editorRef}
-        />
       </div>
       <div className="mt-4">
         <Editor