feat(NcAppSidebarTab): Redesign active tab as rounded filled pill

[nfebe]

🖼️ Screenshots

🏚️ Before	🏡 After

Screencast

active-tabs-demo-7520.webm

Closes #7520

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.57%. Comparing base (b65885c) to head (714a817).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8447      +/-   ##
==========================================
+ Coverage   54.54%   54.57%   +0.02%     
==========================================
  Files         106      106              
  Lines        3441     3441              
  Branches     1003     1003              
==========================================
+ Hits         1877     1878       +1     
+ Misses       1323     1322       -1     
  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.

[susnux]

What about backwards compatibility with old servers?
This likely needs legacy workarounds just like we did with the border rework we recently did. So that apps on e.g. NC32 still have the old design.

[ShGKme]

(I removed the icon and added font-weight to make it closer to the draft on the screenshot)

Design	Current

• It looks like the highlight is supposed to be on the bottom of the button, without the 2px gap
• The highlight width looks more like 65% rather than the current 80%
• The highlight height looks more like 5px (or more) rather than the current 4px. With 4px the border radius is 2px, which is barely a circle section (but might be different due to a different size)

Another thing that catches my eyes — how it lies on the gray line between the tablist and the tab content. Previously it looked fine to me, but now with the border radius and the gap if feels like the gap is missing between the buttons and the content, or not necessary at all.

Before
After

Also, I'm not sure what it is supposed to look like with the icon. On the draft there are no icons. With the current size, it looks unbalanced to me, with the icon too close to the top.

cc @kra-mo

[kra-mo]

Also, I'm not sure what it is supposed to look like with the icon. On the draft there are no icons. With the current size, it looks unbalanced to me, with the icon too close to the top.

Yeah, I see what you mean, some more padding would be nice.

[kra-mo]

It would be good to have the font-weight just be 500 consistently. See #8469

[ShGKme]

@kra-mo What about the other points from above?

• Marker width (80%/50% or ~65%)
• Marker thickness (height, 4px or 5px)
• Marker position (on the bottom or with a gap)
• The border between tabs and the content, or the gap above the border

[kra-mo]

Marker width (80%/50% or ~65%)

I was thinking a bit, and honestly, it being wider works in more cases so maybe it's better to just go with that.

Marker thickness (height, 4px or 5px)

It does look better if it's a bit thicker, but 4px is a variable, I'd say maybe 6px (1.5x).

Marker position (on the bottom or with a gap)

On the bottom, no gap.

The border between tabs and the content, or the gap above the border

Yes, elements with border radius should not hug hard edges. We should add a bit of a gap :)

[nfebe]

[susnux]

Tested seems to work but please adjust the slot prop or remove