From 0ae9dfd6321498b2d883dfb920815b911d8ba010 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 16 Dec 2024 09:29:01 +0000
Subject: [PATCH] Show full edit/review mode dropdown on first load (#22465)

* Show full edit/review mode dropdown on first load

* Remove unneeded import

* rename localstorage value, inline event

---------

Co-authored-by: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
GitOrigin-RevId: 7efb52d4b43588dd1ee8b7a6a5f703166b0c9b3a
---
 .../components/review-mode-switcher.tsx           | 15 +++++++++++++--
 .../pages/editor/review-panel-new.scss            |  6 ++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx b/services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx
index c386655384..8d2e2a9237 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-mode-switcher.tsx
@@ -14,6 +14,7 @@ import {
 import { useUserContext } from '@/shared/context/user-context'
 import { useTranslation } from 'react-i18next'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import usePersistedState from '@/shared/hooks/use-persisted-state'
 
 type Mode = 'viewing' | 'reviewing' | 'editing'
 
@@ -144,11 +145,21 @@ const ModeSwitcherToggleButtonContent = forwardRef<
     ariaExpanded: boolean
   }
 >(({ onClick, className, iconType, label, ariaExpanded }, ref) => {
+  const [isFirstTimeUsed, setIsFirstTimeUsed] = usePersistedState(
+    `modeSwitcherFirstTimeUsed`,
+    true
+  )
+
   return (
     <button
-      className={classNames('review-mode-switcher-toggle-button', className)}
+      className={classNames('review-mode-switcher-toggle-button', className, {
+        'review-mode-switcher-toggle-button-expanded': isFirstTimeUsed,
+      })}
       ref={ref}
-      onClick={onClick}
+      onClick={event => {
+        setIsFirstTimeUsed(false)
+        onClick(event)
+      }}
       aria-expanded={ariaExpanded}
     >
       <MaterialIcon className="material-symbols-outlined" type={iconType} />
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
index 9803329db7..2b975e79c0 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
@@ -839,4 +839,10 @@
   .review-mode-switcher-toggle-label {
     display: none;
   }
+
+  &.review-mode-switcher-toggle-button-expanded {
+    .review-mode-switcher-toggle-label {
+      display: block;
+    }
+  }
 }