From 0a0fdc21f232169109d09b9508bbb0d02157851b Mon Sep 17 00:00:00 2001
From: Steven Le <387282+stevenle@users.noreply.github.com>
Date: Mon, 2 Mar 2026 12:26:51 -0800
Subject: [PATCH 1/2] feat(root-cms): support grouped collections on project
 home

---
 .../ui/pages/ProjectPage/ProjectPage.css      | 42 +------------------
 .../ui/pages/ProjectPage/ProjectPage.tsx      | 38 +++--------------
 2 files changed, 7 insertions(+), 73 deletions(-)

diff --git a/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css b/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css
index b038c5fa3..23dc1903f 100644
--- a/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css
+++ b/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css
@@ -25,46 +25,6 @@
   gap: 12px;
 }
 
-.ProjectPage__collectionList {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 12px;
+.ProjectPage__collectionTree {
   max-width: 580px;
 }
-
-.ProjectPage__collectionList__collection {
-  display: grid;
-  grid-template-columns: 20px 1fr;
-  align-items: center;
-  padding: 8px 12px;
-  column-gap: 12px;
-  row-gap: 4px;
-  width: 100%;
-  background: transparent;
-  border: 2px solid black;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  text-decoration: none;
-  transition: background-color 0.18s ease;
-  position: relative;
-}
-
-.ProjectPage__collectionList__collection:hover {
-  background-color: var(--button-background-hover);
-}
-
-.ProjectPage__collectionList__collection:active {
-  background-color: var(--button-background-active);
-}
-
-.ProjectPage__collectionList__collection__icon {
-  margin-top: 2px;
-}
-
-.ProjectPage__collectionList__collection__desc {
-  grid-column: 2 / span 1;
-  font-size: 12px;
-}
diff --git a/packages/root-cms/ui/pages/ProjectPage/ProjectPage.tsx b/packages/root-cms/ui/pages/ProjectPage/ProjectPage.tsx
index 6c7dcda77..75314e882 100644
--- a/packages/root-cms/ui/pages/ProjectPage/ProjectPage.tsx
+++ b/packages/root-cms/ui/pages/ProjectPage/ProjectPage.tsx
@@ -1,6 +1,6 @@
 import {Button} from '@mantine/core';
-import {IconFolder} from '@tabler/icons-preact';
 import {ActionLogs} from '../../components/ActionLogs/ActionLogs.js';
+import {CollectionTree} from '../../components/CollectionTree/CollectionTree.js';
 import {Heading} from '../../components/Heading/Heading.js';
 import {Layout} from '../../layout/Layout.js';
 import './ProjectPage.css';
@@ -49,38 +49,12 @@ export function ProjectPage() {
 }
 
 ProjectPage.CollectionList = () => {
-  const collections = Object.keys(window.__ROOT_CTX.collections).map((id) => {
-    return {
-      ...window.__ROOT_CTX.collections[id],
-      id: id,
-    };
-  });
+  const collections = window.__ROOT_CTX.collections;
+  const projectId = window.__ROOT_CTX.rootConfig.projectId;
+
   return (
-    <div className="ProjectPage__collectionList">
-      {collections.map((collection) => (
-        <a
-          className="ProjectPage__collectionList__collection"
-          href={`/cms/content/${collection.id}`}
-          key={collection.id}
-        >
-          <div className="ProjectPage__collectionList__collection__icon">
-            <IconFolder size={20} strokeWidth="1.75" />
-          </div>
-          <div className="ProjectPage__collectionList__collection__name">
-            {collection.name || collection.id}
-          </div>
-          {collection.description && (
-            <div className="ProjectPage__collectionList__collection__desc">
-              {collection.description}
-            </div>
-          )}
-        </a>
-      ))}
-      {collections.length === 0 && (
-        <div className="ProjectPage__collectionList__collections__empty">
-          No collections match your query.
-        </div>
-      )}
+    <div className="ProjectPage__collectionTree">
+      <CollectionTree collections={collections} projectId={projectId} />
     </div>
   );
 };

From 4c55e3776486d0c8f67863308b4b49b3862aad0b Mon Sep 17 00:00:00 2001
From: Steven Le <stevenle08@gmail.com>
Date: Mon, 2 Mar 2026 18:36:41 -0800
Subject: [PATCH 2/2] chore: update styles

---
 .../ui/pages/ProjectPage/ProjectPage.css        | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css b/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css
index 23dc1903f..bf3c42221 100644
--- a/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css
+++ b/packages/root-cms/ui/pages/ProjectPage/ProjectPage.css
@@ -26,5 +26,22 @@
 }
 
 .ProjectPage__collectionTree {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
   max-width: 580px;
 }
+
+.ProjectPage__collectionTree .mantine-Accordion-control {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.ProjectPage__collectionTree .CollectionTree__accordion__children {
+  gap: 12px;
+}
+
+.ProjectPage__collectionTree .CollectionTree__collection {
+  border: 2px solid black;
+  border-radius: 8px;
+}