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 (034beb5) to head (a83c6d0).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8447      +/-   ##
==========================================
+ Coverage   54.55%   54.57%   +0.02%     
==========================================
  Files         106      106              
  Lines        3439     3441       +2     
  Branches     1002     1002              
==========================================
+ Hits         1876     1878       +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.

[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]

[ShGKme]

Although the new param's name reflects HTML (aria-selected) and the current internal variable name, I'm not sure about the naming:

• Parent's selected tab is defined by active prop, which results in 2 names for the same thing (The current tab is active and whether the tab is active is selected)
• Boolean flag pattern seems more fitting here, e.g. isSelected/isActive. And it also would allow in the future having both the boolean flag and the value if needed.

Note: this changes the component API and refactoring it later would be only possible with backward compatibility and migration.

The new prop might not be required for this feature. There is an active prop already.

It is slightly more complicated to use, though.

<NcAppSidebar v-model:active="active">

	<!-- ... -->

	<NcAppSidebarTab name="Settings" id="settings-tab">
		<template #icon>
			<IconCog v-if="active === 'settings-tab'" :size="20" />
			<IconCogOutline v-else :size="20" />
		</template>
	</NcAppSidebarTab>

</NcAppSidebar>

cc @susnux

[ShGKme]

This also needs the legacy check