From df9c3adff60294ee4e0cfd58ee4a05e816ba9f68 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Mon, 14 Dec 2020 00:49:45 -0700
Subject: [PATCH] Update Timeline, remove simple mode and set labs deprecation
 date

---
 .../Controllers/Settings/LabsSettings.php     |   5 +-
 resources/assets/js/components/Timeline.vue   |  19 +-
 resources/views/settings/labs.blade.php       | 366 +++++++++---------
 .../site/help/labs-deprecation.blade.php      |   6 +-
 4 files changed, 193 insertions(+), 203 deletions(-)

diff --git a/app/Http/Controllers/Settings/LabsSettings.php b/app/Http/Controllers/Settings/LabsSettings.php
index b18045dcb..6aa08b785 100644
--- a/app/Http/Controllers/Settings/LabsSettings.php
+++ b/app/Http/Controllers/Settings/LabsSettings.php
@@ -41,10 +41,7 @@ trait LabsSettings {
 		}
 
 		if($request->has('profile_layout')) {
-			if($profile->profile_layout != 'moment') {
-				$profile->profile_layout = 'moment';
-				$changes = true;
-			} 
+			
 		} else {
 			$profile->profile_layout = null;
 			$changes = true;
diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index 62d555940..a185005ab 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -23,7 +23,7 @@
 			</div>
 			<hr>
 		</div>
-		<div :class="[modes.distractionFree ? 'col-md-8 col-lg-8 offset-md-2 px-0 mb-sm-3 timeline order-2 order-md-1':'col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1']">
+		<div class="col-md-8 col-lg-8 px-0 mb-sm-3 timeline order-2 order-md-1">
 			<div style="margin-top:-2px;">
 				<story-component v-if="config.features.stories"></story-component>
 			</div>
@@ -96,7 +96,7 @@
 					</div>
 
 					<div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
-						<div v-if="!modes.distractionFree && status" class="card-header d-inline-flex align-items-center bg-white">
+						<div v-if="status" class="card-header d-inline-flex align-items-center bg-white">
 							<!-- <img v-bind:src="status.account.avatar" width="38px" height="38px" class="cursor-pointer" style="border-radius: 38px;" @click="profileUrl(status)" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> -->
 							<!-- <div v-if="hasStory" class="has-story has-story-sm cursor-pointer shadow-sm" @click="profileUrl(status)">
 								<img class="rounded-circle box-shadow" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
@@ -162,7 +162,7 @@
 						</div>
 
 						<div class="card-body">
-							<div v-if="!modes.distractionFree" class="reactions my-1 pb-2">
+							<div class="reactions my-1 pb-2">
 								<h3 v-if="status.favourited" class="fas fa-heart text-danger pr-3 m-0 cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
 								<h3 v-else class="far fa-heart pr-3 m-0 like-btn text-lighter cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
 								<h3 v-if="!status.comments_disabled" class="far fa-comment text-lighter pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
@@ -180,7 +180,7 @@
 								</span>
 							</div>
 
-							<div class="likes font-weight-bold" v-if="expLc(status) == true && !modes.distractionFree">
+							<div class="likes font-weight-bold" v-if="expLc(status) == true">
 								<span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
 							</div>
 							<div class="caption">
@@ -213,9 +213,6 @@
 									<a :href="statusUrl(status)" class="text-muted">
 										<timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
 									</a>
-									<a v-if="modes.distractionFree" class="float-right" :href="status.url">
-										<i class="fas fa-ellipsis-h fa-lg text-muted"></i>
-									</a>
 								</p>
 							</div>
 						</div>
@@ -257,7 +254,7 @@
 			</div>
 		</div>
 
-		<div v-if="!modes.distractionFree" class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
+		<div class="col-md-4 col-lg-4 my-4 order-1 order-md-2 d-none d-md-block">
 			<div>
 
 				<!-- <div class="mb-4">
@@ -755,12 +752,6 @@
 				this.showReadMore = true;
 			}
 
-			if(localStorage.getItem('pf_metro_ui.exp.df') == 'true') {
-				this.modes.distractionFree = true;
-			} else {
-				this.modes.distractionFree = false;
-			}
-
 			if(localStorage.getItem('metro-tips') == 'false') {
 				this.showTips = false;
 			}
