From 362b3cd13dd357679e7523e16614b69c6123bf7e Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 2 Dec 2025 19:32:15 -0500
Subject: [PATCH] added a drafts page to looseleaf, along with some empty
 states

---
 app/(home-pages)/home/HomeLayout.tsx          |  2 +-
 .../looseleafs/LooseleafsLayout.tsx           | 53 +++++++++++++++++--
 components/ActionBar/Publications.tsx         |  4 +-
 components/EmptyState.tsx                     | 17 ++++++
 4 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 components/EmptyState.tsx

diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index 7c31a67f..9669e893 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -211,7 +211,7 @@ export function LeafletList(props: {
       className={`
         leafletList
         w-full
-        ${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 pt-2"} `}
+        ${display === "grid" ? "grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-x-6 sm:gap-y-5 grow" : "flex flex-col gap-2 "} `}
     >
       {props.leaflets.map(({ token: leaflet, added_at, archived }, index) => (
         <ReplicacheProvider
diff --git a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
index d40d28d4..dc567eb9 100644
--- a/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
+++ b/app/(home-pages)/looseleafs/LooseleafsLayout.tsx
@@ -1,5 +1,8 @@
 "use client";
-import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import {
+  DashboardLayout,
+  PublicationDashboardControls,
+} from "components/PageLayouts/DashboardLayout";
 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 import { useState } from "react";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
@@ -11,6 +14,8 @@ import { useIdentityData } from "components/IdentityProvider";
 import useSWR from "swr";
 import { getHomeDocs } from "../home/storage";
 import { Leaflet, LeafletList } from "../home/HomeLayout";
+import { EmptyState } from "components/EmptyState";
+import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 
 export const LooseleafsLayout = (props: {
   entityID: string | null;
@@ -36,10 +41,21 @@ export const LooseleafsLayout = (props: {
       id="looseleafs"
       cardBorderHidden={cardBorderHidden}
       currentPage="looseleafs"
-      defaultTab="home"
+      defaultTab="Drafts"
       actions={<Actions />}
       tabs={{
-        home: {
+        Drafts: {
+          controls: (
+            <PublicationDashboardControls
+              defaultDisplay={"list"}
+              hasBackgroundImage={cardBorderHidden}
+              searchValue={searchValue}
+              setSearchValueAction={setSearchValue}
+            />
+          ),
+          content: <LooseleafDraftList empty={true} />,
+        },
+        Published: {
           controls: null,
           content: (
             <LooseleafList
@@ -55,6 +71,26 @@ export const LooseleafsLayout = (props: {
   );
 };
 
+const LooseleafDraftList = (props: { empty: boolean }) => {
+  if (props.empty)
+    return (
+      <EmptyState className="pt-2">
+        <div className="italic">
+          You haven't written any looseleaf drafts yet.
+        </div>
+        <ButtonPrimary className="mx-auto">
+          Start a Looseleaf Draft
+        </ButtonPrimary>
+      </EmptyState>
+    );
+  return (
+    <div className="flex flex-col">
+      <ButtonSecondary fullWidth>New Looseleaf Draft</ButtonSecondary>
+      This is where the draft would go if we had them lol
+    </div>
+  );
+};
+
 export const LooseleafList = (props: {
   titles: { [root_entity: string]: string };
   initialFacts: {
@@ -102,6 +138,17 @@ export const LooseleafList = (props: {
           token: ptoh.permission_tokens as PermissionToken,
         }))
     : [];
+
+  if (!leaflets || leaflets.length === 0)
+    return (
+      <EmptyState>
+        <div className="italic">You haven't published any looseleafs yet.</div>
+        <ButtonPrimary className="mx-auto">
+          Start a Looseleaf Draft
+        </ButtonPrimary>
+      </EmptyState>
+    );
+
   return (
     <LeafletList
       defaultDisplay="list"
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index 4299146c..fa5a55fe 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -23,7 +23,7 @@ export const PublicationButtons = (props: {
   currentPubUri: string | undefined;
 }) => {
   let { identity } = useIdentityData();
-  let looseleaves = identity?.permission_token_on_homepage.find(
+  let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
     (f) => f.permission_tokens.leaflets_to_documents,
   );
 
@@ -34,7 +34,7 @@ export const PublicationButtons = (props: {
 
   return (
     <div className="pubListWrapper w-full  flex flex-col gap-1 sm:bg-transparent sm:border-0">
-      {looseleaves && (
+      {hasLooseleafs && (
         <>
           <SpeedyLink
             href={`/looseleafs`}
diff --git a/components/EmptyState.tsx b/components/EmptyState.tsx
new file mode 100644
index 00000000..0ce4d16b
--- /dev/null
+++ b/components/EmptyState.tsx
@@ -0,0 +1,17 @@
+export const EmptyState = (props: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={`
+        flex flex-col gap-2 justify-between
+        container bg-[rgba(var(--bg-page),.7)]
+        sm:p-4 p-3 mt-2
+        text-center text-tertiary
+        ${props.className}`}
+    >
+      {props.children}
+    </div>
+  );
+};
-- 
2.51.2