Refactor/shared home layout (#230)

* group home pages with shared layout

* tweak discover button styles

* make discover dynamic

* add lazy loading for pub icon and bg images

actions/getIdentityData.ts

···
 
 import { cookies } from "next/headers";
 import { supabaseServerClient } from "supabase/serverClient";
-
-export async function getIdentityData() {
+import { cache } from "react";
+export const getIdentityData = cache(uncachedGetIdentityData);
+export async function uncachedGetIdentityData() {
   let cookieStore = await cookies();
   let auth_token =
     cookieStore.get("auth_token")?.value ||
···
             bsky_profiles(*),
             publication_subscriptions(*),
             custom_domains!custom_domains_identity_id_fkey(publication_domains(*), *),
-            home_leaflet:permission_tokens!identities_home_page_fkey(*, permission_token_rights(*)),
+            home_leaflet:permission_tokens!identities_home_page_fkey(*, permission_token_rights(*,
+                              entity_sets(entities(facts(*)))
+            )),
             permission_token_on_homepage(
               created_at,
               permission_tokens!inner(

app/(home-pages)/home/page.tsx

···
+import { getIdentityData } from "actions/getIdentityData";
+import { getFactsFromHomeLeaflets } from "app/api/rpc/[command]/getFactsFromHomeLeaflets";
+import { supabaseServerClient } from "supabase/serverClient";
+
+import { HomeLayout } from "./HomeLayout";
+
+export default async function Home() {
+  let auth_res = await getIdentityData();
+
+  let [allLeafletFacts] = await Promise.all([
+    auth_res
+      ? getFactsFromHomeLeaflets.handler(
+          {
+            tokens: auth_res.permission_token_on_homepage.map(
+              (r) => r.permission_tokens.root_entity,
+            ),
+          },
+          { supabase: supabaseServerClient },
+        )
+      : undefined,
+  ]);
+
+  let home_docs_initialFacts = allLeafletFacts?.result || {};
+
+  return (
+    <HomeLayout
+      titles={{
+        ...home_docs_initialFacts.titles,
+        ...auth_res?.permission_token_on_homepage.reduce(
+          (acc, tok) => {
+            let title =
+              tok.permission_tokens.leaflets_in_publications[0]?.title;
+            if (title) acc[tok.permission_tokens.root_entity] = title;
+            return acc;
+          },
+          {} as { [k: string]: string },
+        ),
+      }}
+      entityID={auth_res?.home_leaflet?.root_entity || null}
+      initialFacts={home_docs_initialFacts.facts || {}}
+    />
+  );
+}

app/(home-pages)/layout.tsx

···
+import { getIdentityData } from "actions/getIdentityData";
+import { EntitySetProvider } from "components/EntitySetProvider";
+import {
+  ThemeProvider,
+  ThemeBackgroundProvider,
+} from "components/ThemeManager/ThemeProvider";
+import { ReplicacheProvider, type Fact } from "src/replicache";
+
+export default async function HomePagesLayout(props: {
+  children: React.ReactNode;
+}) {
+  let identityData = await getIdentityData();
+  if (!identityData?.home_leaflet) return <>{props.children}</>;
+  let facts =
+    (identityData?.home_leaflet?.permission_token_rights[0].entity_sets?.entities.flatMap(
+      (e) => e.facts,
+    ) || []) as Fact<any>[];
+
+  let root_entity = identityData.home_leaflet.root_entity;
+  return (
+    <ReplicacheProvider
+      rootEntity={identityData.home_leaflet.root_entity}
+      token={identityData.home_leaflet}
+      name={identityData.home_leaflet.root_entity}
+      initialFacts={facts}
+    >
+      <EntitySetProvider
+        set={identityData.home_leaflet.permission_token_rights[0].entity_set}
+      >
+        <ThemeProvider entityID={root_entity}>
+          <ThemeBackgroundProvider entityID={root_entity}>
+            {props.children}
+          </ThemeBackgroundProvider>
+        </ThemeProvider>
+      </EntitySetProvider>
+    </ReplicacheProvider>
+  );
+}

app/(home-pages)/notifications/page.tsx

···
+export default async function Notifications() {
+  return <div>Notifications</div>;
+}

app/(home-pages)/reader/page.tsx

···
+import { getIdentityData } from "actions/getIdentityData";
+
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import { ReaderContent } from "./ReaderContent";
+import { SubscriptionsContent } from "./SubscriptionsContent";
+import { getReaderFeed } from "./getReaderFeed";
+import { getSubscriptions } from "./getSubscriptions";
+
+export default async function Reader(props: {}) {
+  let posts = await getReaderFeed();
+  let publications = await getSubscriptions();
+  return (
+    <DashboardLayout
+      id="reader"
+      cardBorderHidden={false}
+      currentPage="reader"
+      defaultTab="Read"
+      actions={null}
+      tabs={{
+        Read: {
+          controls: null,
+          content: (
+            <ReaderContent nextCursor={posts.nextCursor} posts={posts.posts} />
+          ),
+        },
+        Subscriptions: {
+          controls: null,
+          content: (
+            <SubscriptionsContent
+              publications={publications.subscriptions}
+              nextCursor={publications.nextCursor}
+            />
+          ),
+        },
+      }}
+    />
+  );
+}

app/discover/PubListing.tsx app/(home-pages)/discover/PubListing.tsx

···
 "use client";
 import { AtUri } from "@atproto/syntax";
-import { PublicationSubscription } from "app/reader/getSubscriptions";
+import { PublicationSubscription } from "app/(home-pages)/reader/getSubscriptions";
 import { PubIcon } from "components/ActionBar/Publications";
 import { Separator } from "components/Layout";
 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
···
     <BaseThemeProvider {...theme} local>
       <a
         href={`https://${record.base_path}`}
-        style={{
-          backgroundImage: `url(${backgroundImage})`,
-          backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
-          backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
-        }}
         className={`no-underline! flex flex-row gap-2
           bg-bg-leaflet
           border border-border-light rounded-lg
           px-3 py-3 selected-outline
-          hover:outline-accent-contrast hover:border-accent-contrast`}
+          hover:outline-accent-contrast hover:border-accent-contrast
+          relative overflow-hidden`}
       >
+        {backgroundImage && (
+          <img
+            src={backgroundImage}
+            alt=""
+            loading="lazy"
+            fetchPriority="low"
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              width: backgroundImageRepeat ? `${backgroundImageSize}px` : "100%",
+              height: backgroundImageRepeat ? "auto" : "100%",
+              objectFit: backgroundImageRepeat ? "none" : "cover",
+              objectPosition: "center",
+            }}
+          />
+        )}
         <div
-          className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg ${props.resizeHeight ? "" : "sm:h-48 h-full"} ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
+          className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg relative z-10 ${props.resizeHeight ? "" : "sm:h-48 h-full"} ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
         >
           <div className="mx-auto pb-1">
             <PubIcon record={record} uri={props.uri} large />

app/discover/SortedPublicationList.tsx app/(home-pages)/discover/SortedPublicationList.tsx

···
     <div className="relative">
       <button
         onClick={props.onClick}
-        style={
-          props.selected
-            ? { backgroundColor: `rgba(var(--accent-1), 0.2)` }
-            : {}
-        }
-        className={`text-sm  rounded-md px-[8px] py-0.5 border ${props.selected ? "border-accent-contrast text-accent-1 font-bold" : "text-tertiary border-border-light"}`}
+        className={`text-sm bg-accent-1 text-accent-2 rounded-md px-[8px] py-0.5 border ${props.selected ? "border-accent-contrast  font-bold" : "border-border-light"}`}
       >
         {props.children}
       </button>

app/discover/page.tsx app/(home-pages)/discover/page.tsx

···
 import { Metadata } from "next";
 import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
 
-export const dynamic = "force-static";
-export const revalidate = 60;
-
 export type PublicationsList = Awaited<ReturnType<typeof getPublications>>;
 async function getPublications() {
   let { data: publications, error } = await supabaseServerClient
···
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   let order = ((await props.searchParams).order as string) || "recentlyUpdated";
-  let publications = await getPublications();
 
   return (
-    <div className="w-full h-full mx-auto bg-[#FDFCFA]">
-      <DashboardLayout
-        id="discover"
-        cardBorderHidden={false}
-        currentPage="discover"
-        defaultTab="default"
-        actions={null}
-        tabs={{
-          default: {
-            controls: null,
-            content: <DiscoverContent order={order} />,
-          },
-        }}
-      />
-    </div>
+    <DashboardLayout
+      id="discover"
+      cardBorderHidden={false}
+      currentPage="discover"
+      defaultTab="default"
+      actions={null}
+      tabs={{
+        default: {
+          controls: null,
+          content: <DiscoverContent order={order} />,
+        },
+      }}
+    />
   );
 }
 

app/home/HomeLayout.tsx app/(home-pages)/home/HomeLayout.tsx

···
 };
 
 export const HomeLayout = (props: {
-  entityID: string;
+  entityID: string | null;
   titles: { [root_entity: string]: string };
   initialFacts: {
     [root_entity: string]: Fact<Attribute>[];

app/home/icon.tsx app/(home-pages)/home/icon.tsx

···
 import { ImageResponse } from "next/og";
 import type { Fact } from "src/replicache";
 import type { Attribute } from "src/replicache/attributes";
-import { Database } from "../../supabase/database.types";
+import { Database } from "supabase/database.types";
 import { createServerClient } from "@supabase/ssr";
 import { parseHSBToRGB } from "src/utils/parseHSB";
 import { cookies } from "next/headers";

app/home/page.tsx

···
-import { cookies } from "next/headers";
-import { Fact, ReplicacheProvider, useEntity } from "src/replicache";
-import type { Attribute } from "src/replicache/attributes";
-import {
-  ThemeBackgroundProvider,
-  ThemeProvider,
-} from "components/ThemeManager/ThemeProvider";
-import { EntitySetProvider } from "components/EntitySetProvider";
-import { createIdentity } from "actions/createIdentity";
-import { drizzle } from "drizzle-orm/node-postgres";
-import { IdentitySetter } from "./IdentitySetter";
-
-import { getIdentityData } from "actions/getIdentityData";
-import { getFactsFromHomeLeaflets } from "app/api/rpc/[command]/getFactsFromHomeLeaflets";
-import { supabaseServerClient } from "supabase/serverClient";
-import { pool } from "supabase/pool";
-
-import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
-import { HomeLayout } from "./HomeLayout";
-
-export default async function Home() {
-  let cookieStore = await cookies();
-  let auth_res = await getIdentityData();
-  let identity: string | undefined;
-  if (auth_res) identity = auth_res.id;
-  else identity = cookieStore.get("identity")?.value;
-  let needstosetcookie = false;
-  if (!identity) {
-    const client = await pool.connect();
-    const db = drizzle(client);
-    let newIdentity = await createIdentity(db);
-    client.release();
-    identity = newIdentity.id;
-    needstosetcookie = true;
-  }
-
-  async function setCookie() {
-    "use server";
-
-    (await cookies()).set("identity", identity as string, {
-      sameSite: "strict",
-    });
-  }
-
-  let permission_token = auth_res?.home_leaflet;
-  if (!permission_token) {
-    let res = await supabaseServerClient
-      .from("identities")
-      .select(
-        `*,
-        permission_tokens!identities_home_page_fkey(*, permission_token_rights(*))
-      `,
-      )
-      .eq("id", identity)
-      .single();
-    permission_token = res.data?.permission_tokens;
-  }
-
-  if (!permission_token)
-    return (
-      <NotFoundLayout>
-        <p className="font-bold">Sorry, we can't find this home!</p>
-        <p>
-          This may be a glitch on our end. If the issue persists please{" "}
-          <a href="mailto:[e-mail]">send us a note</a>.
-        </p>
-      </NotFoundLayout>
-    );
-  let [homeLeafletFacts, allLeafletFacts] = await Promise.all([
-    supabaseServerClient.rpc("get_facts", {
-      root: permission_token.root_entity,
-    }),
-    auth_res
-      ? getFactsFromHomeLeaflets.handler(
-          {
-            tokens: auth_res.permission_token_on_homepage.map(
-              (r) => r.permission_tokens.root_entity,
-            ),
-          },
-          { supabase: supabaseServerClient },
-        )
-      : undefined,
-  ]);
-  let initialFacts =
-    (homeLeafletFacts.data as unknown as Fact<Attribute>[]) || [];
-
-  let root_entity = permission_token.root_entity;
-  let home_docs_initialFacts = allLeafletFacts?.result || {};
-
-  return (
-    <ReplicacheProvider
-      rootEntity={root_entity}
-      token={permission_token}
-      name={root_entity}
-      initialFacts={initialFacts}
-    >
-      <IdentitySetter cb={setCookie} call={needstosetcookie} />
-      <EntitySetProvider
-        set={permission_token.permission_token_rights[0].entity_set}
-      >
-        <ThemeProvider entityID={root_entity}>
-          <ThemeBackgroundProvider entityID={root_entity}>
-            <HomeLayout
-              titles={{
-                ...home_docs_initialFacts.titles,
-                ...auth_res?.permission_token_on_homepage.reduce(
-                  (acc, tok) => {
-                    let title =
-                      tok.permission_tokens.leaflets_in_publications[0]?.title;
-                    if (title) acc[tok.permission_tokens.root_entity] = title;
-                    return acc;
-                  },
-                  {} as { [k: string]: string },
-                ),
-              }}
-              entityID={root_entity}
-              initialFacts={home_docs_initialFacts.facts || {}}
-            />
-          </ThemeBackgroundProvider>
-        </ThemeProvider>
-      </EntitySetProvider>
-    </ReplicacheProvider>
-  );
-}

app/lish/[did]/[publication]/dashboard/DraftList.tsx

···
 import { NewDraftSecondaryButton } from "./NewDraftButton";
 import React from "react";
 import { usePublicationData } from "./PublicationSWRProvider";
-import { LeafletList } from "app/home/HomeLayout";
+import { LeafletList } from "app/(home-pages)/home/HomeLayout";
 
 export function DraftList(props: {
   searchValue: string;

app/login/LoginForm.tsx

···
 } from "actions/emailAuth";
 import { loginWithEmailToken } from "actions/login";
 import { ActionAfterSignIn } from "app/api/oauth/[route]/afterSignInActions";
-import { getHomeDocs } from "app/home/storage";
+import { getHomeDocs } from "app/(home-pages)/home/storage";
 import { ButtonPrimary } from "components/Buttons";
 import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 import { BlueskySmall } from "components/Icons/BlueskySmall";

app/reader/ReaderContent.tsx app/(home-pages)/reader/ReaderContent.tsx

···
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 
 export const ReaderContent = (props: {
-  root_entity: string;
   posts: Post[];
   nextCursor: Cursor | null;
 }) => {
···
       year: "numeric",
       month: "short",
       day: "numeric",
-    }
+    },
   );
 
   return (

app/reader/SubscriptionsContent.tsx app/(home-pages)/reader/SubscriptionsContent.tsx

···
 "use client";
-import { PubListing } from "app/discover/PubListing";
+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";

app/reader/page.tsx

···
-import { cookies } from "next/headers";
-import { Fact, ReplicacheProvider } from "src/replicache";
-import type { Attribute } from "src/replicache/attributes";
-import {
-  ThemeBackgroundProvider,
-  ThemeProvider,
-} from "components/ThemeManager/ThemeProvider";
-import { EntitySetProvider } from "components/EntitySetProvider";
-import { getIdentityData } from "actions/getIdentityData";
-import { supabaseServerClient } from "supabase/serverClient";
-
-import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
-import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
-import { ReaderContent, ReaderEmpty } from "./ReaderContent";
-import {
-  SubscriptionsContent,
-  SubscriptionsEmpty,
-} from "./SubscriptionsContent";
-import { getReaderFeed } from "./getReaderFeed";
-import { getSubscriptions } from "./getSubscriptions";
-
-export default async function Reader(props: {}) {
-  let cookieStore = await cookies();
-  let auth_res = await getIdentityData();
-  let identity: string | undefined;
-  let permission_token = auth_res?.home_leaflet;
-  if (!permission_token)
-    return (
-      <DashboardLayout
-        id="reader"
-        cardBorderHidden={false}
-        currentPage="reader"
-        defaultTab="Read"
-        actions={null}
-        tabs={{
-          Read: {
-            controls: null,
-            content: <ReaderEmpty />,
-          },
-          Subscriptions: {
-            controls: null,
-            content: <SubscriptionsEmpty />,
-          },
-        }}
-      />
-    );
-  let [homeLeafletFacts] = await Promise.all([
-    supabaseServerClient.rpc("get_facts", {
-      root: permission_token.root_entity,
-    }),
-  ]);
-  let initialFacts =
-    (homeLeafletFacts.data as unknown as Fact<Attribute>[]) || [];
-  let root_entity = permission_token.root_entity;
-
-  if (!auth_res?.atp_did) return;
-  let posts = await getReaderFeed();
-  let publications = await getSubscriptions();
-  return (
-    <ReplicacheProvider
-      rootEntity={root_entity}
-      token={permission_token}
-      name={root_entity}
-      initialFacts={initialFacts}
-    >
-      <EntitySetProvider
-        set={permission_token.permission_token_rights[0].entity_set}
-      >
-        <ThemeProvider entityID={root_entity}>
-          <ThemeBackgroundProvider entityID={root_entity}>
-            <DashboardLayout
-              id="reader"
-              cardBorderHidden={false}
-              currentPage="reader"
-              defaultTab="Read"
-              actions={null}
-              tabs={{
-                Read: {
-                  controls: null,
-                  content: (
-                    <ReaderContent
-                      root_entity={root_entity}
-                      nextCursor={posts.nextCursor}
-                      posts={posts.posts}
-                    />
-                  ),
-                },
-                Subscriptions: {
-                  controls: null,
-                  content: (
-                    <SubscriptionsContent
-                      publications={publications.subscriptions}
-                      nextCursor={publications.nextCursor}
-                    />
-                  ),
-                },
-              }}
-            />
-          </ThemeBackgroundProvider>
-        </ThemeProvider>
-      </EntitySetProvider>
-    </ReplicacheProvider>
-  );
-}

components/ActionBar/Publications.tsx

···
   let iconSizeClassName = `${props.small ? "w-4 h-4" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`;
 
   return props.record.icon ? (
-    <div
-      style={{
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]})`,
-      }}
-      className={`${iconSizeClassName} ${props.className}`}
-    />
+    <div className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}>
+      <img
+        src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`}
+        alt={`${props.record.name} icon`}
+        loading="lazy"
+        fetchPriority="low"
+        className="absolute inset-0 w-full h-full object-cover object-center"
+      />
+    </div>
   ) : (
     <div className={`${iconSizeClassName} bg-accent-1 relative`}>
       <div

components/Pages/useCardBorderHidden.ts

···
 import { PubLeafletPublication } from "lexicons/api";
 import { useEntity, useReplicache } from "src/replicache";
 
-export function useCardBorderHidden(entityID: string) {
+export function useCardBorderHidden(entityID: string | null) {
   let { rootEntity } = useReplicache();
   let { data: pub } = useLeafletPublicationData();
   let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");

components/ShareOptions/index.tsx

···
 import { Menu, MenuItem } from "components/Layout";
 import { ActionButton } from "components/ActionBar/ActionButton";
 import useSWR from "swr";
-import { useTemplateState } from "app/home/Actions/CreateNewButton";
+import { useTemplateState } from "app/(home-pages)/home/Actions/CreateNewButton";
 import LoginForm from "app/login/LoginForm";
 import { CustomDomainMenu } from "./DomainOptions";
 import { useIdentityData } from "components/IdentityProvider";

components/ThemeManager/ThemeProvider.tsx

···
 
 // define the color defaults for everything
 export const ThemeDefaults = {
-  "theme/page-background": "#F0F7FA",
+  "theme/page-background": "#FDFCFA",
   "theme/card-background": "#FFFFFF",
   "theme/primary": "#272727",
   "theme/highlight-1": "#FFFFFF",

components/utils/AddLeafletToHomepage.tsx

···
 "use client";
 
-import { addDocToHome } from "app/home/storage";
+import { addDocToHome } from "app/(home-pages)/home/storage";
 import { useIdentityData } from "components/IdentityProvider";
 import { useEffect } from "react";
 import { useReplicache } from "src/replicache";