[7888] Add option to UI.xml to be able to set COMPACT view as the default in Create Content dialog

[jvega190]

craftercms/craftercms#7888

Summary by CodeRabbit

• New Features

  • Added a compact view option for the “create content” flow, allowing the dialog to open in a more compact layout when enabled.
  • The content type selection screen now respects the app’s current preview setting for compact view.

• Bug Fixes

  • The create content dialog now uses the configured compact view state more consistently instead of relying only on the default setting.

[coderabbitai]

Walkthrough

Adds a createContentCompactView boolean to GlobalState.preview, defaulting to false and populated from a initialCreateContentCompactView XML attribute during initPreviewConfig. NewContentDialogContainer reads this state via useSelection and passes the derived value (with fallback to its initialCompact prop) into SelectTypeView.

Changes

createContentCompactView config flag

Layer / File(s)	Summary
GlobalState type and preview reducer initialization ui/app/src/models/GlobalState.ts, ui/app/src/state/reducers/preview.ts	Adds createContentCompactView: boolean to GlobalState.preview, initializes it to false in initialState, and sets it from the initialCreateContentCompactView XML attribute string in the initPreviewConfig handler.
Component wiring through NewContentDialogContainer ui/app/src/components/NewContentDialog/NewContentDialogContainer.tsx, ui/app/src/components/ContentTypeManagement/components/SelectTypeView.tsx	Imports useSelection in both components; NewContentDialogContainer reads state.preview.createContentCompactView, falls back to the initialCompact prop, and forwards the result as initialCompact to SelectTypeView.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Suggested reviewers

• rart

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the change: adding a UI.xml option to default Create Content to COMPACT view.
Description check	✅ Passed	The description includes the required ticket reference, but adds no additional detail beyond the issue link.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/app/src/components/ContentTypeManagement/components/SelectTypeView.tsx`:
- Line 40: The SelectTypeView component has an unused useSelection import that
will trigger lint failures. Remove the unused import from SelectTypeView and
keep the file imports limited to symbols actually referenced in the component,
using the SelectTypeView identifier to verify the cleanup.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 81e2d6b8-6151-4cc6-9a23-4f2faf59bce1

📥 Commits

Reviewing files that changed from the base of the PR and between 9990ce9 and faf6ae4.

📒 Files selected for processing (4)

• ui/app/src/components/ContentTypeManagement/components/SelectTypeView.tsx
• ui/app/src/components/NewContentDialog/NewContentDialogContainer.tsx
• ui/app/src/models/GlobalState.ts
• ui/app/src/state/reducers/preview.ts

[jvega190]

@coderabbitai can you check if everything looks good? Please give it a final review before I hand over for human review

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
echo "=== preview.ts reducer ==="
cat -n ui/app/src/state/reducers/preview.ts

echo ""
echo "=== GlobalState.ts (preview section) ==="
grep -n "createContentCompactView\|preview" ui/app/src/models/GlobalState.ts | head -40

echo ""
echo "=== NewContentDialogContainer.tsx ==="
cat -n ui/app/src/components/NewContentDialog/NewContentDialogContainer.tsx

echo ""
echo "=== SelectTypeView.tsx (relevant parts) ==="
cat -n ui/app/src/components/ContentTypeManagement/components/SelectTypeView.tsx

echo ""
echo "=== Check UI.xml for the new config attribute ==="
fd "UI.xml" . --exec grep -n "createContent\|initialCreateContent\|compact" {} +

echo ""
echo "=== Check how initialCompact is used elsewhere ==="
rg -n "initialCompact\|compact" ui/app/src/components/NewContentDialog/ -C 2

echo ""
echo "=== Check how initialCreateContentCompactView is used ==="
rg -n "initialCreateContentCompactView\|createContentCompactView" ui/app/src/

echo ""
echo "=== Check SelectTypeView props ==="
rg -n "SelectTypeViewProps\|initialCompact" ui/app/src/components/ContentTypeManagement/ -C 3

Length of output: 44425

---

---

@jvega190 The implementation looks solid overall. Here's a summary of the review:

---

✅ What looks good

1. Reducer (preview.ts) — createContentCompactView is correctly initialized to false in initialState, and initPreviewConfig reads the initialCreateContentCompactView XML attribute with a safe fallback: if the attribute is absent, null === 'true' evaluates to false. This is consistent with how initialEditModeOn and initialHighlightMode are handled in the same case.

2. GlobalState.ts — Type declaration is clean and in the right place.

3. NewContentDialogContainer.tsx — The OR logic stateCreateContentCompactView || initialCompact correctly handles both the config-driven value and the prop-driven value. The derived value is properly forwarded to SelectTypeView.

4. SelectTypeView.tsx — The priority chain is correct:
   storedUserPreference (localStorage) > initialCompact (config/prop) > component default
   Users who previously toggled compact mode manually retain their preference; the config default only applies to users who have no stored preference.

5. Site change — On changeSiteComplete, createContentCompactView resets to false, but initPreviewConfig will re-apply the new site's config value when the preview initializes. No issue here.

---

🔍 Minor observation

No UI.xml example or documentation update appears in this PR showing how authors should configure the new initialCreateContentCompactView attribute (e.g., in the craftercms.components.Preview widget configuration block). It'd be good to verify that the issue #7888 or separate docs track covers this, so integrators know the attribute exists and what values it accepts.

---

Overall the code is correct, minimal, and consistent with the existing pattern for config-driven preview defaults. Ready for human review. 🐇