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

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} />

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;
+    }
+  }
 }