@conduction/nextcloud-vue 2.56.0-beta.64 → 2.56.0-beta.65

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 44704290 bytes
-sha256: e14648ce27bae8fed4271ddde5d95e10a1a5616bf123c75c6ae73769d697d1e6
+size: 44711106 bytes
+sha256: adc90af5daccb75c11701d4aa396b6d4d702bbbe7162340774724cc78395fa24

package/dist/nextcloud-vue.css

@@ -91,14 +91,19 @@
 	/* Buttons and inputs. */
 	--cn-board-control-height: 40px;
 	--cn-board-control-radius: 8px;
+	/* A control's edge: 3:1 against every ground a control sits on (WCAG
+	   1.4.11). Nextcloud's border-dark is a hairline (#dbdbdb, 1.4:1); its
+	   max-contrast border is the control step, and a theme sets both. */
+	--cn-board-control-border: var(--color-border-maxcontrast);
 	/* Cards. */
 	--cn-board-card-radius: 12px;
 	--cn-board-card-padding: 20px 22px;
 	/* The side inset of a dashboard card: its title and its rows. */
 	--cn-board-dashboard-card-inset: 24px;
-	/* Hairline inside a card, and the soft secondary text. */
+	/* Hairline inside a card, and the soft secondary text: the boards' #3d4047,
+	   between the main text and the muted text, so it follows a theme's pair. */
 	--cn-board-hairline: var(--color-border);
-	--cn-board-text-soft: var(--color-main-text);
+	--cn-board-text-soft: color-mix(in srgb, var(--color-main-text) 45%, var(--color-text-maxcontrast));
 }
 
 /*
@@ -250,6 +255,37 @@
 	--font-weight-element: 600;
 }
 
+/* ---- A button with an icon and a label --------------------------------- */
+/* The boards draw it 14px in at both sides with 14px text and a 16px icon
+   8px from its label (DqZaakEmail "Notitie toevoegen", DqVthInstellingen
+   "Regel toevoegen"). NcButton pads its start 4px and its end 12px, and puts
+   a 20px icon in a 30px slot. The rules hold the condition in `:where()`, so
+   they weigh (0,3,0): enough to outrank NcButton's own (0,2,0), and less than
+   any surface rule (header, toolbar, follow pill, Meer chevron, tab strip),
+   which keeps its own value. The padding goes through NcButton's
+   `--button-padding`, so a surface that sets `padding` is never contested.
+   @spec openspec/changes/board-icon-label-button/specs/board-icon-label-button/spec.md#requirement-a-board-button-with-an-icon-and-a-label-is-padded-as-the-boards-draw-it */
+.cn-look-board .button-vue.button-vue:where(:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) {
+	--button-padding: 14px;
+	font-size: 14px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__wrapper.button-vue__wrapper {
+	gap: 8px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon.button-vue__icon {
+	width: 16px;
+	min-width: 16px;
+	height: 16px;
+	min-height: 16px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon svg {
+	width: 16px;
+	height: 16px;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
@@ -279,7 +315,7 @@
 	--nldesign-component-button-primary-action-font-weight: 600;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -293,7 +329,7 @@
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
 	gap: 8px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -325,7 +361,7 @@
 	height: var(--cn-board-control-height);
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -333,8 +369,9 @@
 	font-weight: 600;
 }
 
-/* Buttons 10px apart, each icon 16px with 8px to its label (DqZaak's header,
-   DqZaken's "Downloaden"); NcButton draws a 20px icon in a 30px slot. */
+/* Buttons 10px apart, each icon 16px (DqZaak's header, DqZaken's
+   "Downloaden"); NcButton draws a 20px icon in a 30px slot. The 8px to the
+   label is the board's icon-and-label gap above. */
 .cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
 	gap: 10px;
 }
@@ -344,7 +381,6 @@
 	min-width: 16px;
 	height: 16px;
 	min-height: 16px;
-	margin-inline-end: 8px;
 }
 
 .cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) svg {
@@ -379,7 +415,7 @@
    body ink onto every span (thematiq). */
 .cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
 	--nldesign-color-on-surface: var(--color-main-text);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -1176,6 +1212,15 @@
 	line-height: normal;
 }
 
