1 files changed, 83 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js
new file mode 100644
index 00000000..b9d9bdfd
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js
@@ -0,0 +1,83 @@
+( function ( mw ) {
+	/**
+	 * Top section (between page title and filters) on Special:Watchlist
+	 *
+	 * @extends OO.ui.Widget
+	 *
+	 * @constructor
+	 * @param {mw.rcfilters.Controller} controller
+	 * @param {mw.rcfilters.dm.ChangesListViewModel} changesListModel
+	 * @param {mw.rcfilters.ui.SavedLinksListWidget} savedLinksListWidget
+	 * @param {jQuery} $watchlistDetails Content of the 'details' section that includes watched pages count
+	 * @param {Object} [config] Configuration object
+	 */
+	mw.rcfilters.ui.WatchlistTopSectionWidget = function MwRcfiltersUiWatchlistTopSectionWidget(
+		controller, changesListModel, savedLinksListWidget, $watchlistDetails, config
+	) {
+		var editWatchlistButton,
+			markSeenButton,
+			$topTable,
+			$bottomTable,
+			$separator;
+		config = config || {};
+
+		// Parent
+		mw.rcfilters.ui.WatchlistTopSectionWidget.parent.call( this, config );
+
+		editWatchlistButton = new OO.ui.ButtonWidget( {
+			label: mw.msg( 'rcfilters-watchlist-edit-watchlist-button' ),
+			icon: 'edit',
+			href: mw.config.get( 'wgStructuredChangeFiltersEditWatchlistUrl' )
+		} );
+		markSeenButton = new mw.rcfilters.ui.MarkSeenButtonWidget( controller, changesListModel );
+
+		$topTable = $( '<div>' )
+			.addClass( 'mw-rcfilters-ui-table' )
+			.append(
+				$( '<div>' )
+					.addClass( 'mw-rcfilters-ui-row' )
+					.append(
+						$( '<div>' )
+							.addClass( 'mw-rcfilters-ui-cell' )
+							.addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-watchlistDetails' )
+							.append( $watchlistDetails )
+					)
+					.append(
+						$( '<div>' )
+							.addClass( 'mw-rcfilters-ui-cell' )
+							.addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton' )
+							.append( editWatchlistButton.$element )
+					)
+			);
+
+		$bottomTable = $( '<div>' )
+			.addClass( 'mw-rcfilters-ui-table' )
+			.addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable' )
+			.append(
+				$( '<div>' )
+					.addClass( 'mw-rcfilters-ui-row' )
+					.append(
+						$( '<div>' )
+							.addClass( 'mw-rcfilters-ui-cell' )
+							.append( markSeenButton.$element )
+					)
+					.append(
+						$( '<div>' )
+							.addClass( 'mw-rcfilters-ui-cell' )
+							.addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-savedLinks' )
+							.append( savedLinksListWidget.$element )
+					)
+			);
+
+		$separator = $( '<div>' )
+			.addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-separator' );
+
+		this.$element
+			.addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget' )
+			.append( $topTable, $separator, $bottomTable );
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.rcfilters.ui.WatchlistTopSectionWidget, OO.ui.Widget );
+}( mediaWiki ) );