feat: consolidate "help" elements into help menu

.turbo/daemon/759b514fb2013120-turbo.log.2024-12-20

@@ -0,0 +1,2 @@
+2024-12-20T19:43:09.183783Z  WARN daemon_server: turborepo_lib::commands::daemon: daemon already running
+2024-12-20T19:44:53.433895Z  INFO turborepo_lib::daemon::server: triggering shutdown

apps/antalmanac/src/components/HelpMenu.tsx

@@ -0,0 +1,132 @@
+import FeedbackIcon from '@mui/icons-material/Feedback';
+import HelpIcon from '@mui/icons-material/Help';
+import LightbulbIcon from '@mui/icons-material/Lightbulb';
+import { Fab, Tooltip, Box, IconButton, Paper } from '@mui/material';
+import { useState } from 'react';
+
+import HelpBox from '$components/RightPane/CoursePane/SearchForm/HelpBox';
+import { Tutorial } from '$components/Tutorial';
+import Feedback from '$routes/Feedback';
+
+export function HelpMenu() {
+    const [isHovered, setIsHovered] = useState(false);
+    const [showHelpBox, setShowHelpBox] = useState(false);
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
+    const openFeedbackForm = () => {
+        Feedback();
+    };
+
+    const openHelpBox = () => {
+        setShowHelpBox(true);
+    };
+
+    const closeHelpBox = () => {
+        setShowHelpBox(false);
+    };
+
+    return (
+        <Box
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            sx={{
+                position: 'fixed',
+                bottom: '6rem',
+                right: '1rem',
+                zIndex: 999,
+            }}
+        >
+            {/* Main Help Menu Icon */}
+            <Tooltip title="Help Menu">
+                <Fab
+                    color="primary"
+                    aria-label="Help Menu"
+                    sx={{
+                        width: '4rem',
+                        height: '4rem',
+                        position: 'relative',
+                        transition: 'all 0.3s',
+                    }}
+                >
+                    <LightbulbIcon />
+                </Fab>
+            </Tooltip>
+
+            {/* Hovered Icons */}
+            {isHovered && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        bottom: '5rem',
+                        right: 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        gap: '0.5rem',
+                        transition: 'opacity 0.3s',
+                    }}
+                >
+                    {/* Tutorial Button */}
+                    <Tutorial />
+
+                    {/* Feedback Form Button */}
+                    <Tooltip title="Feedback Form">
+                        <IconButton
+                            color="primary"
+                            onClick={openFeedbackForm}
+                            size="large"
+                            sx={{
+                                backgroundColor: '#fff',
+                                ':hover': { backgroundColor: '#e0f7fa' },
+                            }}
+                        >
+                            <FeedbackIcon />
+                        </IconButton>
+                    </Tooltip>
+
+                    {/* Help Box Button */}
+                    <Tooltip title="Help Box">
+                        <IconButton
+                            color="primary"
+                            onClick={openHelpBox}
+                            size="large"
+                            sx={{
+                                backgroundColor: '#fff',
+                                ':hover': { backgroundColor: '#e0f7fa' },
+                            }}
+                        >
+                            <HelpIcon />
+                        </IconButton>
+                    </Tooltip>
+                </Box>
+            )}
+
+            {showHelpBox && (
+                <Box
+                    sx={{
+                        position: 'fixed',
+                        right: '1rem',
+                        bottom: '5rem',
+                        width: '50%',
+                        height: 'auto',
+                        zIndex: 1000,
+                        overflow: 'auto',
+                    }}
+                >
+                    <Paper variant="outlined" sx={{ padding: 2, boxShadow: 3 }}>
+                        <HelpBox onDismiss={closeHelpBox} />
+                    </Paper>
+                </Box>
+            )}
+        </Box>
+    );
+}
+
+export default HelpMenu;

apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/SearchForm.tsx

@@ -12,6 +12,7 @@ import LegacySearch from './LegacySearch';
 import PrivacyPolicyBanner from './PrivacyPolicyBanner';
 import TermSelector from './TermSelector';
 
+import { HelpMenu } from '$components/HelpMenu';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
 import { getLocalStorageHelpBoxDismissalTime, setLocalStorageHelpBoxDismissalTime } from '$lib/localStorage';
 import { useCoursePaneStore } from '$stores/CoursePaneStore';
@@ -115,6 +116,8 @@ const SearchForm = (props: { classes: ClassNameMap; toggleSearch: () => void })
 
             {displayHelpBox && <HelpBox onDismiss={onHelpBoxDismiss} />}
             <PrivacyPolicyBanner />
+
+            <HelpMenu />
         </div>
     );
 };

apps/antalmanac/src/components/Tutorial.tsx

@@ -1,5 +1,5 @@
 import ReplayIcon from '@mui/icons-material/Replay';
-import { Fab, Tooltip } from '@mui/material';
+import { Fab, Tooltip, IconButton } from '@mui/material';
 import { useTour } from '@reactour/tour';
 import { useEffect, useMemo } from 'react';
 
@@ -41,23 +41,17 @@ export function Tutorial() {
     /** Floating action button (FAB) in the bottom right corner to reactivate the tutorial */
     return (
         <Tooltip title="Restart tutorial">
-            <Fab
-                id="tutorial-floater"
+            <IconButton
                 color="primary"
-                aria-label="Restart tutorial"
                 onClick={() => restartTour()}
-                style={{
-                    position: 'fixed',
-                    bottom: '1rem',
-                    right: '1rem',
-                    zIndex: 999,
-                    opacity: 0.5,
-                    width: '4rem',
-                    height: '4rem',
+                size="large"
+                sx={{
+                    backgroundColor: '#fff',
+                    ':hover': { backgroundColor: '#e0f7fa' },
                 }}
             >
                 <ReplayIcon />
-            </Fab>
+            </IconButton>
         </Tooltip>
     );
 }

apps/antalmanac/src/routes/Feedback.tsx

@@ -1,6 +1,6 @@
 export const FEEDBACK_LINK = 'https://form.asana.com/?k=fZ3SGnuGknDmzTYdocgIUg&d=1208267282546207';
 
 export default function Feedback() {
-    window.location.replace(FEEDBACK_LINK);
+    window.open(FEEDBACK_LINK, '_blank');
     return null;
-}
+}

apps/antalmanac/src/routes/Home.tsx

@@ -6,6 +6,7 @@ import Split from 'react-split';
 
 import { ScheduleCalendar } from '$components/Calendar/CalendarRoot';
 import Header from '$components/Header';
+import { HelpMenu } from '$components/HelpMenu';
 import NotificationSnackbar from '$components/NotificationSnackbar';
 import PatchNotes from '$components/PatchNotes';
 import ScheduleManagement from '$components/SharedRoot';
@@ -77,8 +78,6 @@ function DesktopHome() {
                     </Stack>
                 </Split>
             </Stack>
-
-            <Tutorial />
         </>
     );
 }