Change strategy to store selected label; improve the history toolbar layout to accomodate larger labels; fix issues with layout not being updated when changing history view modes.

services/web/app/views/project/editor/history/entriesListV2.pug

@@ -20,6 +20,7 @@ aside.change-list(
 		current-user="user"
 		users="projectUsers"
 		is-loading="history.loading"
+		selected-label="history.selection.label"
 		on-label-select="handleLabelSelect(label)"
 		on-label-delete="handleLabelDelete(label)"
 	)
@@ -209,7 +210,7 @@ script(type="text/ng-template", id="historyLabelsListTpl")
 		.history-entry-label(
 			ng-repeat="label in $ctrl.labels track by label.id"
 			ng-click="$ctrl.onLabelSelect({ label: label })"
-			ng-class="{ 'history-entry-label-selected': label.selected }" 
+			ng-class="{ 'history-entry-label-selected': label.id === $ctrl.selectedLabel.id }" 
 		)
 			history-label(
 				show-tooltip="false"

services/web/app/views/project/editor/history/toolbarV2.pug

@@ -2,24 +2,31 @@
 	ng-controller="HistoryV2ToolbarController"
 	ng-if="ui.view == 'history' && history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME"
 )
-	span(ng-show="history.loadingFileTree")
+	span.history-toolbar-selected-version(ng-show="history.loadingFileTree")
 		i.fa.fa-spin.fa-refresh
 		|    #{translate("loading")}...
-	span(ng-show="!history.loadingFileTree") #{translate("browsing_project_as_of")} 
+	span.history-toolbar-selected-version(
+		ng-show="!history.loadingFileTree && !history.showOnlyLabels"
+	) #{translate("browsing_project_as_of")} 
 		time.history-toolbar-time {{ history.selection.updates[0].meta.end_ts | formatDate:'Do MMM YYYY, h:mm a' }}
