From 982c0e95fcb49ef04c2b4c3765a19e3458eaa3c0 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 19 Nov 2025 19:14:34 -0500
Subject: [PATCH] added filters for archive on home, filtered archive out of
 default leaflet list

---
 app/(home-pages)/home/HomeLayout.tsx          | 50 +++++++++++--------
 .../home/LeafletList/LeafletInfo.tsx          | 30 ++++++-----
 .../home/LeafletList/LeafletListItem.tsx      | 28 +++++++----
 components/Layout.tsx                         |  4 +-
 components/PageLayouts/DashboardLayout.tsx    | 32 +++++++++++-
 5 files changed, 96 insertions(+), 48 deletions(-)

diff --git a/app/(home-pages)/home/HomeLayout.tsx b/app/(home-pages)/home/HomeLayout.tsx
index 498b1820..62fa1962 100644
--- a/app/(home-pages)/home/HomeLayout.tsx
+++ b/app/(home-pages)/home/HomeLayout.tsx
@@ -71,6 +71,11 @@ export const HomeLayout = (props: {
   let hasPubs = !identity || identity.publications.length === 0 ? false : true;
   let hasTemplates =
     useTemplateState((s) => s.templates).length === 0 ? false : true;
+  let hasArchived =
+    identity &&
+    identity.permission_token_on_homepage.filter(
+      (leaflet) => leaflet.archived === true,
+    ).length > 0;
 
   return (
     <DashboardLayout
@@ -89,6 +94,7 @@ export const HomeLayout = (props: {
               hasBackgroundImage={hasBackgroundImage}
               hasPubs={hasPubs}
               hasTemplates={hasTemplates}
+              hasArchived={!!hasArchived}
             />
           ),
           content: (
@@ -287,27 +293,31 @@ function useSearchedLeaflets(
   });
 
   let allTemplates = useTemplateState((s) => s.templates);
-  let filteredLeaflets = sortedLeaflets.filter(({ token: leaflet }) => {
-    let published = !!leaflet.leaflets_in_publications?.find((l) => l.doc);
-    let drafts = !!leaflet.leaflets_in_publications?.length && !published;
-    let docs = !leaflet.leaflets_in_publications?.length;
-    let templates = !!allTemplates.find((t) => t.id === leaflet.id);
-    // If no filters are active, show all
-    if (
-      !filter.drafts &&
-      !filter.published &&
-      !filter.docs &&
-      !filter.templates
-    )
-      return true;
+  let filteredLeaflets = sortedLeaflets.filter(
+    ({ token: leaflet, archived: archived }) => {
+      let published = !!leaflet.leaflets_in_publications?.find((l) => l.doc);
+      let drafts = !!leaflet.leaflets_in_publications?.length && !published;
+      let docs = !leaflet.leaflets_in_publications?.length;
+      let templates = !!allTemplates.find((t) => t.id === leaflet.id);
+      // If no filters are active, show all
+      if (
+        !filter.drafts &&
+        !filter.published &&
+        !filter.docs &&
+        !filter.templates &&
+        !filter.archived
+      )
+        return archived === false || archived === null;
 
-    return (
-      (filter.drafts && drafts) ||
-      (filter.published && published) ||
-      (filter.docs && docs) ||
-      (filter.templates && templates)
-    );
-  });
+      return (
+        (filter.drafts && drafts) ||
+        (filter.published && published) ||
+        (filter.docs && docs) ||
+        (filter.templates && templates) ||
+        (filter.archived && archived)
+      );
+    },
+  );
   if (searchValue === "") return filteredLeaflets;
   let searchedLeaflets = filteredLeaflets.filter(({ token: leaflet }) => {
     return titles[leaflet.root_entity]
diff --git a/app/(home-pages)/home/LeafletList/LeafletInfo.tsx b/app/(home-pages)/home/LeafletList/LeafletInfo.tsx
index 53927749..51ba612a 100644
--- a/app/(home-pages)/home/LeafletList/LeafletInfo.tsx
+++ b/app/(home-pages)/home/LeafletList/LeafletInfo.tsx
@@ -7,6 +7,7 @@ import { theme } from "tailwind.config";
 import { TemplateSmall } from "components/Icons/TemplateSmall";
 import { timeAgo } from "src/utils/timeAgo";
 import { usePublishLink } from "components/ShareOptions";
+import { Separator } from "components/Layout";
 
 export const LeafletInfo = (props: {
   title?: string;
@@ -52,18 +53,23 @@ export const LeafletInfo = (props: {
           />
         </div>
       </div>
-      {props.draft || props.published ? (
-        <div
-          className={`text-xs ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`}
-        >
-          {props.published
-            ? `Published ${prettyPublishedAt}`
-            : `Draft ${prettyCreatedAt}`}
-        </div>
-      ) : (
-        <div className="text-xs text-tertiary">{prettyCreatedAt}</div>
-      )}
-      {props.archived && <div className="text-xs text-tertiary">archived</div>}
+      <div className="flex gap-2 items-center">
+        {props.archived ? (
+          <div className="text-xs text-tertiary truncate">Archived</div>
+        ) : props.draft || props.published ? (
+          <div
+            className={`text-xs w-max grow truncate ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`}
+          >
+            {props.published
+              ? `Published ${prettyPublishedAt}`
+              : `Draft ${prettyCreatedAt}`}
+          </div>
+        ) : (
+          <div className="text-xs text-tertiary grow w-max truncate">
+            {prettyCreatedAt}
+          </div>
+        )}
+      </div>
       {props.isTemplate && props.display === "grid" ? (
         <div className="absolute -top-2 right-1">
           <TemplateSmall
diff --git a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx
index 7fe37e7d..fa35bf78 100644
--- a/app/(home-pages)/home/LeafletList/LeafletListItem.tsx
+++ b/app/(home-pages)/home/LeafletList/LeafletListItem.tsx
@@ -51,16 +51,17 @@ export const LeafletListItem = (props: {
   if (props.display === "list")
     return (
       <>
-        <LeafletLink id={props.token.id}>
+        <LeafletLink
+          id={props.token.id}
+          className={`w-full ${props.isHidden ? "hidden" : "block"}`}
+        >
           <div
             ref={previewRef}
-            className={`gap-3 w-full ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`}
+            className={`flex gap-3 w-full ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`}
             style={{
               backgroundColor: props.cardBorderHidden
                 ? "transparent"
                 : "rgba(var(--bg-page), var(--bg-page-alpha))",
-
-              display: props.isHidden ? "none" : "flex",
             }}
           >
             {props.showPreview && (
@@ -80,19 +81,20 @@ export const LeafletListItem = (props: {
       </>
     );
   return (
-    <LeafletLink id={props.token.id}>
+    <LeafletLink
+      id={props.token.id}
+      className={`leafletGridListItem relative w-full ${props.isHidden ? "hidden" : "flex"}`}
+    >
       <div
         ref={previewRef}
-        className={`leafletGridListItem relative
-        flex flex-col gap-1 p-1 h-52
+        className={`
+        flex flex-col gap-1 p-1 h-52 w-full
        block-border border-border! hover:outline-border
         `}
         style={{
           backgroundColor: props.cardBorderHidden
             ? "transparent"
             : "rgba(var(--bg-page), var(--bg-page-alpha))",
-
-          display: props.isHidden ? "none" : "flex",
         }}
       >
         <div className="grow">
@@ -108,11 +110,15 @@ export const LeafletListItem = (props: {
   );
 };
 
-const LeafletLink = (props: { id: string; children: React.ReactNode }) => {
+const LeafletLink = (props: {
+  id: string;
+  children: React.ReactNode;
+  className: string;
+}) => {
   return (
     <SpeedyLink
       href={`/${props.id}`}
-      className={`no-underline hover:no-underline! text-primary`}
+      className={`no-underline hover:no-underline! text-primary ${props.className}`}
     >
       {props.children}
     </SpeedyLink>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 52184571..0caa13c9 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -6,9 +6,7 @@ import { PopoverOpenContext } from "./Popover";
 import { useState } from "react";
 
 export const Separator = (props: { classname?: string }) => {
-  return (
-    <div className={`min-h-full border-r border-border ${props.classname}`} />
-  );
+  return <div className={`h-full border-r border-border ${props.classname}`} />;
 };
 
 export const Menu = (props: {
diff --git a/components/PageLayouts/DashboardLayout.tsx b/components/PageLayouts/DashboardLayout.tsx
index 291e5b31..d44d3eb6 100644
--- a/components/PageLayouts/DashboardLayout.tsx
+++ b/components/PageLayouts/DashboardLayout.tsx
@@ -34,6 +34,7 @@ export type DashboardState = {
     published: boolean;
     docs: boolean;
     templates: boolean;
+    archived: boolean;
   };
 };
 
@@ -45,7 +46,13 @@ type DashboardStore = {
 const defaultDashboardState: DashboardState = {
   display: undefined,
   sort: undefined,
-  filter: { drafts: false, published: false, docs: false, templates: false },
+  filter: {
+    drafts: false,
+    published: false,
+    docs: false,
+    templates: false,
+    archived: false,
+  },
 };
 
 export const useDashboardStore = create<DashboardStore>((set, get) => ({
@@ -256,6 +263,7 @@ export const HomeDashboardControls = (props: {
   defaultDisplay: Exclude<DashboardState["display"], undefined>;
   hasPubs: boolean;
   hasTemplates: boolean;
+  hasArchived: boolean;
 }) => {
   let { display, sort } = useDashboardState();
   display = display || props.defaultDisplay;
@@ -283,6 +291,7 @@ export const HomeDashboardControls = (props: {
             <FilterOptions
               hasPubs={props.hasPubs}
               hasTemplates={props.hasTemplates}
+              hasArchived={props.hasArchived}
             />
             <Separator classname="h-4 min-h-4!" />{" "}
           </>
@@ -369,7 +378,11 @@ function Tab(props: {
   );
 }
 
-const FilterOptions = (props: { hasPubs: boolean; hasTemplates: boolean }) => {
+const FilterOptions = (props: {
+  hasPubs: boolean;
+  hasTemplates: boolean;
+  hasArchived: boolean;
+}) => {
   let { filter } = useDashboardState();
   let setState = useSetDashboardState();
   let filterCount = Object.values(filter).filter(Boolean).length;
@@ -421,6 +434,20 @@ const FilterOptions = (props: { hasPubs: boolean; hasTemplates: boolean }) => {
           </Checkbox>
         </>
       )}
+
+      {props.hasArchived && (
+        <Checkbox
+          small
+          checked={filter.archived}
+          onChange={(e) =>
+            setState({
+              filter: { ...filter, archived: !!e.target.checked },
+            })
+          }
+        >
+          Archived
+        </Checkbox>
+      )}
       <Checkbox
         small
         checked={filter.docs}
@@ -442,6 +469,7 @@ const FilterOptions = (props: { hasPubs: boolean; hasTemplates: boolean }) => {
               published: false,
               drafts: false,
               templates: false,
+              archived: false,
             },
           });
         }}
-- 
2.51.2