feat(page-tree): gate compact tree density behind COMPACT_PAGE_TREE flag

Make the denser page-tree layout opt-in instead of hardcoded, so row
density can be toggled per deployment via the COMPACT_PAGE_TREE runtime
config flag.

- doc-tree: extract ROW_HEIGHT_STANDARD (32) / ROW_HEIGHT_COMPACT (26);
  default the virtualizer row stride to STANDARD density.
- client: isCompactPageTreeEnabled() in lib/config (reads
  COMPACT_PAGE_TREE, default true); used by space-tree and shared-tree
  to choose the row height.
- server: EnvironmentService.isCompactPageTreeEnabled() and expose
  COMPACT_PAGE_TREE through the window runtime config (static.module).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/client/src/features/page/tree/components/doc-tree.tsx

@@ -16,6 +16,11 @@ import { treeModel } from '../model/tree-model';
 import { DocTreeRow } from './doc-tree-row';
 import styles from '../styles/tree.module.css';
 
+// Page-tree row heights. STANDARD is the safe default density; COMPACT is the
+// denser layout gated behind the COMPACT_PAGE_TREE feature flag.
+export const ROW_HEIGHT_STANDARD = 32;
+export const ROW_HEIGHT_COMPACT = 26;
+
 export type RenderRowProps<T extends object> = {
   node: TreeNode<T>;
   level: number;
@@ -122,11 +127,11 @@ function DocTreeInner<T extends object>(
     selectedId,
     renderRow,
     indentPerLevel = 8,
-    // Compact vertical density: each virtualized row occupies exactly this
-    // many px (the virtualizer stride). Row content is ~22px (18px icon /
-    // 14px text / 20px action icons), so 26px keeps a small, even gap between
-    // nodes without clipping. Lower => denser tree.
-    rowHeight = 26,
+    // Each virtualized row occupies exactly this many px (the virtualizer
+    // stride). Default is standard density (32px); the denser compact layout
+    // (26px) is opt-in and driven by the COMPACT_PAGE_TREE feature flag in
+    // consumers. Lower => denser tree.
+    rowHeight = ROW_HEIGHT_STANDARD,
     onMove,
     onToggle,
     onSelect,

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -22,7 +22,12 @@ import { treeModel } from "@/features/page/tree/model/tree-model";
 import { getPageBreadcrumbs } from "@/features/page/services/page-service.ts";
 import { IPage } from "@/features/page/types/page.types.ts";
 import { extractPageSlugId } from "@/lib";
-import { DocTree } from "./doc-tree";
+import { isCompactPageTreeEnabled } from "@/lib/config.ts";
+import {
+  DocTree,
+  ROW_HEIGHT_COMPACT,
+  ROW_HEIGHT_STANDARD,
+} from "./doc-tree";
 import { SpaceTreeRow } from "./space-tree-row";
 
 interface SpaceTreeProps {
@@ -33,6 +38,7 @@ interface SpaceTreeProps {
 export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
   const { t } = useTranslation();
   const { pageSlug } = useParams();
+  const compactTree = isCompactPageTreeEnabled();
   const [data, setData] = useAtom(treeDataAtom);
   const { handleMove } = useTreeMutation(spaceId);
   const {
@@ -219,6 +225,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
           renderRow={renderRow}
           onMove={handleMove}
           onToggle={handleToggle}
+          rowHeight={compactTree ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_STANDARD}
           readOnly={readOnly}
           disableDrag={disableDragDrop}
           disableDrop={disableDragDrop}

apps/client/src/features/share/components/shared-tree.tsx

@@ -25,7 +25,10 @@ import {
   DocTree,
   type DocTreeApi,
   type RenderRowProps,
+  ROW_HEIGHT_COMPACT,
+  ROW_HEIGHT_STANDARD,
 } from "@/features/page/tree/components/doc-tree";
+import { isCompactPageTreeEnabled } from "@/lib/config.ts";
 import { openSharedTreeNodesAtom } from "@/features/share/atoms/open-shared-tree-nodes-atom";
 
 interface SharedTreeProps {
@@ -36,6 +39,7 @@ export default function SharedTree({ sharedPageTree }: SharedTreeProps) {
   const { t } = useTranslation();
   const treeRef = useRef<DocTreeApi | null>(null);
   const { pageSlug } = useParams();
+  const compactTree = isCompactPageTreeEnabled();
   const [openTreeNodes, setOpenTreeNodes] = useAtom(openSharedTreeNodesAtom);
 
   const currentNodeId = extractPageSlugId(pageSlug);
@@ -100,6 +104,7 @@ export default function SharedTree({ sharedPageTree }: SharedTreeProps) {
         renderRow={SharedTreeRow}
         onMove={noopMove}
         onToggle={handleToggle}
+        rowHeight={compactTree ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_STANDARD}
         getDragLabel={getDragLabel}
         aria-label={t("Pages")}
       />

apps/client/src/lib/config.ts

@@ -43,6 +43,10 @@ export function isCloud(): boolean {
   return castToBoolean(getConfigValue("CLOUD"));
 }
 
+export function isCompactPageTreeEnabled(): boolean {
+  return castToBoolean(getConfigValue("COMPACT_PAGE_TREE", "true"));
+}
+
 export function getAvatarUrl(
   avatarUrl: string,
   type: AvatarIconType = AvatarIconType.AVATAR,

apps/server/src/integrations/environment/environment.service.ts

@@ -214,6 +214,13 @@ export class EnvironmentService {
     return !this.isCloud();
   }
 
+  isCompactPageTreeEnabled(): boolean {
+    const compactTree = this.configService
+      .get<string>('COMPACT_PAGE_TREE', 'true')
+      .toLowerCase();
+    return compactTree === 'true';
+  }
+
   getStripePublishableKey(): string {
     return this.configService.get<string>('STRIPE_PUBLISHABLE_KEY');
   }

apps/server/src/integrations/static/static.module.ts

@@ -35,6 +35,7 @@ export class StaticModule implements OnModuleInit {
         ENV: this.environmentService.getNodeEnv(),
         APP_URL: this.environmentService.getAppUrl(),
         CLOUD: this.environmentService.isCloud(),
+        COMPACT_PAGE_TREE: this.environmentService.isCompactPageTreeEnabled(),
         FILE_UPLOAD_SIZE_LIMIT:
           this.environmentService.getFileUploadSizeLimit(),
         FILE_IMPORT_SIZE_LIMIT: