From 277ee70106907333583ecf7947a3b43aa70ef35d Mon Sep 17 00:00:00 2001
From: Arden Weed <ardenjweed@gmail.com>
Date: Fri, 13 Dec 2024 15:13:41 -0800
Subject: [PATCH 1/4] Added alt text pop up on ScheduleSelect if name is
 truncated.

---
 .../toolbar/ScheduleSelect/ScheduleSelect.tsx | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
index 6cdbf3fa5..a9aa543dd 100644
--- a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
+++ b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
@@ -1,6 +1,6 @@
 import { ArrowDropDown as ArrowDropDownIcon } from '@mui/icons-material';
-import { Box, Button, Popover, Typography, useTheme } from '@mui/material';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box, Button, Popover, Typography, useTheme, Tooltip } from '@mui/material';
+import { useCallback, useEffect, useMemo, useState, useRef, ReactElement } from 'react';
 
 import { changeCurrentSchedule } from '$actions/AppStoreActions';
 import { AddScheduleButton } from '$components/Calendar/toolbar/ScheduleSelect/schedule-select-buttons/AddScheduleButton';
@@ -27,6 +27,32 @@ function createScheduleSelector(index: number) {
     };
 }
 
+function TooltipIfTruncated({ children, text }: { children: ReactElement; text: string }) {
+    const textElementRef = useRef<HTMLElement>();
+    const [isTextTruncated, setIsTextTruncated] = useState(false);
+
+    useEffect(() => {
+        const element = textElementRef.current;
+        if (element) {
+            setIsTextTruncated(element.scrollWidth > element.clientWidth);
+        }
+    }, [text]);
+
+    const childrenWithRef = React.cloneElement(children, {
+        ref: textElementRef,
+    });
+
+    if (!isTextTruncated) {
+        return childrenWithRef;
+    }
+
+    return (
+        <Tooltip title={text} enterDelay={200}>
+            {childrenWithRef}
+        </Tooltip>
+    );
+}
+
 /**
  * Simulates an HTML select element using a popover.
  *
@@ -116,17 +142,23 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                                         justifyContent: 'flex-start',
                                         background:
                                             index === currentScheduleIndex ? theme.palette.action.selected : undefined,
+                                        '&:hover': {
+                                            backgroundColor: theme.palette.action.hover,
+                                            transition: 'background-color 0.2s',
+                                        },
                                     }}
                                     onClick={createScheduleSelector(index)}
                                 >
-                                    <Typography
-                                        overflow="hidden"
-                                        whiteSpace="nowrap"
-                                        textTransform="none"
-                                        textOverflow="ellipsis"
-                                    >
-                                        {name}
-                                    </Typography>
+                                    <TooltipIfTruncated text={name}>
+                                        <Typography
+                                            overflow="hidden"
+                                            whiteSpace="nowrap"
+                                            textTransform="none"
+                                            textOverflow="ellipsis"
+                                        >
+                                            {name}
+                                        </Typography>
+                                    </TooltipIfTruncated>
                                 </Button>
                             </Box>
                             <Box display="flex" alignItems="center" gap={0.5}>

From 9e0c4325988b1bd583c9d154fc72a0dfeb3aa52d Mon Sep 17 00:00:00 2001
From: Arden Weed <ardenjweed@gmail.com>
Date: Fri, 13 Dec 2024 15:39:55 -0800
Subject: [PATCH 2/4] Added alt text pop up on ScheduleSelect hover for
 truncated schedule names

---
 .../Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
index a9aa543dd..0e4113e81 100644
--- a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
+++ b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
@@ -1,6 +1,6 @@
 import { ArrowDropDown as ArrowDropDownIcon } from '@mui/icons-material';
 import { Box, Button, Popover, Typography, useTheme, Tooltip } from '@mui/material';
-import { useCallback, useEffect, useMemo, useState, useRef, ReactElement } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef, ReactElement, cloneElement } from 'react';
 
 import { changeCurrentSchedule } from '$actions/AppStoreActions';
 import { AddScheduleButton } from '$components/Calendar/toolbar/ScheduleSelect/schedule-select-buttons/AddScheduleButton';
@@ -38,7 +38,7 @@ function TooltipIfTruncated({ children, text }: { children: ReactElement; text:
         }
     }, [text]);
 
-    const childrenWithRef = React.cloneElement(children, {
+    const childrenWithRef = cloneElement(children, {
         ref: textElementRef,
     });
 
@@ -47,7 +47,7 @@ function TooltipIfTruncated({ children, text }: { children: ReactElement; text:
     }
 
     return (
-        <Tooltip title={text} enterDelay={200}>
+        <Tooltip title={text} enterDelay={200} disableInteractive>
             {childrenWithRef}
         </Tooltip>
     );

From 883b8d8b50a297f9fabac9411146b856aead856c Mon Sep 17 00:00:00 2001
From: Arden Weed <ardenjweed@gmail.com>
Date: Sun, 15 Dec 2024 12:27:29 -0800
Subject: [PATCH 3/4] Edited Tooltip to apply on all schedule names

---
 .../toolbar/ScheduleSelect/ScheduleSelect.tsx | 40 ++++---------------
 1 file changed, 8 insertions(+), 32 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
index 0e4113e81..1729d3880 100644
--- a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
+++ b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
@@ -1,6 +1,6 @@
 import { ArrowDropDown as ArrowDropDownIcon } from '@mui/icons-material';
 import { Box, Button, Popover, Typography, useTheme, Tooltip } from '@mui/material';
-import { useCallback, useEffect, useMemo, useState, useRef, ReactElement, cloneElement } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { changeCurrentSchedule } from '$actions/AppStoreActions';
 import { AddScheduleButton } from '$components/Calendar/toolbar/ScheduleSelect/schedule-select-buttons/AddScheduleButton';
@@ -27,32 +27,6 @@ function createScheduleSelector(index: number) {
     };
 }
 
-function TooltipIfTruncated({ children, text }: { children: ReactElement; text: string }) {
-    const textElementRef = useRef<HTMLElement>();
-    const [isTextTruncated, setIsTextTruncated] = useState(false);
-
-    useEffect(() => {
-        const element = textElementRef.current;
-        if (element) {
-            setIsTextTruncated(element.scrollWidth > element.clientWidth);
-        }
-    }, [text]);
-
-    const childrenWithRef = cloneElement(children, {
-        ref: textElementRef,
-    });
-
-    if (!isTextTruncated) {
-        return childrenWithRef;
-    }
-
-    return (
-        <Tooltip title={text} enterDelay={200} disableInteractive>
-            {childrenWithRef}
-        </Tooltip>
-    );
-}
-
 /**
  * Simulates an HTML select element using a popover.
  *
@@ -116,9 +90,11 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                 onClick={handleClick}
                 sx={{ minWidth, maxWidth, justifyContent: 'space-between' }}
             >
-                <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
-                    {currentScheduleName}
-                </Typography>
+                <Tooltip title={currentScheduleName} enterDelay={200} disableInteractive placement="right">
+                    <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
+                        {currentScheduleName}
+                    </Typography>
+                </Tooltip>
                 <ArrowDropDownIcon />
             </Button>
 
@@ -149,7 +125,7 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                                     }}
                                     onClick={createScheduleSelector(index)}
                                 >
-                                    <TooltipIfTruncated text={name}>
+                                    <Tooltip title={name} enterDelay={200} disableInteractive placement="right">
                                         <Typography
                                             overflow="hidden"
                                             whiteSpace="nowrap"
@@ -158,7 +134,7 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                                         >
                                             {name}
                                         </Typography>
-                                    </TooltipIfTruncated>
+                                    </Tooltip>
                                 </Button>
                             </Box>
                             <Box display="flex" alignItems="center" gap={0.5}>

From 3a32a148adda6c610533d3b9e7b6147d42900f0f Mon Sep 17 00:00:00 2001
From: Arden Weed <ardenjweed@gmail.com>
Date: Sun, 15 Dec 2024 13:12:25 -0800
Subject: [PATCH 4/4] Wrapped button with tooltip

---
 .../toolbar/ScheduleSelect/ScheduleSelect.tsx | 60 +++++++++----------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
index 1729d3880..1e18f95bc 100644
--- a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
+++ b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
@@ -83,20 +83,20 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
 
     return (
         <Box>
-            <Button
-                size="small"
-                color="inherit"
-                variant="outlined"
-                onClick={handleClick}
-                sx={{ minWidth, maxWidth, justifyContent: 'space-between' }}
-            >
-                <Tooltip title={currentScheduleName} enterDelay={200} disableInteractive placement="right">
+            <Tooltip title={currentScheduleName} enterDelay={200} disableInteractive>
+                <Button
+                    size="small"
+                    color="inherit"
+                    variant="outlined"
+                    onClick={handleClick}
+                    sx={{ minWidth, maxWidth, justifyContent: 'space-between' }}
+                >
                     <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
                         {currentScheduleName}
                     </Typography>
-                </Tooltip>
-                <ArrowDropDownIcon />
-            </Button>
+                    <ArrowDropDownIcon />
+                </Button>
+            </Tooltip>
 
             <Popover
                 open={open}
@@ -108,24 +108,22 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                     {props.scheduleNames.map((name, index) => (
                         <Box key={index} display="flex" alignItems="center" gap={1}>
                             <Box flexGrow={1}>
-                                <Button
-                                    color="inherit"
-                                    sx={{
-                                        minWidth,
-                                        maxWidth,
-                                        width: '100%',
-                                        display: 'flex',
-                                        justifyContent: 'flex-start',
-                                        background:
-                                            index === currentScheduleIndex ? theme.palette.action.selected : undefined,
-                                        '&:hover': {
-                                            backgroundColor: theme.palette.action.hover,
-                                            transition: 'background-color 0.2s',
-                                        },
-                                    }}
-                                    onClick={createScheduleSelector(index)}
-                                >
-                                    <Tooltip title={name} enterDelay={200} disableInteractive placement="right">
+                                <Tooltip title={name} enterDelay={200} disableInteractive>
+                                    <Button
+                                        color="inherit"
+                                        sx={{
+                                            minWidth,
+                                            maxWidth,
+                                            width: '100%',
+                                            display: 'flex',
+                                            justifyContent: 'flex-start',
+                                            background:
+                                                index === currentScheduleIndex
+                                                    ? theme.palette.action.selected
+                                                    : undefined,
+                                        }}
+                                        onClick={createScheduleSelector(index)}
+                                    >
                                         <Typography
                                             overflow="hidden"
                                             whiteSpace="nowrap"
@@ -134,8 +132,8 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                                         >
                                             {name}
                                         </Typography>
-                                    </Tooltip>
-                                </Button>
+                                    </Button>
+                                </Tooltip>
                             </Box>
                             <Box display="flex" alignItems="center" gap={0.5}>
                                 <CopyScheduleButton index={index} disabled={skeletonMode} />