@conduction/nextcloud-vue 2.75.0 → 2.77.0

package/dist/esm/nextcloud-vue.css

@@ -1490,7 +1490,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);
@@ -1680,6 +1683,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;
@@ -2164,9 +2198,64 @@
 	background-color: var(--color-background-hover);
 }
 
-.cn-table-sort-indicator {
-	margin-inline-start: var(--default-grid-baseline);
-	opacity: 0.6;
+/* The sort control: a real button that looks like the header text, the label
+   followed by a 14px chevron 4px after it (the "Wettelijke termijn" header on
+   the DqWooVerzoeken board). Selector scoped under the table so it outranks
+   Nextcloud's own `button` rule, which would otherwise give it a border, a
+   fill, a 34px min-height and a margin. */
+.cn-data-table th .cn-table-header__sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 100%;
+	min-width: 0;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-weight: inherit;
+	text-align: start;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-data-table th .cn-table-header__sort:hover,
+.cn-data-table th .cn-table-header__sort:focus {
+	background: transparent;
+}
+
+.cn-data-table th .cn-table-header__sort:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-data-table th .cn-table-header__sort > :first-child {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The chevron. Unsorted columns show a pale down chevron, so every sortable
+   column says it sorts; the sorted column shows the direction at full text
+   colour. The direction is also in the header's `aria-sort`. */
+.cn-table-header__chevron {
+	display: inline-flex;
+	flex: none;
+	color: var(--color-main-text);
+}
+
+.cn-table-header__chevron--idle {
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover .cn-table-header__chevron--idle,
+.cn-data-table th .cn-table-header__sort:focus-visible .cn-table-header__chevron--idle {
+	opacity: 1;
 }
 
 /* A column carrying a `description` gets a dotted underline — the long-standing
@@ -2182,15 +2271,12 @@
 	cursor: help;
 }
 
-.cn-data-table th.cn-table-header--sortable:focus-visible {
-	outline: 2px solid var(--color-main-text);
-	outline-offset: -2px;
-}
-
-/* Header filter button (CnDataTable `filterable`). 24px hit area with the
-   16px icon; the filled icon plus the primary colour marks an active filter,
-   so the state never rests on colour alone. */
-.cn-table-header__filter {
+/* Header filter button (CnDataTable `filterable`): a 14px funnel directly
+   after the sort chevron, in a 24px hit area. Muted with no filter set; with
+   a filter set it takes the dark primary and a dot, so the state never rests
+   on colour alone. */
+.cn-data-table th .cn-table-header__filter {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -2198,7 +2284,7 @@
 	min-width: 24px;
 	height: 24px;
 	min-height: 24px;
-	margin: 0 0 0 4px;
+	margin: 0 0 0 2px;
 	padding: 0;
 	border: none;
 	border-radius: var(--border-radius, 4px);
@@ -2208,18 +2294,31 @@
 	cursor: pointer;
 }
 
-.cn-table-header__filter:hover {
+.cn-data-table th .cn-table-header__filter:hover {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 }
 
-.cn-table-header__filter:focus-visible {
+.cn-data-table th .cn-table-header__filter:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 0;
 }
 
-.cn-table-header__filter--active {
-	color: var(--color-primary-element);
+.cn-data-table th .cn-table-header__filter--active,
+.cn-data-table th .cn-table-header__filter--active:hover {
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+
+/* The active-filter dot, on the funnel's top right. */
+.cn-table-header__filter-dot {
+	position: absolute;
+	inset-block-start: 3px;
+	inset-inline-end: 3px;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+	pointer-events: none;
 }
 
 /* Active header filters above the table, one removable chip each. */
@@ -5469,12 +5568,26 @@ a.cn-kpi-card--stacked:focus-visible {
 
 /* ---- 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;
 }
 
@@ -5495,7 +5608,11 @@ a.cn-kpi-card--stacked:focus-visible {
 	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. */
@@ -5532,10 +5649,30 @@ a.cn-kpi-card--stacked:focus-visible {
 .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,
@@ -9322,9 +9459,64 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background-color: var(--color-background-hover);
 }
 
-.cn-table-sort-indicator {
-	margin-inline-start: var(--default-grid-baseline);
-	opacity: 0.6;
+/* The sort control: a real button that looks like the header text, the label
+   followed by a 14px chevron 4px after it (the "Wettelijke termijn" header on
+   the DqWooVerzoeken board). Selector scoped under the table so it outranks
+   Nextcloud's own `button` rule, which would otherwise give it a border, a
+   fill, a 34px min-height and a margin. */
+.cn-data-table th .cn-table-header__sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 100%;
+	min-width: 0;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-weight: inherit;
+	text-align: start;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-data-table th .cn-table-header__sort:hover,
+.cn-data-table th .cn-table-header__sort:focus {
+	background: transparent;
+}
+
+.cn-data-table th .cn-table-header__sort:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-data-table th .cn-table-header__sort > :first-child {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The chevron. Unsorted columns show a pale down chevron, so every sortable
+   column says it sorts; the sorted column shows the direction at full text
+   colour. The direction is also in the header's `aria-sort`. */
+.cn-table-header__chevron {
+	display: inline-flex;
+	flex: none;
+	color: var(--color-main-text);
+}
+
+.cn-table-header__chevron--idle {
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover .cn-table-header__chevron--idle,
+.cn-data-table th .cn-table-header__sort:focus-visible .cn-table-header__chevron--idle {
+	opacity: 1;
 }
 
 /* A column carrying a `description` gets a dotted underline — the long-standing
@@ -9340,15 +9532,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	cursor: help;
 }
 
-.cn-data-table th.cn-table-header--sortable:focus-visible {
-	outline: 2px solid var(--color-main-text);
-	outline-offset: -2px;
-}
-
-/* Header filter button (CnDataTable `filterable`). 24px hit area with the
-   16px icon; the filled icon plus the primary colour marks an active filter,
-   so the state never rests on colour alone. */
-.cn-table-header__filter {
+/* Header filter button (CnDataTable `filterable`): a 14px funnel directly
+   after the sort chevron, in a 24px hit area. Muted with no filter set; with
+   a filter set it takes the dark primary and a dot, so the state never rests
+   on colour alone. */
+.cn-data-table th .cn-table-header__filter {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -9356,7 +9545,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-width: 24px;
 	height: 24px;
 	min-height: 24px;
-	margin: 0 0 0 4px;
+	margin: 0 0 0 2px;
 	padding: 0;
 	border: none;
 	border-radius: var(--border-radius, 4px);
@@ -9366,18 +9555,31 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	cursor: pointer;
 }
 
-.cn-table-header__filter:hover {
+.cn-data-table th .cn-table-header__filter:hover {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 }
 
-.cn-table-header__filter:focus-visible {
+.cn-data-table th .cn-table-header__filter:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 0;
 }
 
-.cn-table-header__filter--active {
-	color: var(--color-primary-element);
+.cn-data-table th .cn-table-header__filter--active,
+.cn-data-table th .cn-table-header__filter--active:hover {
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+
+/* The active-filter dot, on the funnel's top right. */
+.cn-table-header__filter-dot {
+	position: absolute;
+	inset-block-start: 3px;
+	inset-inline-end: 3px;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+	pointer-events: none;
 }
 
 /* Active header filters above the table, one removable chip each. */
@@ -14154,12 +14356,55 @@ button.cn-files-card__open[data-v-46f7e3c9]:hover {
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
+	position: relative;
 	border-radius: var(--border-radius-large, 8px);
 }
 .cn-files-browser--dragging[data-v-f5bdd9e2] {
 	outline: 2px dashed var(--color-primary-element);
 	outline-offset: 4px;
 }
+.cn-files-browser__drop-overlay[data-v-f5bdd9e2] {
+	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[data-v-f5bdd9e2] {
+	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[data-v-f5bdd9e2] {
+	font-size: 20px;
+	font-weight: 700;
+}
+.cn-files-browser__drop-hint[data-v-f5bdd9e2] {
+	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[data-v-f5bdd9e2] {
 	display: flex;
 	align-items: center;
@@ -19425,6 +19670,18 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
+.cn-related-objects-widget__section-status[data-v-44c2988f] {
+	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[data-v-44c2988f] {
+	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[data-v-44c2988f] {
 	/* NcEmptyContent defaults to filling tall parents; inside a widget cell a
 	   compact block reads better. */
@@ -22090,6 +22347,47 @@ to { background-position: -200% 0;
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
+
+/* The 4px start border takes 3px of padding, so the content stays put. */
+.cn-object-card.cn-object-card--accent[data-v-6f672c8f] {
+	border-inline-start-width: 4px;
+	padding-inline-start: 13px;
+}
+.cn-object-card.cn-object-card--accent-success[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-success);
+}
+.cn-object-card.cn-object-card--accent-warning[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-warning);
+}
+.cn-object-card.cn-object-card--accent-error[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-error);
+}
+.cn-object-card.cn-object-card--accent-info[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-info);
+}
+.cn-object-card.cn-object-card--accent-primary[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-primary-element);
+}
+.cn-object-card__accent-icon[data-v-6f672c8f] {
+	display: inline-flex;
+	vertical-align: -2px;
+	margin-inline-end: 4px;
+}
+.cn-object-card--accent-success .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-text-success);
+}
+.cn-object-card--accent-warning .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-text-warning);
+}
+.cn-object-card--accent-error .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-text-error);
+}
+.cn-object-card--accent-info .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-element-info);
+}
+.cn-object-card--accent-primary .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-primary-element);
+}
 .cn-object-card__checkbox[data-v-6f672c8f] {
 	flex-shrink: 0;
 	padding-top: 2px;
@@ -32006,8 +32304,42 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-.cn-favourite-toggle__star[data-v-836dad16] {
-	color: var(--color-warning);
+.cn-follow-toggle[data-v-eec896e2] {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+.cn-follow-toggle__on[data-v-eec896e2] {
+	color: var(--color-primary-element);
+}
+.cn-follow-toggle__popover[data-v-eec896e2] {
+	min-width: 260px;
+	padding: 12px;
+}
+.cn-follow-toggle__list[data-v-eec896e2] {
+	list-style: none;
+	margin: 0 0 8px;
+	padding: 0;
+}
+.cn-follow-toggle__row[data-v-eec896e2] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 0;
+}
+.cn-follow-toggle__who[data-v-eec896e2] {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.cn-follow-toggle__since[data-v-eec896e2] {
+	color: var(--color-text-maxcontrast);
+	font-size: var(--font-size-small, 13px);
+}
+.cn-follow-toggle__error[data-v-eec896e2] {
+	margin: 8px 0 0;
+	color: var(--color-error-text);
 }
 
 
@@ -34152,42 +34484,6 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-.cn-follow-toggle[data-v-eec896e2] {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-.cn-follow-toggle__popover[data-v-eec896e2] {
-	min-width: 260px;
-	padding: 12px;
-}
-.cn-follow-toggle__list[data-v-eec896e2] {
-	list-style: none;
-	margin: 0 0 8px;
-	padding: 0;
-}
-.cn-follow-toggle__row[data-v-eec896e2] {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 0;
-}
-.cn-follow-toggle__who[data-v-eec896e2] {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	min-width: 0;
-}
-.cn-follow-toggle__since[data-v-eec896e2] {
-	color: var(--color-text-maxcontrast);
-	font-size: var(--font-size-small, 13px);
-}
-.cn-follow-toggle__error[data-v-eec896e2] {
-	margin: 8px 0 0;
-	color: var(--color-error-text);
-}
-
-
 .cn-lifecycle-actions[data-v-a62ad362] {
 	display: flex;
 	flex-wrap: wrap;
@@ -35861,6 +36157,11 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
+.cn-favourite-toggle__star[data-v-836dad16] {
+	color: var(--color-warning);
+}
+
+
 .cn-journey-review-list__items[data-v-d3c04832] {
 	list-style: none;
 	margin: 8px 0 0;

package/dist/esm/store/plugins/interactions.js

@@ -3,7 +3,8 @@ import { setFavourite, setReadState, setWatching, listWatchers, setWatcher } fro
 /**
  * Interactions plugin for the object store.
  *
- * Per-user interaction calls on a record: favourite, follow (watch) and the
+ * Per-user interaction calls on a record: follow (watch, with its
+ * notifications switch), the deprecated favourite (a quiet follow), and the
  * followers list. Each write puts the server's answer into the stored object's
  * `@self`, so a list showing the same object agrees with the toggle.
  *
@@ -55,7 +56,10 @@ function interactionsPlugin() {
 			},
 
 			/**
-			 * Star a record.
+			 * Star a record: a quiet follow on the server.
+			 *
+			 * @deprecated A favourite is a follow with notifications off since
+			 * OpenRegister's `merge-follow-and-favourites`; use `watch(type, id, { notify: false })`.
 			 *
 			 * @param {string} type The registered object type slug
 			 * @param {string} objectId The object ID
@@ -65,13 +69,15 @@ function interactionsPlugin() {
 				const { register, schema } = this._interactionTarget(type);
 				const result = await setFavourite(register, schema, objectId, true);
 				if (result.ok) {
-					this._patchSelf(type, objectId, { favourite: true });
+					this._patchSelf(type, objectId, { favourite: true, watching: true });
 				}
 				return result
 			},
 
 			/**
-			 * Unstar a record.
+			 * Unstar a record: unfollow it.
+			 *
+			 * @deprecated Use `unwatch`.
 			 *
 			 * @param {string} type The registered object type slug
 			 * @param {string} objectId The object ID
@@ -81,7 +87,7 @@ function interactionsPlugin() {
 				const { register, schema } = this._interactionTarget(type);
 				const result = await setFavourite(register, schema, objectId, false);
 				if (result.ok) {
-					this._patchSelf(type, objectId, { favourite: false });
+					this._patchSelf(type, objectId, { favourite: false, watching: false, watchNotify: undefined });
 				}
 				return result
 			},
@@ -119,17 +125,21 @@ function interactionsPlugin() {
 			},
 
 			/**
-			 * Follow a record.
+			 * Follow a record, optionally setting its notifications switch.
 			 *
 			 * @param {string} type The registered object type slug
 			 * @param {string} objectId The object ID
+			 * @param {object} [options] Options
+			 * @param {boolean} [options.notify] The notifications switch; left out, a new follow notifies
 			 * @return {Promise<object>} The outcome
+			 * @spec openspec/changes/one-follow-control/specs/record-follow/spec.md#requirement-one-follow-control-with-a-notifications-switch
 			 */
-			async watch(type, objectId) {
+			async watch(type, objectId, options = {}) {
 				const { register, schema } = this._interactionTarget(type);
-				const result = await setWatching(register, schema, objectId, true);
+				const result = await setWatching(register, schema, objectId, true, options);
 				if (result.ok) {
-					this._patchSelf(type, objectId, { watching: true });
+					const notify = result.data && typeof result.data.notify === 'boolean' ? result.data.notify : true;
+					this._patchSelf(type, objectId, { watching: true, favourite: true, watchNotify: notify });
 				}
 				return result
 			},
@@ -145,7 +155,7 @@ function interactionsPlugin() {
 				const { register, schema } = this._interactionTarget(type);
 				const result = await setWatching(register, schema, objectId, false);
 				if (result.ok) {
-					this._patchSelf(type, objectId, { watching: false });
+					this._patchSelf(type, objectId, { watching: false, favourite: false, watchNotify: undefined });
 				}
 				return result
 			},