- {
- const url = new URL(window.location.href);
- url.searchParams.set("order", o);
- window.history.pushState({}, "", url);
- setOrder(o);
- }}
- />
-
- );
-}
-
-export default function SortButtons(props: {
- order: string;
- setOrder: (order: string) => void;
-}) {
- const [selected, setSelected] = useState<"recentlyUpdated" | "popular">(
- "recentlyUpdated",
- );
-
- return (
-
- {allPublications.map((pub) => (
-
-
- Loading more publications...
-
- )}
-
- props.setOrder("recentlyUpdated")}
- >
- Recently Updated
-
-
- props.setOrder("popular")}
- >
- Popular
-
-
- );
-}
-
-const SortButton = (props: {
- children: React.ReactNode;
- onClick: () => void;
- selected: boolean;
-}) => {
- return (
-
-
- {props.selected && (
- <>
-
- );
-};
-
-const GlitterBig = () => {
- return (
-
- );
-};
-
-const GlitterSmall = () => {
- return (
-
- );
-};
diff --git a/app/(home-pages)/discover/getPublications.ts b/app/(home-pages)/discover/getPublications.ts
deleted file mode 100644
index aa633c1a..00000000
--- a/app/(home-pages)/discover/getPublications.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-"use server";
-
-import { supabaseServerClient } from "supabase/serverClient";
-import {
- normalizePublicationRow,
- hasValidPublication,
-} from "src/utils/normalizeRecords";
-import { deduplicateByUri } from "src/utils/deduplicateRecords";
-
-export type Cursor = {
- sort_date?: string;
- count?: number;
- uri: string;
-};
-
-export type Publication = Awaited<
- ReturnType
-
-
-
-
-
-
- )}
-
-
- );
-};
diff --git a/app/(home-pages)/home/Actions/AccountSettings.tsx b/app/(home-pages)/home/Actions/AccountSettings.tsx
index 67df4f37..c3cb0043 100644
--- a/app/(home-pages)/home/Actions/AccountSettings.tsx
+++ b/app/(home-pages)/home/Actions/AccountSettings.tsx
@@ -1,134 +1,24 @@
"use client";
import { ActionButton } from "components/ActionBar/ActionButton";
-import { mutate } from "swr";
-import { AccountSmall } from "components/Icons/AccountSmall";
-import { LogoutSmall } from "components/Icons/LogoutSmall";
import { Popover } from "components/Popover";
-import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
-import { SpeedyLink } from "components/SpeedyLink";
-import { GoBackSmall } from "components/Icons/GoBackSmall";
-import { useState } from "react";
import { ThemeSetterContent } from "components/ThemeManager/ThemeSetter";
import { useIsMobile } from "src/hooks/isMobile";
+import { PaintSmall } from "components/Icons/PaintSmall";
-export const AccountSettings = (props: { entityID: string }) => {
- let [state, setState] = useState<"menu" | "general" | "theme">("menu");
+export const AccountTheme = (props: { entityID: string }) => {
let isMobile = useIsMobile();
return (
-
- Discover
-- Explore publications on Leaflet ✨ Or{" "} - make your own! -
-
-
- );
-};
-
-const GeneralSettings = (props: { backToMenu: () => void }) => {
- return (
-
- props.backToMenu()}
- />
-
-
-
- );
-};
-const AccountThemeSettings = (props: {
- entityID: string;
- backToMenu: () => void;
-}) => {
- return (
-
- props.backToMenu()}
- />
- );
-};
-export const AccountSettingsHeader = (props: {
- state: "menu" | "general" | "theme";
- backToMenuAction?: () => void;
-}) => {
- return (
-
- {props.state === "menu"
- ? "Settings"
- : props.state === "general"
- ? "General"
- : props.state === "theme"
- ? "Account Theme"
- : ""}
- {props.backToMenuAction && (
-
- )}
-
+
);
};
diff --git a/app/(home-pages)/home/Actions/Actions.tsx b/app/(home-pages)/home/Actions/Actions.tsx
index 20852f4d..050f7f16 100644
--- a/app/(home-pages)/home/Actions/Actions.tsx
+++ b/app/(home-pages)/home/Actions/Actions.tsx
@@ -2,7 +2,7 @@
import { ThemePopover } from "components/ThemeManager/ThemeSetter";
import { CreateNewLeafletButton } from "./CreateNewButton";
import { HelpButton } from "app/[leaflet_id]/actions/HelpButton";
-import { AccountSettings } from "./AccountSettings";
+import { AccountTheme } from "./AccountSettings";
import { useIdentityData } from "components/IdentityProvider";
import { useReplicache } from "src/replicache";
import { LoginActionButton } from "components/LoginButton";
@@ -13,11 +13,7 @@ export const Actions = () => {
return (
<>
-
-
-
-
-
- {
- let openNewLeaflet = (id: string) => {
- if (isMobile) {
- window.location.href = `/${id}?focusFirstBlock`;
- } else {
- window.open(`/${id}?focusFirstBlock`, "_blank");
- }
- };
-
- let id = await createNewLeaflet({
- pageType: "doc",
- redirectUser: false,
- });
- openNewLeaflet(id);
- }}
- >
-
-
- Leaflet
- {/*A platform for social publishing.
*/} -
- Write and share delightful documents!
-
-
-
-
-
-
+ -
or
- -
- Right now docs and publications are separate. Soon you'll be able to add
- docs to pubs!
+
);
}
-export const PublicationBanner = (props: { small?: boolean }) => {
+let bannerStyles =
+ "flex flex-row sm:flex-col py-4 px-4 sm:items-center items-start gap-4";
+
+const PublicationBanner = () => {
return (
-
+
+
+ +
or
+
- {props.small ? (
-
+
-
- Start a Publication
- {" "}
- and blog in the Atmosphere
+
+
+ Create a Publication
+
+
Create a Publication!
+
+ You can decide to share or publish it later.
+
+
- {props.small ? (
-
-
+
+ {props.children}
);
@@ -34,6 +36,7 @@ export default async function HomePagesLayout(props: {
>
+
diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
index 5f0c12b3..c389d6e4 100644
--- a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
@@ -47,6 +47,7 @@ export const LooseleafsLayout = (props: {
),
},
}}
+ pageTitle="Looseleafs"
/>
);
};
diff --git a/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx b/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
index eb841838..7bd67c3c 100644
--- a/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/PostsContent.tsx
@@ -68,7 +68,7 @@ export const ProfilePostsContent = (props: {
}
return (
-
+
+
+
+
);
diff --git a/app/(home-pages)/home/HomeEmpty/WelcomeToLeafletIllo.tsx b/app/(home-pages)/home/HomeEmpty/WelcomeToLeafletIllo.tsx
index 289d8355..d88c55a5 100644
--- a/app/(home-pages)/home/HomeEmpty/WelcomeToLeafletIllo.tsx
+++ b/app/(home-pages)/home/HomeEmpty/WelcomeToLeafletIllo.tsx
@@ -3,8 +3,8 @@ import { theme } from "tailwind.config";
export const WelcomeToLeafletIllo = () => {
return (
);
};
@@ -170,10 +167,6 @@ export function HomeLeafletList(props: {
showPreview
/>
-
- {leaflets.filter((l) => !!l.token.leaflets_in_publications).length ===
- 0 && Just write something
+
+ You can decide to share or publish it later.
- )}
-
-
- Explore Publications
- {" "}
- on art, tech, games, music & more!
+ {
+ let openNewLeaflet = (id: string) => {
+ if (isMobile) {
+ window.location.href = `/${id}?focusFirstBlock`;
+ } else {
+ window.open(`/${id}?focusFirstBlock`, "_blank");
+ }
+ };
+
+ let id = await createNewLeaflet({
+ pageType: "doc",
+ redirectUser: false,
+ });
+ openNewLeaflet(id);
+ }}
+ >
+ New Doc!
+
+
-
{allPosts.map((post) => (
);
- console.log(props.profile);
-
return (
+
{props.publications.map((p) => (
+
{
+export const PubListing = (props: PublicationSubscription) => {
let record = props.record;
let theme = usePubTheme(record?.theme);
let backgroundImage = record?.theme?.backgroundImage?.image?.ref
@@ -28,8 +25,7 @@ export const PubListing = (
if (!record) return null;
return (
-
+
{record.name}
{record.description && ( -+
{record.description}
)} -
+
+
-
+
{props.authorProfile?.handle}
@@ -67,8 +64,17 @@ export const PubListing = (
)}
+
+
{allComments.map((comment) => (
- {props.children}
-
+ <>{props.children}
),
},
diff --git a/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx b/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
index 9e5e4ca8..49818ecd 100644
--- a/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx
@@ -2,7 +2,7 @@
import { useEffect, useRef } from "react";
import useSWRInfinite from "swr/infinite";
-import { PubListing } from "app/(home-pages)/discover/PubListing";
+import { PubListing } from "app/(home-pages)/p/[didOrHandle]/PubListing";
import {
getSubscriptions,
type PublicationSubscription,
@@ -82,7 +82,7 @@ export const ProfileSubscriptionsContent = (props: {
return (
-
+
{allSubscriptions.map((sub) => (
+
+ );
+ }
+
+ const navState = cookieStore.get("nav-state")?.value;
+
+ if (navState === "reader") {
+ return (
+
+
+ );
+ }
+
+ return
+
+
,
+ ) => {
+ let { data: document } = await supabase
+ .from("documents")
+ .select(
+ `
+ data,
+ uri,
+ comments_on_documents(*, bsky_profiles(*)),
+ document_mentions_in_bsky(*),
+ documents_in_publications(publications(*))
+ `,
+ )
+ .eq("uri", document_uri)
+ .limit(1)
+ .single();
+
+ if (!document) {
+ return { comments: [], quotesAndMentions: [], totalMentionsCount: 0 };
+ }
+
+ const normalizedData = normalizeDocumentRecord(
+ document.data,
+ document.uri,
+ );
+
+ const pub = document.documents_in_publications?.[0]?.publications;
+ const normalizedPubRecord = pub
+ ? normalizePublicationRecord(pub.record)
+ : null;
+
+ // Compute document URL for constellation lookup
+ let absoluteUrl = "";
+ if (normalizedData) {
+ const postUrl = getDocumentURL(
+ normalizedData,
+ document.uri,
+ normalizedPubRecord,
+ );
+ absoluteUrl = postUrl.startsWith("/")
+ ? `https://leaflet.pub${postUrl}`
+ : postUrl;
+ }
+
+ // Fetch constellation backlinks
+ const constellationBacklinks = absoluteUrl
+ ? await getConstellationBacklinks(absoluteUrl)
+ : [];
+
+ // Deduplicate constellation backlinks internally
+ const uniqueBacklinks = Array.from(
+ new Map(constellationBacklinks.map((b) => [b.uri, b])).values(),
+ );
+
+ // Combine DB mentions and constellation backlinks, deduplicating by URI
+ const dbMentionUris = new Set(
+ document.document_mentions_in_bsky.map((m) => m.uri),
+ );
+ const quotesAndMentions: { uri: string; link?: string }[] = [
+ ...document.document_mentions_in_bsky.map((m) => ({
+ uri: m.uri,
+ link: m.link,
+ })),
+ ...uniqueBacklinks.filter((b) => !dbMentionUris.has(b.uri)),
+ ];
+
+ return {
+ comments: document.comments_on_documents,
+ quotesAndMentions,
+ totalMentionsCount: quotesAndMentions.length,
+ };
+ },
+});
diff --git a/app/api/rpc/[command]/get_hot_feed.ts b/app/api/rpc/[command]/get_hot_feed.ts
new file mode 100644
index 00000000..c7811086
--- /dev/null
+++ b/app/api/rpc/[command]/get_hot_feed.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+import { makeRoute } from "../lib";
+import type { Env } from "./route";
+import { getHotFeed } from "app/(home-pages)/reader/getHotFeed";
+import type { Post } from "app/(home-pages)/reader/getReaderFeed";
+
+export type GetHotFeedReturnType = Awaited<
+ ReturnType<(typeof get_hot_feed)["handler"]>
+>;
+
+export const get_hot_feed = makeRoute({
+ route: "get_hot_feed",
+ input: z.object({}),
+ handler: async ({}, {}: Pick) => {
+ return await getHotFeed();
+ },
+});
diff --git a/app/api/rpc/[command]/route.ts b/app/api/rpc/[command]/route.ts
index c6ba128e..ebb2af14 100644
--- a/app/api/rpc/[command]/route.ts
+++ b/app/api/rpc/[command]/route.ts
@@ -15,6 +15,8 @@ import { search_publication_names } from "./search_publication_names";
import { search_publication_documents } from "./search_publication_documents";
import { get_profile_data } from "./get_profile_data";
import { get_user_recommendations } from "./get_user_recommendations";
+import { get_hot_feed } from "./get_hot_feed";
+import { get_document_interactions } from "./get_document_interactions";
let supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_API_URL as string,
@@ -43,6 +45,8 @@ let Routes = [
search_publication_documents,
get_profile_data,
get_user_recommendations,
+ get_hot_feed,
+ get_document_interactions,
];
export async function POST(
req: Request,
diff --git a/app/api/update-nav-state/route.ts b/app/api/update-nav-state/route.ts
new file mode 100644
index 00000000..3e496e82
--- /dev/null
+++ b/app/api/update-nav-state/route.ts
@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(request: NextRequest) {
+ const { state } = (await request.json()) as { state: string };
+ if (state !== "home" && state !== "reader") {
+ return NextResponse.json({ error: "Invalid state" }, { status: 400 });
+ }
+
+ const response = NextResponse.json({ ok: true });
+ response.cookies.set("nav-state", state, {
+ path: "/",
+ sameSite: "lax",
+ maxAge: 60 * 60 * 24 * 365,
+ });
+ return response;
+}
diff --git a/app/lish/Subscribe.tsx b/app/lish/Subscribe.tsx
index eb2e1411..7c443496 100644
--- a/app/lish/Subscribe.tsx
+++ b/app/lish/Subscribe.tsx
@@ -24,8 +24,10 @@ import { useSearchParams } from "next/navigation";
import LoginForm from "app/login/LoginForm";
import { RSSSmall } from "components/Icons/RSSSmall";
import { OAuthErrorMessage, isOAuthSessionError } from "components/OAuthError";
+import { RSSTiny } from "components/Icons/RSSTiny";
export const SubscribeWithBluesky = (props: {
+ compact?: boolean;
pubName: string;
pub_uri: string;
base_url: string;
@@ -36,8 +38,12 @@ export const SubscribeWithBluesky = (props: {
let [successModalOpen, setSuccessModalOpen] = useState(
!!searchParams.has("showSubscribeSuccess"),
);
+ let [localSubscribeState, setLocalSubscribeState] = useState<
+ "subscribed" | "unsubscribed"
+ >("subscribed");
let subscribed =
identity?.atp_did &&
+ localSubscribeState !== "unsubscribed" &&
props.subscribers.find((s) => s.identity === identity.atp_did);
if (successModalOpen)
@@ -48,12 +54,19 @@ export const SubscribeWithBluesky = (props: {
/>
);
if (subscribed) {
- return setLocalSubscribeState("unsubscribed")}
+ />
+ );
}
return (
setLocalSubscribeState("subscribed")}
+ compact={props.compact}
pub_uri={props.pub_uri}
setSuccessModalOpen={setSuccessModalOpen}
/>
@@ -63,7 +76,11 @@ export const SubscribeWithBluesky = (props: {
target="_blank"
aria-label="Subscribe to RSS"
>
-
@@ -74,6 +91,8 @@ export const ManageSubscription = (props: {
pub_uri: string;
subscribers: { identity: string }[];
base_url: string;
+ compact?: boolean;
+ onUnsubscribe?: () => void;
}) => {
let toaster = useToaster();
let [hasFeed] = useState(false);
@@ -83,16 +102,21 @@ export const ManageSubscription = (props: {
content: "You unsubscribed.",
type: "success",
});
+ props.onUnsubscribe?.();
}, null);
return (
+
+ {[...Array(3)].map((_, i) => (
+
+ );
+}
diff --git a/app/(home-pages)/reader/GlobalContent.tsx b/app/(home-pages)/reader/GlobalContent.tsx
new file mode 100644
index 00000000..53cf2462
--- /dev/null
+++ b/app/(home-pages)/reader/GlobalContent.tsx
@@ -0,0 +1,49 @@
+"use client";
+import { use } from "react";
+import useSWR from "swr";
+import { callRPC } from "app/api/rpc/client";
+import { PostListing } from "components/PostListing";
+import type { Post } from "./getReaderFeed";
+import {
+ DesktopInteractionPreviewDrawer,
+ MobileInteractionPreviewDrawer,
+} from "./InteractionDrawers";
+
+export const GlobalContent = (props: {
+ promise: Promise<{ posts: Post[] }>;
+}) => {
+ const initialData = use(props.promise);
+
+ const { data } = useSWR(
+ "hot_feed",
+ async () => {
+ const res = await callRPC("get_hot_feed", {});
+ return res as unknown as { posts: Post[] };
+ },
+ {
+ fallbackData: { posts: initialData.posts },
+ },
+ );
+
+ const posts = data?.posts ?? [];
+
+ if (posts.length === 0) {
+ return (
+
+
+
+
+
+ ))}
+
+ Nothing trending right now. Check back soon!
+
+ );
+ }
+
+ return (
+
+
+ );
+};
diff --git a/app/(home-pages)/reader/ReaderContent.tsx b/app/(home-pages)/reader/InboxContent.tsx
similarity index 61%
rename from app/(home-pages)/reader/ReaderContent.tsx
rename to app/(home-pages)/reader/InboxContent.tsx
index e73b3df9..791d4827 100644
--- a/app/(home-pages)/reader/ReaderContent.tsx
+++ b/app/(home-pages)/reader/InboxContent.tsx
@@ -1,4 +1,5 @@
"use client";
+import { use } from "react";
import { ButtonPrimary } from "components/Buttons";
import { DiscoverSmall } from "components/Icons/DiscoverSmall";
import type { Cursor, Post } from "./getReaderFeed";
@@ -7,11 +8,17 @@ import { getReaderFeed } from "./getReaderFeed";
import { useEffect, useRef } from "react";
import Link from "next/link";
import { PostListing } from "components/PostListing";
+import { useHasBackgroundImage } from "components/Pages/useHasBackgroundImage";
+import {
+ DesktopInteractionPreviewDrawer,
+ MobileInteractionPreviewDrawer,
+} from "./InteractionDrawers";
-export const ReaderContent = (props: {
- posts: Post[];
- nextCursor: Cursor | null;
+export const InboxContent = (props: {
+ promise: Promise<{ posts: Post[]; nextCursor: Cursor | null }>;
}) => {
+ const { posts, nextCursor } = use(props.promise);
+
const getKey = (
pageIndex: number,
previousPageData: {
@@ -33,7 +40,7 @@ export const ReaderContent = (props: {
getKey,
([_, cursor]) => getReaderFeed(cursor),
{
- fallbackData: [{ posts: props.posts, nextCursor: props.nextCursor }],
+ fallbackData: [{ posts, nextCursor }],
revalidateFirstPage: false,
},
);
@@ -63,24 +70,36 @@ export const ReaderContent = (props: {
const allPosts = data ? data.flatMap((page) => page.posts) : [];
+ const sortedPosts = allPosts.sort(
+ (a, b) =>
+ new Date(b.documents.data?.publishedAt || 0).getTime() -
+ new Date(a.documents.data?.publishedAt || 0).getTime(),
+ );
+
if (allPosts.length === 0 && !isValidating) return
+ {posts.map((p) => (
+
+
- {allPosts.map((p) => (
-
+
+ See Full Post
+
+ {isLoading ? (
+ (null);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ if (entries[0].isIntersecting && !isValidating) {
+ const hasMore = data && data[data.length - 1]?.nextCursor;
+ if (hasMore) {
+ setSize(size + 1);
+ }
+ }
+ },
+ { threshold: 0.1 },
+ );
+
+ if (loadMoreRef.current) {
+ observer.observe(loadMoreRef.current);
+ }
+
+ return () => observer.disconnect();
+ }, [data, size, setSize, isValidating]);
+
+ const allPosts = data ? data.flatMap((page) => page.posts) : [];
+
+ if (allPosts.length === 0 && !isValidating) {
+ return (
+ {
+ const params = new URLSearchParams({
+ uris: JSON.stringify(uris),
+ });
+ const response = await fetch(`/api/bsky/hydrate?${params.toString()}`);
+ if (!response.ok) throw new Error("Failed to fetch Bluesky posts");
+ return response.json();
+}
+
+export function ReaderMentionsContent(props: {
+ quotesAndMentions: { uri: string; link?: string }[];
+}) {
+ const uris = props.quotesAndMentions.map((q) => q.uri);
+ const key = uris.length > 0
+ ? `/api/bsky/hydrate?${new URLSearchParams({ uris: JSON.stringify(uris) }).toString()}`
+ : null;
+
+ const { data: bskyPosts, isLoading } = useSWR(key, () =>
+ fetchBskyPosts(uris),
+ );
+
+ if (props.quotesAndMentions.length === 0) {
+ return (
+ ();
+ bskyPosts?.forEach((pv) => postViewMap.set(pv.uri, pv));
+
+ return (
+ (null);
-
- // Set up intersection observer to load more when trigger element is visible
- useEffect(() => {
- const observer = new IntersectionObserver(
- (entries) => {
- if (entries[0].isIntersecting && !isValidating) {
- const hasMore = data && data[data.length - 1]?.nextCursor;
- if (hasMore) {
- setSize(size + 1);
- }
- }
- },
- { threshold: 0.1 },
- );
-
- if (loadMoreRef.current) {
- observer.observe(loadMoreRef.current);
- }
-
- return () => observer.disconnect();
- }, [data, size, setSize, isValidating]);
-
- const allPublications = data
- ? data.flatMap((page) => page.subscriptions)
- : [];
-
- if (allPublications.length === 0 && !isValidating)
- return {
+ const pub = doc.documents_in_publications?.[0]?.publications;
+ const uri = new AtUri(doc.uri);
+ const handle = await idResolver.did.resolve(uri.host);
+
+ const normalizedData = normalizeDocumentRecord(doc.data, doc.uri);
+ if (!normalizedData) return null;
+
+ const normalizedPubRecord = pub
+ ? normalizePublicationRecord(pub.record)
+ : null;
+
+ const mentionsCount = await getAccurateMentionsCount(
+ normalizedData,
+ doc.uri,
+ normalizedPubRecord,
+ doc.document_mentions_in_bsky?.[0]?.count || 0,
+ );
+
+ return {
+ publication: pub
+ ? {
+ href: getPublicationURL(pub),
+ pubRecord: normalizedPubRecord,
+ uri: pub.uri || "",
+ }
+ : undefined,
+ author: handle?.alsoKnownAs?.[0]
+ ? `@${handle.alsoKnownAs[0].slice(5)}`
+ : null,
+ documents: {
+ comments_on_documents: doc.comments_on_documents,
+ document_mentions_in_bsky: doc.document_mentions_in_bsky,
+ recommends_on_documents: doc.recommends_on_documents,
+ mentionsCount,
+ data: normalizedData,
+ uri: doc.uri,
+ sort_date: doc.sort_date,
+ },
+ };
+}
+
+async function getAccurateMentionsCount(
+ normalizedData: NonNullable>,
+ docUri: string,
+ normalizedPubRecord: ReturnType,
+ dbMentionsCount: number,
+): Promise {
+ const postUrl = getDocumentURL(normalizedData, docUri, normalizedPubRecord);
+ const absoluteUrl = postUrl.startsWith("/")
+ ? `https://leaflet.pub${postUrl}`
+ : postUrl;
+ const constellationBacklinks = await getConstellationBacklinks(absoluteUrl);
+ const uniqueBacklinkCount = new Set(
+ constellationBacklinks.map((b) => b.uri),
+ ).size;
+ return dbMentionsCount + uniqueBacklinkCount;
+}
diff --git a/app/(home-pages)/reader/getHotFeed.ts b/app/(home-pages)/reader/getHotFeed.ts
new file mode 100644
index 00000000..ada1e68a
--- /dev/null
+++ b/app/(home-pages)/reader/getHotFeed.ts
@@ -0,0 +1,100 @@
+"use server";
+
+import { drizzle } from "drizzle-orm/node-postgres";
+import { sql } from "drizzle-orm";
+import { pool } from "supabase/pool";
+import Client from "ioredis";
+import { AtUri } from "@atproto/api";
+import { supabaseServerClient } from "supabase/serverClient";
+import { enrichDocumentToPost } from "./enrichPost";
+import type { Post } from "./getReaderFeed";
+
+let redisClient: Client | null = null;
+if (process.env.REDIS_URL && process.env.NODE_ENV === "production") {
+ redisClient = new Client(process.env.REDIS_URL);
+}
+
+const CACHE_KEY = "hot_feed_v1";
+const CACHE_TTL = 300; // 5 minutes
+
+export async function getHotFeed(): Promise<{ posts: Post[] }> {
+ // Check Redis cache
+ if (redisClient) {
+ const cached = await redisClient.get(CACHE_KEY);
+ if (cached) {
+ return JSON.parse(cached) as { posts: Post[] };
+ }
+ }
+
+ // Run ranked SQL query to get top 50 URIs
+ const client = await pool.connect();
+ const db = drizzle(client);
+
+ let uris: string[];
+ try {
+ const ranked = await db.execute(sql`
+ SELECT uri
+ FROM documents
+ WHERE indexed = true
+ AND sort_date > now() - interval '7 days'
+ ORDER BY
+ (bsky_like_count + recommend_count * 5)::numeric
+ / power(extract(epoch from (now() - sort_date)) / 3600 + 2, 1.5) DESC
+ LIMIT 50
+ `);
+ uris = ranked.rows.map((row: any) => row.uri as string);
+ } finally {
+ client.release();
+ }
+
+ if (uris.length === 0) {
+ return { posts: [] };
+ }
+
+ // Batch-fetch documents with publication joins and interaction counts
+ const { data: documents } = await supabaseServerClient
+ .from("documents")
+ .select(
+ `*,
+ comments_on_documents(count),
+ document_mentions_in_bsky(count),
+ recommends_on_documents(count),
+ documents_in_publications(publications(*))`,
+ )
+ .in("uri", uris);
+
+ // Build lookup map for enrichment
+ const docMap = new Map((documents || []).map((d) => [d.uri, d]));
+
+ // Process in ranked order, deduplicating by identity key (DID/rkey)
+ const seen = new Set();
+ const orderedDocs: NonNullable[number][] = [];
+ for (const uri of uris) {
+ try {
+ const parsed = new AtUri(uri);
+ const identityKey = `${parsed.host}/${parsed.rkey}`;
+ if (seen.has(identityKey)) continue;
+ seen.add(identityKey);
+ } catch {
+ // invalid URI, skip dedup check
+ }
+ const doc = docMap.get(uri);
+ if (doc) orderedDocs.push(doc);
+ }
+
+ // Enrich into Post[]
+ const posts = (
+ await Promise.all(
+ orderedDocs.map((doc) => enrichDocumentToPost(doc as any)),
+ )
+ ).filter((post): post is Post => post !== null);
+
+ const response = { posts };
+
+ // Cache in Redis
+ if (redisClient) {
+ await redisClient.setex(CACHE_KEY, CACHE_TTL, JSON.stringify(response));
+ }
+
+ return response;
+}
diff --git a/app/(home-pages)/reader/getNewFeed.ts b/app/(home-pages)/reader/getNewFeed.ts
new file mode 100644
index 00000000..cbbe54ff
--- /dev/null
+++ b/app/(home-pages)/reader/getNewFeed.ts
@@ -0,0 +1,54 @@
+"use server";
+
+import { supabaseServerClient } from "supabase/serverClient";
+import { deduplicateByUriOrdered } from "src/utils/deduplicateRecords";
+import { enrichDocumentToPost } from "./enrichPost";
+import type { Cursor, Post } from "./getReaderFeed";
+
+export async function getNewFeed(
+ cursor?: Cursor | null,
+): Promise<{ posts: Post[]; nextCursor: Cursor | null }> {
+ let query = supabaseServerClient
+ .from("documents")
+ .select(
+ `*,
+ comments_on_documents(count),
+ document_mentions_in_bsky(count),
+ recommends_on_documents(count),
+ documents_in_publications!inner(publications!inner(*))`,
+ )
+ .or(
+ "record->preferences->showInDiscover.is.null,record->preferences->>showInDiscover.eq.true",
+ { referencedTable: "documents_in_publications.publications" },
+ )
+ .order("sort_date", { ascending: false })
+ .order("uri", { ascending: false })
+ .limit(25);
+
+ if (cursor) {
+ query = query.or(
+ `sort_date.lt.${cursor.timestamp},and(sort_date.eq.${cursor.timestamp},uri.lt.${cursor.uri})`,
+ );
+ }
+
+ let { data: rawFeed, error } = await query;
+
+ const feed = deduplicateByUriOrdered(rawFeed || []);
+
+ let posts = (
+ await Promise.all(feed.map((post) => enrichDocumentToPost(post as any)))
+ ).filter((post): post is Post => post !== null);
+
+ const nextCursor =
+ posts.length > 0
+ ? {
+ timestamp: posts[posts.length - 1].documents.sort_date,
+ uri: posts[posts.length - 1].documents.uri,
+ }
+ : null;
+
+ return {
+ posts,
+ nextCursor,
+ };
+}
diff --git a/app/(home-pages)/reader/getReaderFeed.ts b/app/(home-pages)/reader/getReaderFeed.ts
index 4ff16591..cf2703b3 100644
--- a/app/(home-pages)/reader/getReaderFeed.ts
+++ b/app/(home-pages)/reader/getReaderFeed.ts
@@ -1,20 +1,13 @@
"use server";
import { getIdentityData } from "actions/getIdentityData";
-import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
import { supabaseServerClient } from "supabase/serverClient";
-import { IdResolver } from "@atproto/identity";
-import type { DidCache, CacheResult, DidDocument } from "@atproto/identity";
-import Client from "ioredis";
-import { AtUri } from "@atproto/api";
-import { idResolver } from "./idResolver";
-import {
- normalizeDocumentRecord,
- normalizePublicationRecord,
- type NormalizedDocument,
- type NormalizedPublication,
+import type {
+ NormalizedDocument,
+ NormalizedPublication,
} from "src/utils/normalizeRecords";
import { deduplicateByUriOrdered } from "src/utils/deduplicateRecords";
+import { enrichDocumentToPost } from "./enrichPost";
export type Cursor = {
timestamp: string;
@@ -53,40 +46,9 @@ export async function getReaderFeed(
const feed = deduplicateByUriOrdered(rawFeed || []);
let posts = (
- await Promise.all(
- feed.map(async (post) => {
- let pub = post.documents_in_publications[0].publications!;
- let uri = new AtUri(post.uri);
- let handle = await idResolver.did.resolve(uri.host);
-
- // Normalize records - filter out unrecognized formats
- const normalizedData = normalizeDocumentRecord(post.data, post.uri);
- if (!normalizedData) return null;
-
- const normalizedPubRecord = normalizePublicationRecord(pub?.record);
-
- let p: Post = {
- publication: {
- href: getPublicationURL(pub),
- pubRecord: normalizedPubRecord,
- uri: pub?.uri || "",
- },
- author: handle?.alsoKnownAs?.[0]
- ? `@${handle.alsoKnownAs[0].slice(5)}`
- : null,
- documents: {
- comments_on_documents: post.comments_on_documents,
- document_mentions_in_bsky: post.document_mentions_in_bsky,
- recommends_on_documents: post.recommends_on_documents,
- data: normalizedData,
- uri: post.uri,
- sort_date: post.sort_date,
- },
- };
- return p;
- }) || [],
- )
+ await Promise.all(feed.map((post) => enrichDocumentToPost(post as any)))
).filter((post): post is Post => post !== null);
+
const nextCursor =
posts.length > 0
? {
@@ -115,5 +77,6 @@ export type Post = {
comments_on_documents: { count: number }[] | undefined;
document_mentions_in_bsky: { count: number }[] | undefined;
recommends_on_documents: { count: number }[] | undefined;
+ mentionsCount?: number;
};
};
diff --git a/app/(home-pages)/reader/getSubscriptions.ts b/app/(home-pages)/reader/getSubscriptions.ts
index d1b3e6ff..b474c19a 100644
--- a/app/(home-pages)/reader/getSubscriptions.ts
+++ b/app/(home-pages)/reader/getSubscriptions.ts
@@ -29,7 +29,9 @@ export async function getSubscriptions(
let query = supabaseServerClient
.from("publication_subscriptions")
- .select(`*, publications(*, documents_in_publications(*, documents(*)))`)
+ .select(
+ `*, publications(*, publication_subscriptions(*), documents_in_publications(*, documents(*)))`,
+ )
.order(`created_at`, { ascending: false })
.order(`uri`, { ascending: false })
.order("documents(sort_date)", {
@@ -51,7 +53,7 @@ export async function getSubscriptions(
await Promise.all(
pubs?.map(async (pub) => {
const normalizedRecord = normalizePublicationRecord(
- pub.publications?.record
+ pub.publications?.record,
);
if (!normalizedRecord) return null;
let id = await idResolver.did.resolve(pub.publications?.identity_did!);
@@ -62,10 +64,9 @@ export async function getSubscriptions(
? { handle: `@${id.alsoKnownAs[0].slice(5)}` }
: undefined,
} as PublicationSubscription;
- }) || []
+ }) || [],
)
).filter((sub): sub is PublicationSubscription => sub !== null);
-
const nextCursor =
pubs && pubs.length > 0
? {
@@ -83,6 +84,7 @@ export async function getSubscriptions(
export type PublicationSubscription = {
authorProfile?: { handle: string };
record: NormalizedPublication;
+ publication_subscriptions: { identity: string }[];
uri: string;
documents_in_publications: {
documents: { data?: Json; sort_date: string } | null;
diff --git a/app/(home-pages)/reader/hot/page.tsx b/app/(home-pages)/reader/hot/page.tsx
new file mode 100644
index 00000000..3e0430b2
--- /dev/null
+++ b/app/(home-pages)/reader/hot/page.tsx
@@ -0,0 +1,7 @@
+import { getHotFeed } from "../getHotFeed";
+import { GlobalContent } from "../GlobalContent";
+
+export default async function HotPage() {
+ const feedPromise = getHotFeed();
+ return
+
+ );
+}
diff --git a/app/(home-pages)/reader/loading.tsx b/app/(home-pages)/reader/loading.tsx
new file mode 100644
index 00000000..06773957
--- /dev/null
+++ b/app/(home-pages)/reader/loading.tsx
@@ -0,0 +1,4 @@
+import { FeedSkeleton } from "./FeedSkeleton";
+export default function Loading() {
+ return
+
{focusedBlock &&
focusedBlock.entityType == "block" &&
hasBlockToolbar(blockType) &&
@@ -54,7 +57,7 @@ export function LeafletFooter(props: { entityID: string }) {
/>
) : entity_set.permissions.write ? (
-
- Loading more posts...
-
- )}
+
+
);
};
@@ -90,9 +109,9 @@ export const ReaderEmpty = () => {
+ {sortedPosts.map((p) => (
+
+
+ Loading more posts...
+
+ )}
+
Nothing to read yet…
Subscribe to publications and find their posts here! - +
-
diff --git a/app/(home-pages)/reader/InteractionDrawers.tsx b/app/(home-pages)/reader/InteractionDrawers.tsx
new file mode 100644
index 00000000..0d083e3a
--- /dev/null
+++ b/app/(home-pages)/reader/InteractionDrawers.tsx
@@ -0,0 +1,108 @@
+"use client";
+import { ButtonPrimary } from "components/Buttons";
+import {
+ SelectedPostListing,
+ useSelectedPostListing,
+} from "src/useSelectedPostState";
+import { CommentsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Comments";
+import { CloseTiny } from "components/Icons/CloseTiny";
+import { SpeedyLink } from "components/SpeedyLink";
+import { GoToArrow } from "components/Icons/GoToArrow";
+import { DotLoader } from "components/utils/DotLoader";
+import { ReaderMentionsContent } from "./ReaderMentionsContent";
+import { callRPC } from "app/api/rpc/client";
+import useSWR from "swr";
+import { getDocumentURL } from "app/lish/createPub/getPublicationURL";
+
+export const MobileInteractionPreviewDrawer = () => {
+ let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
+
+ return (
+ Subscribe to publications and find their posts here! - +
+
+ );
+};
+
+export const DesktopInteractionPreviewDrawer = () => {
+ let selectedPost = useSelectedPostListing((s) => s.selectedPostListing);
+
+ return (
+
+
+ );
+};
+
+const PreviewDrawerContent = (props: {
+ selectedPost: SelectedPostListing | null;
+}) => {
+ const documentUri = props.selectedPost?.document_uri || null;
+ const drawer = props.selectedPost?.drawer || null;
+
+ const { data, isLoading } = useSWR(
+ documentUri ? ["get_document_interactions", documentUri] : null,
+ async () => {
+ const res = await callRPC("get_document_interactions", {
+ document_uri: documentUri!,
+ });
+ return res;
+ },
+ { keepPreviousData: false },
+ );
+
+ if (!props.selectedPost || !props.selectedPost.document) return null;
+
+ const postUrl = getDocumentURL(
+ props.selectedPost.document,
+ props.selectedPost.document_uri,
+ );
+
+ const drawerTitle =
+ drawer === "quotes"
+ ? `Mentions of ${props.selectedPost.document.title}`
+ : `Comments for ${props.selectedPost.document.title}`;
+
+ return (
+ <>
+
+
+ {drawerTitle}
+
+
+ loading
+
+ ) : drawer === "quotes" ? (
+
+
+ ) : (
+
+ No posts yet. Check back soon!
+
+ );
+ }
+
+ return (
+
+
+ );
+};
diff --git a/app/(home-pages)/reader/PreviewDrawer.tsx b/app/(home-pages)/reader/PreviewDrawer.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/app/(home-pages)/reader/ReaderMentionsContent.tsx b/app/(home-pages)/reader/ReaderMentionsContent.tsx
new file mode 100644
index 00000000..0b1dd2f8
--- /dev/null
+++ b/app/(home-pages)/reader/ReaderMentionsContent.tsx
@@ -0,0 +1,72 @@
+"use client";
+import useSWR from "swr";
+import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs";
+import { BskyPostContent } from "app/lish/[did]/[publication]/[rkey]/BskyPostContent";
+import { DotLoader } from "components/utils/DotLoader";
+
+async function fetchBskyPosts(uris: string[]): Promise
+ {allPosts.map((p) => (
+
+
+ Loading more posts...
+
+ )}
+
+
+ );
+ }
+
+ if (isLoading) {
+ return (
+ no mentions yet!
+
+ loading
+
+ );
+ }
+
+ const postViewMap = new Map
+ {props.quotesAndMentions.map((q, index) => {
+ const post = postViewMap.get(q.uri);
+ if (!post) return null;
+ return (
+
+ );
+}
diff --git a/app/(home-pages)/reader/SubscriptionsContent.tsx b/app/(home-pages)/reader/SubscriptionsContent.tsx
deleted file mode 100644
index 9645822f..00000000
--- a/app/(home-pages)/reader/SubscriptionsContent.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-"use client";
-import { PubListing } from "app/(home-pages)/discover/PubListing";
-import { ButtonPrimary } from "components/Buttons";
-import { DiscoverSmall } from "components/Icons/DiscoverSmall";
-import { Json } from "supabase/database.types";
-import { PublicationSubscription, getSubscriptions } from "./getSubscriptions";
-import useSWRInfinite from "swr/infinite";
-import { useEffect, useRef } from "react";
-import { Cursor } from "./getReaderFeed";
-import Link from "next/link";
-
-export const SubscriptionsContent = (props: {
- publications: PublicationSubscription[];
- nextCursor: Cursor | null;
-}) => {
- const getKey = (
- pageIndex: number,
- previousPageData: {
- subscriptions: PublicationSubscription[];
- nextCursor: Cursor | null;
- } | null,
- ) => {
- // Reached the end
- if (previousPageData && !previousPageData.nextCursor) return null;
-
- // First page, we don't have previousPageData
- if (pageIndex === 0) return ["subscriptions", null] as const;
-
- // Add the cursor to the key
- return ["subscriptions", previousPageData?.nextCursor] as const;
- };
-
- const { data, error, size, setSize, isValidating } = useSWRInfinite(
- getKey,
- ([_, cursor]) => getSubscriptions(null, cursor),
- {
- fallbackData: [
- { subscriptions: props.publications, nextCursor: props.nextCursor },
- ],
- revalidateFirstPage: false,
- },
- );
-
- const loadMoreRef = useRef
+
+ )} +
+ );
+ })}
+ + )} +
-
- );
-};
-
-export const SubscriptionsEmpty = () => {
- return (
-
- {allPublications?.map((p, index) =>
- {/* Trigger element for loading more subscriptions */}
-
- {isValidating && (
-
- Loading more subscriptions...
-
- )}
-
- You haven't subscribed to any publications yet!
-
-
-
-
-
- );
-};
diff --git a/app/(home-pages)/reader/enrichPost.ts b/app/(home-pages)/reader/enrichPost.ts
new file mode 100644
index 00000000..de71f468
--- /dev/null
+++ b/app/(home-pages)/reader/enrichPost.ts
@@ -0,0 +1,88 @@
+import { AtUri } from "@atproto/api";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+import { getConstellationBacklinks } from "app/lish/[did]/[publication]/[rkey]/getPostPageData";
+import { getDocumentURL } from "app/lish/createPub/getPublicationURL";
+import {
+ normalizeDocumentRecord,
+ normalizePublicationRecord,
+} from "src/utils/normalizeRecords";
+import { idResolver } from "./idResolver";
+import type { Post } from "./getReaderFeed";
+
+type RawDocument = {
+ data: unknown;
+ uri: string;
+ sort_date: string;
+ comments_on_documents: { count: number }[];
+ document_mentions_in_bsky: { count: number }[];
+ recommends_on_documents: { count: number }[];
+ documents_in_publications: {
+ publications: {
+ uri: string;
+ record: unknown;
+ name: string | null;
+ [key: string]: unknown;
+ } | null;
+ }[];
+};
+
+export async function enrichDocumentToPost(
+ doc: RawDocument,
+): Promise
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+ {tabs.map((tab) => (
+
+
+
+
+ {tab.name}
+
+
+ ))}
+
+
+
) : (
Manage Subscription
}
>
-
+
- View Bluesky Custom Feed
+ Bluesky Custom Feed
)}
@@ -121,8 +145,12 @@ export const ManageSubscription = (props: {
@@ -133,6 +161,8 @@ export const ManageSubscription = (props: {
let BlueskySubscribeButton = (props: {
pub_uri: string;
setSuccessModalOpen: (open: boolean) => void;
+ compact?: boolean;
+ setLocalSubscribeState: () => void;
}) => {
let { identity } = useIdentityData();
let toaster = useToaster();
@@ -155,6 +185,7 @@ let BlueskySubscribeButton = (props: {
props.setSuccessModalOpen(true);
}
toaster({ content:
+
}
@@ -190,7 +225,10 @@ let BlueskySubscribeButton = (props: {
action={subscribe}
className="place-self-center flex flex-row gap-1"
>
-
+
{subscribePending ? (
+ )} -
Update Options
{!hasFeed && ( @@ -102,7 +126,7 @@ export const ManageSubscription = (props: { className=" place-self-center" >You're Subscribed!
, type: "success" });
+ props.setLocalSubscribeState();
}, null);
let [isClient, setIsClient] = useState(false);
@@ -166,8 +197,12 @@ let BlueskySubscribeButton = (props: {
return (
-
- {identity?.atp_did ? (
- Comments
- -
- Connect a Bluesky account to comment
-
+ {!props.noCommentBox && (
+ <>
+ {identity?.atp_did ? (
+
+ Connect a Bluesky account to comment
+
+ )}
+ + )} -
{comments
.sort((a, b) => {
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
index b690925b..fe4de395 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx
@@ -1,12 +1,17 @@
"use client";
import { Media } from "components/Media";
import { MentionsDrawerContent } from "./Quotes";
-import { InteractionState, useInteractionState } from "./Interactions";
+import {
+ InteractionState,
+ setInteractionState,
+ useInteractionState,
+} from "./Interactions";
import { Json } from "supabase/database.types";
import { Comment, CommentsDrawerContent } from "./Comments";
import { useSearchParams } from "next/navigation";
import { SandwichSpacer } from "components/LeafletLayout";
import { decodeQuotePosition } from "../quotePosition";
+import { CloseTiny } from "components/Icons/CloseTiny";
export const InteractionDrawer = (props: {
showPageBackground: boolean | undefined;
@@ -39,19 +44,44 @@ export const InteractionDrawer = (props: {
diff --git a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
index a1190b32..1c39cde9 100644
--- a/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
@@ -86,13 +86,7 @@ export const MentionsDrawerContent = (props: {
});
return (
-
{drawer.drawer === "quotes" ? (
-
+
+ Comments
+ +
-
+ <>
{props.quotesAndMentions.length === 0 ? (
)}
-
+
);
};
diff --git a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
index e8951d4f..180987bb 100644
--- a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
@@ -298,7 +298,6 @@ const ReplyPost = (props: {
e.stopPropagation();
props.toggleCollapsed(parentPostUri);
- console.log("reply clicked");
}}
/>
diff --git a/app/lish/[did]/[publication]/[rkey]/getPostPageData.ts b/app/lish/[did]/[publication]/[rkey]/getPostPageData.ts
index 49eb500b..c4d4a818 100644
--- a/app/lish/[did]/[publication]/[rkey]/getPostPageData.ts
+++ b/app/lish/[did]/[publication]/[rkey]/getPostPageData.ts
@@ -3,8 +3,6 @@ import { AtUri } from "@atproto/syntax";
import {
normalizeDocumentRecord,
normalizePublicationRecord,
- type NormalizedDocument,
- type NormalizedPublication,
} from "src/utils/normalizeRecords";
import { PubLeafletPublication, SiteStandardPublication } from "lexicons/api";
import { documentUriFilter } from "src/utils/uriHelpers";
@@ -145,8 +143,6 @@ export async function getPostPageData(did: string, rkey: string) {
publication_subscriptions: rawPub.publication_subscriptions || [],
}
: null;
-
- // Get recommends count from the aggregated query result
const recommendsCount = document.recommends_on_documents?.[0]?.count ?? 0;
return {
diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx
index ba945f35..92a7b9de 100644
--- a/app/lish/[did]/[publication]/dashboard/Actions.tsx
+++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx
@@ -38,6 +38,7 @@ function PublicationShareButton() {
icon=no quotes yet!
@@ -160,7 +154,7 @@ export const MentionsDrawerContent = (props: {
)}
- {
- let newLeaflet = await createPublicationDraft(props.publication);
- router.push(`/${newLeaflet}`);
- }}
- >
-
- );
-}
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index 184f4e25..0821c232 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -76,6 +76,7 @@ export default function PublicationDashboard({
actions={["documents"][number];
+export type PublishedDocument =
+ NonNullable["documents"][number];
export type PublicationDraft = NonNullable["drafts"][number];
const PublicationContext = createContext({ name: "", did: "" });
@@ -24,7 +25,6 @@ export function PublicationSWRDataProvider(props: {
}) {
let key = `publication-data-${props.publication_did}-${props.publication_rkey}`;
useEffect(() => {
- console.log("UPDATING");
mutate(key, props.publication_data);
}, [props.publication_data]);
return (
@@ -64,7 +64,7 @@ export function useNormalizedPublicationRecord(): NormalizedPublication | null {
const { data } = usePublicationData();
return useMemo(
() => normalizePublicationRecord(data?.publication?.record),
- [data?.publication?.record]
+ [data?.publication?.record],
);
}
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
index 0b85e548..92f72613 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
@@ -34,6 +34,7 @@ export function PublicationSettingsButton(props: { publication: string }) {
id="pub-settings-button"
icon=
-
-
- );
-};
-
-const ReaderButton = (props: { current?: boolean; subs: boolean }) => {
- if (!props.subs) return;
- return (
-
-
- );
-};
-
-const DiscoverButton = (props: { current?: boolean }) => {
- return (
-
-
-
- );
-}
diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx
new file mode 100644
index 00000000..71b83f77
--- /dev/null
+++ b/components/ActionBar/NavigationButtons.tsx
@@ -0,0 +1,101 @@
+import { HomeSmall } from "components/Icons/HomeSmall";
+import { ActionButton } from "./ActionButton";
+import { useIdentityData } from "components/IdentityProvider";
+import { PublicationButtons } from "./Publications";
+import { ReaderUnreadSmall } from "components/Icons/ReaderSmall";
+import {
+ NotificationsReadSmall,
+ NotificationsUnreadSmall,
+} from "components/Icons/NotificationSmall";
+import { SpeedyLink } from "components/SpeedyLink";
+import { Popover } from "components/Popover";
+import { WriterSmall } from "components/Icons/WriterSmall";
+export type navPages =
+ | "home"
+ | "reader"
+ | "pub"
+ | "notifications"
+ | "looseleafs"
+ | "tag"
+ | "profile"
+ | "discover";
+
+export const HomeButton = (props: {
+ current?: boolean;
+ className?: string;
+}) => {
+ return (
+
+
+ );
+};
+
+export const WriterButton = (props: {
+ currentPage: navPages;
+ currentPubUri?: string;
+ compactOnMobile?: boolean;
+}) => {
+ let current =
+ props.currentPage === "home" ||
+ props.currentPage === "looseleafs" ||
+ props.currentPage === "pub";
+
+ return (
+
+
+ );
+};
+
+export const ReaderButton = (props: {
+ current?: boolean;
+ subs: boolean;
+ compactOnMobile?: boolean;
+}) => {
+ return (
+
+
+ );
+};
+
+export function NotificationButton(props: { current?: boolean }) {
+ let { identity } = useIdentityData();
+ let unreads = identity?.notifications[0]?.count;
+
+ return (
+
+
+ );
+}
diff --git a/components/ActionBar/ProfileButton.tsx b/components/ActionBar/ProfileButton.tsx
new file mode 100644
index 00000000..218101c2
--- /dev/null
+++ b/components/ActionBar/ProfileButton.tsx
@@ -0,0 +1,61 @@
+import { Avatar } from "components/Avatar";
+import { ActionButton } from "./ActionButton";
+import { useIdentityData } from "components/IdentityProvider";
+import { AccountSmall } from "components/Icons/AccountSmall";
+import { useRecordFromDid } from "src/utils/useRecordFromDid";
+import { Menu, MenuItem } from "components/Menu";
+import { useIsMobile } from "src/hooks/isMobile";
+import { LogoutSmall } from "components/Icons/LogoutSmall";
+import { mutate } from "swr";
+import { SpeedyLink } from "components/SpeedyLink";
+
+export const ProfileButton = () => {
+ let { identity } = useIdentityData();
+ let { data: record } = useRecordFromDid(identity?.atp_did);
+ let isMobile = useIsMobile();
+
+ return (
+
+ ) : (
+
+
+
+
+
+ + )} + + + ); +}; diff --git a/components/ActionBar/PublicationNavigation.tsx b/components/ActionBar/PublicationNavigation.tsx new file mode 100644 index 00000000..60fbf6c0 --- /dev/null +++ b/components/ActionBar/PublicationNavigation.tsx @@ -0,0 +1,148 @@ +"use client"; +import { useIdentityData } from "components/IdentityProvider"; +import { getBasePublicationURL } from "app/lish/createPub/getPublicationURL"; +import { + normalizePublicationRecord, + type NormalizedPublication, +} from "src/utils/normalizeRecords"; +import { SpeedyLink } from "components/SpeedyLink"; +import { Popover } from "components/Popover"; +import { ButtonPrimary } from "components/Buttons"; +import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; +import { HomeButton, type navPages } from "./NavigationButtons"; +import { HomeSmall } from "components/Icons/HomeSmall"; +import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; +import { PubIcon, PublicationButtons } from "./Publications"; +import { HomeTiny } from "components/Icons/HomeTiny"; +import { LooseleafTiny } from "components/Icons/LooseleafTiny"; +import { Separator } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; +import { AddTiny } from "components/Icons/AddTiny"; + +export const PublicationNavigation = (props: { + currentPage: navPages; + currentPubUri?: string; +}) => { + let { identity } = useIdentityData(); + + if (!identity) return; + + let hasLooseleafs = !!identity?.permission_token_on_homepage.find( + (f) => + f.permission_tokens.leaflets_to_documents && + f.permission_tokens.leaflets_to_documents[0]?.document, + ); + + let pubCount = identity?.publications.length ?? 0; + let onlyOnePub = pubCount === 1 && hasLooseleafs; + let onlyLooseleafs = pubCount === 0 && hasLooseleafs; + let className = + "font-bold text-secondary flex gap-2 items-center grow min-w-0 text-sm h-[34px] px-2 accent-container"; + + // if not publications or looseleafs + if (!identity.publications && !hasLooseleafs) { + return ( +
+
+ Create a Publication!
+
+
+ );
+ }
+
+ switch (props.currentPage) {
+ case "looseleafs":
+ case "pub":
+ if (onlyLooseleafs || onlyOnePub)
+ return (
+ <>
+
+
+
+ );
+ break;
+ case "home": {
+ if (onlyLooseleafs || onlyOnePub) {
+ let pub = identity.publications[0];
+ return (
+
+ ({
+ record: normalizePublicationRecord(pub.record),
+ uri: pub.uri,
+ }))}
+ />{" "}
+ Publications
+
+ }
+ className="pt-1 px-2!"
+ >
+
+
{icon}
+ {icon}
{label}
{subtext && (
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
new file mode 100644
index 00000000..65201200
--- /dev/null
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -0,0 +1,66 @@
+import { useIdentityData } from "components/IdentityProvider";
+import {
+ navPages,
+ HomeButton,
+ ReaderButton,
+ NotificationButton,
+ WriterButton,
+} from "./NavigationButtons";
+import { PublicationButtons } from "./Publications";
+import { Sidebar } from "./Sidebar";
+import { LoginActionButton, LoginButton } from "components/LoginButton";
+import { ProfileButton } from "./ProfileButton";
+
+export const DesktopNavigation = (props: {
+ currentPage: navPages;
+ publication?: string;
+}) => {
+ let { identity } = useIdentityData();
+ let thisPublication = identity?.publications?.find(
+ (pub) => pub.uri === props.publication,
+ );
+
+ let currentlyWriter =
+ props.currentPage === "home" ||
+ props.currentPage === "looseleafs" ||
+ props.currentPage === "pub";
+ return (
+
+
+ {identity?.atp_did ? (
+ <>
+
+
+
+
+
+
+ );
+};
diff --git a/components/ActionBar/Footer.tsx b/components/ActionBar/Footer.tsx
index 67d191ee..bb105c3e 100644
--- a/components/ActionBar/Footer.tsx
+++ b/components/ActionBar/Footer.tsx
@@ -8,7 +8,7 @@ export function Footer(props: { children?: React.ReactNode }) {
actionFooter touch-none shrink-0
w-full z-10
px-2 pt-1 pwa-padding-bottom
- flex justify-start gap-1
+ flex justify-between
h-[calc(38px+var(--safe-padding-bottom))]
bg-[rgba(var(--bg-page),0.5)] border-top border-bg-page`}
>
diff --git a/components/ActionBar/MobileNavigation.tsx b/components/ActionBar/MobileNavigation.tsx
new file mode 100644
index 00000000..bcf52df7
--- /dev/null
+++ b/components/ActionBar/MobileNavigation.tsx
@@ -0,0 +1,63 @@
+import { useIdentityData } from "components/IdentityProvider";
+import { Separator } from "components/Layout";
+import {
+ navPages,
+ NotificationButton,
+ ReaderButton,
+ WriterButton,
+} from "./NavigationButtons";
+import { PublicationNavigation } from "./PublicationNavigation";
+import { LoginActionButton } from "components/LoginButton";
+import { ProfileButton } from "./ProfileButton";
+
+export const MobileNavigation = (props: {
+ currentPage: navPages;
+ currentPublicationUri?: string;
+ currentProfileDid?: string;
+}) => {
+ let { identity } = useIdentityData();
+
+ let compactOnMobile =
+ props.currentPage === "home" ||
+ props.currentPage === "looseleafs" ||
+ props.currentPage === "pub";
+
+ return (
+ +
+
+ );
+};
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
deleted file mode 100644
index 636dc851..00000000
--- a/components/ActionBar/Navigation.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { HomeSmall } from "components/Icons/HomeSmall";
-import { ActionButton } from "./ActionButton";
-import { Sidebar } from "./Sidebar";
-import { useIdentityData } from "components/IdentityProvider";
-import Link from "next/link";
-import { DiscoverSmall } from "components/Icons/DiscoverSmall";
-import { PublicationButtons } from "./Publications";
-import { Popover } from "components/Popover";
-import { MenuSmall } from "components/Icons/MenuSmall";
-import {
- ReaderReadSmall,
- ReaderUnreadSmall,
-} from "components/Icons/ReaderSmall";
-import {
- NotificationsReadSmall,
- NotificationsUnreadSmall,
-} from "components/Icons/NotificationSmall";
-import { SpeedyLink } from "components/SpeedyLink";
-import { Separator } from "components/Layout";
-
-export type navPages =
- | "home"
- | "reader"
- | "pub"
- | "discover"
- | "notifications"
- | "looseleafs"
- | "tag"
- | "profile";
-
-export const DesktopNavigation = (props: {
- currentPage: navPages;
- publication?: string;
-}) => {
- let { identity } = useIdentityData();
- return (
-
+
+ {identity?.atp_did ? (
+
+
+ ) : (
+
-
-
- {identity?.atp_did && (
-
-
- )}
-
- );
-};
-
-export const MobileNavigation = (props: {
- currentPage: navPages;
- publication?: string;
-}) => {
- let { identity } = useIdentityData();
-
- return (
-
- e.preventDefault()}
- asChild
- className="px-2! !max-w-[256px]"
- trigger={
-
- {identity?.atp_did && (
- <>
-
- );
-};
-
-const NavigationOptions = (props: {
- currentPage: navPages;
- publication?: string;
- isMobile?: boolean;
-}) => {
- let { identity } = useIdentityData();
- let thisPublication = identity?.publications?.find(
- (pub) => pub.uri === props.publication,
- );
- return (
- <>
-
-
- }
- >
- -
+ + )} + + + ); +}; diff --git a/components/ActionBar/PublicationNavigation.tsx b/components/ActionBar/PublicationNavigation.tsx new file mode 100644 index 00000000..60fbf6c0 --- /dev/null +++ b/components/ActionBar/PublicationNavigation.tsx @@ -0,0 +1,148 @@ +"use client"; +import { useIdentityData } from "components/IdentityProvider"; +import { getBasePublicationURL } from "app/lish/createPub/getPublicationURL"; +import { + normalizePublicationRecord, + type NormalizedPublication, +} from "src/utils/normalizeRecords"; +import { SpeedyLink } from "components/SpeedyLink"; +import { Popover } from "components/Popover"; +import { ButtonPrimary } from "components/Buttons"; +import { LooseLeafSmall } from "components/Icons/LooseleafSmall"; +import { HomeButton, type navPages } from "./NavigationButtons"; +import { HomeSmall } from "components/Icons/HomeSmall"; +import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; +import { PubIcon, PublicationButtons } from "./Publications"; +import { HomeTiny } from "components/Icons/HomeTiny"; +import { LooseleafTiny } from "components/Icons/LooseleafTiny"; +import { Separator } from "components/Layout"; +import { Menu, MenuItem } from "components/Menu"; +import { AddTiny } from "components/Icons/AddTiny"; + +export const PublicationNavigation = (props: { + currentPage: navPages; + currentPubUri?: string; +}) => { + let { identity } = useIdentityData(); + + if (!identity) return; + + let hasLooseleafs = !!identity?.permission_token_on_homepage.find( + (f) => + f.permission_tokens.leaflets_to_documents && + f.permission_tokens.leaflets_to_documents[0]?.document, + ); + + let pubCount = identity?.publications.length ?? 0; + let onlyOnePub = pubCount === 1 && hasLooseleafs; + let onlyLooseleafs = pubCount === 0 && hasLooseleafs; + let className = + "font-bold text-secondary flex gap-2 items-center grow min-w-0 text-sm h-[34px] px-2 accent-container"; + + // if not publications or looseleafs + if (!identity.publications && !hasLooseleafs) { + return ( +
+ }>
+
+
+
+
+
+
+ ) : (
+
+
+ )}
+
+ );
+ }
+ break;
+ }
+ }
+
+ return (
+ {pub.name}
+ +
+ {props.publications.map((pub, index) => {
+ if (index <= 2)
+ return (
+
+ );
+}
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index 80b58eb1..7fae0df9 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -19,11 +19,13 @@ import { ButtonSecondary } from "components/Buttons";
import { useIsMobile } from "src/hooks/isMobile";
import { useState } from "react";
import { LooseLeafSmall } from "components/Icons/LooseleafSmall";
-import { navPages } from "./Navigation";
+import { type navPages } from "./NavigationButtons";
export const PublicationButtons = (props: {
currentPage: navPages;
currentPubUri: string | undefined;
+ className?: string;
+ optionClassName?: string;
}) => {
let { identity } = useIdentityData();
let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
@@ -38,12 +40,14 @@ export const PublicationButtons = (props: {
return
+
+ );
+ })}
+
+
);
@@ -198,13 +204,14 @@ export const PubListEmptyContent = (props: { compact?: boolean }) => {
export const PubIcon = (props: {
record: NormalizedPublication | null;
uri: string;
+ tiny?: boolean;
small?: boolean;
large?: boolean;
className?: string;
}) => {
if (!props.record) return null;
- let iconSizeClassName = `${props.small ? "w-4 h-4" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`;
+ let iconSizeClassName = `${props.tiny ? "w-4 h-4" : props.small ? "w-5 h-5" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`;
return props.record.icon ? (
{
};
export const NotificationsReadSmall = (props: Props) => {
- return (
-
- );
-};
-
-export const ReaderUnread = (props: Props) => {
- return (
-
- );
-};
-
-export const ReaderRead = (props: Props) => {
return (
diff --git a/components/Icons/RSSTiny.tsx b/components/Icons/RSSTiny.tsx
new file mode 100644
index 00000000..9e0c24ab
--- /dev/null
+++ b/components/Icons/RSSTiny.tsx
@@ -0,0 +1,18 @@
+import { Props } from "./Props";
+export const RSSTiny = (props: Props) => {
+ return (
+
+ );
+};
diff --git a/components/Icons/ReaderSmall.tsx b/components/Icons/ReaderSmall.tsx
index 1be96367..606331b0 100644
--- a/components/Icons/ReaderSmall.tsx
+++ b/components/Icons/ReaderSmall.tsx
@@ -3,14 +3,15 @@ import { Props } from "./Props";
export const ReaderUnreadSmall = (props: Props) => {
return (
diff --git a/components/Icons/ShareTiny.tsx b/components/Icons/ShareTiny.tsx
new file mode 100644
index 00000000..7e3f6a7c
--- /dev/null
+++ b/components/Icons/ShareTiny.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const ShareTiny = (props: Props) => {
+ return (
+
+ );
+};
diff --git a/components/Icons/TagSmall.tsx b/components/Icons/TagSmall.tsx
new file mode 100644
index 00000000..5180884e
--- /dev/null
+++ b/components/Icons/TagSmall.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const TagSmall = (props: Props) => {
+ return (
+
+ );
+};
diff --git a/components/Icons/WriterSmall.tsx b/components/Icons/WriterSmall.tsx
new file mode 100644
index 00000000..4a78145e
--- /dev/null
+++ b/components/Icons/WriterSmall.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const WriterSmall = (props: Props) => {
+ return (
+
+ );
+};
diff --git a/components/InteractionsPreview.tsx b/components/InteractionsPreview.tsx
index 930e2b36..799c8663 100644
--- a/components/InteractionsPreview.tsx
+++ b/components/InteractionsPreview.tsx
@@ -96,7 +96,7 @@ export const InteractionPreview = (props: {
);
};
-const TagPopover = (props: { tags: string[] }) => {
+export const TagPopover = (props: { tags: string[] }) => {
return (
(null);
+
+ useEffect(() => {
+ let state: string | null = null;
+ if (pathname === "/home") state = "home";
+ else if (pathname === "/reader" || pathname.startsWith("/reader/"))
+ state = "reader";
+
+ if (state && state !== lastState.current) {
+ lastState.current = state;
+ fetch("/api/update-nav-state", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ state }),
+ });
+ }
+ }, [pathname]);
+
+ return null;
+}
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
index 446b24b2..0e61a9f2 100644
--- a/components/PageHeader.tsx
+++ b/components/PageHeader.tsx
@@ -29,7 +29,7 @@ export const Header = (props: { children: React.ReactNode }) => {
{hasLooseleafs && (
<>
{/*TODO How should i get if this is the current page or not?
theres not "pub" to check the uri for. Do i need to add it as an option to NavPages? thats kinda annoying*/}
@@ -51,14 +55,14 @@ export const PublicationButtons = (props: {
label="Looseleafs"
icon={
-
)} @@ -86,9 +90,10 @@ export const PublicationButtons = (props: { })} - New + + New Publication
);
@@ -99,6 +104,7 @@ export const PublicationOption = (props: {
name: string;
record: Json;
current?: boolean;
+ className?: string;
}) => {
let record = normalizePublicationRecord(props.record);
if (!record) return;
@@ -106,13 +112,13 @@ export const PublicationOption = (props: {
return (
)} @@ -86,9 +90,10 @@ export const PublicationButtons = (props: { })} - New + + New Publication
{props.record?.name.slice(0, 1).toUpperCase()}
diff --git a/components/Blocks/BaseTextareaBlock.tsx b/components/Blocks/BaseTextareaBlock.tsx
index bff3ccd6..26290189 100644
--- a/components/Blocks/BaseTextareaBlock.tsx
+++ b/components/Blocks/BaseTextareaBlock.tsx
@@ -83,7 +83,6 @@ export function BaseTextareaBlock(props: BaseTextareaBlockProps) {
let block = props.block.nextBlock;
let coord = getCoordinatesInTextarea(e.currentTarget, selection);
- console.log(coord);
if (block) {
focusBlock(block, {
left: coord.left + e.currentTarget.getBoundingClientRect().left,
diff --git a/components/Icons/HomeTiny.tsx b/components/Icons/HomeTiny.tsx
new file mode 100644
index 00000000..3bf12a74
--- /dev/null
+++ b/components/Icons/HomeTiny.tsx
@@ -0,0 +1,21 @@
+import { Props } from "./Props";
+
+export const HomeTiny = (props: Props) => {
+ return (
+
+ );
+};
diff --git a/components/Icons/LooseleafTiny.tsx b/components/Icons/LooseleafTiny.tsx
new file mode 100644
index 00000000..00bd29ad
--- /dev/null
+++ b/components/Icons/LooseleafTiny.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const LooseleafTiny = (props: Props) => {
+ return (
+
+ );
+};
diff --git a/components/Icons/MoreOptionsVerticalTiny.tsx b/components/Icons/MoreOptionsVerticalTiny.tsx
index 7d0a09a8..55ef377a 100644
--- a/components/Icons/MoreOptionsVerticalTiny.tsx
+++ b/components/Icons/MoreOptionsVerticalTiny.tsx
@@ -8,6 +8,7 @@ export const MoreOptionsVerticalTiny = (props: Props) => {
viewBox="0 0 12 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
+ {...props}
>
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index 5521275e..0ab1677f 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -4,12 +4,13 @@ import { useSearchParams } from "next/navigation";
import { Header } from "../PageHeader";
import { Footer } from "components/ActionBar/Footer";
import { Sidebar } from "components/ActionBar/Sidebar";
+import { DesktopNavigation } from "components/ActionBar/DesktopNavigation";
+
+import { MobileNavigation } from "components/ActionBar/MobileNavigation";
import {
- DesktopNavigation,
- MobileNavigation,
navPages,
NotificationButton,
-} from "components/ActionBar/Navigation";
+} from "components/ActionBar/NavigationButtons";
import { create } from "zustand";
import { Popover } from "components/Popover";
import { Checkbox } from "components/Checkbox";
@@ -26,6 +27,7 @@ import Link from "next/link";
import { ExternalLinkTiny } from "components/Icons/ExternalLinkTiny";
import { usePreserveScroll } from "src/hooks/usePreserveScroll";
import { Tab } from "components/Tab";
+import { PubIcon, PublicationButtons } from "components/ActionBar/Publications";
export type DashboardState = {
display?: "grid" | "list";
@@ -69,7 +71,7 @@ export const useDashboardStore = create((set, get) => ({
},
}));
-const DashboardIdContext = createContext(null);
+export const DashboardIdContext = createContext(null);
export const useDashboardId = () => {
const id = useContext(DashboardIdContext);
@@ -138,7 +140,10 @@ export function DashboardLayout<
defaultTab: keyof T;
currentPage: navPages;
publication?: string;
- actions: React.ReactNode;
+ profileDid?: string;
+ actions?: React.ReactNode;
+ pageTitle?: string;
+ onTabHover?: (tabName: string) => void;
}) {
const searchParams = useSearchParams();
const tabParam = searchParams.get("tab");
@@ -165,6 +170,7 @@ export function DashboardLayout<
let [headerState, setHeaderState] = useState<"default" | "controls">(
"default",
);
+
return (
);
}
+export const PageTitle = (props: {
+ pageTitle: string;
+ actions: React.ReactNode;
+}) => {
+ return (
+
+
+ );
+};
+
export const HomeDashboardControls = (props: {
searchValue: string;
setSearchValueAction: (searchValue: string) => void;
@@ -447,7 +470,7 @@ const SearchInput = (props: {
className={`dashboardSearchInput
appearance-none! outline-hidden!
w-full min-w-0 text-primary relative pl-7 pr-1 -my-px
- border rounded-md border-transparent focus-within:border-border
+ border rounded-md border-border-light focus-within:border-border
bg-transparent ${props.hasBackgroundImage ? "focus-within:bg-bg-page" : "focus-within:bg-bg-leaflet"} `}
type="text"
id="pubName"
diff --git a/components/Pages/useHasBackgroundImage.ts b/components/Pages/useHasBackgroundImage.ts
new file mode 100644
index 00000000..19bdaeaa
--- /dev/null
+++ b/components/Pages/useHasBackgroundImage.ts
@@ -0,0 +1,5 @@
+import { useHasBackgroundImageContext } from "components/ThemeManager/ThemeProvider";
+
+export function useHasBackgroundImage(entityID?: string | null) {
+ return useHasBackgroundImageContext();
+}
diff --git a/components/Popover/index.tsx b/components/Popover/index.tsx
index fb987d3d..98b44eef 100644
--- a/components/Popover/index.tsx
+++ b/components/Popover/index.tsx
@@ -42,7 +42,7 @@ export const Popover = (props: {
{
let pubRecord = props.publication?.pubRecord as
@@ -38,6 +44,22 @@ export const PostListing = (props: Post) => {
let isStandalone = !pubRecord;
let theme = usePubTheme(pubRecord?.theme || postRecord?.theme, isStandalone);
let themeRecord = pubRecord?.theme || postRecord?.theme;
+ let elRef = useRef(null);
+ let [hasBackgroundImage, setHasBackgroundImage] = useState(false);
+
+ useEffect(() => {
+ if (!themeRecord?.backgroundImage?.image || !elRef.current) {
+ setHasBackgroundImage(false);
+ return;
+ }
+ let alpha = Number(
+ window
+ .getComputedStyle(elRef.current)
+ .getPropertyValue("--bg-page-alpha"),
+ );
+ setHasBackgroundImage(alpha < 0.7);
+ }, [themeRecord?.backgroundImage?.image]);
+
let backgroundImage =
themeRecord?.backgroundImage?.image?.ref && uri
? blobRefToSrc(themeRecord.backgroundImage.image.ref, new AtUri(uri).host)
@@ -50,9 +72,15 @@ export const PostListing = (props: Post) => {
? pubRecord?.theme?.showPageBackground
: postRecord.theme?.showPageBackground ?? true;
- let mergedPrefs = mergePreferences(postRecord?.preferences, pubRecord?.preferences);
+ let mergedPrefs = mergePreferences(
+ postRecord?.preferences,
+ pubRecord?.preferences,
+ );
- let quotes = props.documents.document_mentions_in_bsky?.[0]?.count || 0;
+ let quotes =
+ props.documents.mentionsCount ??
+ props.documents.document_mentions_in_bsky?.[0]?.count ??
+ 0;
let comments =
mergedPrefs.showComments === false
? 0
@@ -61,66 +89,89 @@ export const PostListing = (props: Post) => {
let tags = (postRecord?.tags as string[] | undefined) || [];
// For standalone posts, link directly to the document
- let postHref = getDocumentURL(postRecord, props.documents.uri, pubRecord);
+ let postUrl = getDocumentURL(postRecord, props.documents.uri, pubRecord);
return (
-
-
+ {props.pageTitle && (
+
@@ -198,6 +208,8 @@ export function DashboardLayout<
name={t}
selected={t === tab}
onSelect={() => setTabWithUrl(t)}
+ onMouseEnter={() => props.onTabHover?.(t)}
+ onPointerDown={() => props.onTabHover?.(t)}
/>
);
})}
@@ -240,20 +252,31 @@ export function DashboardLayout<
{props.pageTitle}
+{props.actions}
+ {/* {props.controls}
*/}
+
-
+
+
-
{postRecord.title}
- -- {postRecord.description} -
-
- {props.publication && pubRecord && (
-
);
};
@@ -128,34 +179,129 @@ const PubInfo = (props: {
href: string;
pubRecord: NormalizedPublication;
uri: string;
+ postRecord: NormalizedDocument;
}) => {
+ let isLeaflet = hasLeafletContent(props.postRecord);
+ let cleanUrl = props.pubRecord.url
+ ?.replace(/^https?:\/\//, "")
+ .replace(/^www\./, "");
+
return (
-
-
+
+
+ 
+ )}
+
+
+ {postRecord.title} +
+ ++ {postRecord.description} +
+
+ {props.publication && pubRecord && (
+
+
+
+
-
+
-
- -
- -
+
+
);
};
-const PostInfo = (props: { publishedAt: string | undefined }) => {
+const PostDate = (props: { publishedAt: string | undefined }) => {
let localizedDate = useLocalizedDate(props.publishedAt || "", {
year: "numeric",
month: "short",
day: "numeric",
});
+ if (props.publishedAt) {
+ return +
+
+
{props.pubRecord.name}
+
+ {!isLeaflet && (
+
+
+ )}
+ {cleanUrl}
+ {localizedDate}
;
+ } else return null;
+};
+
+const Interactions = (props: {
+ quotesCount: number;
+ commentsCount: number;
+ recommendsCount: number;
+ tags?: string[];
+ postUrl: string;
+ showComments: boolean;
+ showMentions: boolean;
+ documentUri: string;
+ document: NormalizedDocument;
+}) => {
+ let setSelectedPostListing = useSelectedPostListing(
+ (s) => s.setSelectedPostListing,
+ );
+ let selectPostListing = (drawer: "quotes" | "comments") => {
+ setSelectedPostListing({
+ document_uri: props.documentUri,
+ document: props.document,
+ drawer,
+ });
+ };
+
return (
-
- {props.publishedAt && (
- <>
-
{localizedDate}
-
- )}
+
+
);
};
+
+const Share = (props: { postUrl: string }) => {
+ let smoker = useSmoker();
+ return (
+
+ );
+};
diff --git a/components/Tab.tsx b/components/Tab.tsx
index c0963e18..dc66e2e9 100644
--- a/components/Tab.tsx
+++ b/components/Tab.tsx
@@ -4,12 +4,16 @@ export const Tab = (props: {
name: string;
selected: boolean;
onSelect: () => void;
+ onMouseEnter?: () => void;
+ onPointerDown?: () => void;
href?: string;
}) => {
return (
+
props.onSelect()}
+ onMouseEnter={props.onMouseEnter}
+ onPointerDown={props.onPointerDown}
>
{props.name}
{props.href && (false);
export function useCardBorderHiddenContext() {
return useContext(CardBorderHiddenContext);
}
+
+// Context for hasBackgroundImage
+export const HasBackgroundImageContext = createContext(false);
+
+export function useHasBackgroundImageContext() {
+ return useContext(HasBackgroundImageContext);
+}
import {
colorToString,
useColorAttribute,
@@ -79,22 +86,24 @@ export function LeafletThemeProvider(props: {
return (
-
- {props.children}
-
+
+
+ {props.children}
+
+
);
}
diff --git a/src/replicache/mutations.ts b/src/replicache/mutations.ts
index 40db9f73..232d4249 100644
--- a/src/replicache/mutations.ts
+++ b/src/replicache/mutations.ts
@@ -666,7 +666,6 @@ const updatePublicationDraft: Mutation<{
} | null;
}> = async (args, ctx) => {
await ctx.runOnServer(async (serverCtx) => {
- console.log("updating");
const updates: {
description?: string;
title?: string;
diff --git a/src/useSelectedPostState.ts b/src/useSelectedPostState.ts
new file mode 100644
index 00000000..88b06700
--- /dev/null
+++ b/src/useSelectedPostState.ts
@@ -0,0 +1,16 @@
+import { create } from "zustand";
+import type { NormalizedDocument } from "src/utils/normalizeRecords";
+
+export type SelectedPostListing = {
+ document_uri: string;
+ document: NormalizedDocument;
+ drawer: "quotes" | "comments";
+};
+
+export const useSelectedPostListing = create<{
+ selectedPostListing: SelectedPostListing | null;
+ setSelectedPostListing: (post: SelectedPostListing | null) => void;
+}>((set) => ({
+ selectedPostListing: null,
+ setSelectedPostListing: (post) => set({ selectedPostListing: post }),
+}));
diff --git a/src/utils/useRecordFromDid.ts b/src/utils/useRecordFromDid.ts
new file mode 100644
index 00000000..4b7da6ca
--- /dev/null
+++ b/src/utils/useRecordFromDid.ts
@@ -0,0 +1,12 @@
+import { callRPC } from "app/api/rpc/client";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import useSWR from "swr";
+
+export function useRecordFromDid(did: string | undefined | null) {
+ return useSWR(did ? ["profile-data", did] : null, async () => {
+ const response = await callRPC("get_profile_data", {
+ didOrHandle: did!,
+ });
+ return response.result.profile as ProfileViewDetailed | undefined;
+ });
+}