From 3a32cbf974a9a6c81d1d9dc5bd6702421ce65e6b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 25 Oct 2023 17:07:00 +0800
Subject: [PATCH] Test full width for first load of status page

---
 src/pages/status.jsx | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 0497f6ba..d4b6c4d3 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -168,7 +168,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const mediaParam = searchParams.get('media');
   const showMedia = parseInt(mediaParam, 10) > 0;
-  const [viewMode, setViewMode] = useState(searchParams.get('view'));
+  const firstLoad = useRef(!states.prevLocation);
+  const [viewMode, setViewMode] = useState(
+    searchParams.get('view') || firstLoad.current ? 'full' : null,
+  );
   const translate = !!parseInt(searchParams.get('translate'));
   const { masto, instance } = api({ instance: propInstance });
   const {
@@ -839,9 +842,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       ref={scrollableRef}
       class={`status-deck deck contained ${
         statuses.length > 1 ? 'padded-bottom' : ''
-      } ${initialPageState.current === 'status' ? 'slide-in' : ''} ${
-        viewMode ? `deck-view-${viewMode}` : ''
-      }`}
+      } ${
+        initialPageState.current === 'status' && !firstLoad.current
+          ? 'slide-in'
+          : ''
+      } ${viewMode ? `deck-view-${viewMode}` : ''}`}
       onAnimationEnd={(e) => {
         // Fix the bounce effect when switching viewMode
         // `slide-in` animation kicks in when switching viewMode
@@ -959,6 +964,23 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             )}
           </h1>
           <div class="header-side">
+            <button
+              type="button"
+              class="plain4"
+              style={{
+                display: viewMode === 'full' ? '' : 'none',
+              }}
+              onClick={() => {
+                setViewMode(null);
+                searchParams.delete('media');
+                searchParams.delete('media-only');
+                searchParams.delete('view');
+                setSearchParams(searchParams);
+              }}
+              title="Switch to Side Peek view"
+            >
+              <Icon icon="layout4" size="l" />
+            </button>
             <Menu
               align="end"
               portal={{