From 5d2e4f1fe21aee6a1b646f5e01fdce9ac6893605 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 10 Dec 2025 03:46:08 -0500
Subject: [PATCH] fixes to styling of tag selector popover in draft post header

---
 .../[rkey]/Interactions/Interactions.tsx      |   8 +-
 .../[rkey]/PostHeader/PostHeader.tsx          |  92 ++++++----
 components/Pages/PublicationMetadata.tsx      | 167 +++++++++---------
 components/Tags.tsx                           | 110 ++++++------
 4 files changed, 208 insertions(+), 169 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
index f55aabf0..06838605 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
@@ -147,11 +147,7 @@ export const Interactions = (props: {
         <button
           className={`flex gap-1 items-center ${!props.compact && "px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"}`}
           onClick={() => {
-            if (
-              !drawerOpen ||
-              drawer !== "comments" ||
-              pageId !== props.pageId
-            )
+            if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
               openInteractionDrawer("comments", document_uri, props.pageId);
             else setInteractionState(document_uri, { drawerOpen: false });
           }}
@@ -185,7 +181,7 @@ const TagPopover = () => {
     <Popover
       className="p-2! max-w-xs"
       trigger={
-        <div className="flex gap-1 items-center ">
+        <div className="tags flex gap-1 items-center ">
           <TagTiny /> {tagCount}
         </div>
       }
diff --git a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
index f28c7c4f..4fd3d6a8 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
@@ -16,6 +16,8 @@ import { useIdentityData } from "components/IdentityProvider";
 import { EditTiny } from "components/Icons/EditTiny";
 import { SpeedyLink } from "components/SpeedyLink";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+import Post from "app/p/[didOrHandle]/[rkey]/l-quote/[quote]/page";
+import { Separator } from "components/Layout";
 
 export function PostHeader(props: {
   data: PostPageData;
@@ -40,12 +42,9 @@ export function PostHeader(props: {
 
   if (!document?.data) return;
   return (
-    <div
-      className="max-w-prose w-full mx-auto px-3 sm:px-4 sm:pt-3 pt-2"
-      id="post-header"
-    >
-      <div className="pubHeader flex flex-col pb-5">
-        <div className="flex justify-between w-full">
+    <PostHeaderLayout
+      pubLink={
+        <>
           {pub && (
             <SpeedyLink
               className="font-bold hover:no-underline text-accent-contrast"
@@ -65,36 +64,69 @@ export function PostHeader(props: {
                 <EditTiny className="shrink-0" />
               </a>
             )}
-        </div>
-        <h2 className="leading-tight">{record.title}</h2>
-        {record.description ? (
-          <p className="italic text-secondary pt-1">{record.description}</p>
-        ) : null}
-        <div className="text-sm text-tertiary pt-3 flex gap-1 flex-wrap">
-          {profile ? (
-            <>
-              <a
-                className="text-tertiary"
-                href={`https://bsky.app/profile/${profile.handle}`}
-              >
-                by {profile.displayName || profile.handle}
-              </a>
-            </>
-          ) : null}
-          {record.publishedAt ? (
-            <>
-              |<p>{formattedDate}</p>
-            </>
-          ) : null}
-          |{" "}
+        </>
+      }
+      postTitle={record.title}
+      postDescription={record.description}
+      postInfo={
+        <>
+          <div className="flex flex-row gap-2 items-center">
+            {profile ? (
+              <>
+                <a
+                  className="text-tertiary"
+                  href={`https://bsky.app/profile/${profile.handle}`}
+                >
+                  {profile.displayName || profile.handle}
+                </a>
+              </>
+            ) : null}
+            {record.publishedAt ? (
+              <>
+                <Separator classname="h-4!" />
+                <p>{formattedDate}</p>
+              </>
+            ) : null}
+          </div>
           <Interactions
             showComments={props.preferences.showComments}
             compact
             quotesCount={getQuoteCount(document) || 0}
             commentsCount={getCommentCount(document) || 0}
           />
-        </div>
+        </>
+      }
+    />
+  );
+}
+
+export const PostHeaderLayout = (props: {
+  pubLink: React.ReactNode;
+  postTitle: React.ReactNode | undefined;
+  postDescription: React.ReactNode | undefined;
+  postInfo: React.ReactNode;
+}) => {
+  return (
+    <div
+      className="postHeader max-w-prose w-full flex flex-col px-3 sm:px-4 sm:pt-3 pt-2 pb-5"
+      id="post-header"
+    >
+      <div className="pubInfo flex text-accent-contrast font-bold justify-between w-full">
+        {props.pubLink}
+      </div>
+      <h2
+        className={`postTitle text-xl leading-tight pt-0.5 font-bold outline-hidden bg-transparent ${!props.postTitle && "text-tertiary italic"}`}
+      >
+        {props.postTitle ? props.postTitle : "Untitled"}
+      </h2>
+      {props.postDescription ? (
+        <p className="postDescription italic text-secondary outline-hidden bg-transparent pt-1">
+          {props.postDescription}
+        </p>
+      ) : null}
+      <div className="postInfo text-sm text-tertiary pt-3 flex gap-1 flex-wrap justify-between">
+        {props.postInfo}
       </div>
     </div>
   );
-}
+};
diff --git a/components/Pages/PublicationMetadata.tsx b/components/Pages/PublicationMetadata.tsx
index ce4ad29b..dcc6bcdf 100644
--- a/components/Pages/PublicationMetadata.tsx
+++ b/components/Pages/PublicationMetadata.tsx
@@ -19,6 +19,7 @@ import { TagTiny } from "components/Icons/TagTiny";
 import { Popover } from "components/Popover";
 import { TagSelector } from "components/Tags";
 import { useIdentityData } from "components/IdentityProvider";
+import { PostHeaderLayout } from "app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader";
 export const PublicationMetadata = () => {
   let { rep } = useReplicache();
   let { data: pub } = useLeafletPublicationData();
@@ -44,70 +45,80 @@ export const PublicationMetadata = () => {
   let tags = true;
 
   return (
-    <div className={`flex flex-col px-3 sm:px-4 pb-5 sm:pt-3 pt-2`}>
-      <div className="flex gap-2">
-        {pub.publications && (
-          <Link
-            href={
-              identity?.atp_did === pub.publications?.identity_did
-                ? `${getBasePublicationURL(pub.publications)}/dashboard`
-                : getPublicationURL(pub.publications)
-            }
-            className="leafletMetadata text-accent-contrast font-bold hover:no-underline"
-          >
-            {pub.publications?.name}
-          </Link>
-        )}
-        <div className="font-bold text-tertiary px-1 text-sm flex place-items-center bg-border-light rounded-md ">
-          Editor
-        </div>
-      </div>
-      <TextField
-        className="text-xl font-bold outline-hidden bg-transparent"
-        value={title}
-        onChange={async (newTitle) => {
-          await rep?.mutate.updatePublicationDraft({
-            title: newTitle,
-            description,
-          });
-        }}
-        placeholder="Untitled"
-      />
-      <TextField
-        placeholder="add an optional description..."
-        className="italic text-secondary outline-hidden bg-transparent"
-        value={description}
-        onChange={async (newDescription) => {
-          await rep?.mutate.updatePublicationDraft({
-            title,
-            description: newDescription,
-          });
-        }}
-      />
-      {pub.doc ? (
-        <div className="flex flex-row items-center justify-between gap-2 pt-3">
-          <div className="flex gap-2 items-center">
-            <p className="text-sm text-tertiary">
-              Published {publishedAt && timeAgo(publishedAt)}
-            </p>
-            <Separator classname="h-4" />
+    <PostHeaderLayout
+      pubLink={
+        <div className="flex gap-2 items-center">
+          {pub.publications && (
             <Link
-              target="_blank"
-              className="text-sm"
               href={
-                pub.publications
-                  ? `${getPublicationURL(pub.publications)}/${new AtUri(pub.doc).rkey}`
-                  : `/p/${new AtUri(pub.doc).host}/${new AtUri(pub.doc).rkey}`
+                identity?.atp_did === pub.publications?.identity_did
+                  ? `${getBasePublicationURL(pub.publications)}/dashboard`
+                  : getPublicationURL(pub.publications)
               }
+              className="leafletMetadata text-accent-contrast font-bold hover:no-underline"
             >
-              View Post
+              {pub.publications?.name}
             </Link>
+          )}
+          <div className="font-bold text-tertiary px-1 h-[20px] text-sm flex place-items-center bg-border-light rounded-md ">
+            DRAFT
           </div>
+        </div>
+      }
+      postTitle={
+        <TextField
+          className="leading-tight pt-0.5 text-xl font-bold outline-hidden bg-transparent"
+          value={title}
+          onChange={async (newTitle) => {
+            await rep?.mutate.updatePublicationDraft({
+              title: newTitle,
+              description,
+            });
+          }}
+          placeholder="Untitled"
+        />
+      }
+      postDescription={
+        <TextField
+          placeholder="add an optional description..."
+          className="pt-1 italic text-secondary outline-hidden bg-transparent"
+          value={description}
+          onChange={async (newDescription) => {
+            await rep?.mutate.updatePublicationDraft({
+              title,
+              description: newDescription,
+            });
+          }}
+        />
+      }
+      postInfo={
+        <>
+          {pub.doc ? (
+            <div className="flex gap-2 items-center">
+              <p className="text-sm text-tertiary">
+                Published {publishedAt && timeAgo(publishedAt)}
+              </p>
+
+              <Link
+                target="_blank"
+                className="text-sm"
+                href={
+                  pub.publications
+                    ? `${getPublicationURL(pub.publications)}/${new AtUri(pub.doc).rkey}`
+                    : `/p/${new AtUri(pub.doc).host}/${new AtUri(pub.doc).rkey}`
+                }
+              >
+                View
+              </Link>
+            </div>
+          ) : (
+            <p>Draft</p>
+          )}
           <div className="flex gap-2 text-border items-center">
             {tags && (
               <>
                 <AddTags />
-                <Separator classname="h-4" />
+                <Separator classname="h-4!" />
               </>
             )}
             <div className="flex gap-1 items-center">
@@ -119,11 +130,9 @@ export const PublicationMetadata = () => {
               </div>
             )}
           </div>
-        </div>
-      ) : (
-        <p className="text-sm text-tertiary pt-2">Draft</p>
-      )}
-    </div>
+        </>
+      }
+    />
   );
 };
 
@@ -206,30 +215,22 @@ export const PublicationMetadataPreview = () => {
   if (!pub) return null;
 
   return (
-    <div className={`flex flex-col px-3 sm:px-4 pb-5 sm:pt-3 pt-2`}>
-      <div className="text-accent-contrast font-bold hover:no-underline">
-        {pub.publications?.name}
-      </div>
-
-      <div
-        className={`text-xl font-bold outline-hidden bg-transparent ${!pub.title && "text-tertiary italic"}`}
-      >
-        {pub.title ? pub.title : "Untitled"}
-      </div>
-      <div className="italic text-secondary outline-hidden bg-transparent">
-        {pub.description}
-      </div>
-
-      {pub.doc ? (
-        <div className="flex flex-row items-center gap-2 pt-3">
-          <p className="text-sm text-tertiary">
-            Published {publishedAt && timeAgo(publishedAt)}
-          </p>
+    <PostHeaderLayout
+      pubLink={
+        <div className="text-accent-contrast font-bold hover:no-underline">
+          {pub.publications?.name}
         </div>
-      ) : (
-        <p className="text-sm text-tertiary pt-2">Draft</p>
-      )}
-    </div>
+      }
+      postTitle={pub.title}
+      postDescription={pub.description}
+      postInfo={
+        pub.doc ? (
+          <p>Published {publishedAt && timeAgo(publishedAt)}</p>
+        ) : (
+          <p>Draft</p>
+        )
+      }
+    />
   );
 };
 
@@ -263,7 +264,7 @@ const AddTags = () => {
     <Popover
       className="p-2! w-[1000px] max-w-sm"
       trigger={
-        <div className="flex gap-1 hover:underline text-sm items-center text-tertiary">
+        <div className="addTagTrigger flex gap-1 hover:underline text-sm items-center text-tertiary">
           <TagTiny />{" "}
           {tags.length > 0
             ? `${tags.length} Tag${tags.length === 1 ? "" : "s"}`
diff --git a/components/Tags.tsx b/components/Tags.tsx
index 800b4916..7a61522b 100644
--- a/components/Tags.tsx
+++ b/components/Tags.tsx
@@ -14,11 +14,11 @@ export const Tag = (props: {
 }) => {
   return (
     <div
-      className={`tag flex items-center text-xs  rounded-md border ${props.selected ? "bg-accent-1 text-accent-2 border-accent-1 font-bold" : "bg-bg-page text-tertiary border-border"} ${props.className}`}
+      className={`tag flex items-center text-xs  rounded-md border ${props.selected ? "bg-accent-1  border-accent-1 font-bold" : "bg-bg-page border-border"} ${props.className}`}
     >
       <Link
         href={`/tag/${encodeURIComponent(props.name)}`}
-        className={`px-1 py-0.5 text-tertiary hover:no-underline!`}
+        className={`px-1 py-0.5 hover:no-underline! ${props.selected ? "text-accent-2" : "text-tertiary"}`}
       >
         {props.name}{" "}
       </Link>
@@ -27,7 +27,7 @@ export const Tag = (props: {
           type="button"
           onClick={() => (props.onDelete ? props.onDelete(props.name) : null)}
         >
-          <CloseTiny className="scale-75 pr-1" />
+          <CloseTiny className="scale-75 pr-1 text-accent-2" />
         </button>
       ) : null}
     </div>
@@ -52,7 +52,9 @@ export const TagSelector = (props: {
               name={tag}
               selected
               onDelete={() => {
-                props.setSelectedTags(props.selectedTags.filter((t) => t !== tag));
+                props.setSelectedTags(
+                  props.selectedTags.filter((t) => t !== tag),
+                );
               }}
             />
           ))}
@@ -148,7 +150,7 @@ export const TagSearchInput = (props: {
   return (
     <div className="relative">
       <Input
-        className="input-with-border grow w-full"
+        className="input-with-border grow w-full bg-test"
         id="placeholder-tag-search-input"
         value={tagInputValue}
         placeholder="search tags..."
@@ -172,14 +174,14 @@ export const TagSearchInput = (props: {
               document.getElementById("tag-search-input")?.focus();
             }, 100);
         }}
-        className="!w-full px-[8px] py-2!"
+        className="!w-full px-2! py-2!"
         sideOffset={-39}
         onOpenAutoFocus={(e) => e.preventDefault()}
         asChild
         trigger={
           <button
             ref={placeholderInputRef}
-            className="hello absolute left-0 top-0 right-0 h-[30px]"
+            className="absolute left-0 top-0 right-0 h-[30px]"
           ></button>
         }
         noArrow
@@ -199,36 +201,42 @@ export const TagSearchInput = (props: {
               setIsOpen(true);
             }}
           />
-          {props.selectedTags.length > 0 && (
-            <>
-              <div className="flex flex-wrap gap-2 ">
-                {props.selectedTags.map((tag) => (
-                  <Tag
-                    name={tag}
-                    selected
-                    onDelete={() => {
-                      props.setSelectedTags(
-                        props.selectedTags.filter((t) => t !== tag),
-                      );
-                    }}
-                  />
-                ))}
-              </div>
-              <hr className="mt-[6px] mb-[2px] border-border-light" />
-            </>
+          {props.selectedTags.length > 0 ? (
+            <div className="flex flex-wrap gap-2 pb-[6px]">
+              {props.selectedTags.map((tag) => (
+                <Tag
+                  key={tag}
+                  name={tag}
+                  selected
+                  onDelete={() => {
+                    props.setSelectedTags(
+                      props.selectedTags.filter((t) => t !== tag),
+                    );
+                  }}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-tertiary italic text-sm h-6">
+              no tags selected
+            </div>
           )}
+          <hr className=" mb-[2px] border-border-light" />
+
           {userInputResult && (
-            <TagResult
-              key={"userInput"}
-              index={0}
-              name={tagInputValue}
-              tagged={0}
-              highlighted={0 === highlightedIndex}
-              setHighlightedIndex={setHighlightedIndex}
-              onSelect={() => {
-                selectTag(tagInputValue);
-              }}
-            />
+            <>
+              <TagResult
+                key={"userInput"}
+                index={0}
+                name={tagInputValue}
+                tagged={0}
+                highlighted={0 === highlightedIndex}
+                setHighlightedIndex={setHighlightedIndex}
+                onSelect={() => {
+                  selectTag(tagInputValue);
+                }}
+              />
+            </>
           )}
           {filteredTags.map((tag, i) => (
             <TagResult
@@ -258,20 +266,22 @@ const TagResult = (props: {
   setHighlightedIndex: (i: number) => void;
 }) => {
   return (
-    <button
-      className={`w-full flex justify-between items-center text-left px-[6px] py-0.5 rounded-md ${props.highlighted ? "bg-border-light" : ""}`}
-      onSelect={(e) => {
-        e.preventDefault();
-        props.onSelect();
-      }}
-      onClick={(e) => {
-        e.preventDefault();
-        props.onSelect();
-      }}
-      onMouseEnter={(e) => props.setHighlightedIndex(props.index)}
-    >
-      {props.name}
-      <div className="text-tertiary text-sm"> {props.tagged}</div>
-    </button>
+    <div className="-mx-1">
+      <button
+        className={`w-full flex justify-between items-center text-left pr-1 pl-[6px]   py-0.5 rounded-md ${props.highlighted ? "bg-border-light" : ""}`}
+        onSelect={(e) => {
+          e.preventDefault();
+          props.onSelect();
+        }}
+        onClick={(e) => {
+          e.preventDefault();
+          props.onSelect();
+        }}
+        onMouseEnter={(e) => props.setHighlightedIndex(props.index)}
+      >
+        {props.name}
+        <div className="text-tertiary text-sm"> {props.tagged}</div>
+      </button>
+    </div>
   );
 };
-- 
2.51.2