@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -86,6 +86,7 @@ import { useEndpointSource } from '../../composables/useEndpointSource.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { compareVisibleWhen, readVisibleWhenPath } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
@@ -517,7 +518,8 @@ export default {
 		 * @return {object}
 		 */
 		resolvedFilter() {
-			return dropOptionalUnresolved(resolveFilterTokens((this.source && this.source.filter) || {}, this.tokenCtx))
+			const filter = pageFilter(this.source && this.source.pageControls, this.workspaceCtx, this.source && this.source.filter)
+			return dropOptionalUnresolved(resolveFilterTokens(filter, this.tokenCtx))
 		},
 
 		/**
@@ -590,7 +592,10 @@ export default {
 		resolvedFetchParams() {
 			const src = this.source || {}
 			const params = {}
-			for (const [field, dir] of Object.entries(src.order || {})) {
+			// A page sort control (`source.pageControls.sort`) replaces the order.
+			const chosen = pageSort(src.pageControls, this.workspaceCtx, null)
+			const order = chosen ? { [chosen.field]: chosen.dir } : (src.order || {})
+			for (const [field, dir] of Object.entries(order)) {
 				params[`_order[${field}]`] = dir === 'desc' ? 'desc' : 'asc'
 			}
 			if (typeof src.limit === 'number' && src.limit > 0) {

package/src/components/CnWidgetObjectTable/dashboardRegistration.js

@@ -73,6 +73,11 @@ export function objectTableContentToProps(content) {
 	if (hasLimit) {
 		source.limit = limit
 	}
+	// The page controls the table listens to belong to its source.
+	if (rest.pageControls && typeof rest.pageControls === 'object') {
+		source.pageControls = rest.pageControls
+		delete rest.pageControls
+	}
 	return { ...rest, source }
 }
 

package/src/components/CnWorkspaceFilterWidget/CnWorkspaceFilterWidget.vue

@@ -4,28 +4,101 @@
 -->
 
 <template>
-	<div class="cn-workspace-filter-widget" data-testid="cn-workspace-filter-widget">
-		<p v-if="label" class="cn-workspace-filter-widget__label">
+	<div
+		class="cn-workspace-filter-widget"
+		:class="{
+			'cn-workspace-filter-widget--start': isStart,
+			'cn-workspace-filter-widget--chips': style === 'chips',
+			'cn-workspace-filter-widget--bar': isBar,
+			'cn-workspace-filter-widget--inline': content.inline === true,
+			'cn-workspace-filter-widget--end': content.align === 'end',
+		}"
+		data-testid="cn-workspace-filter-widget">
+		<!-- The start card (`layout: "start"`): a title and one line of
+		     guidance beside the control, as the "Contact starten" card. -->
+		<div v-if="isStart && (title || description)" class="cn-workspace-filter-widget__text">
+			<h3 v-if="title" class="cn-workspace-filter-widget__title">
+				{{ title }}
+			</h3>
+			<p v-if="description" class="cn-workspace-filter-widget__description">
+				{{ description }}
+			</p>
+		</div>
+
+		<!-- A bar (`layout: "bar"`): its `controls` side by side in one row,
+		     each a workspace filter of its own (chips, a switch, a select). -->
+		<template v-if="isBar">
+			<CnWorkspaceFilterWidget
+				v-for="(control, index) in barControls"
+				:key="index"
+				:content="control"
+				@change="$emit('change', $event)" />
+		</template>
+
+		<p v-if="!isBar && label && style !== 'chips' && style !== 'toggle'" class="cn-workspace-filter-widget__label">
 			{{ label }}
 		</p>
 
-		<div v-if="loading" class="cn-workspace-filter-widget__status">
+		<!-- An object picker (`objectSource`): searches OpenRegister on the
+		     server, so it reaches every object, not a fetched page. -->
+		<CnResourceSelect
+			v-if="!isBar && objectSource"
+			class="cn-workspace-filter-widget__control"
+			:register="objectSource.register"
+			:schema="objectSource.schema"
+			:labelField="objectSource.labelField || 'title'"
+			:modelValue="selected === undefined || selected === null ? '' : String(selected)"
+			:placeholder="tr(objectSource.placeholder || '')"
+			:ariaLabelCombobox="tr(objectSource.ariaLabel || '') || title || label || writeKey"
+			:preload="objectSource.preload !== false"
+			:clearable="Boolean(content.allLabel)"
+			:allowCreate="false"
+			data-testid="cn-workspace-filter-object"
+			@update:modelValue="applySelection($event || '')" />
+
+		<div v-else-if="loading" class="cn-workspace-filter-widget__status">
 			{{ loadingLabel }}
 		</div>
 
+		<!-- Chips style (screens-page-lenses): one compact segmented group,
+		     a count after each label, arrow keys move the choice. -->
+		<CnSegmentedControl
+			v-else-if="style === 'chips'"
+			class="cn-workspace-filter-widget__chips"
+			size="compact"
+			:options="chipOptions"
+			:modelValue="selected === undefined || selected === null ? null : String(selected)"
+			:ariaLabel="label || writeKey"
+			data-testid="cn-workspace-filter-chips"
+			@update:modelValue="applySelection" />
+
+		<!-- Toggle style (screens-page-controls): a switch that writes
+		     `onValue` / `offValue` (true / false) to the key. -->
+		<NcCheckboxRadioSwitch
+			v-else-if="style === 'toggle'"
+			class="cn-workspace-filter-widget__toggle"
+			type="switch"
+			:modelValue="toggleOn"
+			data-testid="cn-workspace-filter-toggle"
+			@update:modelValue="onToggle">
+			{{ tr(label) }}
+		</NcCheckboxRadioSwitch>
+
 		<!-- Select style -->
 		<NcSelect
 			v-else-if="style === 'select'"
 			:modelValue="selectedOption"
 			:options="displayOptions"
 			:clearable="false"
-			:inputLabel="label || writeKey"
+			:inputLabel="content.inline ? '' : (label || writeKey)"
+			:labelOutside="content.inline === true"
+			:ariaLabelCombobox="label || writeKey"
 			label="label"
 			data-testid="cn-workspace-filter-select"
 			@update:modelValue="onSelect" />
 
 		<!-- Radio-list style (default) -->
-		<ul v-else
+		<ul v-else-if="!isBar"
 			class="cn-workspace-filter-widget__list"
 			role="radiogroup"
 			:aria-label="label || writeKey">
@@ -47,13 +120,27 @@
 				</NcCheckboxRadioSwitch>
 			</li>
 		</ul>
+
+		<component
+			:is="startLink.to ? 'router-link' : 'a'"
+			v-if="startLink"
+			:to="startLink.to || undefined"
+			:href="startLink.href || undefined"
+			class="cn-workspace-filter-widget__link"
+			data-testid="cn-workspace-filter-link">
+			{{ startLink.label }}
+		</component>
 	</div>
 </template>
 
 <script>
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
+import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import { fetchEndpointSource } from '../../composables/useEndpointSource.js'
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
 /**
@@ -84,7 +171,7 @@ import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
  * content: {
  *   label: 'Queue',
  *   writes: '@workspace.queue',
- *   style: 'radio',                 // 'radio' (default) | 'select'
+ *   style: 'radio',                 // 'radio' (default) | 'select' | 'chips'
  *   allLabel: 'All',
  *   showCounts: true,
  *   source: { register: 'pipelinq', schema: 'werkitem', groupBy: 'queue' },
@@ -94,7 +181,7 @@ import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 export default {
 	name: 'CnWorkspaceFilterWidget',
 
-	components: { NcSelect, NcCheckboxRadioSwitch },
+	components: { CnResourceSelect, CnSegmentedControl, NcSelect, NcCheckboxRadioSwitch },
 
 	inject: {
 		/**
@@ -104,13 +191,35 @@ export default {
 		 * Null on pages without one (the widget then just emits `@change`).
 		 */
 		cnWorkspaceContext: { default: null },
+		/** Host translate function, for the start card's texts. */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
 		/**
 		 * Persisted configuration blob.
 		 *
-		 * @type {{label?: string, writes?: string, style?: string, allLabel?: string, showCounts?: boolean, options?: Array, source?: object, endpointSource?: object, default?: (string|number)}}
+		 * Start card keys (abstract-start-card): `layout: "start"` draws
+		 * `title` and `description` beside the control, and `link`
+		 * (`{ label, route? | href? }`) after it. `objectSource`
+		 * (`{ register, schema, labelField?, placeholder?, ariaLabel?, preload? }`)
+		 * makes the control an OpenRegister object picker that searches on the
+		 * server and writes the picked object's id; without a selection and
+		 * without `allLabel` it selects the first object.
+		 *
+		 * Chips (screens-page-lenses): `style: "chips"` draws the options as one
+		 * compact segmented group with a count after each label. An option's
+		 * `countFrom` (`{ register, schema, filter? }`, or a list of them that
+		 * are added up) counts that list; a static `count` is used otherwise.
+		 * `urlKey` keeps the choice in the address (`?<urlKey>=<value>`), and
+		 * the address wins over `default` on load.
+		 *
+		 * Page controls (screens-page-controls): `style: "toggle"` is a switch
+		 * that writes `onValue` / `offValue` (true / false); `layout: "bar"`
+		 * with `controls` draws several controls side by side in one row, and
+		 * `align: "end"` pushes a control to the right edge.
+		 *
+		 * @type {{label?: string, controls?: Array<object>, onValue?: unknown, offValue?: unknown, align?: string, urlKey?: string, writes?: string, style?: string, allLabel?: string, showCounts?: boolean, options?: Array, source?: object, endpointSource?: object, objectSource?: object, default?: (string|number), layout?: string, title?: string, description?: string, link?: object}}
 		 */
 		content: {
 			type: Object,
@@ -128,6 +237,8 @@ export default {
 			loading: false,
 			/** The currently-selected value (mirrors the workspace key). */
 			selected: undefined,
+			/** Counted totals of the options that ask (`countFrom`), by option position. */
+			optionCounts: {},
 		}
 	},
 
@@ -137,9 +248,117 @@ export default {
 			return this.content.label || ''
 		},
 
-		/** Choice style: 'select' or 'radio' (default). */
+		/** Whether the widget draws the start card. */
+		isStart() {
+			return this.content.layout === 'start'
+		},
+
+		/** The start card's title, translated. */
+		title() {
+			return this.tr(this.content.title || '')
+		},
+
+		/** The start card's guidance line, translated. */
+		description() {
+			return this.tr(this.content.description || '')
+		},
+
+		/**
+		 * The link after the control, or null.
+		 *
+		 * @return {{label: string, to?: object, href?: string}|null}
+		 */
+		startLink() {
+			const link = this.content.link
+			if (!link || typeof link !== 'object' || !link.label) {
+				return null
+			}
+			if (link.route && typeof link.route === 'object' && link.route.name) {
+				return { label: this.tr(link.label), to: link.route }
+			}
+			if (typeof link.href === 'string' && link.href !== '') {
+				return { label: this.tr(link.label), href: link.href }
+			}
+			return null
+		},
+
+		/**
+		 * The object picker declaration, or null.
+		 *
+		 * @return {{register: string, schema: string, labelField?: string}|null}
+		 */
+		objectSource() {
+			const src = this.content.objectSource
+			return src && typeof src === 'object' && src.register && src.schema ? src : null
+		},
+
+		/** Choice style: 'chips', 'select' or 'radio' (default). */
 		style() {
-			return this.content.style === 'select' ? 'select' : 'radio'
+			return ['select', 'chips', 'toggle'].includes(this.content.style) ? this.content.style : 'radio'
+		},
+
+		/**
+		 * The chips: each option with its label translated and its count,
+		 * the static one or the counted one.
+		 *
+		 * @return {Array<{value: string, label: string, count?: number}>}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-a-workspace-filter-can-draw-chips-with-counts
+		 */
+		chipOptions() {
+			return this.displayOptions.map((option, index) => {
+				const counted = this.optionCounts[index]
+				const count = counted !== undefined && counted !== null ? counted : option.count
+				const chip = { value: String(option.value), label: this.tr(option.label) }
+				if (this.showCounts && Number.isFinite(count)) {
+					chip.count = count
+				}
+				return chip
+			})
+		},
+
+		/**
+		 * Whether the widget is a bar of controls (`layout: "bar"`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-page-controls/specs/page-controls/spec.md#requirement-a-bar-holds-the-pages-controls-in-one-row
+		 */
+		isBar() {
+			return this.content.layout === 'bar' && Array.isArray(this.content.controls)
+		},
+
+		/**
+		 * The bar's controls, each an inline workspace filter of its own.
+		 *
+		 * @return {Array<object>}
+		 */
+		barControls() {
+			return this.content.controls
+				.filter((control) => control && typeof control === 'object')
+				.map((control) => ({ ...control, inline: true }))
+		},
+
+		/** @return {unknown} The value a switch writes when on. */
+		onValue() {
+			return this.content.onValue !== undefined ? this.content.onValue : true
+		},
+
+		/** @return {unknown} The value a switch writes when off. */
+		offValue() {
+			return this.content.offValue !== undefined ? this.content.offValue : false
+		},
+
+		/** @return {boolean} Whether the switch is on. */
+		toggleOn() {
+			return this.selected !== undefined && String(this.selected) === String(this.onValue)
+		},
+
+		/**
+		 * The address key that carries the choice (`urlKey`), or ''.
+		 *
+		 * @return {string}
+		 */
+		urlKey() {
+			return typeof this.content.urlKey === 'string' ? this.content.urlKey : ''
 		},
 
 		/** Whether to render per-option counts. */
@@ -220,17 +439,115 @@ export default {
 		// Seed the selection: existing workspace value → content.default → the
 		// "All" clear option (empty) when present, else the first option once
 		// loaded (handled in loadOptions).
+		const fromAddress = this.readAddress()
 		const existing = this.readWorkspace()
-		if (existing !== undefined) {
+		if (fromAddress !== undefined) {
+			this.selected = fromAddress
+			this.writeWorkspace(fromAddress)
+		} else if (existing !== undefined) {
 			this.selected = existing
 		} else if (this.content.default !== undefined) {
 			this.selected = this.content.default
 			this.writeWorkspace(this.content.default)
+		} else if (this.style === 'toggle') {
+			// A switch starts off, and says so, so a condition on its key holds.
+			this.selected = this.offValue
+			this.writeWorkspace(this.offValue)
 		}
 		this.loadOptions()
 	},
 
+	mounted() {
+		this.onPageRefresh = () => this.loadCounts()
+		subscribe('cn:page:refresh', this.onPageRefresh)
+		this.loadCounts()
+	},
+
+	beforeUnmount() {
+		unsubscribe('cn:page:refresh', this.onPageRefresh)
+	},
+
 	methods: {
+		/**
+		 * The choice named in the address (`?<urlKey>=…`), when it is one of
+		 * the options; undefined otherwise.
+		 *
+		 * @return {string|undefined}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-the-choice-is-in-the-address
+		 */
+		readAddress() {
+			if (!this.urlKey || !this.$route || !this.$route.query) {
+				return undefined
+			}
+			const raw = this.$route.query[this.urlKey]
+			if (this.style === 'toggle') {
+				if (raw === undefined) {
+					return undefined
+				}
+				return [this.onValue, this.offValue].find((value) => String(value) === String(raw))
+			}
+			const known = this.displayOptions.some((option) => String(option.value) === String(raw))
+			return known ? String(raw) : undefined
+		},
+
+		/**
+		 * Write the choice to the address, replacing the history entry and
+		 * keeping the other query keys.
+		 *
+		 * @param {unknown} value The chosen value.
+		 * @return {void}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-the-choice-is-in-the-address
+		 */
+		writeAddress(value) {
+			if (!this.urlKey || !this.$router || !this.$route) {
+				return
+			}
+			const query = this.$route.query || {}
+			if (String(query[this.urlKey]) === String(value)) {
+				return
+			}
+			const result = this.$router.replace({ query: { ...query, [this.urlKey]: String(value) } })
+			if (result && typeof result.catch === 'function') {
+				result.catch(() => {})
+			}
+		},
+
+		/**
+		 * Count the lists behind the options that ask (`countFrom`: a list
+		 * `{ register, schema, filter? }`, or several that are added up). One
+		 * list request each; an option whose count failed shows none.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-a-workspace-filter-can-draw-chips-with-counts
+		 */
+		async loadCounts() {
+			const options = this.displayOptions
+			const seq = (this.countSeq = (this.countSeq || 0) + 1)
+			const ctx = { workspace: this.readWorkspaceBag() }
+			await Promise.all(options.map(async (option, index) => {
+				const raw = (Array.isArray(this.content.options) ? this.content.options : [])
+					.find((candidate) => candidate && typeof candidate === 'object' && String(candidate.value ?? candidate.id) === String(option.value))
+				const from = raw ? raw.countFrom : null
+				const lists = (Array.isArray(from) ? from : [from]).filter((list) => list && typeof list === 'object' && list.register && list.schema)
+				if (lists.length === 0) {
+					return
+				}
+				let total
+				try {
+					const parts = await Promise.all(lists.map((list) => fetchListTotal(list.register, list.schema, list.filter || {}, ctx)))
+					if (parts.some((part) => part === null)) {
+						throw new Error('no total')
+					}
+					total = parts.reduce((sum, part) => sum + part, 0)
+				} catch {
+					total = null
+				}
+				if (seq === this.countSeq) {
+					this.optionCounts = { ...this.optionCounts, [index]: total }
+				}
+			}))
+		},
+
 		/**
 		 * Normalise a raw option into `{ value, label, count? }`. Accepts
 		 * `{ value, label, count }`, `{ id, name }`, `{ key, count }` (OR
@@ -263,6 +580,10 @@ export default {
 		 * @return {Promise<void>}
 		 */
 		async loadOptions() {
+			if (this.objectSource) {
+				await this.seedFirstObject()
+				return
+			}
 			if (this.content.endpointSource && this.content.endpointSource.url) {
 				await this.loadFromEndpoint()
 			} else if (this.content.source && this.content.source.schema) {
@@ -281,6 +602,51 @@ export default {
 			}
 		},
 
+		/**
+		 * Translate a manifest string through the host app.
+		 *
+		 * @param {string} text The text.
+		 * @return {string}
+		 */
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * The object picker's default: with nothing selected, no `default` and
+		 * no `allLabel`, select the first object the source lists, so the page
+		 * always has one in focus. Fail-safe: a failed read selects nothing.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async seedFirstObject() {
+			if ((this.selected !== undefined && this.selected !== '') || this.content.allLabel || this.content.default !== undefined) {
+				return
+			}
+			const src = this.objectSource
+			try {
+				const [{ default: axios }, { generateUrl }] = await Promise.all([
+					import('@nextcloud/axios'),
+					import('@nextcloud/router'),
+				])
+				const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: src.register, schema: src.schema })
+				const res = await axios.get(url, { params: { _limit: 1 } })
+				const data = res && res.data
+				const rows = Array.isArray(data) ? data : ((data && data.results) || [])
+				const first = rows[0]
+				const id = first && (first.id || (first['@self'] && first['@self'].id))
+				if (id && (this.selected === undefined || this.selected === '') && this.readWorkspace() === undefined) {
+					this.selected = String(id)
+					this.writeWorkspace(String(id))
+				}
+			} catch {
+				// Nothing selected: the siblings wait for a pick.
+			}
+		},
+
 		/**
 		 * Fetch options from an `endpointSource` (array of options at
 		 * responsePath). Fail-safe: a failed fetch leaves an empty list.
@@ -358,6 +724,17 @@ export default {
 			this.applySelection(option.value)
 		},
 
+		/**
+		 * Switch handler: write `onValue` or `offValue`.
+		 *
+		 * @param {boolean} on Whether the switch is on.
+		 * @return {void}
+		 * @spec openspec/changes/screens-page-controls/specs/page-controls/spec.md#requirement-a-toggle-and-a-select-are-page-controls
+		 */
+		onToggle(on) {
+			this.applySelection(on ? this.onValue : this.offValue)
+		},
+
 		/**
 		 * NcSelect input handler.
 		 *
@@ -378,6 +755,7 @@ export default {
 		applySelection(value) {
 			this.selected = value
 			this.writeWorkspace(value)
+			this.writeAddress(value)
 			/**
 			 * @event change Emitted when the selection changes. Payload: `{ key, value }`.
 			 */
@@ -465,6 +843,85 @@ export default {
 	gap: 2px;
 }
 
+/* The chips: the compact segmented group, left, in the card the grid draws. */
+.cn-workspace-filter-widget--chips {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+/* A bar: its controls in one row, an `align: "end"` control pushed right. */
+.cn-workspace-filter-widget--bar {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px 16px;
+}
+
+/* An inline control sits in a bar: label left of the control, width to its content. */
+.cn-workspace-filter-widget--inline {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+
+.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__label {
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-workspace-filter-widget--end {
+	margin-inline-start: auto;
+}
+
+.cn-workspace-filter-widget--end ~ .cn-workspace-filter-widget--end {
+	margin-inline-start: 0;
+}
+
+.cn-workspace-filter-widget__toggle {
+	font-weight: 600;
+}
+
+/* The start card: text left, control (and link) right, as PqDashboard's "Contact starten". */
+.cn-workspace-filter-widget--start {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 16px 24px;
+}
+
+.cn-workspace-filter-widget__text {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+
+.cn-workspace-filter-widget__title {
+	margin: 0 0 4px;
+	font-size: 17px;
+	font-weight: 700;
+	color: var(--color-main-text);
+}
+
+.cn-workspace-filter-widget__description {
+	margin: 0;
+	max-width: 420px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-workspace-filter-widget--start .cn-workspace-filter-widget__control,
+.cn-workspace-filter-widget--start > .v-select {
+	flex: 0 1 480px;
+	min-width: 240px;
+}
+
+.cn-workspace-filter-widget__link {
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: underline;
+	white-space: nowrap;
+}
+
 .cn-workspace-filter-widget__count {
 	margin-inline-start: 6px;
 	padding: 0 6px;
@@ -473,4 +930,29 @@ export default {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 }
+
+/* On a phone the bar's controls take a row each (the chips already wrap), and
+   a switch and a select are 44px touch targets. */
+@media (max-width: 640px) {
+	.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--inline {
+		flex: 1 1 100%;
+	}
+
+	.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--end {
+		margin-inline-start: 0;
+	}
+
+	.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__toggle {
+		min-height: 44px;
+	}
+
+	.cn-workspace-filter-widget--inline :deep(.v-select) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.cn-workspace-filter-widget--inline :deep(.vs__dropdown-toggle) {
+		min-height: 44px;
+	}
+}
 </style>