feat(NcAppSettingsDialog): new navigation design

[nfebe]

The settings dialog title now sits over a tinted navigation column.

🖼️ Screenshots

🏚️ Before	🏡 After

Closes #7641

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.60%. Comparing base (f4ccd08) to head (fa8a678).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8477      +/-   ##
==========================================
+ Coverage   54.57%   54.60%   +0.02%     
==========================================
  Files         106      106              
  Lines        3441     3443       +2     
  Branches     1003     1005       +2     
==========================================
+ Hits         1878     1880       +2     
  Misses       1322     1322              
  Partials      241      241              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ShGKme]

On the design draft:

• The main content section is rounded with a border, like with the new design on NcAppContent
• The dialog title is left aligned with the buttons' text
• The dialog title and the first section title are aligned
• Left/right offset around the buttons are equal

Not sure about the font-size, though...

[ShGKme]

Dialog navigation is not only the NcAppSettingsDialog feature, but also the NcDialog feature. For example, used in the file picker dialog.

It might make sense to update the design from the NcDialog side. But I'm unsure how we can do it preventing breaking changes.

[susnux]

Same question here: What about backwards compatibility?
Keep in mind this is also used in old server versions.

So we use legacy fallbacks to keep the existing design for old server versions, for example see here: #7351

basically: add new styles by default and add some legacy class if server version is < 34.
Then apply the old styles for the legacy class.

[susnux]

It might make sense to update the design from the NcDialog side. But I'm unsure how we can do it preventing breaking changes.

Maybe it makes sense to strip the navigation completely, so make the navigation a part of the app settings dialog.
Then you can style it like you want, the design of the current dialog navigation was mostly inspired by the filepicker.

Meaning its specific to that component, so we maybe want to just use this design here. So in the future we can deprecate the navigation of the NcDialog or at least make it more generic.

[nfebe]

[jancborchardt]

@nfebe regarding the last screenshot: The heading in the content container should be aligned with the heading on the left, as in the mockup by @kra-mo in #7641

Currently, the "General" text is stuck to the top of the dialog too much.

[kra-mo]

Currently, the "General" text is stuck to the top of the dialog too much.

To translate this to a more actionable complaint, the top of the content needs more padding :)

[kra-mo]

I'd make this the same color as form boxes, so for now this:

nextcloud-vue/src/components/NcFormBox/NcFormBoxItem.vue

Line 107 in 9cf17af

--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));

[kra-mo]

This can also be less strong in this case.

[kra-mo]

It would be good to reduce the maximum width for this dialog now by a bit as well.

[kra-mo]

The font-weight also should not change based on selection. It should always be 500. See #8469

[nfebe]

@nfebe regarding the last screenshot: The heading in the content container should be aligned with the heading on the left, as in the mockup by @kra-mo in #7641

@jancborchardt those titles are not fixed i.e position is determined by scroll but let me see what can be done.

[jancborchardt]

@nfebe right, they shouldn't be fixed. But what I mean is that in the screenshot you showed, the first header is too far up.

Did you scroll slightly down there? If not, would be good to give it a bit of whitespace above.

[nfebe]

@jancborchardt @kra-mo

[kra-mo]

Same comment about the height of the pill for the selected item as for the general left navigation. It should be a little less tall. Other than that, looks good to me.

One thing I would still change, if possible, is to reduce the maximum width of the entire dialog by a bit. I raised this in the past, but we agreed that we'd do it once we redesign the rest, so I think now is the time.

[ShGKme]

Mobile view is broken.

[nfebe]

Fixed responsiveness.

[ShGKme]

The title and the close button are not visible

[nfebe]

See a stale version was pushed? updated.

[nickvergessen]

This is broken on dark mode btw: Instead of getting brighter on hover (?) like the "Blur camera …" setting, it tries to get darker and that's not visible anymore.

[ShGKme]

The colors are still different. Hover effect should make the color darker in the light theme, but lighter in the dark one.

Recording.2026-05-06.000325.mp4

[nfebe]

[ShGKme]

The color is still different and the title on mobile is not aligned.

But this is not critical. Let's merge as it is and adjust in the follow-up, so apps can start testing the new design.

addressed

[ShGKme]

Renamed a bit for the changelog to clarify it for library users. There was a significant design change, not only the "alignment"