feat(app-content): Revise sidebar selection and content edge styling

Main content now has a subtle left divider and rounded left edge next
to the navigation. Selected nav and list items use a softly tinted
pill instead of a solid primary fill.

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

Author: nfebe

src/assets/NcAppNavigationItem.scss

@@ -28,18 +28,30 @@
 		}
 	}
 
-	// When .active class is applied, change color background of link and utils. The
-	// !important prevents the focus state to override the active state.
+	// !important so :focus-within does not override the active state.
 	&.active {
-		background-color: var(--color-primary-element) !important;
+		background-color: color-mix(in srgb, var(--color-primary-element) 16%, transparent) !important;
 
 		&:hover {
-			background-color: var(--color-primary-element-hover) !important;
+			background-color: color-mix(in srgb, var(--color-primary-element) 25%, transparent) !important;
 		}
 
-		// overwrite active text color
-		.app-navigation-entry-link, .app-navigation-entry-button {
-			color: var(--color-primary-element-text) !important;
+		&:not(.app-navigation-entry--editing) {
+			.app-navigation-entry-link,
+			.app-navigation-entry-button {
+				color: var(--color-main-text) !important;
+			}
+		}
+
+		&:not(.app-navigation-entry--editing)::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--default-grid-baseline, 4px);
+			inset-inline-start: 0;
+			width: 3px;
+			background-color: var(--color-primary-element);
+			border-radius: 999px;
+			animation: nc-nav-stripe-in var(--animation-quick, 200ms) ease-out;
 		}
 	}
 	&:focus-within,
@@ -72,7 +84,7 @@
 		background-color: var(--color-background-dark) !important;
 	}
 	&.active .app-navigation-entry__actions:hover :deep(.button-vue) {
-		background-color: var(--color-primary-element) !important;
+		background-color: var(--color-background-dark) !important;
 	}
 
 	/* hide deletion/collapse of subitems */
@@ -227,3 +239,14 @@
 		}
 	}
 }
+
+@keyframes nc-nav-stripe-in {
+	from {
+		transform: scaleY(0);
+		opacity: 0;
+	}
+	to {
+		transform: scaleY(1);
+		opacity: 1;
+	}
+}

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -354,9 +354,8 @@ function handleEsc(): void {
 	user-select: none;
 	flex-grow: 0;
 	flex-shrink: 0;
-	background-color: var(--color-main-background-blur, var(--color-main-background));
-	-webkit-backdrop-filter: var(--filter-background-blur, none);
-	backdrop-filter: var(--filter-background-blur, none);
+	// Frosted chrome lives on NcContent's wrapper; transparent here keeps it flush.
+	background-color: transparent;
 
 	&--closed {
 		margin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -391,7 +391,7 @@ Just set the `pinned` prop.
 						:open="menuOpen"
 						:forceMenu="forceMenu"
 						:defaultIcon="menuIcon"
-						:variant="(to && isActive) || active ? 'tertiary-on-primary' : 'tertiary'"
+						variant="tertiary"
 						@update:open="onMenuToggle">
 						<template #icon>
 							<!-- @slot Slot for the custom menu icon -->

src/components/NcAppNavigationItem/NcInputConfirmCancel.vue

@@ -137,6 +137,9 @@ $input-margin: 5px;
 
 	form {
 		display: flex;
+		align-items: center;
+		gap: $input-margin;
+		padding-inline-end: $input-margin;
 	}
 
 	&__input {
@@ -145,6 +148,7 @@ $input-margin: 5px;
 		font-size: 100% !important;
 		margin: $input-margin !important;
 		margin-inline-start: -1px - $input-padding !important;
+		margin-inline-end: 0 !important;
 		padding: $input-padding !important;
 
 		&:active,
@@ -156,5 +160,12 @@ $input-margin: 5px;
 			border-color: var(--color-primary-element);
 		}
 	}
+
+	:deep(.button-vue) {
+		width: $input-height !important;
+		min-width: $input-height !important;
+		height: $input-height !important;
+		flex: 0 0 $input-height;
+	}
 }
 </style>

src/components/NcContent/NcContent.vue

@@ -190,6 +190,15 @@ function setAppNavigation(value: boolean): void {
 	padding: var(--body-container-margin)!important;
 	backdrop-filter: brightness(50%);
 }
+
+// Divider only when an open navigation is present, so content is flush otherwise.
+@media only screen and (min-width: $breakpoint-mobile) {
+	.app-navigation:not(.app-navigation--closed):not(.app-navigation--close) ~ .app-content {
+		border-inline-start: 1px solid var(--color-border);
+		border-start-start-radius: var(--body-container-radius);
+		border-end-start-radius: var(--body-container-radius);
+	}
+}
 </style>
 
 <style lang="scss" scoped>
@@ -235,6 +244,10 @@ function setAppNavigation(value: boolean): void {
 	height: var(--body-height);
 	overflow: hidden;
 	padding: 0;
+	// Owned at wrapper level so nav and AppContent rounded-edge cutouts share one surface.
+	background-color: var(--color-main-background-blur, var(--color-main-background));
+	backdrop-filter: var(--filter-background-blur, none);
+	-webkit-backdrop-filter: var(--filter-background-blur, none);
 
 	&:not(.with-sidebar--full) {
 		position: fixed;

src/components/NcListItem/NcListItem.vue

@@ -502,7 +502,6 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 								<NcCounterBubble
 									v-if="counterNumber !== 0"
 									:count="counterNumber"
-									:active="active ?? isActive"
 									class="list-item-details__counter"
 									:type="counterType" />
 
@@ -527,7 +526,6 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 					@focusout="handleBlur">
 					<NcActions
 						ref="actions"
-						:primary="active ?? isActive"
 						:forceMenu="forceMenu"
 						:aria-label="actionsAriaLabel"
 						@update:open="handleActionsUpdateOpen">
@@ -854,22 +852,44 @@ export default {
 	&--active,
 	&.active {
 		.list-item {
-			background-color: var(--color-primary-element);
-			color: var(--color-primary-element-text) !important;
+			background-color: color-mix(in srgb, var(--color-primary-element) 16%, transparent);
+			color: var(--color-main-text) !important;
 
 			&:hover,
 			&:focus-within,
 			&:has(:focus-visible),
 			&:has(:active) {
-				background-color: var(--color-primary-element-hover);
+				background-color: color-mix(in srgb, var(--color-primary-element) 25%, transparent);
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				inset-block: var(--default-grid-baseline, 4px);
+				inset-inline-start: 0;
+				width: 3px;
+				background-color: var(--color-primary-element);
+				border-radius: 999px;
+				animation: nc-nav-stripe-in var(--animation-quick, 200ms) ease-out;
 			}
 		}
 
 		.list-item-content__name,
 		.list-item-content__subname,
 		.list-item-content__details,
 		.list-item-details__details {
-			color: var(--color-primary-element-text) !important;
+			color: var(--color-main-text) !important;
+		}
+	}
+
+	@keyframes nc-nav-stripe-in {
+		from {
+			transform: scaleY(0);
+			opacity: 0;
+		}
+		to {
+			transform: scaleY(1);
+			opacity: 1;
 		}
 	}
 	.list-item-content__name,