+/* A neutral board tag ("Normaal", "Uit") is the soft text on the chip ground,
+   not the main text on the darker background a Nextcloud tag takes.
+   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-neutral-board-tag-is-soft-text-on-the-chip-ground */
+.cn-look-board .cn-status-badge--default:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	--cn-status-badge-ink: var(--cn-board-text-soft);
+	background-color: var(--color-background-hover);
+	color: var(--cn-status-badge-ink);
+}
+
 /* A pill paints its own pairing of ink and fill. A theme that forces the body
    ink onto every span (thematiq's text rule, `!important` at id level) reads
    that ink from --nldesign-color-on-surface when the surface sets it, so the
@@ -2099,10 +2144,13 @@
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
-	font-weight: 400;
+	font-weight: 700;
+	/* 16px tall on its 1px pad (DqWerkbord's column counts). */
+	line-height: 14px;
 }
 
 /* A column at its limit: the count in the error colour; "full" is said in words too. */
@@ -2474,7 +2522,7 @@
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -2598,7 +2646,7 @@
 	min-height: 38px;
 	margin: 0;
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 19px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -2640,20 +2688,22 @@
 	padding: 1px 7px;
 	border: 0;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	background: var(--color-border);
 	color: var(--cn-board-text-soft);
 	font-size: 12px;
 	font-weight: 600;
-	line-height: 1.4;
+	/* 16px tall on its 1px pad, as the boards draw it (DqTaken, DqWerkbord).
+	   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-board-count-is-16px-tall */
+	line-height: 14px;
 }
 
 .cn-look-board .cn-saved-views__chip--selected .cn-saved-views__chip-count,
-/* On the selected chip the count is a lighter bubble on the dark chip
-   (DqZaken: #3d4047 on #1b1c1d); --cn-board-text-soft resolves to the main
-   text, the chip's own colour, which hid the bubble. */
+/* On the selected chip the count is the soft ink as a lighter bubble on the
+   dark chip (DqZaken: #3d4047 on #1b1c1d). */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
 	--nldesign-color-on-surface: var(--color-primary-element-text);
-	background: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-text));
+	background: var(--cn-board-text-soft);
 	color: var(--color-primary-element-text);
 }
 
@@ -2702,7 +2752,7 @@
 	--nldesign-component-button-font-weight: 600;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -2729,6 +2779,8 @@
 	margin-inline-start: 6px;
 	padding: 0 6px;
 	border-radius: 10px;
+	/* A theme that forces the body ink onto every span reads it from here. */
+	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-size: 12px;
@@ -2837,7 +2889,7 @@
 	height: 40px;
 	padding-block: 0;
 	padding-inline: 38px 12px !important;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 8px;
 	font-size: 14px;
 }
@@ -3214,7 +3266,7 @@
 	height: 34px !important;
 	min-height: 34px !important;
 	padding: 0 !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: 8px !important;
 	color: var(--cn-board-text-soft) !important;
 }
