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

package/src/components/CnActionDialog/CnActionDialog.vue

@@ -5,7 +5,7 @@
 <template>
 	<CnDialog
 		:name="text(config.title) || t('nextcloud-vue', 'Confirm')"
-		:eyebrow="text(config.eyebrow)"
+		:eyebrow="eyebrowText"
 		:subtitle="text(config.subtitle)"
 		width="form"
 		:noClose="busy"
@@ -63,6 +63,24 @@
 				</ul>
 			</section>
 
+			<!-- Fields the action asks for, sent beside the reason. -->
+			<div v-for="field in fields"
+				:key="field.field"
+				class="cn-action-dialog__field"
+				:data-testid="`cn-action-dialog-field-${field.field}`">
+				<NcSelect v-if="field.type === 'select'"
+					:modelValue="selectedOption(field)"
+					:options="optionsOf(field)"
+					:inputLabel="text(field.label) || field.field"
+					:clearable="field.required === false"
+					@update:modelValue="(option) => pick(field, option)" />
+				<NcTextField v-else
+					:modelValue="values[field.field] || ''"
+					:type="field.type === 'datetime' ? 'datetime-local' : (field.type === 'date' ? 'date' : 'text')"
+					:label="text(field.label) || field.field"
+					@update:modelValue="(value) => setValue(field.field, value)" />
+			</div>
+
 			<div v-if="config.reason" class="cn-action-dialog__field">
 				<NcTextArea
 					:id="reasonId"
@@ -116,7 +134,7 @@ import axios from '@nextcloud/axios'
 import { emit } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcNoteCard, NcTextArea } from '@nextcloud/vue'
