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/NcAppSidebar.vue

@@ -41,8 +41,10 @@ Using `v-show` directly will result in usability issues due to internal focus tr
 				Search tab content
 			</NcAppSidebarTab>
 			<NcAppSidebarTab name="Settings" id="settings-tab">
-				<template #icon>
-					<IconCogOutline :size="20" />
+				<!-- The `selected` slot prop lets you swap to a filled icon variant for the active tab. -->
+				<template #icon="{ selected }">
+					<IconCog v-if="selected" :size="20" />
+					<IconCogOutline v-else :size="20" />
 				</template>
 				Settings tab content
 			</NcAppSidebarTab>
@@ -58,12 +60,14 @@ Using `v-show` directly will result in usability issues due to internal focus tr
 
 <script>
 	import IconMagnify from 'vue-material-design-icons/Magnify.vue'
+	import IconCog from 'vue-material-design-icons/Cog.vue'
 	import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
 	import IconShareVariantOutline from 'vue-material-design-icons/ShareVariantOutline.vue'
 
 	export default {
 		components: {
 			IconMagnify,
+			IconCog,
 			IconCogOutline,
 			IconShareVariantOutline,
 		},

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,9 +41,9 @@ 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);
+	border-radius: var(--border-radius-element);
 	background-color: var(--color-main-background);
 	color: var(--color-main-text);
 	font-size: var(--default-font-size);
@@ -52,18 +52,31 @@ defineProps<{
 	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);
+		opacity: 0;
+		transform: translateX(-50%);
+		transition: width var(--animation-quick), opacity 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 +85,16 @@ 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%;
+		opacity: 1;
+	}
+
 	&: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 +109,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 })
 		},
 	},
 }