Skip to content

fix(): Crt dfetail list view, use space better.#149

Merged
asturur merged 5 commits into
mainfrom
crt-list-view
May 25, 2026
Merged

fix(): Crt dfetail list view, use space better.#149
asturur merged 5 commits into
mainfrom
crt-list-view

Conversation

@asturur
Copy link
Copy Markdown
Member

@asturur asturur commented May 24, 2026

Summary

Tweaks to CRT tiles
image

Tweaks to CRT list games only
image

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 24, 2026

Warning

Review limit reached

@asturur, we couldn't start this review because you've used your available PR reviews for now.

Your plan includes 1 review of capacity. Refill in 3 minutes and 8 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 843cb6dd-b9bd-4162-8a27-72d8c278de29

📥 Commits

Reviewing files that changed from the base of the PR and between 6df5a7f and 0eb9001.

📒 Files selected for processing (1)
  • tests/ui/tst_browse_layout_profiles.qml
📝 Walkthrough

Walkthrough

This PR adds a layoutProfile system: theme profiles (defaultTile, crtTile) define list/detail geometry, components (BrowseList, BrowseDetailPane, BrowseListDetailView) accept and use layoutProfile, header/status components gained minor layout props, screens select and propagate the appropriate profile based on CRT-native mode, and small script/ui tweaks were applied.

Changes

Layout Profile System and Component Integration