diff --git a/resources/views/settings/labs.blade.php b/resources/views/settings/labs.blade.php
index 9a74b1b9f..c20987f8b 100644
--- a/resources/views/settings/labs.blade.php
+++ b/resources/views/settings/labs.blade.php
@@ -6,9 +6,6 @@
 		<p class="lead">Experimental features</p>
 	</div>
 	<hr>
-	<div class="alert alert-primary px-3 h6 text-center">
-		<strong>Warning:</strong> Some experimental features may contain bugs or missing functionality
-	</div>
 	<div class="alert alert-warning px-3 h6">
 		We are deprecating Labs in a future version. Some features will no longer be supported. For more information, click <a href="{{route('help.labs-deprecation')}}" class="font-weight-bold">here</a>.
 	</div>
@@ -18,190 +15,192 @@
 	</div>
 	<form method="post">
 		@csrf
-		@if(config('exp.lc') == true)
-		<div class="form-check pb-3">
-			<input class="form-check-input" type="checkbox" checked disabled>
-			<label class="form-check-label font-weight-bold">
-				{{__('Hidden like counts on Timelines')}}
-			</label>
-			<p class="text-muted small help-text">Like counts are hidden on timelines. This experiment was enabled for all users and can only be changed by the instance administrator.</p>
-		</div>
-		@endif
-		<div class="form-check pb-3">
-			<input class="form-check-input" type="checkbox" name="profile_layout" id="profile_layout" {{$profile->profile_layout == 'moment' ? 'checked':''}} value="{{$profile->profile_layout}}">
-			<label class="form-check-label font-weight-bold" for="profile_layout">
-				{{__('Use MomentUI for posts and your profile')}}
-			</label>
-			<p class="text-muted small help-text">MomentUI offers an alternative layout for posts and your profile.</p>
-		</div>
-		@if($profile->profile_layout == 'moment')
-		<div class="form-check pb-3">
-			<label class="form-check-label font-weight-bold mb-3" for="profile_layout">
-				{{__('MomentUI Profile Header Color')}}
-			</label>
-			<div class="row">
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-pixelfed rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Default</p>
-						<input class="form-check-input mx-0 pl-0" type="radio" name="moment_bg" value="default" {{$profile->header_bg == 'default' || !$profile->header_bg ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-azure rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Azure</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="azure" {{$profile->header_bg == 'azure' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-passion rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Passion</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="passion" {{$profile->header_bg == 'passion' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-reef rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Reef</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="reef" {{$profile->header_bg == 'reef' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-lush rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Lush</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="lush" {{$profile->header_bg == 'lush' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-neon rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Neon</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="neon" {{$profile->header_bg == 'neon' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-flare rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Flare</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="flare" {{$profile->header_bg == 'flare' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-morning rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Morning</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="morning" {{$profile->header_bg == 'morning' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-tranquil rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Tranquil</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="tranquil" {{$profile->header_bg == 'tranquil' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-mauve rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Mauve</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="mauve" {{$profile->header_bg == 'mauve' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-argon rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Argon</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="argon" {{$profile->header_bg == 'argon' ? 'checked':''}}>
-					</div>
-				</div>
-				<div class="col-6 col-sm-3 pb-5">
-					<div class="">
-						<p class="form-check-label">
-							<div class="bg-moment-royal rounded-circle box-shadow" style="width:60px; height:60px"></div>
-						</p>
-						<p class="mb-0 small text-muted">Royal</p>
-						<input class="form-check-input mx-0" type="radio" name="moment_bg" value="royal" {{$profile->header_bg == 'royal' ? 'checked':''}}>
-					</div>
-				</div>
-			</div>
-			<p class="text-muted small help-text">Set your MomentUI profile background color. Adding a custom header image will be supported in a future version.</p>
-		</div>
-		@endif
 		<div class="form-check pb-3">
 			<input class="form-check-input" type="checkbox" name="dark_mode" id="dark_mode" {{request()->hasCookie('dark-mode') ? 'checked':''}}>
 			<label class="form-check-label font-weight-bold" for="dark_mode">
-				{{__('MetroUI Dark Mode')}}
+				{{__('Dark Mode')}}
 			</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="form-check pb-3">
-			<input class="form-check-input" type="checkbox" name="show_readmore" id="show_readmore">
-			<label class="form-check-label font-weight-bold" for="show_readmore">
-				{{__('Use Read More')}}
-			</label>
-			<p class="text-muted small help-text">Collapses captions/comments more than 3 lines.</p>
-		</div>
-		<div class="form-check pb-3">
-			<input class="form-check-input" type="checkbox" id="distraction_free">
-			<label class="form-check-label font-weight-bold">Simple Mode (Timelines only)</label>
-			<p class="text-muted small help-text">An experimental content-first timeline layout</p>
-		</div>
-		<div class="form-check pb-3">
-			<input class="form-check-input" type="checkbox" id="show_tips">
-			<label class="form-check-label font-weight-bold">Show Announcements</label>
-			<p class="text-muted small help-text">Show Announcements on Timelines (Desktop Only)</p>
-		</div>
-		<div class="form-check pb-3">
-			<input class="form-check-input" type="checkbox" id="force_metro">
-			<label class="form-check-label font-weight-bold">Force Metro Layout</label>
-			<p class="text-muted small help-text">Force MetroUI layout for profiles and posts.</p>
-		</div>
-		<div class="py-3">
-			<p class="font-weight-bold text-muted text-center">Discovery</p>
-			<hr>
-		</div>
-		@if(config('exp.rec') == true)
-		<div class="form-check pb-3">
-			<input class="form-check-input" type="checkbox" name="profile_suggestions" id="profile_suggestions" {{$profile->is_suggestable ? 'checked' : ''}}>
-			<label class="form-check-label font-weight-bold" for="profile_suggestions">
-				{{__('Visible on Profile Suggestions')}}
-			</label>
-			<p class="text-muted small help-text">Allow your profile to be listed in Profile Suggestions.</p>
-		</div>
+		@if(!now()->gt(now()->parse('2021-06-14 07:22:46')))
+			@if($profile->profile_layout == 'moment')
+			<div class="form-check pb-3">
+				<input class="form-check-input" type="checkbox" name="profile_layout" id="profile_layout" {{$profile->profile_layout == 'moment' ? 'checked':''}} value="{{$profile->profile_layout}}">
+				<label class="form-check-label font-weight-bold" for="profile_layout">
+					{{__('Use MomentUI for posts and your profile')}}
+				</label>
+				<p class="text-muted small help-text">MomentUI offers an alternative layout for posts and your profile.</p>
+			</div>
+			<div class="form-check pb-3">
+				<label class="form-check-label font-weight-bold mb-3" for="profile_layout">
+					{{__('MomentUI Profile Header Color')}}
+				</label>
+				<div class="row">
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-pixelfed rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Default</p>
+							<input class="form-check-input mx-0 pl-0" type="radio" name="moment_bg" value="default" {{$profile->header_bg == 'default' || !$profile->header_bg ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-azure rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Azure</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="azure" {{$profile->header_bg == 'azure' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-passion rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Passion</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="passion" {{$profile->header_bg == 'passion' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-reef rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Reef</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="reef" {{$profile->header_bg == 'reef' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-lush rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Lush</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="lush" {{$profile->header_bg == 'lush' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-neon rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Neon</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="neon" {{$profile->header_bg == 'neon' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-flare rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Flare</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="flare" {{$profile->header_bg == 'flare' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-morning rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Morning</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="morning" {{$profile->header_bg == 'morning' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-tranquil rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Tranquil</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="tranquil" {{$profile->header_bg == 'tranquil' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-mauve rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Mauve</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="mauve" {{$profile->header_bg == 'mauve' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-argon rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Argon</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="argon" {{$profile->header_bg == 'argon' ? 'checked':''}}>
+						</div>
+					</div>
+					<div class="col-6 col-sm-3 pb-5">
+						<div class="">
+							<p class="form-check-label">
+								<div class="bg-moment-royal rounded-circle box-shadow" style="width:60px; height:60px"></div>
+							</p>
+							<p class="mb-0 small text-muted">Royal</p>
+							<input class="form-check-input mx-0" type="radio" name="moment_bg" value="royal" {{$profile->header_bg == 'royal' ? 'checked':''}}>
+						</div>
+					</div>
+				</div>
+				<p class="text-muted small help-text">Set your MomentUI profile background color. Adding a custom header image will be supported in a future version.</p>
+			</div>
+			@else
+			<div class="form-check pb-3">
+				<input class="form-check-input" type="checkbox" name="profile_layout" id="profile_layout" {{$profile->profile_layout == 'moment' ? 'checked':''}} value="{{$profile->profile_layout}}" disabled>
+				<label class="form-check-label font-weight-bold" for="profile_layout">
+					{{__('Use MomentUI for posts and your profile')}}
+				</label>
+				<p class="text-muted small help-text"><span class="badge badge-secondary">DEPRECATED</span> MomentUI offers an alternative layout for posts and your profile.</p>
+			</div>
+			@endif
+			
+			@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="form-check pb-3">
+				<input class="form-check-input" type="checkbox" name="show_readmore" id="show_readmore">
+				<label class="form-check-label font-weight-bold" for="show_readmore">
+					{{__('Use Read More')}}
+				</label>
+				<p class="text-muted small help-text">Collapses captions/comments more than 3 lines.</p>
+			</div>
+			<div class="form-check pb-3">
+				<input class="form-check-input" type="checkbox" id="distraction_free" disabled>
+				<label class="form-check-label font-weight-bold">Simple Mode (Timelines only)</label>
+				<p class="text-muted small help-text"><span class="badge badge-secondary">REMOVED</span> An experimental content-first timeline layout</p>
+			</div>
+			<div class="form-check pb-3">
+				<input class="form-check-input" type="checkbox" id="show_tips">
+				<label class="form-check-label font-weight-bold">Show Announcements</label>
+				<p class="text-muted small help-text">Show Announcements on Timelines (Desktop Only)</p>
+			</div>
+			<div class="form-check pb-3">
+				<input class="form-check-input" type="checkbox" id="force_metro">
+				<label class="form-check-label font-weight-bold">Force Metro Layout</label>
+				<p class="text-muted small help-text">Force MetroUI layout for profiles and posts.</p>
+			</div>
+			@if(config('exp.rec') == true)
+			<div class="py-3">
+				<p class="font-weight-bold text-muted text-center">Discovery</p>
+				<hr>
+			</div>
+			<div class="form-check pb-3">
+				<input class="form-check-input" type="checkbox" name="profile_suggestions" id="profile_suggestions" {{$profile->is_suggestable ? 'checked' : ''}}>
+				<label class="form-check-label font-weight-bold" for="profile_suggestions">
+					{{__('Visible on Profile Suggestions')}}
+				</label>
+				<p class="text-muted small help-text">Allow your profile to be listed in Profile Suggestions.</p>
+			</div>
+			@endif
 		@endif
 		<div class="form-group row">
 			<div class="col-12">
@@ -213,6 +212,8 @@
 	@endsection
 
 @push('scripts')
+
+@if(!now()->gt(now()->parse('2021-06-14 07:22:46')))
 <script type="text/javascript">
 $(document).ready(function() {
 	let showSuggestions = localStorage.getItem('pf_metro_ui.exp.rec') == 'false' ? false : true;
@@ -229,7 +230,7 @@ $(document).ready(function() {
 	}
 
 	if(distractionFree == true) {
-		$('#distraction_free').attr('checked', true);
+		localStorage.removeItem('pf_metro_ui.exp.df');
 	}
 
 	if(localStorage.getItem('metro-tips') !== 'false') {
@@ -281,4 +282,5 @@ $(document).ready(function() {
 	})
 });
 </script>
+@endif
 @endpush
\ No newline at end of file
diff --git a/resources/views/site/help/labs-deprecation.blade.php b/resources/views/site/help/labs-deprecation.blade.php
index 65f792200..7b3964ec2 100644
--- a/resources/views/site/help/labs-deprecation.blade.php
+++ b/resources/views/site/help/labs-deprecation.blade.php
@@ -9,13 +9,13 @@
   <p class="lead">We are deprecating Labs in a future version. No new experiments will be released. We will give 6 months notice before removing Labs.</p>
   <hr>
   <h4 class="font-weight-bold">When will labs be deprecated?</h4>
-  <p>TBA</p>
+  <p>June 14 2021</p>
   <hr>
   <h4 class="font-weight-bold">What features will be deprecated?</h4>
-  <p>TBA</p>
+  <p>All features except Dark Mode</p>
   <hr>
   <h4 class="font-weight-bold">Why is Labs being deprecated?</h4>
   <p>Labs was started in early 2019 to test experimental designs and features. Now the project is more mature, we are outgrowing some of these experiments.</p>
   <hr>
-  <p class="small">Last Updated: April 10/2020</p>
+  <p class="small">Last Updated: Dec 14 2020</p>
 @endsection
\ No newline at end of file