@conduction/nextcloud-vue 2.75.0 → 2.77.0

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -8,6 +8,9 @@
 			v-if="browserRoot !== null"
 			:rootPath="browserRoot"
 			:rootLabel="browserRootLabel"
+			:uploadButton="uploadButton"
+			:dropOverlay="dropOverlay"
+			:dropHint="dropHint"
 			:rowActions="rowActions"
 			:newActions="newActions"
 			:linkedItems="linkedItems"
@@ -307,6 +310,12 @@ export default {
 		deleteLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },
 		/** What the files browser's root crumb reads; null shows the folder's own name, as the Files app does. */
 		browserRootLabel: { type: String, default: null },
+		/** Forwarded to CnFilesBrowser: a primary "Add files" button beside the New menu. */
+		uploadButton: { type: Boolean, default: false },
+		/** Forwarded to CnFilesBrowser: the drop state drawn over the list ("Drop to add") and announced. */
+		dropOverlay: { type: Boolean, default: false },
+		/** Forwarded to CnFilesBrowser: "Or drag files onto this list." under the list. */
+		dropHint: { type: Boolean, default: false },
 		/**
 		 * The host's own actions on each file row of the browser, forwarded
 		 * to CnFilesBrowser's `rowActions`: declared like any manifest action

package/src/components/CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue

@@ -91,6 +91,20 @@
 					</ul>
 				</section>
 
+				<p v-if="visibleGroups.length && pendingSections.length"
+					class="cn-related-objects-widget__section-status"
+					data-testid="cn-related-pending"
+					role="status">
+					{{ pendingLabel }}
+				</p>
+				<p v-for="failed in failedSections"
+					:key="`failed-${failed.key}`"
+					class="cn-related-objects-widget__section-error"
+					data-testid="cn-related-section-error"
+					:data-section="failed.key">
+					{{ t('nextcloud-vue', 'Could not load {section}.', { section: failed.label }) }}
+				</p>
+
 				<div v-if="loading && !visibleGroups.length" class="cn-related-objects-widget__empty">
 					{{ loadingLabel }}
 				</div>
@@ -710,6 +724,12 @@ export default {
 			groups: [],
 			/** Active tab key. */
 			activeKey: '',
+			/** Keys of the tabbed sections whose request is still in flight (`objects`, `files`, `relations`). */
+			pendingSections: [],
+			/** Tabbed sections whose request failed: `{ key, label }`. */
+			failedSections: [],
+			/** Bumped per `loadTabs()`; an answer from an older load is dropped. */
+			loadToken: 0,
 			/** Key of the inline-expanded row (`{group}-{id}`) for leaves with no owning-app page (e.g. notes). */
 			expandedKey: '',
 			/** Whether a footer file upload is in flight. */
@@ -834,6 +854,22 @@ export default {
 			)
 		},
 
+		/**
+		 * The line under the panel naming the sections still loading, once
+		 * another section is already on screen.
+		 *
+		 * @return {string}
+		 */
+		pendingLabel() {
+			const labels = {
+				objects: this.objectsLabel,
+				files: this.filesLabel,
+				relations: t('nextcloud-vue', 'Linked items'),
+			}
+			const names = this.pendingSections.map((key) => labels[key] || key).join(', ')
+			return t('nextcloud-vue', 'Still loading: {sections}', { sections: names })
+		},
+
 		/** Placeholder shown in the body while the first fetch is in flight. */
 		loadingLabel() {
 			return t('nextcloud-vue', 'Loading …')
@@ -1330,16 +1366,27 @@ export default {
 		 * @return {Promise<object|null>}
 		 */
 		async fetchSubResource(suffix) {
+			return (await this.fetchSection(suffix)).data
+		},
+
+		/**
+		 * GET an OpenRegister sub-resource and say whether it answered, so a
+		 * section can tell "nothing linked" from "could not load".
+		 *
+		 * @param {string} suffix - The sub-resource suffix.
+		 * @return {Promise<{ ok: boolean, data: object|null }>}
+		 */
+		async fetchSection(suffix) {
 			try {
 				// `no-store`: relations change as the user links content; a stale
 				// cached empty response would wrongly show the empty state on load.
 				const response = await fetch(this.relatedUrl(suffix), { method: 'GET', headers: buildHeaders(), cache: 'no-store' })
 				if (!response.ok) {
-					return null
+					return { ok: false, data: null }
 				}
-				return await response.json()
+				return { ok: true, data: await response.json() }
 			} catch {
-				return null
+				return { ok: false, data: null }
 			}
 		},
 
@@ -1543,56 +1590,138 @@ export default {
 		},
 
 		/**
-		 * Fetch every group directly from OpenRegister and build the tabs.
+		 * Fetch every group directly from OpenRegister and build the tabs,
+		 * one section at a time.
+		 *
+		 * 🔴 EACH SECTION SHOWS WHEN ITS OWN REQUEST RETURNS. This used to wait
+		 * for relations, uses, used, contracts and files together behind one
+		 * `Promise.all`, so the relations call (0.45 s on pipelinq's lead page)
+		 * sat behind uses/used (about 9 s) and the card said "Loading …" the
+		 * whole time. Now the groups are laid out up front in their fixed order
+		 * and filled in place as each answer arrives, so a slow section never
+		 * reorders or hides a fast one. A section still in flight is named in
+		 * `pendingSections`; one whose request failed in `failedSections`.
 		 *
+		 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/related-objects-progressive/spec.md
 		 * @return {Promise<void>}
 		 */
 		async loadTabs() {
+			const token = ++this.loadToken
+			const current = () => token === this.loadToken
 			this.loading = true
-			try {
-				const [relations, uses, used, contracts, files] = await Promise.all([
-					this.fetchSubResource('relations'),
-					this.showObjects ? this.fetchSubResource('uses') : null,
-					this.showObjects ? this.fetchSubResource('used') : null,
-					(this.showObjects && this.showContracts) ? this.fetchSubResource('contracts') : null,
-					this.showFiles ? this.fetchSubResource('files') : null,
-				])
+			this.failedSections = []
+
+			const objectSuffixes = this.showObjects
+				? ['uses', 'used', ...(this.showContracts ? ['contracts'] : [])]
+				: []
+			const sections = [
+				...(this.showObjects ? [{ key: 'objects', label: this.objectsLabel }] : []),
+				...(this.showFiles ? [{ key: 'files', label: this.filesLabel }] : []),
+				{ key: 'relations', label: t('nextcloud-vue', 'Linked items') },
+			]
+			this.pendingSections = sections.map((section) => section.key)
 
-				const groups = []
+			// Lay out every group now, in its fixed order, empty. visibleGroups
+			// hides an empty group, so nothing shows until a section fills it.
+			const groups = []
+			if (this.showObjects) {
+				groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: [], total: 0 })
+			}
+			if (this.showFiles) {
+				groups.push({ key: 'files', label: this.filesLabel, icon: 'Paperclip', integrationId: 'files', items: [], total: 0 })
+			}
+			for (const def of LEAF_GROUPS) {
+				groups.push({
+					key: def.key,
+					label: this.leafLabel(def.key),
+					// Prefer the registered integration's icon so it matches the
+					// sidebar/linked-apps; fall back to the known-good default.
+					icon: this.integrationIcon(def.integrationId) || def.icon,
+					integrationId: def.integrationId,
+					requiredApp: def.requiredApp,
+					items: [],
+					total: 0,
+				})
+			}
+			this.groups = groups
 
-				if (this.showObjects) {
-					await this.resolveSchemaTitles([uses, used, contracts])
-					const objectItems = this.mergeObjectResults([uses, used, contracts])
-					groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: objectItems, total: objectItems.length })
+			const setGroup = (key, items, total) => {
+				const index = this.groups.findIndex((group) => group.key === key)
+				if (index === -1) {
+					return
 				}
-
-				if (this.showFiles) {
-					const fileResults = (files && files.results) || []
-					groups.push({ key: 'files', label: this.filesLabel, icon: 'Paperclip', integrationId: 'files', items: fileResults.map((f) => this.toFileRow(f)), total: files ? (files.total ?? fileResults.length) : 0 })
+				const next = this.groups.slice()
+				next[index] = { ...next[index], items, total }
+				this.groups = next
+			}
+			const settle = (key, ok) => {
+				this.pendingSections = this.pendingSections.filter((k) => k !== key)
+				if (!ok) {
+					const section = sections.find((s) => s.key === key)
+					this.failedSections = [...this.failedSections, { key, label: section ? section.label : key }]
 				}
+				// Keep the tab the reader saw first: pin it, so a slower section
+				// that sorts before it does not take the panel away.
+				if (!this.activeKey && this.visibleGroups.length) {
+					this.activeKey = this.visibleGroups[0].key
+				}
+			}
 
+			const loadRelations = this.fetchSection('relations').then(({ ok, data }) => {
+				if (!current()) {
+					return
+				}
 				for (const def of LEAF_GROUPS) {
-					const block = relations && relations[def.responseKey]
+					const block = data && data[def.responseKey]
 					const results = (block && block.results) || []
-					groups.push({
-						key: def.key,
-						label: this.leafLabel(def.key),
-						// Prefer the registered integration's icon so it matches the
-						// sidebar/linked-apps; fall back to the known-good default.
-						icon: this.integrationIcon(def.integrationId) || def.icon,
-						integrationId: def.integrationId,
-						requiredApp: def.requiredApp,
-						items: results.map((r, i) => this.toLeafRow(r, i)),
-						total: block ? (block.total ?? results.length) : 0,
-					})
+					setGroup(def.key, results.map((r, i) => this.toLeafRow(r, i)), block ? (block.total ?? results.length) : 0)
 				}
+				settle('relations', ok)
+			})
 
-				this.groups = groups
-				if (!this.activeGroup && this.visibleGroups.length) {
-					this.activeKey = this.visibleGroups[0].key
-				}
+			const loadFiles = this.showFiles
+				? this.fetchSection('files').then(({ ok, data }) => {
+						if (!current()) {
+							return
+						}
+						const fileResults = (data && data.results) || []
+						setGroup('files', fileResults.map((f) => this.toFileRow(f)), data ? (data.total ?? fileResults.length) : 0)
+						settle('files', ok)
+					})
+				: null
+
+			// uses, used and contracts merge into one Objects group: each answer
+			// re-merges what has arrived so far, and the group stays pending
+			// until the last of them is in.
+			const envelopes = objectSuffixes.map(() => null)
+			let objectsOk = true
+			const loadObjects = objectSuffixes.length
+				? Promise.all(objectSuffixes.map((suffix, i) => this.fetchSection(suffix).then(async ({ ok, data }) => {
+						if (!current()) {
+							return
+						}
+						objectsOk = objectsOk && ok
+						envelopes[i] = data
+						await this.resolveSchemaTitles([data])
+						if (!current()) {
+							return
+						}
+						const objectItems = this.mergeObjectResults(envelopes)
+						setGroup('objects', objectItems, objectItems.length)
+					}))).then(() => {
+						if (current()) {
+							settle('objects', objectsOk)
+						}
+					})
+				: null
+
+			try {
+				await Promise.all([loadRelations, loadFiles, loadObjects])
 			} finally {
-				this.loading = false
+				if (current()) {
+					this.loading = false
+					this.pendingSections = []
+				}
 			}
 		},
 
@@ -1896,6 +2025,20 @@ export default {
 	font-style: italic;
 }
 
+.cn-related-objects-widget__section-status {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+}
+
+.cn-related-objects-widget__section-error {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-error-text, var(--color-error));
+	font-size: 0.85em;
+}
+
 .cn-related-objects-widget__empty-state {
 	/* NcEmptyContent defaults to filling tall parents; inside a widget cell a
 	   compact block reads better. */

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -370,6 +370,19 @@ export default {
 			default: undefined,
 		},
 
+		/**
+		 * App wording for an unavailable personal lens (a `source.filter._recent`
+		 * tile on an instance that does not log reads), keyed `<lens>.<reason>`
+		 * or `<reason>`. Forwarded to CnDataTable, which shows the library's
+		 * object-neutral text without it.
+		 *
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonTexts: {
+			type: Object,
+			default: undefined,
+		},
+
 		/**
 		 * Leading per-row icon: a static MDI icon name string, or a function
 		 * `(row) => iconName`. Forwarded to CnDataTable.

package/src/composables/__tests__/useObjectLock.endpoints.spec.js

@@ -174,3 +174,86 @@ describe('useObjectLock reaches the routes OpenRegister actually declares', () =
 		})
 	})
 })
+
+/**
+ * Run the composable with getter inputs, the way CnDetailPage calls it.
+ *
+ * @param {object}   store   The object store double.
+ * @param {object}   targets Getters for register, schema (cache key), id and slug.
+ * @param {Function} body    What to do with the lock state.
+ * @return {Promise<*>} Whatever `body` returned.
+ */
+async function withGetterLock(store, targets, body) {
+	const scope = effectScope()
+	let lock
+	scope.run(() => {
+		lock = useObjectLock(store, targets.register, targets.schema, targets.id, {
+			autoRenew: false,
+			schemaSlug: targets.slug,
+		})
+	})
+	try {
+		return await body(lock)
+	} finally {
+		scope.stop()
+	}
+}
+
+describe('useObjectLock reads getter inputs as values', () => {
+	beforeEach(() => {
+		mockAxios.post.mockReset().mockResolvedValue({ data: {} })
+	})
+
+	it('🔴 puts the getter VALUES in the lock URL, not their source', async () => {
+		await withGetterLock(storeWithLock(null), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			await lock.acquire()
+		})
+
+		const [url] = mockAxios.post.mock.calls[0]
+		expect(url).toBe('/apps/openregister/api/objects/dossiq/case/case-1/lock')
+		expect(url).not.toMatch(/=>/)
+	})
+
+	it('🔴 reads the cached lock under the getter value of the cache key', async () => {
+		await withGetterLock(storeWithLock('bram'), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			expect(lock.locked.value).toBe(true)
+			expect(lock.lockedBy.value).toBe('bram')
+		})
+	})
+
+	it('🔴 releases on the getter values too', async () => {
+		await withGetterLock(storeWithLock('anna'), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			await lock.release()
+		})
+
+		expect(mockAxios.post).toHaveBeenCalledWith('/apps/openregister/api/objects/dossiq/case/case-1/unlock')
+	})
+
+	it.each([
+		['register', { register: () => '', schema: () => 'dossiq-case', id: () => 'case-1', slug: () => 'case' }],
+		['schema slug', { register: () => 'dossiq', schema: () => 'dossiq-case', id: () => 'case-1', slug: () => undefined }],
+		['object id', { register: () => 'dossiq', schema: () => 'dossiq-case', id: () => null, slug: () => 'case' }],
+	])('sends nothing while the %s is unknown', async (_label, targets) => {
+		await withGetterLock(storeWithLock('anna'), targets, async (lock) => {
+			await lock.acquire()
+			await lock.release()
+		})
+
+		expect(mockAxios.post).not.toHaveBeenCalled()
+	})
+})

package/src/composables/useListView.js

@@ -98,6 +98,9 @@ export function useListView(objectTypeOrOptions, options) {
 	// field (a folder pane grouping by it, say) reads them here rather than
 	// deriving them from `objects`, which is only the current page.
 	const facets = computed(() => objectStore.facets[getType()] || {})
+	// Personal-lens reports of the latest response (`{ recent: { available, reason } }`).
+	// @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-a-list-response-carries-the-report-of-the-lenses-it-was-asked-for
+	const lenses = computed(() => (objectStore.lenses && objectStore.lenses[getType()]) || {})
 	// Outcome of the latest `refresh()`: the store's error for it, or null once
 	// it succeeded or a later fetch stored new rows. The store keeps the previous
 	// rows on a failed fetch, so this is how a consumer tells stale rows from
@@ -381,6 +384,7 @@ export function useListView(objectTypeOrOptions, options) {
 		loading,
 		pagination,
 		facets,
+		lenses,
 		error,
 		// Local state
 		searchTerm,

package/src/composables/useObjectLock.js

@@ -5,7 +5,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { tryOnScopeDispose } from '@vueuse/core'
-import { computed, onBeforeUnmount, onMounted, unref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, toValue } from 'vue'
 
 /**
  * Thrown when an `acquire()` POST returns 409 (Conflict) or 423
@@ -46,14 +46,14 @@ export class PermissionError extends Error {
  * other path that keeps `objectStore.objects[type][id]` fresh).
  *
  * @param {object} objectStore  Pinia store instance (`useObjectStore()` result).
- * @param {string|import('vue').Ref<string>}      register OR register slug.
- * @param {string|import('vue').Ref<string>}      schema   OR schema slug (also the GraphQL field name).
- * @param {string|import('vue').Ref<string>}      id       Object UUID.
+ * @param {string|import('vue').Ref<string>|function(): string}      register OR register slug.
+ * @param {string|import('vue').Ref<string>|function(): string}      schema   OR schema slug (also the GraphQL field name).
+ * @param {string|import('vue').Ref<string>|function(): string}      id       Object UUID.
  * @param {object}  [options]  Optional config.
  * @param {boolean} [options.autoRenew]      Renew the lock on a fixed interval while editing + visible.
  * @param {number}  [options.renewIntervalMs]  Renew every N ms (default 10 min).
  * @param {number}  [options.lockDurationSec]   Server-side TTL requested on acquire (default 30 min).
- * @param {string|import('vue').Ref<string>} [options.schemaSlug] The schema slug for the LOCK URL, when `schema` is the object-cache key rather than the slug (CnDetailPage passes `<register>-<schema>` as the key). Defaults to `schema`.
+ * @param {string|import('vue').Ref<string>|function(): string} [options.schemaSlug] The schema slug for the LOCK URL, when `schema` is the object-cache key rather than the slug (CnDetailPage passes `<register>-<schema>` as the key). Defaults to `schema`.
  * @return {{
  *   locked: import('vue').ComputedRef<boolean>,
  *   lockedByMe: import('vue').ComputedRef<boolean>,
@@ -62,6 +62,7 @@ export class PermissionError extends Error {
  *   acquire: () => Promise<void>,
  *   release: () => Promise<void>
  * }} Reactive lock state + actions.
+ * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-lock/spec.md
  */
 export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	const autoRenew = options.autoRenew !== false
@@ -74,14 +75,23 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	const isVisible = () => typeof document === 'undefined' || document.visibilityState !== 'hidden'
 	let renewTimer = null
 
+	/*
+	 * 🔴 `toValue`, NOT `unref`. CnDetailPage passes GETTER FUNCTIONS
+	 * (`() => props.objectId`) so the lock follows the route. `unref` returns a
+	 * function untouched, so the getter's SOURCE was interpolated into the URL:
+	 * every detail page sent `/api/objects/()=>pn/()=>Ct.schema||Bn/()=>Ct.objectId/lock`
+	 * and got a 404, and the cache lookup used the function as its key, so the
+	 * banner never saw a lock either. `toValue` reads a plain value, a ref and a
+	 * getter alike.
+	 */
 	function readType() {
-		return unref(schema)
+		return toValue(schema)
 	}
 	function readId() {
-		return unref(id)
+		return toValue(id)
 	}
 	function readRegister() {
-		return unref(register)
+		return toValue(register)
 	}
 
 	function readSelfLock() {
@@ -127,7 +137,22 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	})
 
 	function readSchemaSlug() {
-		return unref(options.schemaSlug ?? schema)
+		return toValue(options.schemaSlug ?? schema)
+	}
+
+	/**
+	 * Whether register, schema slug and object id are all known.
+	 *
+	 * A detail page mounts before its route params or object have resolved.
+	 * Without this a lock call would go out with `undefined` in the path, a
+	 * request OpenRegister can only answer with a 404.
+	 *
+	 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-lock/spec.md
+	 * @return {boolean} True when a lock URL can be built.
+	 */
+	function hasTarget() {
+		return [readRegister(), readSchemaSlug(), readId()]
+			.every((part) => typeof part === 'string' ? part !== '' : typeof part === 'number')
 	}
 
 	/**
@@ -176,6 +201,9 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	}
 
 	async function acquire() {
+		if (!hasTarget()) {
+			return
+		}
 		try {
 			await axios.post(endpoint(), { duration: lockDurationSec })
 		} catch (e) {
@@ -208,6 +236,9 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 
 	async function release() {
 		stopRenewTimer()
+		if (!hasTarget()) {
+			return
+		}
 		try {
 			await axios.post(unlockEndpoint())
 		} catch (e) {
@@ -251,7 +282,7 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	}
 
 	function beaconRelease() {
-		if (!lockedByMe.value) {
+		if (!lockedByMe.value || !hasTarget()) {
 			return
 		}
 		try {

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

@@ -114,12 +114,26 @@
 
 /* ---- Folder tabs ------------------------------------------------------- */
 
+/* The strip draws no line of its own (design-system pull request 147). The card under it
+   carries its full border, top included, so the top-right corner is the
+   card's own rounded corner instead of a strip rule running straight past it.
+   The open tab overlaps that top border by 1px (the nav's -1px margin) and
+   paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
-	border-bottom: 1px solid var(--color-border-dark);
+	border-bottom: none;
 	gap: 4px;
+	position: relative;
+}
+
+.cn-look-board .cn-tabs.cn-tabs--board .cn-tabs__bar::after {
+	content: none;
 }
 
+/* Tabs sit on the card's top edge; only the open tab reaches 1px further
+   down (min-height 35px below), over the card's top border. Top-aligned so
+   the inactive tabs do not stretch to the open tab's height. */
 .cn-look-board .cn-tabs--board .cn-tabs__nav {
+	align-items: flex-start;
 	gap: 4px;
 }
 
@@ -140,7 +154,11 @@
 	border-bottom: 1px solid var(--color-main-background);
 	border-top: 1px solid var(--color-border-dark);
 	font-weight: 700;
+	min-height: 35px;
+	padding-bottom: 9px;
 	padding-top: 8px;
+	position: relative;
+	z-index: 1;
 }
 
 /* The count: a grey, borderless 20px badge 8px after the label. */
@@ -177,10 +195,30 @@
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > :first-child .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-detail-card {
-	border-top: none;
+	border-top: 1px solid var(--color-border);
 	border-radius: 0 12px 12px 12px;
 }
 
+/* A CnTabsWidget panel is the card itself: the same full border, so it joins
+   the open tab the same way. The top-left stays square under the first tab. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content {
+	border: 1px solid var(--color-border);
+	border-radius: 0 12px 12px 12px;
+}
+
+/* A panel of CnTabsWidget is the content block itself: the open tab flows
+   straight into it. The widget in the panel renders chromeless, but the board
+   card rule below (and the first-card rule above) used to give its wrapper a
+   border and a 12px radius again, so a second card sat inside the panel. Its
+   left edge ran down from the open tab and its rounded top-right drew a line
+   across the top right of the content block, where DqZaak shows one sheet.
+   Same specificity as the first-card rule and later, so it wins on order. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content .cn-widget-wrapper.cn-widget-wrapper--chromeless {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+}
+
 /* ---- Body cards and side cards ----------------------------------------- */
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper,

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

@@ -343,7 +343,10 @@
 }
 
 .cn-look-board .cn-index-page__main.cn-index-page__main--table {
-	flex: 0 1 auto;
+	/* The body is a row: the card takes the width left beside a sidebar (the
+	   board's table card spans the content), and keeps the height of its rows. */
+	flex: 1 1 auto;
+	align-self: flex-start;
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius, 12px);
 	background: var(--color-main-background);
@@ -533,6 +536,37 @@
 	background: var(--color-primary-element-light);
 }
 
+/* The status accent outranks the board's border, also on hover and selection. */
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent {
+	border-inline-start-width: 4px;
+	padding-inline-start: 13px;
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-success,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-success:hover {
+	border-inline-start-color: var(--color-element-success);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-warning,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-warning:hover {
+	border-inline-start-color: var(--color-element-warning);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-error,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-error:hover {
+	border-inline-start-color: var(--color-element-error);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-info,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-info:hover {
+	border-inline-start-color: var(--color-element-info);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-primary,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-primary:hover {
+	border-inline-start-color: var(--color-primary-element);
+}
+
 .cn-look-board .cn-object-card--board .cn-object-card__content {
 	display: flex;
 	flex: 1 1 auto;