feat(google-docs): reference tree preview ui [INTEG-3425]

[harikakondur]

Purpose

This PR introduces a hierarchical tree visualization for the entry preview modal in the Google Docs app, replacing the previous flat list. The tree view shows parent-child relationships between entries up to 4 levels of nesting and handles circular references.

Approach

• Visual tree connectors show parent-child relationships
• Root entries have bold borders to distinguish them
• Indentation based on nesting level (max depth: 4 levels)

New Components:

• TreeRow - Renders each node with proper indentation
• EntryCard - Displays entry information (title, content type)
• Indentation - Renders tree connector lines (├─, │, └─)

Two Display Modes:

a) Normal Tree Structure (entries with clear hierarchy):

Blog Post: "My Journey" (blogPost)
  └─ Jane Smith (Author)

Blog Post: "Future of Web" (blogPost)
  └─ John Doe (Author)

b) Flat List (all entries circular):
When ALL entries are part of circular reference chains, shows a flat list:

- Jane Smith (Author)
- John Doe (Author)
- My Journey into AI (blogPost)
- The Future of Web (blogPost)

Testing screenshots

1. When ALL entries are in a circular reference -> display entries as a flat list

2. Entries with shared references

4. Deep nesting

5. Entry with reference array

6. Circular references

[harikakondur]

any ideas on how(or if?) we should display entries past the max depth limit?

[ryunsong-contentful]

If order doesn't matter, make this a set, not an array

[ryunsong-contentful]

We should just make a wrapper component and just pass the treeNodes as a prop instead of doing this loop