add preview project block from soup and project block

[aquaductape]

• enable preview when project entity is selected in unified-list
• add preview project block

[linear]

M-5375 Support folder preview mode

[gbirman]

@aquaductape taking a look now

[gbirman]

issues:

• duplicate share buttons ( see below). this messed up tool bar exists for all previewed files/folders in project block because the share button will occupy full width but the filter/display buttons are only over the unified list view + we have two competing top bars. im not sure what ppl want from the ui exactly but can u sync with @synoet for what we should be doing because it's too jank atm

• can't click into project that's previewed. yes it's previewed but i may still want to open it completely. I guess this is general preview behavior so can be done in a follow up ticket: https://macro.com/app/channel/0195ceb6-ec2e-7023-80e4-6e084fa6cccd?message_id=019b0e36-c8e6-72cc-904f-16dbd09cabf2
• once preview project steals focus its very unintuitive/difficult to get the folders list back in focus so the j/k hotkeys work. like if i click back on the selected project it doesnt return focus

[github-actions]

Preview: https://caleb-m-5375-support-folder-pr-h5i0dp.preview.macro.com/app (c45bc47)

[claude]

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

[claude]

Code review

Found 1 issue:

Conditional Hook Calls Violate Solid.js Patterns

File: js/app/packages/app/component/PreviewPanel.tsx (lines 43-77)

Issue: Hooks are called inside a conditional block that depends on props.selectedEntity.type. In Solid.js, component bodies run only once during initialization - they do not re-run when props change.

This means:

• If a non-project entity is selected first, these hooks will never be initialized
• If the entity type changes from project to non-project (or vice versa) while the component is mounted, the hooks will be in an inconsistent state

Lines 43-77 contain multiple hooks called inside if (props.selectedEntity.type === 'project'):

• useSplitLayout() (line 44)
• createSoupContext() (line 45)
• useHotkeyDOMScope() (line 51)
• createSignal() (line 55)
• createMemo() (line 56)
• createNavigationEntityListShortcut() (line 63)
• onMount() (line 74)

Suggested fix: Extract the project-specific logic into a separate component and use <Show> or <Switch> to conditionally render it.

Reference:

macro/js/app/packages/app/component/PreviewPanel.tsx

Lines 42 to 78 in 9dcb3cd

	if (props.selectedEntity.type === 'project') {
	const { getSplitCount } = useSplitLayout();
	const soupContext = createSoupContext({
	isRenderedFromPreview: true,
	parentContext: splitPanelContext.soupContext,
	domRef: containerRef,
	});
	const [attachHotKeys, splitHotkeyScope] = useHotkeyDOMScope(
	`split=${splitPanelContext.splitHotkeyScope}`
	);
	const [previewState, setPreviewState] = createSignal(false);
	const splitName = createMemo(() => {
	const { type, id } = splitPanelContext.handle.content();
	if (type === 'component') return id;
	return type;
	});
	createNavigationEntityListShortcut({
	splitName,
	splitHandle: splitPanelContext.handle,
	splitHotkeyScope,
	soupContext,
	previewState: [previewState, setPreviewState],
	getSplitCount: getSplitCount,
	});
	scopedSplitPanelContextType.soupContext = soupContext;
	scopedSplitPanelContextType.previewState = [previewState, setPreviewState];
	onMount(() => {
	attachHotKeys(containerRef()!);
	});
	}

approved by rahul