From a2401dd1d6900abdae2bd97a6ffd79e047e2ff48 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 21 Nov 2025 15:37:32 -0500
Subject: [PATCH] added the looseleaf page

---
 .../looseleafs/LooseleafsLayout.tsx           | 62 +++++++++++++++++++
 app/(home-pages)/looseleafs/page.tsx          | 46 ++++++++++++++
 app/[leaflet_id]/actions/PublishButton.tsx    |  2 +-
 components/ActionBar/Navigation.tsx           |  2 +-
 components/ActionBar/Publications.tsx         |  6 +-
 5 files changed, 113 insertions(+), 5 deletions(-)
 create mode 100644 app/(home-pages)/looseleafs/LooseleafsLayout.tsx
 create mode 100644 app/(home-pages)/looseleafs/page.tsx

diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
new file mode 100644
index 00000000..25bba976
--- /dev/null
+++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
@@ -0,0 +1,62 @@
+"use client";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+import { useState } from "react";
+import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
+import { Fact } from "src/replicache";
+import { Attribute } from "src/replicache/attributes";
+import { Actions } from "../home/Actions/Actions";
+
+export const LooseleafsLayout = (props: {
+  entityID: string | null;
+  titles: { [root_entity: string]: string };
+  initialFacts: {
+    [root_entity: string]: Fact<Attribute>[];
+  };
+}) => {
+  let [searchValue, setSearchValue] = useState("");
+  let [debouncedSearchValue, setDebouncedSearchValue] = useState("");
+
+  useDebouncedEffect(
+    () => {
+      setDebouncedSearchValue(searchValue);
+    },
+    200,
+    [searchValue],
+  );
+
+  let cardBorderHidden = !!useCardBorderHidden(props.entityID);
+  return (
+    <DashboardLayout
+      id="looseleafs"
+      cardBorderHidden={cardBorderHidden}
+      currentPage="looseleafs"
+      defaultTab="home"
+      actions={<Actions />}
+      tabs={{
+        home: {
+          controls: null,
+          content: (
+            <LooseleafList
+              titles={props.titles}
+              initialFacts={props.initialFacts}
+              cardBorderHidden={cardBorderHidden}
+              searchValue={debouncedSearchValue}
+            />
+          ),
+        },
+      }}
+    />
+  );
+};
+
+export const LooseleafList = (props: {
+  titles: { [root_entity: string]: string };
+  initialFacts: {
+    [root_entity: string]: Fact<Attribute>[];
+  };
+  searchValue: string;
+  cardBorderHidden: boolean;
+}) => {
+  return <div>hello</div>;
+};
diff --git a/app/(home-pages)/looseleafs/page.tsx b/app/(home-pages)/looseleafs/page.tsx
new file mode 100644
index 00000000..4c687af7
--- /dev/null
+++ b/app/(home-pages)/looseleafs/page.tsx
@@ -0,0 +1,46 @@
+import { getIdentityData } from "actions/getIdentityData";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import { Actions } from "../home/Actions/Actions";
+import { Fact } from "src/replicache";
+import { Attribute } from "src/replicache/attributes";
+import { getFactsFromHomeLeaflets } from "app/api/rpc/[command]/getFactsFromHomeLeaflets";
+import { supabaseServerClient } from "supabase/serverClient";
+import { LooseleafsLayout } from "./LooseleafsLayout";
+
+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 (
+    <LooseleafsLayout
+      entityID={auth_res?.home_leaflet?.root_entity || null}
+      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 },
+        ),
+      }}
+      initialFacts={home_docs_initialFacts.facts || {}}
+    />
+  );
+}
diff --git a/app/[leaflet_id]/actions/PublishButton.tsx b/app/[leaflet_id]/actions/PublishButton.tsx
index 34370d89..0ce7d0fa 100644
--- a/app/[leaflet_id]/actions/PublishButton.tsx
+++ b/app/[leaflet_id]/actions/PublishButton.tsx
@@ -286,7 +286,7 @@ const PubSelector = (props: {
             <LooseLeafSmall className="shrink-0" />
             <div className="flex flex-col leading-snug">
               <div className="text-secondary font-bold">
-                Publish as LooseLeaf
+                Publish as Looseleaf
               </div>
               <div className="text-tertiary text-sm font-normal">
                 Publish this as a one off doc to AT Proto
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
index 31873812..2a753b48 100644
--- a/components/ActionBar/Navigation.tsx
+++ b/components/ActionBar/Navigation.tsx
@@ -24,7 +24,7 @@ export type navPages =
   | "pub"
   | "discover"
   | "notifications"
-  | "looseleaf";
+  | "looseleafs";
 
 export const DesktopNavigation = (props: {
   currentPage: navPages;
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index 8308dc27..484c358e 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -35,17 +35,17 @@ export const PublicationButtons = (props: {
       {looseleaves.length > 0 && (
         <>
           <SpeedyLink
-            href={`/lish/looseleaf`}
+            href={`/looseleafs`}
             className="flex gap-2 items-start text-secondary font-bold hover:no-underline! hover:text-accent-contrast w-full"
           >
             {/*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*/}
             <ActionButton
-              label="LooseLeafs"
+              label="Looseleafs"
               icon={<LooseLeafSmall />}
               nav
               className={
-                props.currentPage === "looseleaf"
+                props.currentPage === "looseleafs"
                   ? "bg-bg-page! border-border!"
                   : ""
               }
-- 
2.51.2