Layer / File(s) Summary
Layout Profile Schema Definition
src/ui/theme/BrowseLayouts.qml
defaultTile and crtTile now include scrollThumbRightAligned and a full set of list/detail geometry properties (margins, paddings, row sizing/spacing, scrollbar gap, metadata/image/tag offsets, and text/favorite paddings).
Component Layout Profile Integration
src/ui/components/BrowseDetailPane.qml, src/ui/components/BrowseList.qml
Components accept layoutProfile and compute layout metrics from it: card paddings, metadata/image insets and offsets, row height/spacing, scrollbar thumb width/alignment, selection radii, and related paddings.
List-Detail View Composition
src/ui/components/BrowseListDetailView.qml
Adds layoutProfile and forwards it to BrowseList and BrowseDetailPane; derives card radius and divider offset from the profile.
Header and Status Bar Enhancements
src/ui/components/HeaderBar.qml, src/ui/components/TopStatusStrip.qml, src/ui/components/PagedGrid.qml
HeaderBar adds browseProgressText; TopStatusStrip introduces slotMargin; PagedGrid adds scrollThumbRightAligned and conditional thumb anchoring.
Screen-Level Layout Profile Selection
src/ui/app/MainLayout.qml, src/ui/screens/MediaListScreen.qml, src/ui/screens/SystemsScreen.qml
Screens introduce CRT-aware properties and choose defaultTile or crtTile via Theme.crtNativePath, bind browseProgressText, and apply profile-driven list-card margins/strip sizing.
Screen-Specific UI Configuration
src/ui/screens/FavoritesScreen.qml, src/ui/screens/RecentsScreen.qml
Set detailShowTitle: false on those MediaListScreen instances to disable detail title rendering.
Misc: Scripts and GamesScreen Tweak
scripts/run-macos-mister-core.sh, src/ui/screens/GamesScreen.qml
Script exports ZAPAROO_CORE_ENDPOINT and ZAPAROO_CRT_PREVIEW_SCALE and starts frontend with --crt; GamesScreen adjusts gridBottomMargin when bottom-status-row is shown.
QML Build Configuration
rust/launcher/.qmlls.ini
Adds [General] with buildDir and no-cmake-calls=true for QML analysis.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I’m a rabbit hopping through the theme parade,
I tuned the paddings, margins neatly laid,
CRT and Default dancing side by side,
Profiles whisper layout rules with pride,
UI hums — the browse panes feel well-played! 🐇✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is significantly incomplete. It contains only a brief summary ('Tweaks to CRT tiles') with screenshots but lacks required sections: motivation, test plan, and incomplete checklist. Complete the PR description by filling in: Motivation (link relevant issue/discussion), Test plan (how changes were verified), and all checklist items (lint/test results, FPS performance, ARM32 considerations, localization, CLA status).
Title check ⚠️ Warning The title contains typos ('dfetail' instead of 'detail', 'user' instead of 'use') and is overly vague. While it references 'Crt detail list view' and spacing improvements which relate to some changes, the typos and generic phrasing make it unclear and unprofessional. Correct the typos and make the title more specific about what was fixed, e.g., 'fix: Improve CRT detail list view layout and spacing' or 'fix: Layout refinements for CRT detail pane and list view'.
✅ Passed checks (3 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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
  • Commit unit tests in branch crt-list-view

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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/ui/screens/SystemsScreen.qml (1)

192-205: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Propagate _tileLayout into BrowseListDetailView

BrowseListDetailView is not receiving layoutProfile, so CRT list mode can still render internal list/detail geometry with the default profile despite CRT-specific side margins. Add layoutProfile: systems._tileLayout near Line 204.

Suggested fix
     BrowseListDetailView {
         id: listCard
@@
         anchors.bottom: parent.bottom
         anchors.bottomMargin: Sizing.pctH(8)
+        layoutProfile: systems._tileLayout
         model: Browse.SystemsModel
         currentIndex: systemsGrid.currentIndex
🤖 Prompt for 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.

In `@src/ui/screens/SystemsScreen.qml` around lines 192 - 205,
BrowseListDetailView (id: listCard) isn’t receiving the CRT layout profile so
list/detail geometry ignores CRT-specific margins; add a layoutProfile property
set to systems._tileLayout on the BrowseListDetailView (near the existing
visible/anchors/currentIndex properties) so it uses the CRT tile layout when
rendering.
🤖 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 `@src/ui/components/HeaderBar.qml`:
- Line 55: The width binding for the progress label uses raw geometry
Math.max(0, Math.floor(parent.width / 4)) and must be routed through the Sizing
helper; update the width expression in HeaderBar.qml (the progress label's width
property) to wrap the computed value with Sizing.px(...) so the computed
Math.floor(parent.width / 4) is passed into Sizing.px and preserves the Math.max
check.

In `@src/ui/theme/BrowseLayouts.qml`:
- Around line 95-126: The listed hardcoded geometry properties (e.g.
listCardSideMargin, listDividerOffsetX, listStripHeight, listStripSlotMargin,
listCardPaddingLeft/Right/Top/Bottom, listRowHeight, listCenterSlot,
listScrollbarGap, listSelectionAccentWidth,
detailMetadataYOffset/ExtraHeight/LeftInset/RightInset, detailPanePadding*,
detailImageXOffset/LeftInset/RightInset/ExtraWidth/ExtraHeight/BottomGap,
detailTagRowHeight/Spacing, listRowTextLeftPadding/RightPadding,
listFavoriteRightPadding) must be replaced with Sizing helpers so they scale
correctly; update numeric literals to calls like Sizing.px(value) for pixel
dimensions, Sizing.stroke(...) for border/line widths, Sizing.center(...) for
center-slot semantics (replace listCenterSlot), and Sizing.half(...) where
half-pixel rounding is required, ensuring negative offsets (listDividerOffsetX,
detailMetadataYOffset) use Sizing.px(-N). Keep the same property names but
return Sizing.* values so all geometry-driving values comply with the Sizing
rules.

---

Outside diff comments:
In `@src/ui/screens/SystemsScreen.qml`:
- Around line 192-205: BrowseListDetailView (id: listCard) isn’t receiving the
CRT layout profile so list/detail geometry ignores CRT-specific margins; add a
layoutProfile property set to systems._tileLayout on the BrowseListDetailView
(near the existing visible/anchors/currentIndex properties) so it uses the CRT
tile layout when rendering.
🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 79dd7746-a7f7-48b8-adbb-b29f728bb13e

📥 Commits

Reviewing files that changed from the base of the PR and between 1f80e14 and 92c1bdc.

⛔ Files ignored due to path filters (1)
  • resources/images/logo-crt.png is excluded by !**/*.png
📒 Files selected for processing (13)
  • rust/launcher/.qmlls.ini
  • src/ui/app/MainLayout.qml
  • src/ui/components/BrowseDetailPane.qml
  • src/ui/components/BrowseList.qml
  • src/ui/components/BrowseListDetailView.qml
  • src/ui/components/HeaderBar.qml
  • src/ui/components/PagedGrid.qml
  • src/ui/components/TopStatusStrip.qml
  • src/ui/screens/FavoritesScreen.qml
  • src/ui/screens/MediaListScreen.qml
  • src/ui/screens/RecentsScreen.qml
  • src/ui/screens/SystemsScreen.qml
  • src/ui/theme/BrowseLayouts.qml

anchors.left: logo.right
anchors.leftMargin: Sizing.pctW(1)
anchors.verticalCenter: logo.verticalCenter
width: Math.max(0, Math.floor(parent.width / 4))
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Route the progress label width through Sizing.px().

The new width binding directly drives geometry without a Sizing wrapper.

As per coding guidelines, "Any value that drives x/y/width/height... must go through Sizing.px(), Sizing.stroke(), Sizing.center(), or Sizing.half()."

🤖 Prompt for 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.

In `@src/ui/components/HeaderBar.qml` at line 55, The width binding for the
progress label uses raw geometry Math.max(0, Math.floor(parent.width / 4)) and
must be routed through the Sizing helper; update the width expression in
HeaderBar.qml (the progress label's width property) to wrap the computed value
with Sizing.px(...) so the computed Math.floor(parent.width / 4) is passed into
Sizing.px and preserves the Math.max check.

Comment thread src/ui/theme/BrowseLayouts.qml
@asturur asturur changed the title fix(): Crt dfetail list view, user space better. fix(): Crt dfetail list view, use space better. May 25, 2026
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/ui/screens/SystemsScreen.qml (1)

192-220: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Missing layoutProfile property on BrowseListDetailView.

Based on the review stack context, layer 3 added the layoutProfile property to BrowseListDetailView, and layer 5 (current) should propagate the appropriate profile. However, the layoutProfile property is not set on the listCard instance.

According to the context snippet from MediaListScreen.qml:286-320, BrowseListDetailView should receive:

layoutProfile: root._listLayoutProfile

In SystemsScreen, this should be:

layoutProfile: systems._tileLayout

Without this property, BrowseListDetailView cannot properly configure its internal BrowseList and BrowseDetailPane components with the correct layout geometry.

🔧 Proposed fix
 BrowseListDetailView {
     id: listCard

     visible: !systems.transitioning && systems._listLayout
     anchors.left: parent.left
     anchors.leftMargin: systems._tileLayout.listCardSideMargin
     anchors.right: parent.right
     anchors.rightMargin: systems._tileLayout.listCardSideMargin
     anchors.top: topStrip.bottom
     anchors.topMargin: Sizing.pctH(2)
     anchors.bottom: parent.bottom
     anchors.bottomMargin: Sizing.pctH(8)
+    layoutProfile: systems._tileLayout
     model: Browse.SystemsModel
     currentIndex: systemsGrid.currentIndex
     detailTitle: listCard.currentName
🤖 Prompt for 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.

In `@src/ui/screens/SystemsScreen.qml` around lines 192 - 220, The
BrowseListDetailView instance (id: listCard) is missing the new layoutProfile
property; add layoutProfile and set it to systems._tileLayout so
BrowseListDetailView (and its internal BrowseList/BrowseDetailPane) receive the
correct geometry. Locate the BrowseListDetailView block in SystemsScreen.qml and
add layoutProfile: systems._tileLayout to the component (keeping existing ids
and handlers like currentIndex, detailTitle, detailCoverKey unchanged).
🧹 Nitpick comments (1)
scripts/run-macos-mister-core.sh (1)

20-21: ⚡ Quick win

Remove the commented duplicate line.

Line 21 is a commented duplicate of line 20 and serves no purpose. Remove it to improve clarity.

♻️ Proposed fix
 exec "${FRONTEND}" --crt
-# exec "${FRONTEND}" --crt
🤖 Prompt for 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.

In `@scripts/run-macos-mister-core.sh` around lines 20 - 21, The script contains a
redundant commented duplicate of the exec command: remove the commented line "#
exec \"${FRONTEND}\" --crt" so only the active exec "${FRONTEND}" --crt remains;
locate the duplicate in the script near the existing exec "${FRONTEND}" --crt
line and delete the commented version to improve clarity.
🤖 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.

Outside diff comments:
In `@src/ui/screens/SystemsScreen.qml`:
- Around line 192-220: The BrowseListDetailView instance (id: listCard) is
missing the new layoutProfile property; add layoutProfile and set it to
systems._tileLayout so BrowseListDetailView (and its internal
BrowseList/BrowseDetailPane) receive the correct geometry. Locate the
BrowseListDetailView block in SystemsScreen.qml and add layoutProfile:
systems._tileLayout to the component (keeping existing ids and handlers like
currentIndex, detailTitle, detailCoverKey unchanged).

---

Nitpick comments:
In `@scripts/run-macos-mister-core.sh`:
- Around line 20-21: The script contains a redundant commented duplicate of the
exec command: remove the commented line "# exec \"${FRONTEND}\" --crt" so only
the active exec "${FRONTEND}" --crt remains; locate the duplicate in the script
near the existing exec "${FRONTEND}" --crt line and delete the commented version
to improve clarity.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 088ccc22-3bce-41e0-8ba0-04737c60083f

📥 Commits

Reviewing files that changed from the base of the PR and between 92c1bdc and 6df5a7f.

📒 Files selected for processing (3)
  • scripts/run-macos-mister-core.sh
  • src/ui/screens/GamesScreen.qml
  • src/ui/screens/SystemsScreen.qml

@asturur asturur merged commit 60d3ad4 into main May 25, 2026
6 checks passed
@asturur asturur deleted the crt-list-view branch May 25, 2026 17:47
@github-actions github-actions Bot locked and limited conversation to collaborators May 25, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant