@conduction/nextcloud-vue 2.75.0 → 2.77.0

package/src/components/CnDataTable/CnDataTable.vue

@@ -130,25 +130,42 @@
 								pinClass(leadingCount + colIndex),
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
-							:tabindex="col.sortable ? 0 : null"
 							:aria-sort="ariaSortFor(col)"
 							:data-filtered="isColumnFiltered(col) ? 'true' : null"
 							:title="translateLabel(col.description) || null"
 							@click="col.sortable ? onHeaderClick(col.key, $event) : null"
 							@keydown.enter="col.sortable ? onHeaderKeydown(col.key, $event) : null">
-							<span :class="col.description ? 'cn-table-header--described' : ''">
+							<!-- The sort control is a real button named by the column
+							     label; the header's `aria-sort` carries the state. Its
+							     click and Enter bubble to the header's own handlers, so
+							     a click anywhere in the header still sorts. -->
+							<button
+								v-if="col.sortable"
+								type="button"
+								class="cn-table-header__sort"
+								data-testid="cn-table-header-sort">
+								<span :class="col.description ? 'cn-table-header--described' : ''">{{ translateLabel(col.label) }}</span>
+								<span
+									v-if="sortKeyIndex(col.key) !== -1"
+									class="cn-table-header__chevron cn-table-sort-indicator"
+									:data-sort-direction="effectiveSortKeys[sortKeyIndex(col.key)].order === 'asc' ? 'asc' : 'desc'">
+									<ChevronUp v-if="effectiveSortKeys[sortKeyIndex(col.key)].order === 'asc'" :size="14" />
+									<ChevronDown v-else :size="14" />
+								</span>
+								<span
+									v-else
+									class="cn-table-header__chevron cn-table-header__chevron--idle">
+									<ChevronDown :size="14" />
+								</span>
+								<span
+									v-if="sortBadgeFor(col.key) !== null"
+									class="cn-table-sort-badge">
+									{{ sortBadgeFor(col.key) }}
+								</span>
+							</button>
+							<span v-else :class="col.description ? 'cn-table-header--described' : ''">
 								{{ translateLabel(col.label) }}
 							</span>
-							<span
-								v-if="col.sortable && sortKeyIndex(col.key) !== -1"
-								class="cn-table-sort-indicator">
-								{{ effectiveSortKeys[sortKeyIndex(col.key)].order === 'asc' ? '▲' : '▼' }}
-							</span>
-							<span
-								v-if="col.sortable && sortBadgeFor(col.key) !== null"
-								class="cn-table-sort-badge">
-								{{ sortBadgeFor(col.key) }}
-							</span>
 							<!-- Header filter: a real button, so it is reachable with Tab
 							     and its click and Enter never also sort the column. -->
 							<button
@@ -163,8 +180,11 @@
 								data-testid="cn-table-header-filter"
 								@click.stop="toggleColumnFilter(col, $event)"
 								@keydown.enter.stop>
-								<FilterIcon v-if="isColumnFiltered(col)" :size="16" />
-								<FilterOutline v-else :size="16" />
+								<FilterOutline :size="14" />
+								<span
+									v-if="isColumnFiltered(col)"
+									class="cn-table-header__filter-dot"
+									data-testid="cn-table-header-filter-dot" />
 							</button>
 						</th>
 
@@ -182,9 +202,12 @@
 					<!-- Empty state -->
 					<tr v-if="effectiveRows.length === 0" class="cn-table-empty" data-testid="cn-object-list-empty">
 						<td :colspan="totalColumns">
-							<!-- @slot Empty-state content shown when there are no rows (defaults to `emptyText`). -->
+							<!-- @slot Empty-state content shown when there are no rows (defaults to `emptyText`, or why an unavailable personal lens is empty). -->
 							<slot name="empty">
-								{{ translateLabel(emptyText) }}
+								<span v-if="lensReasonText" class="cn-table-empty__lens-reason" data-testid="cn-data-table-lens-reason">{{ lensReasonText }}</span>
+								<template v-else>
+									{{ translateLabel(emptyText) }}
+								</template>
 							</slot>
 						</td>
 					</tr>
@@ -370,12 +393,14 @@ import axios from '@nextcloud/axios'
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
-import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnColumnFilterPopover from './CnColumnFilterPopover.vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { clearedColumnFilterParams, columnFilterDef, columnFilterParams, columnFilterState, isColumnFilterActive, isColumnSortable } from '../../utils/columnFilters.js'
+import { lensUnavailableText, readLensReports } from '../../utils/lensAvailability.js'
 import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { nextSortState } from '../../utils/multiColumnSort.js'
 import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
@@ -485,7 +510,8 @@ export default {
 		CnIcon,
 		CnLockIndicator,
 		CnUnreadMarker,
-		FilterIcon,
+		ChevronDown,
+		ChevronUp,
 		FilterOutline,
 	},
 
@@ -666,6 +692,20 @@ export default {
 			default: () => t('nextcloud-vue', 'No items found'),
 		},
 
+		/**
+		 * App wording for an unavailable personal lens in self-fetch mode,
+		 * keyed `<lens>.<reason>` (`recent.audit-trail-disabled`) or
+		 * `<reason>`. Without it the library's object-neutral text is shown
+		 * when the response reports `@self.lenses.<lens>.available: false`.
+		 *
+		 * @type {{[key: string]: string}|null}
+		 * @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: null,
+		},
+
 		/** Function returning CSS class(es) for a row: (row) => string|object */
 		rowClass: {
 			type: Function,
@@ -942,6 +982,8 @@ export default {
 			aggregateRequestId: 0,
 			/** Rows fetched in self-fetch mode (register + schemaId). */
 			fetchedRows: [],
+			/** Personal-lens reports (`@self.lenses`) of the latest self-fetch response. */
+			fetchedLenses: {},
 			/** True while a self-fetch request is in flight. */
 			selfFetchLoading: false,
 		}
@@ -966,6 +1008,22 @@ export default {
 			return t('nextcloud-vue', 'Actions')
 		},
 
+		/**
+		 * Why the self-fetched list is empty when a personal lens could not
+		 * answer (openregister#4514), or `''` to keep `emptyText`. Only the
+		 * table's own fetch reports: external `rows` carry no report.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonText() {
+			if (this.rows && this.rows.length > 0) {
+				return ''
+			}
+			const text = lensUnavailableText(this.fetchedLenses, this.lensReasonTexts)
+			return text ? this.translateLabel(text) : ''
+		},
+
 		/** @return {number} Leading cells before the data columns (selection, icon). */
 		leadingCount() {
 			return (this.selectable ? 1 : 0) + (this.rowIcon ? 1 : 0)
@@ -1495,8 +1553,10 @@ export default {
 					...(this.fetchParams ? { params: this.fetchParams } : {}),
 				})
 				this.fetchedRows = (data && data.results) || (Array.isArray(data) ? data : [])
+				this.fetchedLenses = readLensReports(data)
 			} catch {
 				this.fetchedRows = []
+				this.fetchedLenses = {}
 			} finally {
 				this.selfFetchLoading = false
 			}