-	button.history-toolbar-btn(
-		ng-click="showAddLabelDialog();"
-		ng-if="!history.showOnlyLabels"
-		ng-disabled="history.loadingFileTree"
-	) 
-		i.fa.fa-tag
-		|  #{translate("history_label_this_version")}
-	button.history-toolbar-btn(
-		ng-click="toggleHistoryViewMode();"
-		ng-disabled="history.loadingFileTree"
-	) 
-		i.fa.fa-exchange
-		|  #{translate("compare_to_another_version")}
+	span.history-toolbar-selected-version(
+		ng-show="!history.loadingFileTree && history.showOnlyLabels && history.selection.label"
+	) Browsing project version labelled 
+		span.history-toolbar-selected-label "{{ history.selection.label.comment }}"
+	div.history-toolbar-actions
+		button.history-toolbar-btn(
+			ng-click="showAddLabelDialog();"
+			ng-if="!history.showOnlyLabels"
+			ng-disabled="history.loadingFileTree"
+		) 
+			i.fa.fa-tag
+			|  #{translate("history_label_this_version")}
+		button.history-toolbar-btn(
+			ng-click="toggleHistoryViewMode();"
+			ng-disabled="history.loadingFileTree"
+		) 
+			i.fa.fa-exchange
+			|  #{translate("compare_to_another_version")}
 
 	.history-toolbar-entries-list
 		toggle-switch(

services/web/public/coffee/ide/history/HistoryV2Manager.coffee

@@ -38,6 +38,9 @@ define [
 				else
 					@reset()
 					@$scope.history.viewMode = HistoryViewModes.COMPARE
+				@ide.$timeout () =>
+					@$scope.$broadcast "history:toggle"
+				, 0
 
 			@$scope.$watch "history.selection.updates", (updates) =>
 				if @$scope.history.viewMode == HistoryViewModes.COMPARE
@@ -57,6 +60,7 @@ define [
 					if showOnlyLabels
 						@selectedLabelFromUpdatesSelection()
 					else
+						@$scope.history.selection.label = null
 						if @$scope.history.selection.updates.length == 0
 							@autoSelectLastUpdate()
 
@@ -79,6 +83,7 @@ define [
 				nextBeforeTimestamp: null
 				atEnd: false
 				selection: {
+					label: null
 					updates: []
 					docs: {}
 					pathname: null
@@ -166,21 +171,17 @@ define [
 				
 		selectLabel: (labelToSelect) ->
 			updateToSelect = null
-			alreadySelected = false
+
+			if @_isLabelSelected labelToSelect
+				# Label already selected
+				return
+
 			for update in @$scope.history.updates
 				if update.toV == labelToSelect.version
 					updateToSelect = update
 					break
 
-			for label in @$scope.history.labels
-				matchingLabel = (labelToSelect.id == label.id)
-				if matchingLabel and label.selected
-					alreadySelected = true
-				label.selected = matchingLabel
-
-			if alreadySelected
-				return
-
+			@$scope.history.selection.label = labelToSelect
 			if updateToSelect?
 				@selectUpdate updateToSelect
 			else
@@ -241,10 +242,9 @@ define [
 			pathname = @$scope.history.selection.pathname
 			if @$scope.history.selection.updates?[0]?
 				toV = @$scope.history.selection.updates[0].toV
-			else
-				for label in @$scope.history.labels or []
-					if label.selected
-						toV = label.version
+			else if @$scope.history.selection.label?
+				toV = @$scope.history.selection.label.version
+
 			if !toV?
 				return
 			url = "/project/#{@$scope.project_id}/diff"
@@ -316,6 +316,9 @@ define [
 			}).then (response) =>
 				@_deleteLabelLocally label
 
+		_isLabelSelected: (label) ->
+			label.id == @$scope.history.selection.label?.id
+
 		_deleteLabelLocally: (labelToDelete) ->
 			for update, i in @$scope.history.updates
 				if update.toV == labelToDelete.version

services/web/public/coffee/ide/history/components/historyLabelsList.coffee

@@ -16,7 +16,7 @@ define [
 		ctrl.getUserCSSStyle = (user, label) ->
 			curUserId = user?._id or user?.id
 			hue = ColorManager.getHueForUserId(curUserId) or 100
-			if label.selected
+			if label.id == ctrl.selectedLabel?.id
 				color : "#FFF" 
 			else 
 				color: "hsl(#{ hue }, 70%, 50%)"
@@ -28,6 +28,7 @@ define [
 			users: "<"
 			currentUser: "<"
 			isLoading: "<"
+			selectedLabel: "<"
 			onLabelSelect: "&"
 			onLabelDelete: "&"
 		controller: historyLabelsListController

services/web/public/stylesheets/app/editor/history-v2.less

@@ -15,22 +15,28 @@
 .history-toolbar when (@is-overleaf = false) {
 	border-bottom: @toolbar-border-bottom;
 }
-	.history-toolbar-time {
-		font-weight: bold;
+	.history-toolbar-selected-version {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
-	.history-toolbar-btn {
-		.btn;
-		.btn-info;
-		.btn-xs;
-		padding-left: @padding-small-horizontal;
-		padding-right: @padding-small-horizontal;
-		margin-left: (@line-height-computed / 2);
+		.history-toolbar-time,
+		.history-toolbar-selected-label {
+			font-weight: bold;
+		}
+	.history-toolbar-actions {
+		flex-grow: 1;
 	}
-
+		.history-toolbar-btn {
+			.btn;
+			.btn-info;
+			.btn-xs;
+			padding-left: @padding-small-horizontal;
+			padding-right: @padding-small-horizontal;
+			margin-left: (@line-height-computed / 2);
+		}
 	.history-toolbar-entries-list {
-		position: absolute; 
-		right: 0;
-		width: @changesListWidth;
+		flex: 0 0 @changesListWidth;
 		padding: 0 10px;
 		border-left: 1px solid @editor-border-color;
 	}