trybick · trybick · Apr 15, 2025 · Apr 14, 2025 · Apr 15, 2025
diff --git a/front/package.json b/front/package.json
@@ -21,10 +21,8 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.2.4",
-    "@chakra-ui/react": "^2.6.1",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "^11.14.0",
+    "@chakra-ui/react": "^3.15.0",
+    "@emotion/react": "^11.14.0",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
@@ -33,10 +31,9 @@
     "@react-oauth/google": "^0.12.1",
     "@sentry/react": "^9.10.1",
     "axios": "^1.8.4",
-    "focus-visible": "^5.2.1",
-    "framer-motion": "^10.12.10",
     "localforage": "^1.10.0",
     "moment": "^2.30.1",
+    "next-themes": "^0.4.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-ga4": "^2.1.0",
@@ -53,6 +50,7 @@
     "reselect": "^5.1.1"
   },
   "devDependencies": {
+    "@chakra-ui/cli": "^3.15.0",
     "@eslint/compat": "^1.2.7",
     "@eslint/js": "^9.23.0",
     "@types/node": "^22.13.14",

diff --git a/front/src/components/App.tsx b/front/src/components/App.tsx
@@ -19,6 +19,7 @@ import SettingsPage from 'pages/SettingsPage';
 import ShowPage from 'pages/ShowPage';
 import { ROUTES } from 'constants/routes';
 import { initSentry } from 'utils/sentry';
+import { Toaster } from './ui/toaster';
 
 type StateProps = {
   isLoggedIn: boolean;
@@ -45,6 +46,7 @@ const App = ({ isLoggedIn, fetchfollowedShows }: Props) => {
   return (
     <Router>
       <ScrollToTop />
+      <Toaster />
       <Flex direction="column" minH="97vh">
         <Header />
         <ErrorBoundary>

diff --git a/front/src/components/calendar/DesktopCalendarEvent.tsx b/front/src/components/calendar/DesktopCalendarEvent.tsx
diff --git a/front/src/components/calendar/DesktopCalendarEventPopover.tsx b/front/src/components/calendar/DesktopCalendarEventPopover.tsx
@@ -0,0 +1,111 @@
+import { useHistory } from 'react-router-dom';
+import { EventContentArg } from '@fullcalendar/core';
+import { Box, Flex, HoverCard, Icon, Link, Portal, Text } from '@chakra-ui/react';
+import { TbBoxMultiple, TbExternalLink } from 'react-icons/tb';
+import { HiOutlineVideoCamera } from 'react-icons/hi';
+import { IoIosTimer } from 'react-icons/io';
+import { ROUTES } from 'constants/routes';
+
+type Props = {
+  eventInfo: EventContentArg & { backgroundColor: string };
+};
+
+const DesktopCalendarEventPopover = (props: Props) => {
+  const { eventInfo } = props;
+  const { backgroundColor } = eventInfo;
+  const { title } = eventInfo.event;
+  const {
+    episodeName,
+    isMulipleEvent,
+    multipleEventSpanAmount,
+    network,
+    overview,
+    runtime,
+    showId,
+    showName,
+    seasonAndEpisodeNumbersFull,
+  } = eventInfo.event.extendedProps;
+  const history = useHistory();
+
+  return (
+    <HoverCard.Root openDelay={500} positioning={{ placement: 'right' }} size="sm">
+      <HoverCard.Trigger asChild>
+        <Flex alignItems="center" p="1px 6px">
+          {isMulipleEvent && <Icon as={TbBoxMultiple} mr="4px" />}
+          <Text fontSize="md" lineClamp={1}>
+            {title}
+          </Text>
+        </Flex>
+      </HoverCard.Trigger>
+
+      <Portal>
+        <HoverCard.Positioner>
+          <HoverCard.Content bg={backgroundColor} maxWidth="240px" p="16px" zIndex={4}>
+            <HoverCard.Arrow>
+              <HoverCard.ArrowTip bg={`${backgroundColor} !important`} />
+            </HoverCard.Arrow>
+            <Box>
+              <Link
+                color="white"
+                fontSize="14px"
+                mb="7px"
+                 => history.push(`${ROUTES.SHOW}/${showId}`)}
+              >
+                <Text lineClamp={1}>{showName}</Text>
+                <TbExternalLink style={{ fontSize: '14px', marginLeft: '-3px' }} />
+              </Link>
+              <Text color="white" fontSize="lg" fontWeight="600" mb="3px">
+                {seasonAndEpisodeNumbersFull}
+              </Text>
+              <Text color="white" fontSize="sm" fontStyle="italic" mb="8px">
+                {!isMulipleEvent && episodeName}
+              </Text>
+
+              {network || runtime || isMulipleEvent ? (
+                <Flex flexWrap="wrap" gap="2px 8px">
+                  {isMulipleEvent && (
+                    <Flex align="center" gap="2px">
+                      <Icon alignSelf="center" as={TbBoxMultiple} boxSize="14px" color="#fff" />
+                      <Text color="white" fontSize="13px" fontWeight="500">
+                        {`${multipleEventSpanAmount} episodes`}
+                      </Text>
+                    </Flex>
+                  )}
+                  {network && (
+                    <Flex align="center" gap="3px">
+                      <Icon
+                        alignSelf="center"
+                        as={HiOutlineVideoCamera}
+                        boxSize="14px"
+                        color="#fff"
+                      />
+                      <Text color="white" fontSize="13px" fontWeight="500">
+                        {network}
+                      </Text>
+                    </Flex>
+                  )}
+                  {runtime && !isMulipleEvent && (
+                    <Flex align="center" gap="2px">
+                      <Icon
F438
 alignSelf="center" as={IoIosTimer} boxSize="14px" color="#fff" />
+                      <Text color="white" fontSize="13px" fontWeight="500">
+                        {runtime} mins
+                      </Text>
+                    </Flex>
+                  )}
+                </Flex>
+              ) : null}
+
+              {overview && !isMulipleEvent && (
+                <Text color="white" fontSize="sm" mt="9px">
+                  {overview}
+                </Text>
+              )}
+            </Box>
+          </HoverCard.Content>
+        </HoverCard.Positioner>
+      </Portal>
+    </HoverCard.Root>
+  );
+};
+
+export default DesktopCalendarEventPopover;
diff --git a/front/src/components/calendar/NoFollowedShowsBanner.tsx b/front/src/components/calendar/NoFollowedShowsBanner.tsx
@@ -1,29 +1,25 @@
-import { Link as RouterLink } from 'react-router-dom';
-import { HStack, Icon, Link, Stack, Text, useColorModeValue } from '@chakra-ui/react';
-import { FiAlertTriangle } from 'react-icons/fi';
+import { useHistory } from 'react-router-dom';
+import { Alert, Link } from '@chakra-ui/react';
 import { ROUTES } from 'constants/routes';
 
-const NoFollowedShowsBanner = () => (
-  <Stack
-    alignItems="center"
-    bg={useColorModeValue('yellow.600', 'yellow.400')}
-    color={useColorModeValue('white', 'black')}
-    direction={{ base: 'column', sm: 'row' }}
-    justifyContent="center"
-    px={{ base: '3', md: '6', lg: '8' }}
-    py="4"
-  >
-    <HStack spacing="3">
-      <Icon as={FiAlertTriangle} fontSize="2xl" h="6" />
-      <Text fontWeight="medium">
-        TV shows will appear on your calendar! Start adding shows to your calendar{' '}
-        <Link as={RouterLink} fontWeight={900} textDecoration="underline" to={ROUTES.HOME}>
-          here
+const NoFollowedShowsBanner = () => {
+  const history = useHistory();
+
+  return (
+    <Alert.Root colorPalette="cyan" justifyContent="center" status="info">
+      <Alert.Indicator />
+      <Alert.Title>
+        New episodes of your followed shows will appear here on your calendar. Start following shows{' '}
+        <Link
+           => history.push(ROUTES.HOME)}
+          textDecorationThickness="2px"
+          variant="underline"
+        >
+          here.
         </Link>
-        .
-      </Text>
-    </HStack>
-  </Stack>
-);
+      </Alert.Title>
+    </Alert.Root>
+  );
+};
 
 export default NoFollowedShowsBanner;