@@ -8000,7 +8052,7 @@ a.cn-kpi-card--board * {
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -8013,13 +8065,13 @@ a.cn-kpi-card--board * {
 	background: var(--color-background-hover) !important;
 }
 
-/* Each header icon is 16px with 8px to its label; NcButton draws 20px in a 30px slot. */
+/* Each header icon is 16px; NcButton draws 20px in a 30px slot. The 8px to
+   the label is the board's icon-and-label gap (look-board.css). */
 .cn-look-board .cn-detail-page .cn-detail-page__header-actions > .button-vue--secondary .button-vue__icon {
 	width: 16px;
 	min-width: 16px;
 	height: 16px;
 	min-height: 16px;
-	margin-inline-end: 8px;
 }
 
 .cn-look-board .cn-detail-page .cn-detail-page__header-actions > .button-vue--secondary .button-vue__icon svg {
@@ -8027,6 +8079,17 @@ a.cn-kpi-card--board * {
 	height: 16px;
 }
 
+/* Row 3: the Follow control under the breadcrumb, on the full width.
+   @spec openspec/changes/board-follow-row/specs/board-follow-row/spec.md#requirement-the-board-follow-control-sits-under-the-breadcrumb */
+.cn-look-board .cn-detail-page__header-row3 {
+	align-items: center;
+	display: flex;
+	flex: 1 0 100%;
+	flex-wrap: wrap;
+	gap: 8px;
+	min-width: 0;
+}
+
 /* Row 2: pills, breadcrumb, dot, meta, chips. */
 .cn-look-board .cn-detail-page__header-row2 {
 	align-items: center;
@@ -8184,14 +8247,14 @@ a.cn-kpi-card--board * {
 	--nldesign-component-button-border-radius: 14px;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 	box-sizing: border-box;
 	height: 28px;
 	min-height: 28px;
 	min-width: 0;
 	padding: 0 10px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 14px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -8329,13 +8392,14 @@ a.cn-kpi-card--board * {
 
 /* The Actions button at the end of the strip: at the top, 8px in from the
    end and 8px clear of the card, so the tabs, aligned to the bottom, sit 6px
-   lower than the button (DqZaak "Acties"). */
+   lower than the button, 12px in at both sides (DqZaak "Acties"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end {
 	align-self: flex-start;
 	margin: 0 8px 8px 0;
 }
 
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end .button-vue {
+	--button-padding: 12px;
 	min-height: 34px;
 	block-size: 34px;
 }
@@ -8659,7 +8723,7 @@ a.cn-kpi-card--board * {
 .cn-look-board .cn-activity-tab--board .cn-activity-tab__kind {
 	align-items: center;
 	background: var(--color-main-background);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 18px;
 	color: var(--color-main-text);
 	cursor: pointer;
@@ -8934,7 +8998,7 @@ a.cn-kpi-card--board * {
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -39027,10 +39091,13 @@ to {
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
-	font-weight: 400;
+	font-weight: 700;
+	/* 16px tall on its 1px pad (DqWerkbord's column counts). */
+	line-height: 14px;
 }
 
 /* A column at its limit: the count in the error colour; "full" is said in words too. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.64",
+  "version": "2.56.0-beta.65",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -758,6 +758,7 @@ import { installModalStack, uninstallModalStack } from '../../utils/modalStack.j
 import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
 import { resolveBrand } from '../../utils/resolveBrand.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { pageOffersSavedViews } from '../../utils/savedViewHelpers.js'
 import { normalizeSavedViewMenu, SAVED_VIEW_MENU_KEY, SAVED_VIEW_MENU_PREFIX, syncSavedViewMenu, toggleSavedViewMenuEntry, withSavedViewMenu } from '../../utils/savedViewMenu.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
 
@@ -2400,7 +2401,7 @@ export default {
 		 */
 		offersSavedViews() {
 			const pages = this.manifest && Array.isArray(this.manifest.pages) ? this.manifest.pages : []
-			return pages.some((page) => page && page.config && page.config.allowSavedViews === true)
+			return pages.some((page) => page && page.type === 'index' && pageOffersSavedViews(page.config))
 		},
 
 		/**

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -126,20 +126,13 @@
 							</component>
 							<!-- The one Follow control beside the title (manifest `config.follow`):
 							     shown when the object carries `@self.watching`. There is no star:
-							     a favourite is a follow with notifications off. -->
+							     a favourite is a follow with notifications off. The board look
+							     draws it on a row of its own under the breadcrumb. -->
 							<span
-								v-if="showFollowToggle"
+								v-if="showFollowToggle && !isBoard"
 								class="cn-detail-page__interactions"
 								data-testid="cn-detail-page-interactions">
-								<CnFollowToggle
-									:register="register"
-									:schema="schema"
-									:objectId="String(objectId)"
-									:watching="resolvedSelf.watching === true"
-									:notify="typeof resolvedSelf.watchNotify === 'boolean' ? resolvedSelf.watchNotify : null"
-									:watcherCount="typeof resolvedSelf.watcherCount === 'number' ? resolvedSelf.watcherCount : null"
-									:canManage="!!(resolvedSelf.can && resolvedSelf.can.manage === true)"
-									:notifies="followNotifies" />
+								<CnFollowToggle v-bind="followToggleProps" />
 							</span>
 						</div>
 						<!--
@@ -517,6 +510,17 @@
 					:schema="currentSchema"
 					:register="register" />
 			</div>
+			<!-- Row 3 of the board look's header: the Follow control under the
+			     breadcrumb, clear of the title row and its actions (DqZaak
+			     "Volgen"). -->
+			<div
+				v-if="isBoard && showFollowToggle"
+				class="cn-detail-page__header-row3"
+				data-testid="cn-detail-page-header-row3">
+				<span class="cn-detail-page__interactions" data-testid="cn-detail-page-interactions">
+					<CnFollowToggle v-bind="followToggleProps" />
+				</span>
+			</div>
 			<!-- A widget inside the header (manifest `config.headerWidget`), on
 			     a row of its own under the title and the actions: the stages
 			     bars of the board's case card. Drawn without a card of its own,
@@ -4319,6 +4323,26 @@ export default {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
+		/**
+		 * The props of the Follow control, wherever the header draws it.
+		 *
+		 * @return {object} The CnFollowToggle props.
+		 * @spec openspec/changes/board-follow-row/specs/board-follow-row/spec.md#requirement-the-board-follow-control-sits-under-the-breadcrumb
+		 */
+		followToggleProps() {
+			const self = this.resolvedSelf
+			return {
+				register: this.register,
+				schema: this.schema,
+				objectId: String(this.objectId),
+				watching: self.watching === true,
+				notify: typeof self.watchNotify === 'boolean' ? self.watchNotify : null,
+				watcherCount: typeof self.watcherCount === 'number' ? self.watcherCount : null,
+				canManage: !!(self.can && self.can.manage === true),
+				notifies: this.followNotifies,
+			}
+		},
+
 		/**
 		 * The `_extend[]` values of the object read: the page's own, plus
 		 * `@self.can` while the Follow toggle can render (OpenRegister returns

package/src/components/CnIndexPage/CnIndexPage.md

@@ -368,7 +368,7 @@ export default {
 | `showMassImport` | Boolean | `true` | Whether to show the mass Import action |
 | `showMassCopy` | Boolean | `true` | Whether to show the mass Copy action |
 | `allowExport` | Boolean | `false` | Opt-in flag for the native Export menu (CSV/Excel) next to the Add button. Renders only when `true` AND the resolved schema is flagged `exportable: true`; navigates to OpenRegister's export leaf (`GET /apps/openregister/api/objects/{register}/{schema}/export`), passing `$route.query` through as filters. Distinct from `showMassExport`, which exports the fetched/selected rows via a blob download. |
-| `allowSavedViews` | Boolean | `false` | Opt-in flag for the saved-views control (saved-views-ui): a Views dropdown listing the user's OpenRegister saved-search views (`GET /apps/openregister/api/views`). Applying one writes its stored filters/search/sort into the route query (`_search` and `_order` reserved keys + plain filter keys); "Save current view…" persists the current route-query state via POST and toasts either way, naming the view (a failure also keeps the dialog open with the reason); own views can be deleted after confirmation. Emits `apply-view`. |
+| `allowSavedViews` | Boolean | unset | Saved views (saved-views-ui). Unset, the sidebar's Views tab (save, apply, edit, share, add to menu, copy a default, delete) is on for every page with a sidebar and a source a view can be scoped to: register and schema, `entitySource` or `savedViewsScope`. `false` turns it off. `true` also forces the sidebar and adds the toolbar control: a Views dropdown listing the user's OpenRegister saved-search views (`GET /apps/openregister/api/views`). Applying one writes its stored filters/search/sort into the route query (`_search` and `_order` reserved keys + plain filter keys); "Save current view…" persists the current route-query state via POST and toasts either way, naming the view (a failure also keeps the dialog open with the reason); own views can be deleted after confirmation. Emits `apply-view`. |
 | `savedViewsScope` | String | `''` | Which pages share this page's saved views. By default a view is shared by every page over the same `register` and `schema` and shown on no other page, since a view is filters over one schema's fields. Set a name to share views across pages over different sources, or to keep two pages over one source apart. Written into the saved view's `query.scope` on save; views saved before scoping existed carry no scope and stay visible everywhere. |
 | `massActionNameField` | String | `'title'` | Property name used to display item names in dialogs |
 | `nameFormatter` | Function | `null` | Custom formatter for item names in dialogs; overrides `massActionNameField` |

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1379,7 +1379,7 @@ import { isRowActionVisible, rowActionPayload } from '../../utils/rowActionItem.
 import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { compileRowClass } from '../../utils/rowClassRules.js'
 import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
-import { buildRouteQueryFromViewState, buildViewCreatePayload, defaultFilterViews, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, savedViewScope, schemaSlug, viewMatchesScope } from '../../utils/savedViewHelpers.js'
+import { buildRouteQueryFromViewState, buildViewCreatePayload, defaultFilterViews, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, pageOffersSavedViews, savedViewScope, schemaSlug, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { savedViewBadge, savedViewOverrides } from '../../utils/savedViewOverrides.js'
 import { columnsFromSchema, fieldsFromSchema } from '../../utils/schema.js'
 import { resolveScopeLayout, resolveScopePresentation } from '../../utils/scopeListLayout.js'
@@ -1500,11 +1500,22 @@ function declaredFilterFields(props) {
  * @return {object} The `{ fieldKey: values }` map, empty when the link carries none.
  */
 function namedFiltersFromRoute(instance, props) {
+	const route = instance && instance.proxy && instance.proxy.$route
+	return namedFiltersFromQuery((route && route.query) || {}, props)
+}
+
+/**
+ * The named-source filters a query carries, as `namedFiltersFromRoute` reads them.
+ *
+ * @param {object} query The route query.
+ * @param {object} props The CnIndexPage props.
+ *
+ * @return {object} The `{ fieldKey: values }` map.
+ */
+function namedFiltersFromQuery(query, props) {
 	if (!props.entitySource) {
 		return {}
 	}
-	const route = instance && instance.proxy && instance.proxy.$route
-	const query = (route && route.query) || {}
 	const properties = declaredFilterFields(props)
 	const out = {}
 
@@ -2947,9 +2958,11 @@ export default {
 		},
 
 		/**
-		 * Opt-in flag for the saved-views control (saved-views-ui) rendered
-		 * in the toolbar. Defaults to `false` — an app must explicitly
-		 * enable it per page. When `true`, a Views dropdown lists the
+		 * Saved views (saved-views-ui). Unset, the sidebar's Views tab is on
+		 * for every page with a sidebar and a source a view can be scoped to
+		 * (register and schema, `entitySource` or `savedViewsScope`); `false`
+		 * turns it off. `true` also forces the sidebar and adds the toolbar
+		 * control, where a Views dropdown lists the
 		 * current user's OpenRegister saved-search views
 		 * (`GET /apps/openregister/api/views`); applying one writes its
 		 * stored filters/search/sort into the route query (reusing the
@@ -2961,7 +2974,7 @@ export default {
 		 */
 		allowSavedViews: {
 			type: Boolean,
-			default: false,
+			default: null,
 		},
 
 		/**
@@ -5523,7 +5536,7 @@ export default {
 		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-6
 		 */
 		savedViewsForSidebar() {
-			if (!this.allowSavedViews) {
+			if (!this.savedViewsOffered) {
 				return null
 			}
 			return {
@@ -6664,7 +6677,16 @@ export default {
 		 * @return {{ scope: string, register: string, schema: object|string|null }} The page's source.
 		 */
 		savedViewsPage() {
-			return { scope: this.savedViewsScope, register: this.register, schema: this.schema }
+			return { scope: this.savedViewsScope, register: this.register, schema: this.schema, source: this.entitySource }
+		},
+
+		/**
+		 * Whether this page offers saved views in its sidebar.
+		 *
+		 * @return {boolean}
+		 */
+		savedViewsOffered() {
+			return pageOffersSavedViews(this)
 		},
 
 		/**
@@ -8237,7 +8259,7 @@ export default {
 	created() {
 		this.applyViewModeFromRoute()
 		this.pushAiContext()
-		if (this.allowSavedViews) {
+		if (this.savedViewsOffered) {
 			this.fetchSavedViews()
 		}
 		this.selfActions = createSelfModeActions({
@@ -11345,8 +11367,8 @@ export default {
 
 		/**
 		 * Fetch the current user's saved views (own + public) from
-		 * OpenRegister's views API. Called from created() when
-		 * `allowSavedViews` is enabled.
+		 * OpenRegister's views API. Called from created() when the page
+		 * offers saved views.
 		 */
 		async fetchSavedViews() {
 			this.savedViewsLoading = true
@@ -11416,6 +11438,9 @@ export default {
 				query.savedView = this.appliedSavedViewId
 			}
 			const nav = this.$router.replace({ query })
+			if (this.isNamedSource) {
+				this.namedActiveFilters = namedFiltersFromQuery(query, this)
+			}
 			// Swallow the duplicate-navigation rejection (Vue Router 3)
 			// when the applied view matches the current query.
 			if (nav && typeof nav.catch === 'function') {

package/src/components/CnIndexSidebar/CnIndexSidebar.md

@@ -216,7 +216,7 @@ With admin-only filter control:
 | `propertiesGroupLabel` | String | `''` | Override label for the schema properties group. Falls back to `schema.title` |
 | `defaultTab` | String | `'search-tab'` | Tab id that is active when the sidebar opens. Built-in ids: `'search-tab'`, `'columns-tab'` |
 | `activeTab` | String | `''` | Switch to a tab while mounted, e.g. `'filters-tab'` |
-| `savedViews` | Object | `null` | The page's saved views, shown in a third tab, Filters (CnSavedViewsPanel); every intent comes back as one `saved-view` event `{ action, view }` |
+| `savedViews` | Object | `null` | The page's saved views, shown in a third tab, Views (`filters-tab`, CnSavedViewsPanel); every intent comes back as one `saved-view` event `{ action, view }` |
 | `userIsAdmin` | Boolean | `true` | When `false`, schema properties with `adminOnly: true` are hidden from filters |
 | `filterFields` | Object | `null` | Filter declarations for a page with no schema of its own. Wins over `schema`, and feeds the Search tab only |
 

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -287,11 +287,11 @@
 			</div>
 		</NcAppSidebarTab>
 
-		<!-- Filters Tab: the page's saved views (save, list, manage, add to menu). -->
+		<!-- Views tab (id filters-tab): the page's saved views (save, list, manage, add to menu). -->
 		<NcAppSidebarTab
 			v-if="savedViews"
 			id="filters-tab"
-			:name="t('nextcloud-vue', 'Filters')"
+			:name="t('nextcloud-vue', 'Views')"
 			:order="3">
 			<template #icon>
 				<BookmarkOutline :size="20" />

package/src/css/board.css

@@ -55,10 +55,13 @@
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
-	font-weight: 400;
+	font-weight: 700;
+	/* 16px tall on its 1px pad (DqWerkbord's column counts). */
+	line-height: 14px;
 }
 
 /* A column at its limit: the count in the error colour; "full" is said in words too. */