@@ -1975,8 +2035,8 @@ export default {
 		filterButtonLabel(col) {
 			const column = this.translateLabel(col.label)
 			return this.isColumnFiltered(col)
-				? t('nextcloud-vue', 'Filter {column}, active', { column })
-				: t('nextcloud-vue', 'Filter {column}', { column })
+				? t('nextcloud-vue', 'Filter by {column}, active', { column })
+				: t('nextcloud-vue', 'Filter by {column}', { column })
 		},
 
 		/**

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -116,7 +116,7 @@
 							data-testid="cn-detail-page-type-eyebrow">
 							{{ typeEyebrow }}
 						</p>
-						<div v-if="displayTitle || showFavouriteToggle || showFollowToggle" class="cn-detail-page__title-row">
+						<div v-if="displayTitle || showFollowToggle" class="cn-detail-page__title-row">
 							<component
 								:is="isBoard ? 'h1' : 'h2'"
 								v-if="displayTitle"
@@ -124,24 +124,19 @@
 								:title="displayTitle">
 								{{ displayTitle }}
 							</component>
-							<!-- Star and Follow beside the title (manifest `config.favourite` /
-							     `config.follow`): shown when the object carries the markers. -->
+							<!-- 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. -->
 							<span
-								v-if="showFavouriteToggle || showFollowToggle"
+								v-if="showFollowToggle"
 								class="cn-detail-page__interactions"
 								data-testid="cn-detail-page-interactions">
-								<CnFavouriteToggle
-									v-if="showFavouriteToggle"
-									:register="register"
-									:schema="schema"
-									:objectId="String(objectId)"
-									:favourite="resolvedSelf.favourite === true" />
 								<CnFollowToggle
-									v-if="showFollowToggle"
 									: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" />
@@ -1211,7 +1206,6 @@ import CnBodySections from '../CnBodySections/CnBodySections.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
 import CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'
-import CnFavouriteToggle from '../CnFavouriteToggle/CnFavouriteToggle.vue'
 import CnFollowToggle from '../CnFollowToggle/CnFollowToggle.vue'
 import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import CnLifecycleActions from '../CnLifecycleActions/CnLifecycleActions.vue'
@@ -1413,7 +1407,6 @@ export default {
 		CnStatusBadge,
 		CnSummaryAggregates,
 		CnDetailHeaderChips,
-		CnFavouriteToggle,
 		CnFollowToggle,
 		EyeOffOutline,
 		CnRelatedCollections,
@@ -1884,9 +1877,11 @@ export default {
 		},
 
 		/**
-		 * Star beside the title (manifest `config.favourite`). Automatic (null):
-		 * shown when the object carries `@self.favourite`. `false` removes it.
+		 * Deprecated and ignored: the star is gone, a favourite is a follow with
+		 * notifications off (OpenRegister `merge-follow-and-favourites`). Kept so a
+		 * manifest that still sets `config.favourite` stays valid; use `follow`.
 		 *
+		 * @deprecated Use `follow`.
 		 * @type {boolean|null}
 		 */
 		favourite: {
@@ -2727,18 +2722,21 @@ export default {
 			() => props.objectId,
 			{ enabled: () => Boolean(resolveType() && props.objectId) },
 		)
-		const sidebarReg = props.sidebarProps?.register || props.resolvedSidebar?.register || props.register || ''
-		const sidebarSchema = props.sidebarProps?.schema || props.resolvedSidebar?.schema || props.schema || ''
+		// Getters, read at call time: a register or schema that arrives after
+		// mount (route params, a resolved sidebar) must reach the lock URL. They
+		// used to be consts captured once at setup.
+		const sidebarReg = () => props.sidebarProps?.register || props.resolvedSidebar?.register || props.register || ''
+		const sidebarSchema = () => props.sidebarProps?.schema || props.resolvedSidebar?.schema || props.schema || ''
 		const lock = useObjectLock(
 			subscriptionStore,
-			() => sidebarReg,
-			() => resolveType() || sidebarSchema,
+			sidebarReg,
+			() => resolveType() || sidebarSchema(),
 			() => props.objectId,
 			// The third argument is the OBJECT CACHE KEY (`<register>-<schema>`)
 			// and the lock URL needs the schema SLUG. They were one string, and
 			// the acquire went to `/api/objects/<register>/<register>-<schema>/`,
 			// which no register answers.
-			{ schemaSlug: () => props.schema || sidebarSchema },
+			{ schemaSlug: () => props.schema || sidebarSchema() },
 		)
 		return {
 			...registryExposed,
@@ -3864,18 +3862,6 @@ export default {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
-		/**
-		 * Whether the star renders: the object carries `@self.favourite` and the page did not turn it off.
-		 *
-		 * @return {boolean}
-		 * @spec openspec/changes/record-favourite-and-follow/tasks.md#task-3
-		 */
-		showFavouriteToggle() {
-			return this.favourite !== false
-				&& typeof this.resolvedSelf.favourite === 'boolean'
-				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
-		},
-
 		/**
 		 * Whether the Follow toggle renders: the object carries `@self.watching` and the page did not turn it off.
 		 *

package/src/components/CnFavouriteToggle/CnFavouriteToggle.vue

@@ -31,12 +31,17 @@ import { setFavourite } from '../../utils/recordInteractions.js'
 /**
  * CnFavouriteToggle — a star bound to a record's `@self.favourite` marker.
  *
+ * @deprecated Following and favourites are one feature since OpenRegister's
+ * `merge-follow-and-favourites`: a favourite is a follow with notifications
+ * off. Use `CnFollowToggle`. Neither `CnDetailPage` nor `CnIndexPage` renders
+ * this star any more; it stays exported for one minor line so an app that
+ * placed it itself keeps working (the server answers it as a quiet follow).
+ *
  * A click flips the star at once and sends `PUT` (star) or `DELETE` (unstar)
  * `/apps/openregister/api/objects/{register}/{schema}/{id}/favourite`; on
  * failure it flips back and shows the server's message. The server's answer is
  * written into the stored object's `@self`, so a list showing the same record
- * agrees. `CnDetailPage` renders it beside the title; `CnIndexPage` renders it
- * per row for `showFavouriteColumn`.
+ * agrees.
  *
  * Example:
  * ```vue

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -7,10 +7,29 @@
 		class="cn-files-browser"
 		:class="{ 'cn-files-browser--dragging': dragging }"
 		data-testid="cn-files-browser"
-		@dragenter.prevent="dragging = true"
-		@dragover.prevent="dragging = true"
-		@dragleave.prevent="dragging = false"
+		@dragenter.prevent="onDragEnter"
+		@dragover.prevent="onDragOver"
+		@dragleave.prevent="onDragLeave"
 		@drop.prevent="onDrop">
+		<!-- The drop state, drawn on the browser itself when the host names it
+		     (`dropOverlay`): a dashed frame and one centred line over the list,
+		     so it is plain where the files go. The overlay is decoration for
+		     sighted users; the live region below says the same thing to a
+		     screen reader, and the upload button stays the way in for anyone
+		     who cannot drag. -->
+		<div v-if="dropOverlay && dragging"
+			class="cn-files-browser__drop-overlay"
+			aria-hidden="true"
+			data-testid="cn-files-browser-drop-overlay">
+			<span class="cn-files-browser__drop-icon"><Upload :size="28" /></span>
+			<strong class="cn-files-browser__drop-label">{{ dropLabel }}</strong>
+		</div>
+		<p v-if="dropOverlay"
+			class="hidden-visually"
+			aria-live="polite"
+			data-testid="cn-files-browser-drop-status">
+			{{ dropStatus }}
+		</p>
 		<!-- The bar: where you are, and what you can add. The crumbs are the
 		     Files app's own breadcrumb component; the New menu lists what the
 		     Files app and its plugins registered for this folder (a new folder,
@@ -56,7 +75,7 @@
 				:menuName="newLabel"
 				:forceMenu="true"
 				:forceName="true"
-				variant="primary"
+				:variant="uploadButton ? 'secondary' : 'primary'"
 				:disabled="folder === null"
 				data-testid="cn-files-browser-new">
 				<template #icon>
@@ -94,6 +113,19 @@
 					{{ action.label }}
 				</NcActionButton>
 			</NcActions>
+			<!-- A plain upload as its own button, when the host names it
+			     (`uploadButton`). It takes the primary place and the New
+			     menu steps back beside it. -->
+			<NcButton v-if="uploadButton"
+				variant="primary"
+				:disabled="folder === null"
+				data-testid="cn-files-browser-upload-button"
+				@click="pickFiles">
+				<template #icon>
+					<Upload :size="20" />
+				</template>
+				{{ uploadButtonLabel }}
+			</NcButton>
 		</div>
 
 		<!-- `:ref` (dynamic), not `ref`: a static ref on a vnode with only static
@@ -344,6 +376,13 @@
 			</tbody>
 		</table>
 
+		<p v-if="dropHint && !loading && error === ''"
+			class="cn-files-browser__drop-hint"
+			data-testid="cn-files-browser-drop-hint">
+			<Upload :size="16" />
+			{{ dropHintLabel }}
+		</p>
+
 		<NcDialog
 			v-if="renaming !== null"
 			:name="renameLabel"
@@ -443,7 +482,7 @@ import { getClient, getDefaultPropfind, getRemoteURL, getRootPath, resultToNode
  * copy read `window._nc_fileactions`, which the server's plugins never write,
  * and saw nothing while the page held thirty actions.
  */
-import { translate as t } from '@nextcloud/l10n'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator, NcBreadcrumb, NcBreadcrumbs, NcButton, NcDateTime, NcDialog, NcIconSvgWrapper, NcLoadingIcon, NcProgressBar, NcTextField } from '@nextcloud/vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
@@ -624,6 +663,51 @@ export default {
 			default: () => t('nextcloud-vue', 'Show in Files'),
 		},
 
+		/**
+		 * Show a primary upload button beside the New menu, which then steps
+		 * back to a secondary button. Off (the default) keeps the upload
+		 * inside the New menu only.
+		 */
+		uploadButton: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Label of the upload button `uploadButton` shows. */
+		uploadButtonLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Add files'),
+		},
+
+		/**
+		 * Draw the drop state over the browser while files are dragged onto
+		 * it (a dashed frame and `dropLabel`, centred) and announce it to
+		 * screen readers. Off (the default) keeps the plain dashed outline and
+		 * announces nothing.
+		 */
+		dropOverlay: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The line `dropOverlay` draws and announces. */
+		dropLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Drop to add'),
+		},
+
+		/** Show a line under the list saying files can be dropped on it. */
+		dropHint: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The line `dropHint` shows. */
+		dropHintLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Or drag files onto this list.'),
+		},
+
 		/** Title of the empty state. */
 		emptyLabel: {
 			type: String,
@@ -726,6 +810,10 @@ export default {
 			 */
 			visibleColumnKeys: null,
 			dragging: false,
+			/** Nested dragenter/dragleave pairs, so a child does not end the drag. */
+			dragDepth: 0,
+			/** What the live region says: the drop label, then what was added. */
+			dropStatus: '',
 			uploads: [],
 			previewFailed: {},
 			newFolderOpen: false,
@@ -1265,12 +1353,76 @@ export default {
 		 */
 		async onDrop(event) {
 			this.dragging = false
+			this.dragDepth = 0
+			this.dropStatus = ''
 			const files = event.dataTransfer?.files
 			if (files?.length) {
 				await this.uploadFiles(files)
+				if (this.dropOverlay) {
+					this.dropStatus = n('nextcloud-vue', '%n file added', '%n files added', files.length)
+				}
 			}
 		},
 
+		/**
+		 * Something is dragged into the browser: show the drop state when it
+		 * carries files, and say so once.
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {void}
+		 */
+		onDragEnter(event) {
+			if (!this.carriesFiles(event)) {
+				return
+			}
+			this.dragDepth++
+			if (!this.dragging) {
+				this.dragging = true
+				this.dropStatus = this.dropOverlay ? this.dropLabel : ''
+			}
+		},
+
+		/**
+		 * Keep the drop state while files move over the browser.
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {void}
+		 */
+		onDragOver(event) {
+			if (this.carriesFiles(event)) {
+				this.dragging = true
+			}
+		},
+
+		/**
+		 * Something left the browser, or one of its children. The drop state
+		 * ends only when the drag has left the browser itself.
+		 *
+		 * @return {void}
+		 */
+		onDragLeave() {
+			this.dragDepth = Math.max(0, this.dragDepth - 1)
+			if (this.dragDepth === 0) {
+				this.dragging = false
+				this.dropStatus = ''
+			}
+		},
+
+		/**
+		 * Whether a drag carries files (not text or a link from the page).
+		 * A drag whose types cannot be read counts as files, as before.
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {boolean}
+		 */
+		carriesFiles(event) {
+			const types = event?.dataTransfer?.types
+			if (!types) {
+				return true
+			}
+			return Array.from(types).includes('Files')
+		},
+
 		/**
 		 * PUT each file into the open folder over DAV, with a progress row
 		 * each, then re-read the folder once.
@@ -1660,6 +1812,7 @@ export default {
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
+	position: relative;
 	border-radius: var(--border-radius-large, 8px);
 }
 
@@ -1668,6 +1821,52 @@ export default {
 	outline-offset: 4px;
 }
 
+.cn-files-browser__drop-overlay {
+	position: absolute;
+	inset: 0;
+	z-index: 2;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	padding: 24px;
+	box-sizing: border-box;
+	border: 2px dashed var(--color-primary-element);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	text-align: center;
+	pointer-events: none;
+}
+
+.cn-files-browser__drop-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 56px;
+	height: 56px;
+	border-radius: 50%;
+	background: var(--color-main-background);
+	color: var(--color-primary-element);
+}
+
+.cn-files-browser__drop-label {
+	font-size: 20px;
+	font-weight: 700;
+}
+
+.cn-files-browser__drop-hint {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-files-browser__bar {
 	display: flex;
 	align-items: center;