feat(app): major refactorings and details footer updates

src/components/Footer/Footer.tsx

@@ -1,30 +1,51 @@
-import { Coffee, Heart } from "phosphor-react";
+import { useRecoilValue } from "recoil";
+import { motion, AnimatePresence, Variants } from "framer-motion";
+import { Coffee, Heart, ArrowULeftUp } from "phosphor-react";
 
 import Links from "@/components/Links/Links";
 
-import { ReactComponent as UArrowUpLeft } from "@/assets/u-arrow-up-left.svg";
 import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
 import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg";
+import { useMediaQuery } from "@/hooks";
+import { selectionEntryAtom } from "@/state";
 import "./Footer.css";
 
 type FooterProps = {};
 
+const variants: Variants = {
+  initial: { y: 188 },
+  animate: { y: 0 },
+  exit: { y: 188 },
+};
+
 const Footer = (_: FooterProps) => {
+  const isMobile = useMediaQuery("(max-width: 719px)");
+  const isViewing = !!useRecoilValue(selectionEntryAtom);
+
   return (
     <footer>
       <div className="container">
-        <button
-          id="back-to-top-button"
-          aria-label="back-to-top button"
-          className="main-button"
-          onClick={() => {
-            document
-              .getElementById("root")
-              ?.scrollIntoView({ behavior: "smooth", block: "start" });
-          }}
-        >
-          <UArrowUpLeft />
-        </button>
+        <AnimatePresence initial={false}>
+          {(!isMobile || !isViewing) && (
+            <motion.button
+              id="back-to-top-button"
+              aria-label="back-to-top button"
+              className="main-button"
+              variants={variants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              transition={{ duration: 0.1 }}
+              onClick={() => {
+                document
+                  .getElementById("root")
+                  ?.scrollIntoView({ behavior: "smooth", block: "start" });
+              }}
+            >
+              <ArrowULeftUp size="1em" />
+            </motion.button>
+          )}
+        </AnimatePresence>
         <div className="outro">
           <Links />
           <p>