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

The active sidebar tab now renders as a rounded surface backed by a
neutral hover-tone fill, with a wide rounded indicator that grows into
place when selected. The icon slot now receives the active state so
consumers can render filled/outlined icon variants.

Backport of #8447 to stable8.

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

Author: nfebe

src/components/NcAppSidebar/NcAppSidebarTabs.vue

@@ -266,35 +266,58 @@ 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);
 
 		// Override checkbox-radio-switch styles so that it looks like tabs
 		& :deep(.checkbox-radio-switch--button-variant) {
+			position: relative;
 			border: unset !important;
-			border-radius: 0 !important;
+			border-radius: var(--border-radius-element) !important;
+			background-color: transparent;
+			transition: background-color var(--animation-quick);
 			.checkbox-content {
 				padding: var(--default-grid-baseline);
-				border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;
+				padding-bottom: calc(var(--default-grid-baseline) * 2);
+				border-radius: var(--border-radius-element) !important;
 				margin: 0 !important;
-				border-bottom: var(--default-grid-baseline) solid transparent !important;
 				.checkbox-content__icon > * {
 					color: var(--color-main-text) !important;
 				}
 			}
-			&.checkbox-radio-switch--checked .checkbox-radio-switch__content{
-				background: transparent !important;
-				color: var(--color-main-text) !important;
-				border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
+			&::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);
+			}
+			&.checkbox-radio-switch--checked {
+				background-color: var(--color-background-hover) !important;
+				&:hover {
+					background-color: var(--color-background-dark) !important;
+				}
+				.checkbox-radio-switch__content {
+					background: transparent !important;
+					color: var(--color-main-text) !important;
+				}
+				&::after {
+					width: 80%;
+				}
 			}
 		}
 	}
 
 	&__tab {
 		flex: 1 1;
-		&.active {
-			color: var(--color-primary-element);
-		}
 
 		&-caption {
 			flex: 0 1 100%;