feat(sidebar-tabs): Redesign active tab as rounded filled pill

The active sidebar tab now renders as a fully-rounded filled pill with
an inset, rounded blue indicator that grows into place when selected,
replacing the previous full-width bottom border and bold label treatment.

Tabs keep a small gap between each other to eliminate the hover radius
artifact, and the tab icon slot now receives the active state so
consumers can render filled/outlined icon variants.

Signed-off-by: nfebe <fenn25.fn@gmail.com>

Author: nfebe

src/components/NcAppSidebar/NcAppSidebarTabs.vue

@@ -253,6 +253,7 @@ export default {
 	&__nav {
 		display: flex;
 		justify-content: stretch;
+		gap: var(--default-grid-baseline);
 		margin: 10px 8px 0 8px;
 		border-bottom: 1px solid var(--color-border);
 	}

src/components/NcAppSidebar/NcAppSidebarTabsButton.vue

@@ -29,7 +29,7 @@ defineProps<{
 		:tabindex="selected ? 0 : -1"
 		@click="selected = true">
 		<span :class="$style.sidebarTabsButton__icon">
-			<NcVNodes :vnodes="tab.renderIcon()">
+			<NcVNodes :vnodes="tab.renderIcon(selected)">
 				<span :class="[$style.sidebarTabsButton__legacyIcon, tab.icon]" />
 			</NcVNodes>
 		</span>
@@ -41,29 +41,41 @@ defineProps<{
 
 <style module lang="scss">
 .sidebarTabsButton {
+	position: relative;
 	border: none;
-	border-bottom: var(--default-grid-baseline) solid transparent !important;
-	border-radius: var(--border-radius-small);
-	background-color: var(--color-main-background);
+	border-radius: var(--border-radius-element);
+	background-color: transparent;
 	color: var(--color-main-text);
 	font-size: var(--default-font-size);
 	cursor: pointer;
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline);
 	padding: var(--border-radius-small);
-	transition:
-		background-color var(--animation-quick),
-		border-bottom-color var(--animation-quick);
+	padding-block-end: calc(var(--border-radius-small) + var(--default-grid-baseline));
+	transition: background-color var(--animation-quick);
 	min-width: var(--default-clickable-area);
 
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 2px;
+		left: 50%;
+		width: 0;
+		height: 4px;
+		border-radius: 999px;
+		background-color: var(--color-primary-element);
+		transform: translateX(-50%);
+		transition: width var(--animation-quick);
+	}
+
 	&:hover {
-		background-color: var(--color-background-hover) !important;
+		background-color: var(--color-background-hover);
 	}
 
-	&:active,
-	&:focus {
-		background-color: var(--color-main-background) !important;
+	&:focus-visible {
+		outline: 2px solid var(--color-main-text);
+		outline-offset: 2px;
 	}
 
 	* {
@@ -72,14 +84,15 @@ defineProps<{
 }
 
 .sidebarTabsButton_selected {
-	border-bottom-color: var(--color-primary-element) !important;
-	border-bottom-left-radius: 0px;
-	border-bottom-right-radius: 0px;
+	background-color: var(--color-background-hover);
 	cursor: default;
 
+	&::after {
+		width: 80%;
+	}
+
 	&:hover {
-		background-color: var(--color-primary-element-light-hover) !important;
-		color: var(--color-primary-element-light-text) !important;
+		background-color: var(--color-background-dark);
 	}
 
 	* {
@@ -94,10 +107,6 @@ defineProps<{
 	text-wrap: nowrap;
 }
 
-.sidebarTabsButton_selected .sidebarTabsButton__name {
-	font-weight: bold;
-}
-
 .sidebarTabsButton__icon {
 	display: inline-flex;
 	align-items: center;

src/components/NcAppSidebarTab/NcAppSidebarTab.vue

@@ -114,10 +114,11 @@ export default {
 		/**
 		 * Render tab's icon slot if any
 		 *
+		 * @param {boolean} selected Whether the tab is the active one
 		 * @return {import('vue').VNode[]}
 		 */
-		renderIcon() {
-			return this.$slots.icon?.()
+		renderIcon(selected = false) {
+			return this.$slots.icon?.({ selected })
 		},
 	},
 }