From a3fc2fc8d7fb2070be03104fba9e1d29c09db3ab Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 7 Apr 2026 18:31:40 -0400
Subject: [PATCH] adjusting layout and popover behavior

---
 .../theme-settings/PostPreview.tsx            | 102 +++++++----
 .../theme-settings/ThemeSettingsContent.tsx   | 170 +++++++++++-------
 components/Popover/index.tsx                  |   6 +-
 3 files changed, 175 insertions(+), 103 deletions(-)

diff --git a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
index 797ce41d..60d12d1e 100644
--- a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
+++ b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx
@@ -2,7 +2,10 @@
 
 import { LinearDocumentPage } from "app/lish/[did]/[publication]/[rkey]/LinearDocumentPage";
 import { LeafletContentProvider } from "contexts/LeafletContentContext";
-import { DocumentProvider } from "contexts/DocumentContext";
+import {
+  DocumentProvider,
+  type PublicationContext,
+} from "contexts/DocumentContext";
 import { useIdentityData } from "components/IdentityProvider";
 import type { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import type { PubLeafletPagesLinearDocument } from "lexicons/api";
@@ -73,39 +76,36 @@ const fakeNormalizedDocument = {
   tags: ["preview", "theme"],
 };
 
-const fakeDocument: NonNullable<PostPageData> = {
-  data: {},
-  uri: FAKE_DOC_URI,
-  normalizedDocument: fakeNormalizedDocument,
-  normalizedPublication: null,
-  quotesAndMentions: [],
-  theme: null,
-  prevNext: undefined,
-  publication: null,
-  comments: [],
-  comments_on_documents: [],
-  mentions: [],
-  document_mentions_in_bsky: [],
-  leaflets_in_publications: [],
-  leafletId: null,
-  recommendsCount: 0,
-  documents_in_publications: [],
-  recommends_on_documents: [],
-} as unknown as NonNullable<PostPageData>;
-
-const fakeDocumentContextValue: DocumentContextValue = {
-  uri: FAKE_DOC_URI,
-  normalizedDocument: fakeNormalizedDocument,
-  normalizedPublication: null,
-  theme: undefined,
-  prevNext: undefined,
-  quotesAndMentions: [],
-  publication: null,
-  comments: [],
-  mentions: [],
-  leafletId: null,
-  recommendsCount: 0,
-};
+function makeFakeDocument(
+  publication?: {
+    uri: string;
+    name: string;
+    identity_did: string;
+    record: unknown;
+  } | null,
+): NonNullable<PostPageData> {
+  return {
+    data: {},
+    uri: FAKE_DOC_URI,
+    normalizedDocument: fakeNormalizedDocument,
+    normalizedPublication: null,
+    quotesAndMentions: [],
+    theme: null,
+    prevNext: undefined,
+    publication: publication || null,
+    comments: [],
+    comments_on_documents: [],
+    mentions: [],
+    document_mentions_in_bsky: [],
+    leaflets_in_publications: [],
+    leafletId: null,
+    recommendsCount: 0,
+    documents_in_publications: publication
+      ? [{ publications: publication }]
+      : [],
+    recommends_on_documents: [],
+  } as unknown as NonNullable<PostPageData>;
+}
 
 export function PostPreview(props: {
   showPageBackground: boolean;
@@ -125,6 +125,40 @@ export function PostPreview(props: {
     displayName: "Preview Author",
   };
 
+  let pubInfo: PublicationContext = publication
+    ? {
+        uri: publication.uri,
+        name: publication.name,
+        identity_did: publication.identity_did,
+        record: publication.record as NonNullable<PublicationContext>["record"],
+        publication_subscriptions: (
+          publication.publication_subscriptions || []
+        ).map((s) => ({
+          created_at: s.created_at,
+          identity: s.identity,
+          publication: s.publication,
+          record: s.record,
+          uri: s.uri,
+        })),
+      }
+    : null;
+
+  let fakeDocument = makeFakeDocument(pubInfo);
+
+  let fakeDocumentContextValue: DocumentContextValue = {
+    uri: FAKE_DOC_URI,
+    normalizedDocument: fakeNormalizedDocument,
+    normalizedPublication: null,
+    theme: undefined,
+    prevNext: undefined,
+    quotesAndMentions: [],
+    publication: pubInfo,
+    comments: [],
+    mentions: [],
+    leafletId: null,
+    recommendsCount: 0,
+  };
+
   return (
     <DocumentProvider value={fakeDocumentContextValue}>
       <LeafletContentProvider
diff --git a/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
index d6ec0cc2..409682ed 100644
--- a/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
+++ b/app/lish/[did]/[publication]/theme-settings/ThemeSettingsContent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
   BaseThemeProvider,
   CardBorderHiddenContext,
@@ -21,10 +21,11 @@ import {
   usePublicationData,
   useNormalizedPublicationRecord,
 } from "../dashboard/PublicationSWRProvider";
+import { Separator } from "components/Layout";
 
 export function ThemeSettingsContent() {
+  let toolbarRef = useRef<HTMLDivElement>(null);
   let [previewMode, setPreviewMode] = useState<"post" | "pub">("post");
-  let [loading, setLoading] = useState(false);
   let { data } = usePublicationData();
   let { publication } = data || {};
   let record = useNormalizedPublicationRecord();
@@ -38,8 +39,6 @@ export function ThemeSettingsContent() {
     pubBGImage,
     leafletBGRepeat,
     showPageBackground,
-    submitTheme,
-    toaster,
   } = state;
 
   return (
@@ -54,70 +53,21 @@ export function ThemeSettingsContent() {
       >
         <div className="w-full h-screen flex relative overflow-hidden">
           {/* Theme Setter Panel */}
-          <div className="absolute sm:top-6 sm:left-6 top-4 right-4 z-20">
-            <Popover
-              align="start"
-              side="bottom"
-              arrowFill="white"
-              border="#CCCCCC"
-              className="sm:w-sm w-[1000px] rounded-lg! !p-0 bg-white! border-[#CCCCCC]!"
-              trigger={
-                <button
-                  type="button"
-                  className="w-12 h-12 rounded-full bg-accent-1 text-accent-2 data-[state=open]:bg-accent-2 data-[state=open]:text-accent-1 data-[state=open]:border-accent-1 flex items-center justify-center transition-colors cursor-pointer border-2 border-acccent-2"
-                >
-                  <PaintSmall />
-                </button>
-              }
-              asChild
-            >
-              <BaseThemeProvider
-                local
-                {...localPubTheme}
-                headingFontId={headingFont}
-                bodyFontId={bodyFont}
-                hasBackgroundImage={!!image}
-                pageWidth={pageWidth}
-              >
-                <div className="flex flex-col overflow-y-auto max-h-(--radix-popover-content-available-height) py-3">
-                  <div className="p-3 pt-0 ">
-                    <ButtonPrimary
-                      fullWidth
-                      type="button"
-                      disabled={loading}
-                      onClick={async () => {
-                        let result = await submitTheme(setLoading);
-                        if (result?.success) {
-                          toaster({
-                            content: "Theme updated!",
-                            type: "success",
-                          });
-                        }
-                      }}
-                    >
-                      {loading ? <DotLoader /> : "Update"}
-                    </ButtonPrimary>
-                  </div>
-
-                  {/* Toggle + Save Header */}
-                  <div className="flex items-center justify-between px-3">
-                    <div className="font-bold text-[#595959]">Preview Mode</div>
-                    <ToggleGroup
-                      value={previewMode}
-                      optionClassName="text-base!"
-                      onChange={setPreviewMode}
-                      options={[
-                        { value: "post", label: "Post" },
-                        { value: "pub", label: "Pub" },
-                      ]}
-                    />
-                  </div>
-                  <div className="p-3 gap-2 flex flex-col">
-                    <PubThemePickerPanel state={state} />
-                  </div>
-                </div>
-              </BaseThemeProvider>
-            </Popover>
+          <div
+            ref={toolbarRef}
+            className="absolute sm:top-6 sm:left-6 top-4 right-4 z-20 flex gap-1 bg-accent-1 w-fit p-1 pl-2 rounded-md items-center"
+          >
+            <PubThemePopover state={state} toolbarRef={toolbarRef} />
+            <Separator classname="h-8! ml-1" />
+            <ToggleGroup
+              value={previewMode}
+              optionClassName="text-base! py-1! px-2!"
+              onChange={setPreviewMode}
+              options={[
+                { value: "post", label: "Post" },
+                { value: "pub", label: "Pub" },
+              ]}
+            />
           </div>
 
           {/* Full-page Preview */}
@@ -146,3 +96,87 @@ export function ThemeSettingsContent() {
     </CardBorderHiddenContext.Provider>
   );
 }
+
+const PubThemePopover = ({
+  state,
+  toolbarRef,
+}: {
+  state: ReturnType<typeof usePubThemeEditorState>;
+  toolbarRef: React.RefObject<HTMLDivElement | null>;
+}) => {
+  let {
+    localPubTheme,
+    headingFont,
+    bodyFont,
+    image,
+    pageWidth,
+    submitTheme,
+    toaster,
+  } = state;
+  let [loading, setLoading] = useState(false);
+
+  return (
+    <Popover
+      defaultOpen
+      align="start"
+      side="bottom"
+      arrowFill="white"
+      border="#CCCCCC"
+      onInteractOutside={(e) => {
+        if (
+          toolbarRef.current &&
+          e.target instanceof Node &&
+          toolbarRef.current.contains(e.target)
+        ) {
+          e.preventDefault();
+        }
+      }}
+      className="sm:w-sm w-[1000px] rounded-lg! !p-0 bg-white! border-[#CCCCCC]!"
+      trigger={
+        <button
+          type="button"
+          className="w-8 h-8 rounded-md bg-accent-1 text-accent-2 data-[state=open]:bg-accent-2 data-[state=open]:text-accent-1 flex items-center justify-center transition-colors cursor-pointer "
+        >
+          <PaintSmall />
+        </button>
+      }
+      asChild
+    >
+      <BaseThemeProvider
+        local
+        {...localPubTheme}
+        headingFontId={headingFont}
+        bodyFontId={bodyFont}
+        hasBackgroundImage={!!image}
+        pageWidth={pageWidth}
+      >
+        <div className="flex flex-col overflow-y-auto max-h-(--radix-popover-content-available-height) py-3">
+          {/* Toggle + Save Header */}
+
+          <div className="p-3 pt-0 ">
+            <ButtonPrimary
+              fullWidth
+              type="button"
+              disabled={loading}
+              onClick={async () => {
+                let result = await submitTheme(setLoading);
+                if (result?.success) {
+                  toaster({
+                    content: "Theme updated!",
+                    type: "success",
+                  });
+                }
+              }}
+            >
+              {loading ? <DotLoader /> : "Update"}
+            </ButtonPrimary>
+          </div>
+
+          <div className="px-3 gap-2 flex flex-col">
+            <PubThemePickerPanel state={state} />
+          </div>
+        </div>
+      </BaseThemeProvider>
+    </Popover>
+  );
+};
diff --git a/components/Popover/index.tsx b/components/Popover/index.tsx
index 588f9e78..f8f5e172 100644
--- a/components/Popover/index.tsx
+++ b/components/Popover/index.tsx
@@ -16,18 +16,21 @@ export const Popover = (props: {
   border?: string;
   className?: string;
   open?: boolean;
+  defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   onOpenAutoFocus?: (e: Event) => void;
   asChild?: boolean;
   arrowFill?: string;
   noArrow?: boolean;
+  onInteractOutside?: (e: Event) => void;
 }) => {
-  let [open, setOpen] = useState(props.open || false);
+  let [open, setOpen] = useState(props.open || props.defaultOpen || false);
   useEffect(() => {
     if (props.open !== undefined) setOpen(props.open);
   }, [props.open]);
   return (
     <RadixPopover.Root
+      defaultOpen={props.defaultOpen}
       open={props.open}
       onOpenChange={(o) => {
         setOpen(o);
@@ -56,6 +59,7 @@ export const Popover = (props: {
               sideOffset={props.sideOffset ? props.sideOffset : 4}
               collisionPadding={16}
               onOpenAutoFocus={props.onOpenAutoFocus}
+              onInteractOutside={props.onInteractOutside}
             >
               {props.children}
               {!props.noArrow && (
-- 
2.51.2