added the looseleaf page

app/(home-pages)/looseleafs/LooseleafsLayout.tsx

···
+"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>;
+};

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

···
+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 || {}}
+    />
+  );
+}

app/[leaflet_id]/actions/PublishButton.tsx

···
             <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

components/ActionBar/Navigation.tsx

···
   | "pub"
   | "discover"
   | "notifications"
-  | "looseleaf";
+  | "looseleafs";
 
 export const DesktopNavigation = (props: {
   currentPage: navPages;

components/ActionBar/Publications.tsx

···
       {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!"
                   : ""
               }