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

@@ -13,6 +13,7 @@
 			v-if="hasMultipleTabs || showForSingleTab"
 			role="tablist"
 			class="app-sidebar-tabs__nav"
+			:class="{ 'app-sidebar-tabs__nav--legacy': isLegacy34 }"
 			@keydown.left.exact.prevent.stop="focusPreviousTab"
 			@keydown.right.exact.prevent.stop="focusNextTab"
 			@keydown.tab.exact.prevent.stop="focusActiveTabContent"
@@ -44,6 +45,7 @@
 <script>
 import { getCanonicalLocale } from '@nextcloud/l10n'
 import NcAppSidebarTabsButton from './NcAppSidebarTabsButton.vue'
+import { isLegacy34 } from '../../utils/legacy.ts'
 
 export default {
 	name: 'NcAppSidebarTabs',
@@ -93,6 +95,7 @@ export default {
 			 * Local active (open) tab's ID. It allows to use component without v-model:active
 			 */
 			activeTab: props.active,
+			isLegacy34,
 		}
 	},
 
@@ -255,6 +258,11 @@ export default {
 		justify-content: stretch;
 		margin: 10px 8px 0 8px;
 		border-bottom: 1px solid var(--color-border);
+
+		&:not(&--legacy) {
+			gap: var(--default-grid-baseline);
+			padding-block-end: var(--default-grid-baseline);
+		}
 	}
 
 	&__tab {

src/components/NcAppSidebar/NcAppSidebarTabsButton.vue

@@ -7,6 +7,7 @@
 import type NcAppSidebarTab from '../NcAppSidebarTab/NcAppSidebarTab.vue'
 
 import NcVNodes from '../NcVNodes/NcVNodes.vue'
+import { isLegacy34 } from '../../utils/legacy.ts'
 
 const selected = defineModel<boolean>('selected', { required: true })
 
@@ -23,13 +24,14 @@ defineProps<{
 		class="button-vue"
 		:class="[$style.sidebarTabsButton, {
 			[$style.sidebarTabsButton_selected]: selected,
+			[$style.sidebarTabsButton_legacy]: isLegacy34,
 		}]"
 		role="tab"
 		:aria-selected="selected"
 		: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>
@@ -42,20 +44,62 @@ defineProps<{
 <style module lang="scss">
 .sidebarTabsButton {
 	border: none;
-	border-bottom: var(--default-grid-baseline) solid transparent !important;
-	border-radius: var(--border-radius-small);
-	background-color: var(--color-main-background);
 	color: var(--color-main-text);
 	font-size: var(--default-font-size);
 	cursor: pointer;
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline);
+	min-width: var(--default-clickable-area);
+
+	* {
+		cursor: pointer;
+	}
+}
+
+// New design (NC34+): rounded pill with a small primary indicator under the
+// active tab.
+.sidebarTabsButton:not(.sidebarTabsButton_legacy) {
+	position: relative;
+	border-radius: var(--border-radius-element);
+	background-color: var(--color-main-background);
+	padding: var(--default-grid-baseline);
+	padding-block-end: calc(var(--default-grid-baseline) * 2);
+	transition: background-color var(--animation-quick);
+
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		width: 0;
+		height: 6px;
+		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);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--color-main-text);
+		outline-offset: 2px;
+	}
+}
+
+// Legacy design (NC < 34): full-width primary border under the active tab.
+.sidebarTabsButton_legacy {
+	border-bottom: var(--default-grid-baseline) solid transparent !important;
+	border-radius: var(--border-radius-small);
+	background-color: var(--color-main-background);
 	padding: var(--border-radius-small);
 	transition:
 		background-color var(--animation-quick),
 		border-bottom-color var(--animation-quick);
-	min-width: var(--default-clickable-area);
 
 	&:hover {
 		background-color: var(--color-background-hover) !important;
@@ -65,26 +109,38 @@ defineProps<{
 	&:focus {
 		background-color: var(--color-main-background) !important;
 	}
+}
+
+.sidebarTabsButton_selected {
+	cursor: default;
 
 	* {
-		cursor: pointer;
+		cursor: default;
 	}
 }
 
-.sidebarTabsButton_selected {
+.sidebarTabsButton:not(.sidebarTabsButton_legacy).sidebarTabsButton_selected {
+	background-color: var(--color-background-hover);
+
+	&::after {
+		width: 80%;
+		opacity: 1;
+	}
+
+	&:hover {
+		background-color: var(--color-background-dark);
+	}
+}
+
+.sidebarTabsButton_legacy.sidebarTabsButton_selected {
 	border-bottom-color: var(--color-primary-element) !important;
-	border-bottom-left-radius: 0px;
-	border-bottom-right-radius: 0px;
-	cursor: default;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
 
 	&:hover {
 		background-color: var(--color-primary-element-light-hover) !important;
 		color: var(--color-primary-element-light-text) !important;
 	}
-
-	* {
-		cursor: default;
-	}
 }
 
 .sidebarTabsButton__name {
@@ -94,7 +150,7 @@ defineProps<{
 	text-wrap: nowrap;
 }
 
-.sidebarTabsButton_selected .sidebarTabsButton__name {
+.sidebarTabsButton_legacy.sidebarTabsButton_selected .sidebarTabsButton__name {
 	font-weight: var(--font-weight-element, bold);
 }
 

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 })
 		},
 	},
 }