refactor interactions into two components

app/[leaflet_id]/publish/PublishPost.tsx

···
           submit();
         }}
       >
-        <div className="container flex flex-col gap-2 sm:p-3 p-4">
+        <div className="container flex flex-col gap-3 sm:p-3 p-4">
           <PublishingTo
             publication_uri={props.publication_uri}
             record={props.record}
           />
-          <hr className="border-border-light my-1" />
+          <hr className="border-border" />
           <ShareOptions
             setShareOption={setShareOption}
             shareOption={shareOption}
···
             editorStateRef={editorStateRef}
             {...props}
           />
-          <hr className="border-border-light " />
-          <div className="flex flex-col gap-1">
+          <hr className="border-border " />
+          <div className="flex flex-col gap-2">
             <h4>Tags</h4>
             <TagSelector
               selectedTags={currentTags}
               setSelectedTags={handleTagsChange}
             />
           </div>
+          <hr className="border-border mb-2" />
+
           <div className="flex justify-between">
             <Link
               className="hover:no-underline! font-bold"

app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx

···
       <Interactions
         quotesCount={props.quotesCount || 0}
         commentsCount={props.commentsCount || 0}
-        compact
         showComments={props.preferences.showComments}
         pageId={props.pageId}
       />

app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx

···
 export const Interactions = (props: {
   quotesCount: number;
   commentsCount: number;
-  compact?: boolean;
+  className?: string;
+  showComments?: boolean;
+  pageId?: string;
+}) => {
+  const data = useContext(PostPageContext);
+  const document_uri = data?.uri;
+  if (!document_uri)
+    throw new Error("document_uri not available in PostPageContext");
+
+  let { drawerOpen, drawer, pageId } = useInteractionState(document_uri);
+
+  const handleQuotePrefetch = () => {
+    if (data?.quotesAndMentions) {
+      prefetchQuotesData(data.quotesAndMentions);
+    }
+  };
+
+  const tags = (data?.data as any)?.tags as string[] | undefined;
+  const tagCount = tags?.length || 0;
+  return (
+    <div className={`flex gap-2 text-tertiary text-sm ${props.className}`}>
+      {tagCount > 0 && <TagPopover tags={tags} tagCount={tagCount} />}
+
+      {props.quotesCount > 0 && (
+        <button
+          className="flex w-fit gap-2 items-center"
+          onClick={() => {
+            if (!drawerOpen || drawer !== "quotes")
+              openInteractionDrawer("quotes", document_uri, props.pageId);
+            else setInteractionState(document_uri, { drawerOpen: false });
+          }}
+          onMouseEnter={handleQuotePrefetch}
+          onTouchStart={handleQuotePrefetch}
+          aria-label="Post quotes"
+        >
+          <QuoteTiny aria-hidden /> {props.quotesCount}
+        </button>
+      )}
+      {props.showComments === false ? null : (
+        <button
+          className="flex gap-2 items-center w-fit"
+          onClick={() => {
+            if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
+              openInteractionDrawer("comments", document_uri, props.pageId);
+            else setInteractionState(document_uri, { drawerOpen: false });
+          }}
+          aria-label="Post comments"
+        >
+          <CommentTiny aria-hidden /> {props.commentsCount}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export const ExpandedInteractions = (props: {
+  quotesCount: number;
+  commentsCount: number;
   className?: string;
   showComments?: boolean;
   pageId?: string;
···
     }
   };
 
+  const tags = (data?.data as any)?.tags as string[] | undefined;
+  const tagCount = tags?.length || 0;
   return (
     <div
-      className={`flex gap-2 text-tertiary ${props.compact ? "text-sm" : "px-3 sm:px-4"} ${props.className}`}
+      className={`gap-2 text-tertiary px-3 sm:px-4 flex flex-col ${props.className}`}
     >
-      {props.compact && <TagPopover />}
-      <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 !== "quotes")
-            openInteractionDrawer("quotes", document_uri, props.pageId);
-          else setInteractionState(document_uri, { drawerOpen: false });
-        }}
-        onMouseEnter={handleQuotePrefetch}
-        onTouchStart={handleQuotePrefetch}
-        aria-label="Post quotes"
-      >
-        <QuoteTiny aria-hidden /> {props.quotesCount}{" "}
-        {!props.compact && (
+      {tagCount > 0 && (
+        <>
+          <hr className="border-border-light mb-1 " />
+          <TagList tags={tags} />
+          <hr className="border-border-light mt-1 " />
+        </>
+      )}
+
+      {props.quotesCount > 0 && (
+        <button
+          className="flex w-fit gap-2 items-center px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"
+          onClick={() => {
+            if (!drawerOpen || drawer !== "quotes")
+              openInteractionDrawer("quotes", document_uri, props.pageId);
+            else setInteractionState(document_uri, { drawerOpen: false });
+          }}
+          onMouseEnter={handleQuotePrefetch}
+          onTouchStart={handleQuotePrefetch}
+          aria-label="Post quotes"
+        >
+          <QuoteTiny aria-hidden /> {props.quotesCount}{" "}
           <span
             aria-hidden
           >{`Quote${props.quotesCount === 1 ? "" : "s"}`}</span>
-        )}
-      </button>
+        </button>
+      )}
       {props.showComments === false ? null : (
         <button
-          className={`flex gap-1 items-center ${!props.compact && "px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"}`}
+          className="flex gap-2 items-center w-fit px-1 py-0.5 border border-border-light rounded-lg trasparent-outline selected-outline"
           onClick={() => {
             if (!drawerOpen || drawer !== "comments" || pageId !== props.pageId)
               openInteractionDrawer("comments", document_uri, props.pageId);
···
           aria-label="Post comments"
         >
           <CommentTiny aria-hidden />{" "}
-          {props.compact ? (
-            props.commentsCount
-          ) : props.commentsCount > 0 ? (
+          {props.commentsCount > 0 ? (
             <span aria-hidden>
               {`${props.commentsCount} Comment${props.commentsCount === 1 ? "" : "s"}`}
             </span>
···
           )}
         </button>
       )}
-      {!props.compact && <TagList />}
     </div>
   );
 };
 
-const TagPopover = () => {
-  const data = useContext(PostPageContext);
-  const tags = (data?.data as any)?.tags as string[] | undefined;
-  const tagCount = tags?.length || 0;
-
-  if (tagCount === 0) return null;
-
+const TagPopover = (props: {
+  tagCount: number;
+  tags: string[] | undefined;
+}) => {
   return (
     <Popover
       className="p-2! max-w-xs"
       trigger={
         <div className="tags flex gap-1 items-center ">
-          <TagTiny /> {tagCount}
+          <TagTiny /> {props.tagCount}
         </div>
       }
     >
-      <TagList className="text-secondary!" />
+      <TagList tags={props.tags} className="text-secondary!" />
     </Popover>
   );
 };
 
-const TagList = (props: { className?: string }) => {
-  const data = useContext(PostPageContext);
-  const tags = (data?.data as any)?.tags as string[] | undefined;
-
-  if (!tags || tags.length === 0) return null;
-
+const TagList = (props: { className?: string; tags: string[] | undefined }) => {
+  if (!props.tags) return;
   return (
     <div className="flex gap-1 flex-wrap">
-      {tags.map((tag, index) => (
+      {props.tags.map((tag, index) => (
         <Tag name={tag} key={index} className={props.className} />
       ))}
     </div>

app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx

···
 import { SubscribeWithBluesky } from "app/lish/Subscribe";
 import { EditTiny } from "components/Icons/EditTiny";
 import {
+  ExpandedInteractions,
   getCommentCount,
   getQuoteCount,
   Interactions,
···
           did={did}
           prerenderedCodeBlocks={prerenderedCodeBlocks}
         />
-        <Interactions
+        <ExpandedInteractions
           pageId={pageId}
           showComments={preferences.showComments}
           commentsCount={getCommentCount(document, pageId) || 0}
···
         />
         {!isSubpage && (
           <>
-            <hr className="border-border-light mb-4 mt-4 sm:mx-4 mx-3" />
             <div className="sm:px-4 px-3">
               {identity &&
               identity.atp_did ===

app/lish/[did]/[publication]/[rkey]/PostFooter.tsx

···
 import { useIdentityData } from "components/IdentityProvider";
 import { PubLeafletComment } from "lexicons/api";
 import { PostPageData } from "./getPostPageData";
-import { Interactions } from "./Interactions/Interactions";
+import { ExpandedInteractions } from "./Interactions/Interactions";
 import { decodeQuotePosition } from "./quotePosition";
 
 export const PostFooter = (props: {
···
     return;
   return (
     <div className="flex flex-col px-3 sm:px-4">
-      <hr className="border-border-light mb-4" />
-      <Interactions
+      <ExpandedInteractions
         showComments={props.preferences.showComments}
         quotesCount={
           props.data.document_mentions_in_bsky.filter((q) => {
···
           ).length
         }
       />
-      <hr className="border-border-light mb-4 mt-4 " />
       {identity &&
       identity.atp_did ===
         props.data.documents_in_publications[0]?.publications?.identity_did ? (

app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx

···
           </div>
           <Interactions
             showComments={props.preferences.showComments}
-            compact
             quotesCount={getQuoteCount(document) || 0}
             commentsCount={getCommentCount(document) || 0}
           />