+import { NcButton, NcNoteCard, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
 import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
@@ -141,7 +159,8 @@ let reasonSeq = 0
  * note and Archive it.
  *
  * `config`:
- * - `title`, `eyebrow`, `subtitle`, `doneText`: texts, through the host translate.
+ * - `title`, `subtitle`, `doneText`: texts, through the host translate;
+ *   `eyebrow` a template filled from the record ("Close off · {identifier}").
  * - `summary`: `{ source?, title, meta?, badge?, icon? }`: templates filled from
  *   the record (`source` an endpointSource to read it from, else `object`).
  * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template.
@@ -149,8 +168,14 @@ let reasonSeq = 0
  *   `{ id, met, label?, detail? }` read from `source`; `labels[id]` gives an
  *   item's `{ label, detail?, unmetDetail? }`; the ids in `required` must be
  *   met before the action can run. `met: null` reads as unknown.
- * - `permission`: `{ source, allowedPath, reasonPath? }`: the action runs only
- *   while `allowedPath` reads true; `reasonPath` says why not.
+ * - `permission`: `{ source, listPath?, match?, allowedPath, reasonPath? }`:
+ *   the action runs only while `allowedPath` reads true; `reasonPath` says
+ *   why not. With `listPath` the paths read the entry of that list whose
+ *   fields equal `match` (`{ act: "archive" }`).
+ * - `fields`: `[{ field, type?: "text"|"date"|"datetime"|"select", label?,
+ *   required?, options?: [{ value, label, fills? }] }]`: inputs sent beside
+ *   the reason, required by default; a select option's `fills` sets other
+ *   fields that are still empty.
  * - `reason`: `{ label?, hint?, required?, field? }`: a text area; required by
  *   default; sent as `field` (default `reason`).
  * - `note`: `{ variant?, title?, text }`: a read-only note.
@@ -163,7 +188,7 @@ let reasonSeq = 0
 export default {
 	name: 'CnActionDialog',
 
-	components: { CheckCircle, CircleOutline, CnDialog, CnIcon, HelpCircleOutline, NcButton, NcNoteCard, NcTextArea },
+	components: { CheckCircle, CircleOutline, CnDialog, CnIcon, HelpCircleOutline, NcButton, NcNoteCard, NcSelect, NcTextArea, NcTextField },
 
 	inject: {
 		/** The host app's translate (CnAppRoot `cnTranslate`). */
@@ -209,6 +234,7 @@ export default {
 			checklistError: '',
 			allowed: true,
 			reason: '',
+			values: {},
 			busy: false,
 			refusal: '',
 			done: false,
@@ -219,7 +245,21 @@ export default {
 	computed: {
 		/** @return {object} The token context. */
 		tokenCtx() {
-			return { objectId: this.objectId, object: this.record || {} }
+			return { objectId: this.recordId, object: this.record || {} }
+		},
+
+		/**
+		 * The record's id: `objectId`, or the route's `id` when the prop is
+		 * empty or a token the opener could not resolve.
+		 *
+		 * @return {string|number}
+		 */
+		recordId() {
+			const given = this.objectId
+			if (given !== '' && given !== null && given !== undefined && !String(given).startsWith('@')) {
+				return given
+			}
+			return (this.$route && this.$route.params && this.$route.params.id) || ''
 		},
 
 		/** @return {object} The confirm config. */
@@ -305,7 +345,27 @@ export default {
 		 * @return {boolean}
 		 */
 		canConfirm() {
-			return !this.busy && this.allowed && this.requiredMet && (!this.reasonNeeded || this.reason.trim() !== '')
+			return !this.busy && this.allowed && this.requiredMet && this.fieldsFilled && (!this.reasonNeeded || this.reason.trim() !== '')
+		},
+
+		/** @return {string} The eyebrow, filled from the record once it is known. */
+		eyebrowText() {
+			return this.record ? this.fill(this.config.eyebrow) || this.text(this.config.eyebrow) : this.text(this.config.eyebrow)
+		},
+
+		/** @return {Array<object>} The fields with a name. */
+		fields() {
+			return (Array.isArray(this.config.fields) ? this.config.fields : []).filter((f) => f && f.field)
+		},
+
+		/**
+		 * Whether every required field has a value.
+		 *
+		 * @spec openspec/changes/action-dialog-fields-and-acts/specs/action-dialog/spec.md#requirement-an-action-dialog-asks-for-fields-and-reads-a-permission-from-a-list
+		 * @return {boolean}
+		 */
+		fieldsFilled() {
+			return this.fields.every((f) => f.required === false || String(this.values[f.field] ?? '').trim() !== '')
 		},
 	},
 
@@ -380,6 +440,63 @@ export default {
 			}
 		},
 
+		/**
+		 * The entry of a list whose fields equal `match`, or null.
+		 *
+		 * @param {unknown} list The list.
+		 * @param {object} [match] The fields to match.
+		 * @return {object|null}
+		 */
+		matchIn(list, match) {
+			const wanted = Object.entries(match || {})
+			return (Array.isArray(list) ? list : []).find((entry) => entry && wanted.every(([key, value]) => String(entry[key]) === String(value))) || null
+		},
+
+		/**
+		 * A select field's options, labels translated.
+		 *
+		 * @param {object} field The field.
+		 * @return {Array<{id: string, label: string, fills?: object}>}
+		 */
+		optionsOf(field) {
+			return (Array.isArray(field.options) ? field.options : []).map((o) => ({ id: String(o.value), label: this.text(o.label) || String(o.value), fills: o.fills }))
+		},
+
+		/**
+		 * A select field's chosen option.
+		 *
+		 * @param {object} field The field.
+		 * @return {object|null}
+		 */
+		selectedOption(field) {
+			return this.optionsOf(field).find((o) => o.id === String(this.values[field.field] ?? '')) || null
+		},
+
+		/**
+		 * Set a field's value.
+		 *
+		 * @param {string} name The field.
+		 * @param {unknown} value The value.
+		 */
+		setValue(name, value) {
+			this.values = { ...this.values, [name]: value === null || value === undefined ? '' : String(value) }
+		},
+
+		/**
+		 * Choose a select option; its `fills` set the fields still empty.
+		 *
+		 * @param {object} field The select field.
+		 * @param {{id: string, fills?: object}|null} option The option.
+		 */
+		pick(field, option) {
+			this.setValue(field.field, option ? option.id : '')
+			for (const [name, value] of Object.entries((option && option.fills) || {})) {
+				if (String(this.values[name] ?? '').trim() === '') {
+					this.setValue(name, this.text(value) || value)
+				}
+			}
+		},
+
 		/** @return {Promise<void>} */
 		async loadPermission() {
 			const def = this.config.permission
@@ -388,8 +505,9 @@ export default {
 			}
 			try {
 				const data = await this.read(def.source)
-				this.allowed = readPath(data, def.allowedPath || 'allowed') === true
-				this.refusal = this.allowed || !def.reasonPath ? '' : String(readPath(data, def.reasonPath) || '')
+				const entry = def.listPath ? this.matchIn(readPath(data, def.listPath), def.match) : data
+				this.allowed = readPath(entry, def.allowedPath || 'allowed') === true
+				this.refusal = this.allowed || !def.reasonPath ? '' : String(readPath(entry, def.reasonPath) || '')
 			} catch {
 				this.allowed = false
 			}
@@ -420,15 +538,18 @@ export default {
 					if (this.config.reason) {
 						body[this.config.reason.field || 'reason'] = reason
 					}
+					for (const field of this.fields) {
+						body[field.field] = this.values[field.field] ?? ''
+					}
 					const method = String(request.method || 'POST').toLowerCase()
 					await axios[['post', 'put', 'patch', 'delete'].includes(method) ? method : 'post'](/^https?:\/\//i.test(url) ? url : generateUrl(url), body)
 				} else if (this.confirmConfig.action && typeof this.cnDispatchAction === 'function') {
-					await this.cnDispatchAction({ ...this.confirmConfig.action, args: [...(this.confirmConfig.action.args || []), { reason }] })
+					await this.cnDispatchAction({ ...this.confirmConfig.action, args: [...(this.confirmConfig.action.args || []), { ...this.values, reason }] })
 				}
 				this.done = true
 				emit(PAGE_REFRESH, {})
-				/** @event done The action ran. Payload: `{ reason }`. */
-				this.$emit('done', { reason })
+				/** @event done The action ran. Payload: the field values and `reason`. */
+				this.$emit('done', { ...this.values, reason })
 			} catch (failure) {
 				const data = failure && failure.response && failure.response.data
 				this.refusal = String((data && (data.message || data.error)) || t('nextcloud-vue', 'The action could not be completed.'))

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/components/CnWorkQueue/CnWorkQueue.vue

@@ -93,6 +93,7 @@
 
 <script>
 import axios from '@nextcloud/axios'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
@@ -109,7 +110,8 @@ import { openRowTarget } from '../../utils/linkNavigation.js'
  * not be read is named at the top rather than folded into "nothing is
  * waiting". A group can be hidden until tomorrow, through the server, so the
  * choice follows the reader to another device. dossiq's personal queue is
- * the first; pipelinq's queue has the same shape.
+ * the first; pipelinq's queue has the same shape. It reads again on
+ * `cn:page:refresh`, so work planned or closed in a dialog shows at once.
  *
  * `content`:
  * - `source`: an endpointSource answering `{ groups, hiddenGroups?, unavailable? }`.
@@ -176,9 +178,14 @@ export default {
 	},
 
 	mounted() {
+		subscribe('cn:page:refresh', this.load)
 		this.load()
 	},
 
+	beforeUnmount() {
+		unsubscribe('cn:page:refresh', this.load)
+	},
+
 	methods: {
 		t,
 

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. */

package/src/css/look-board-detail.css

@@ -75,7 +75,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;
@@ -88,13 +88,13 @@
 	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 {
@@ -102,6 +102,17 @@
 	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;
@@ -259,14 +270,14 @@
 	--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);
@@ -404,13 +415,14 @@
 
 /* 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;
 }
@@ -734,7 +746,7 @@
 .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;