feat: view transitions

Author: debater-coder

apps/client/package.json

@@ -50,7 +50,7 @@
     "react-dom": "^18.1.0",
     "react-error-boundary": "^4.0.10",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.5.0",
+    "react-router-dom": "^6.20.1",
     "rollup-plugin-workbox": "^6.2.0",
     "typescript": "^5.1.6",
     "web-vitals": "^3.0.1",

apps/client/src/components/BottomNav/BottomNav.tsx

@@ -31,6 +31,7 @@ export const BottomNav = () => {
       border={"1px"}
       borderBottom="none"
       borderColor={useColorModeValue("gray.200", "gray.700")}
+      className="bottom-nav"
     >
       {pages.pinned.map((routes) => (
         <SidebarButton
@@ -43,14 +44,15 @@ export const BottomNav = () => {
       ))}
       <SidebarButton name={"More"} icon={DotsThree} onClick={onOpen} />
       <Drawer isOpen={isOpen} placement="bottom" onClose={onClose}>
-        <DrawerOverlay />
+        <DrawerOverlay className="bottom-nav-drawer-overlay" />
         <DrawerContent
           bg={useColorModeValue("whiteAlpha.600", "blackAlpha.600")}
           backdropFilter="auto"
           backdropBlur="36px"
           roundedTop="2xl"
           border={"1px"}
           borderColor={useColorModeValue("gray.200", "gray.700")}
+          className="bottom-nav-drawer"
         >
           <DrawerCloseButton />
           <DrawerHeader fontFamily={"Poppins, sans-serif"}>

apps/client/src/components/Nav/Nav.tsx

@@ -144,6 +144,7 @@ export const SettingsBTN = ({
   >
     <RouterLink
       to={pathname.startsWith("/app/settings") ? "/app" : "/app/settings"}
+      unstable_viewTransition
     >
       <IconButton
         variant="outline"
@@ -188,6 +189,7 @@ export default function Nav() {
       backdropBlur="36px"
       border={"1px"}
       borderColor={useColorModeValue("gray.200", "gray.700")}
+      className="main-nav"
     >
       <TimetablLogo color={logoColor} loggedIn={loggedIn} />
       {loggedIn && <RefetchingIndicator />}

apps/client/src/components/Sidebar/Sidebar.tsx

@@ -20,6 +20,7 @@ export default function Sidebar() {
       border={"1px"}
       borderTop={"none"}
       borderColor={useColorModeValue("gray.200", "gray.700")}
+      className="sidebar"
     >
       {pages.pinned.map((routes) => (
         <SidebarButton

apps/client/src/components/Sidebar/SidebarButton.tsx

@@ -22,37 +22,47 @@ export default React.memo(function SidebarButton(props: {
   const [secondary] = useToken("colors", ["primary.300"]);
   const active = to ? Boolean(useMatch(to)) : false;
 
-  return (
-    <Box as={RouterLink} w="full" to={to} onClick={onClick}>
+  const linkContents = (
+    <Flex
+      _hover={{ bg: hoverColor }}
+      p={"12px"}
+      h={"64px"}
+      w="100%"
+      direction={"column"}
+      align={"center"}
+    >
       <Flex
-        _hover={{ bg: hoverColor }}
-        p={"12px"}
-        h={"64px"}
-        w="100%"
-        direction={"column"}
+        as={motion.div}
+        justify={"center"}
+        bg={active ? secondary + "40" : undefined}
+        animate={{ width: active ? "56px" : "0px" }}
         align={"center"}
+        borderRadius={"16px"}
+        h={"32px"}
       >
-        <Flex
-          as={motion.div}
-          justify={"center"}
-          bg={active ? secondary + "40" : undefined}
-          animate={{ width: active ? "56px" : "0px" }}
-          align={"center"}
-          borderRadius={"16px"}
-          h={"32px"}
-        >
-          <Box minH={"24px"}>
-            <Icon
-              size="24px"
-              mirrored={mirrored}
-              weight={active ? "fill" : "duotone"}
-            />
-          </Box>
-        </Flex>
-        <Text as={active ? "b" : "label"} fontSize={"xs"} mt="4px">
-          {name}
-        </Text>
+        <Box minH={"24px"}>
+          <Icon
+            size="24px"
+            mirrored={mirrored}
+            weight={active ? "fill" : "duotone"}
+          />
+        </Box>
       </Flex>
+      <Text as={active ? "b" : "label"} fontSize={"xs"} mt="4px">
+        {name}
+      </Text>
+    </Flex>
+  );
+
+  return (
+    <Box w="full" onClick={onClick}>
+      {to ? (
+        <RouterLink unstable_viewTransition to={to}>
+          {linkContents}
+        </RouterLink>
+      ) : (
+        linkContents
+      )}
     </Box>
   );
 });

apps/client/src/index.css

@@ -0,0 +1,60 @@
+/* Main contents */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-from-bottom {
+  from {
+    transform: translateY(50px);
+  }
+}
+
+@keyframes slide-to-top {
+  to {
+    transform: translateY(-50px);
+  }
+}
+
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-top;
+}
+
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-bottom;
+}
+
+/* Static Navigation */
+.main-nav {
+  view-transition-name: main-nav;
+}
+
+.sidebar {
+  view-transition-name: sidebar;
+}
+
+.bottom-nav {
+  view-transition-name: bottom-nav;
+}
+
+.bottom-nav-drawer {
+  view-transition-name: bottom-nav-drawer;
+}
+
+.bottom-nav-drawer-overlay {
+  view-transition-name: bottom-nav-drawer-overlay;
+}
+
+.settings-nav {
+  view-transition-name: settings-nav;
+}

apps/client/src/main.tsx

@@ -1,6 +1,7 @@
 import config from "./config";
 import NetworkError from "./errors/NetworkError";
 import { UnauthorizedError } from "./errors/UnauthorisedError";
+import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import AppRouter from "./services/AppRouter/";
 import OAuth2Actions from "./services/OAuth2Actions";

apps/client/src/routes/Main/Settings/Settings.tsx

@@ -21,7 +21,7 @@ const MenuEntry = ({
 }) => {
   const highlightColor = useToken("colors", "primary.400") + "aa";
   return (
-    <Link to={to}>
+    <Link to={to} unstable_viewTransition>
       <Flex
         bg={active ? highlightColor : undefined}
         p={3}
@@ -49,7 +49,7 @@ export default function Settings() {
       gap={3}
       h="full"
     >
-      <Flex direction="column" minW={"20vw"}>
+      <Flex direction="column" minW={"20vw"} className="settings-nav">
         <MenuEntry
           to="general"
           name="General"