From 00470742d4e2c414b97bc24b6c290752339b161f Mon Sep 17 00:00:00 2001 From: celine Date: Tue, 26 May 2026 17:34:25 -0400 Subject: [PATCH] bunch of small teaks --- .../[publication]/PublicationPostItem.tsx | 80 +++--- .../[publication]/[rkey]/PostContent.tsx | 19 +- components/ActionBar/DesktopNavigation.tsx | 3 + components/Blocks/Block.tsx | 18 +- .../StandardSitePostItem.tsx | 34 +-- .../Blocks/StandardSitePostBlock/index.tsx | 236 ++++++++++-------- components/Popover/index.tsx | 1 + package.json | 2 +- 8 files changed, 212 insertions(+), 181 deletions(-) diff --git a/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx b/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx index 856adc73..3da3aaff 100644 --- a/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx +++ b/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx @@ -66,14 +66,16 @@ function PostLink({ return ( {children} ); } return ( -
{children}
+
+ {children} +
); } @@ -98,38 +100,38 @@ export function PublicationPostItemSmall(props: CommonProps) { export function PublicationPostItemMedium(props: MediumProps) { const hasCoverImage = !!props.coverImageSrc; return ( -
-
-
- - {props.title && ( -

{props.title}

- )} -

{props.description}

- - +
+
+ + {props.title && ( +

{props.title}

+ )} +

+ {props.description} +

+ + +
+
+ {props.footer}
- {hasCoverImage && ( -
- {props.coverImageAlt -
- )} -
-
-
- {props.footer}
+ {hasCoverImage && ( +
+ {props.coverImageAlt +
+ )}
); } @@ -163,7 +165,7 @@ export function PublicationPostItemLarge(props: LargeProps) { textClassName={`${widePage ? "text-sm sm:text-base " : "text-sm "} `} />
-
+
{props.footer}
@@ -176,13 +178,11 @@ export function PublicationPostItemLarge(props: LargeProps) { className={`flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full items-start`} > {hasCoverImage && ( -
- {props.coverImageAlt -
+ {props.coverImageAlt )} {body}
diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx index 3c056487..2c775a17 100644 --- a/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx +++ b/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx @@ -35,7 +35,10 @@ import { StaticMathBlock } from "./Blocks/StaticMathBlock"; import { PubCodeBlock } from "./Blocks/PubCodeBlock"; import { AppBskyFeedDefs } from "@atproto/api"; import { PubBlueskyPostBlock } from "./Blocks/PublishBskyPostBlock"; -import { StandardSitePostItemView } from "components/Blocks/StandardSitePostBlock/StandardSitePostItem"; +import { + StandardSitePostItemView, + WithStandardSitePostPublicationTheme, +} from "components/Blocks/StandardSitePostBlock/StandardSitePostItem"; import type { StandardSitePostData } from "app/api/rpc/[command]/get_standard_site_posts"; import { PublishedPageLinkBlock } from "./Blocks/PublishedPageBlock"; import { PublishedPollBlock } from "./Blocks/PublishedPollBlock"; @@ -251,12 +254,16 @@ export let Block = ({ : "small"; return (
- + enabled={b.block.showPublicationTheme !== false} + > + +
); } diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx index c0a0a437..d64484e3 100644 --- a/components/ActionBar/DesktopNavigation.tsx +++ b/components/ActionBar/DesktopNavigation.tsx @@ -122,6 +122,9 @@ export const NavigationContent = (props: NavigationProps) => { asChild trigger={ { + console.log("hello"); + }} className="w-full! grow" secondary icon={} diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx index 093603e3..4244ec7b 100644 --- a/components/Blocks/Block.tsx +++ b/components/Blocks/Block.tsx @@ -423,15 +423,15 @@ export const BlockLayout = (props: { className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden ${props.hasAlignment ? "w-fit" : "w-full"} ${props.isSelected ? "block-border-selected " : "block-border"} - ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}`} - style={{ - backgroundColor: - props.hasBackground === "accent" - ? "var(--accent-light)" - : props.hasBackground === "page" - ? "rgb(var(--bg-page))" - : "transparent", - }} + ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"} + ${ + props.hasBackground === "accent" + ? "bg-[var(--accent-light)]" + : props.hasBackground === "page" + ? "bg-page" + : "transparent" + } + `} > {props.children}
diff --git a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx index ce7225b3..a692a088 100644 --- a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx +++ b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx @@ -25,12 +25,10 @@ export type StandardSitePostSize = "large" | "medium" | "small"; export function StandardSitePostItem({ uri, size = "medium", - showPubTheme = true, currentPublicationUri, }: { uri: string; size?: StandardSitePostSize; - showPubTheme?: boolean; currentPublicationUri?: string | null; }) { const { data, isLoading } = useStandardSitePost(uri); @@ -51,7 +49,6 @@ export function StandardSitePostItem({ ); @@ -94,7 +91,7 @@ function StandardSitePostItemPlaceholder({ if (size === "small") { return ( <> -
+
@@ -106,8 +103,8 @@ function StandardSitePostItemPlaceholder({ if (size === "medium") { return ( <> -
-
+
+
@@ -126,17 +123,17 @@ function StandardSitePostItemPlaceholder({ return ( <>
); - } else if (size === "medium") { - item = ( + } + if (size === "medium") { + return ( ); - } else { - item = ; } - - return ( - - {item} - - ); + return ; } function PubFooter({ diff --git a/components/Blocks/StandardSitePostBlock/index.tsx b/components/Blocks/StandardSitePostBlock/index.tsx index 46b784e8..3acfbc8c 100644 --- a/components/Blocks/StandardSitePostBlock/index.tsx +++ b/components/Blocks/StandardSitePostBlock/index.tsx @@ -32,32 +32,35 @@ export const StandardSitePostBlock = ( if (!uri) return null; - let block = ( + if (!post) + return ( + + ); + + return ( } > - + +
+ +
+ ); - - if (!post) return block; - - return ( - - {block} - - ); }; function StandardSitePostSettingsButton(props: { entityID: string }) { @@ -69,70 +72,84 @@ function StandardSitePostSettingsButton(props: { entityID: string }) { "standard-site-post/show-publication-theme", ); let showPubTheme = showPubThemeFact?.data.value !== false; + let popoverKey = `${props.entityID}-settings`; + let setOpenPopover = useUIState((s) => s.setOpenPopover); + let isOpen = useUIState((s) => s.openPopover === popoverKey); return ( setOpenPopover(o ? popoverKey : null)} onOpenAutoFocus={(e) => e.preventDefault()} trigger={ } > -

Post Size

-
- {( - [ - { value: "small", Icon: SmallIcon }, - { value: "medium", Icon: MedIcon }, - { value: "large", Icon: LargeIcon }, - ] as { - value: StandardSitePostSize; - Icon: (props: { selected: boolean }) => React.ReactNode; - }[] - ).map((option) => { - let selected = - size === option.value || - (option.value === "medium" && size !== "small" && size !== "large"); - return ( - - ); - })} +
+
+

Post Size

+
+ This block links to a Standard Site article. +
+
+
+ {( + [ + { value: "small", Icon: SmallIcon }, + { value: "medium", Icon: MedIcon }, + { value: "large", Icon: LargeIcon }, + ] as { + value: StandardSitePostSize; + Icon: (props: { selected: boolean }) => React.ReactNode; + }[] + ).map((option) => { + let selected = + size === option.value || + (option.value === "medium" && + size !== "small" && + size !== "large"); + return ( + + ); + })} +
+
+ { + if (!rep) return; + rep.mutate.assertFact({ + entity: props.entityID, + attribute: "standard-site-post/show-publication-theme", + data: { type: "boolean", value: !showPubTheme }, + }); + }} + > +
Use Publication Theme
+
-
- { - if (!rep) return; - rep.mutate.assertFact({ - entity: props.entityID, - attribute: "standard-site-post/show-publication-theme", - data: { type: "boolean", value: !showPubTheme }, - }); - }} - > -
Use Publication Theme
- ); } @@ -140,14 +157,19 @@ function StandardSitePostSettingsButton(props: { entityID: string }) { const SmallIcon = ({ selected }: { selected: boolean }) => { return (
-
-
+
SMALL
+
+
+
-
-
-
+
+
+
+
@@ -157,24 +179,29 @@ const SmallIcon = ({ selected }: { selected: boolean }) => { const MedIcon = ({ selected }: { selected: boolean }) => { return (
-
-
-
-
-
-
-
+
MEDIUM
+
+
+
+
+
+
+
+
+
+
-
); }; @@ -182,22 +209,27 @@ const MedIcon = ({ selected }: { selected: boolean }) => { const LargeIcon = ({ selected }: { selected: boolean }) => { return (
+
LARGE
+ className={`flex flex-col gap-1 opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`} + > +
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/components/Popover/index.tsx b/components/Popover/index.tsx index 7b8feb68..3466b826 100644 --- a/components/Popover/index.tsx +++ b/components/Popover/index.tsx @@ -65,6 +65,7 @@ export const Popover = (props: { sideOffset={props.sideOffset ? props.sideOffset : 4} collisionPadding={16} onOpenAutoFocus={props.onOpenAutoFocus} + arrowPadding={12} > {props.children} {!props.noArrow && ( diff --git a/package.json b/package.json index c10059d6..e4b28d34 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "lint": "next lint", - "dev": "TZ=UTC next dev --turbo", + "dev": "TZ=UTC next dev --turbo -H 127.0.0.1", "publish-lexicons": "tsx lexicons/publish.ts", "generate-db-types": "supabase gen types --local > supabase/database.types.ts && drizzle-kit introspect && rm -rf ./drizzle/*.sql ./drizzle/meta", "lexgen": "tsx ./lexicons/build.ts && lex gen-api ./lexicons/api ./lexicons/pub/leaflet/document.json ./lexicons/pub/leaflet/comment.json ./lexicons/pub/leaflet/publication.json ./lexicons/pub/leaflet/publicationPage.json ./lexicons/pub/leaflet/content.json ./lexicons/pub/leaflet/*/* ./lexicons/com/atproto/*/* ./lexicons/app/bsky/*/* ./lexicons/site/*/* ./lexicons/site/*/*/* ./lexicons/parts/*/* ./lexicons/parts/*/*/* --yes && tsx ./lexicons/fix-extensions.ts ./lexicons/api", -- 2.51.2