Update Timeline

resources/assets/js/components/Timeline.vue

@@ -220,10 +220,12 @@
 					<notification-card></notification-card>
 				</div>
 
-				<div v-show="suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
+				<div v-show="showSuggestions == true && suggestions.length && config.ab && config.ab.rec == true" class="mb-4">
 					<div class="card">
-						<div class="card-header bg-white text-center">
+						<div class="card-header bg-white d-flex align-items-center justify-content-between">
+							<div></div>
 							<div class="small text-dark text-uppercase font-weight-bold">Suggestions</div>
+							<div class="small text-muted cursor-pointer" v-on:click="hideSuggestions"><i class="fas fa-times"></i></div>
 						</div>
 						<div class="card-body pt-0">
 							<div v-for="(rec, index) in suggestions" class="media align-items-center mt-3">
@@ -386,7 +388,8 @@
 				following: [],
 				followingCursor: 1,
 				followingMore: true,
-				lightboxMedia: false
+				lightboxMedia: false,
+				showSuggestions: false
 			}
 		},
 
@@ -406,6 +409,12 @@
 				this.modes.dark = true;
 			}
 
+			if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
+				this.showSuggestions = false;
+			} else {
+				this.showSuggestions = true;
+			}
+
 			this.$nextTick(function () {
 				$('[data-toggle="tooltip"]').tooltip()
 			});
@@ -1006,6 +1015,11 @@
 
 			ownerOrAdmin(status) {
 				return this.owner(status) || this.admin();
+			},
+
+			hideSuggestions() {
+				localStorage.setItem('pf_metro_ui.exp.rec', false);
+				this.showSuggestions = false;
 			}
 		}
 	}

resources/views/settings/labs.blade.php

@@ -38,6 +38,15 @@
 			</label>
 			<p class="text-muted small help-text">Use dark mode theme.</p>
 		</div>
+		@if(config('exp.rec') == true)
+		<div class="form-check pb-3">
+			<input class="form-check-input" type="checkbox" name="show_suggestions" id="show_suggestions">
+			<label class="form-check-label font-weight-bold" for="show_suggestions">
+				{{__('Profile Suggestions')}}
+			</label>
+			<p class="text-muted small help-text">Show Profile Suggestions</p>
+		</div>
+		@endif
 		<div class="py-3">
 			<p class="font-weight-bold text-muted text-center">Discovery</p>
 			<hr>
@@ -58,4 +67,24 @@
 			</div>
 		</div>
 	</form>
-	@endsection
+	@endsection
+
+@push('scripts')
+<script type="text/javascript">
+$(document).ready(function() {
+	let showSuggestions = localStorage.getItem('pf_metro_ui.exp.rec') == 'false' ? false : true;
+
+	if(showSuggestions == true) {
+		$('#show_suggestions').attr('checked', true);
+	}
+
+	$('#show_suggestions').on('change', function(e) {
+		if(e.target.checked) {
+			localStorage.removeItem('pf_metro_ui.exp.rec');
+		} else {
+			localStorage.setItem('pf_metro_ui.exp.rec', false);
+		}
+	})
+});
+</script>
+@endpush