Fix errors

.vscode/settings.json

@@ -11,5 +11,8 @@
   },
   "[javascript]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

src/components/Subscribe/Dialogue/Dialogue.tsx

@@ -6,22 +6,18 @@ import React from "react";
 import { DialogueBubble } from "./DialogueBubble";
 import { Emote, type EmoteType } from "./Emote";
 
-export type Variant = "wave" | "shake" | "none";
-
 interface DialogueProps {
   text: string | null;
   emote: EmoteType;
-  big?: boolean;
-  variant?: Variant;
   onEmoteClick: () => void;
 }
 
 export const Dialogue = React.memo(
-  ({ text, emote, big, onEmoteClick }: DialogueProps) => {
+  ({ text, emote, onEmoteClick }: DialogueProps) => {
     return (
       <div className="dialogueContainer">
         <AnimatePresence>
-          <DialogueBubble text={text} big={big} key="bubble" />
+          <DialogueBubble text={text} key="bubble" />
           <Emote emote={emote} key="emote" onEmoteClick={onEmoteClick} />
         </AnimatePresence>
       </div>

src/components/Subscribe/Dialogue/DialogueBubble.tsx

@@ -1,60 +1,52 @@
 import "./dialogue.css";
 
-import classNames from "classnames";
 import { type Variants, motion } from "framer-motion";
 import React from "react";
 
-import type { Variant } from "./Dialogue";
 import { DialogueLine } from "./DialogueLine";
 
 interface DialogueBubbleProps {
   text: string | null;
-  big?: boolean;
-  variant?: Variant;
 }
 
-export const DialogueBubble = React.memo(
-  ({ text, big, variant }: DialogueBubbleProps) => {
-    const bubbleVariants: Variants = {
-      initial: {
-        opacity: 0,
-        scale: 0,
-        x: -20,
-        y: 20,
-        borderRadius: "1rem 1rem 0.2rem 1rem",
+export const DialogueBubble = React.memo(({ text }: DialogueBubbleProps) => {
+  const bubbleVariants: Variants = {
+    initial: {
+      opacity: 0,
+      scale: 0,
+      x: -20,
+      y: 20,
+      borderRadius: "1rem 1rem 0.2rem 1rem",
+    },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      x: 0,
+      y: 0,
+      transition: {
+        type: "spring",
+        mass: 1,
+        damping: 20,
+        stiffness: 200,
       },
-      animate: {
-        opacity: 1,
-        scale: 1,
-        x: 0,
-        y: 0,
-        transition: {
-          type: "spring",
-          mass: 1,
-          damping: 20,
-          stiffness: 200,
-        },
-      },
-      exit: {
-        opacity: 0,
-        scale: 0,
-      },
-    };
+    },
+    exit: {
+      opacity: 0,
+      scale: 0,
+    },
+  };
 
-    return (
-      text && (
-        <motion.div
-          layout
-          variants={bubbleVariants}
-          initial="initial"
-          animate="animate"
-          className={classNames("bubble", {
-            big: big === true,
-          })}
-        >
-          <DialogueLine text={text} variant={variant} />
-        </motion.div>
-      )
-    );
-  },
-);
+  return (
+    text && (
+      <motion.div
+        layout
+        variants={bubbleVariants}
+        initial="initial"
+        animate="animate"
+        className="bubble"
+      >
+        <DialogueLine text={text} />
+      </motion.div>
+    )
+  );
+});

src/components/Subscribe/Dialogue/DialogueLine.tsx

@@ -1,8 +1,6 @@
 import { type Variants, motion } from "framer-motion";
 import { nanoid } from "nanoid";
 
-import type { Variant } from "./Dialogue";
-
 const SPEED = 0.04;
 
 interface TypedCharacterProps {
@@ -28,43 +26,14 @@ interface TypedCharacterProps {
    * @default 0.2
    */
   delay?: number;
-
-  /**
-   * Animation style of the character
-   * @default "none"
-   */
-  variant?: Variant;
 }
 
 const TypedCharacter = ({
   character,
   index,
   speed = SPEED,
   delay = 0.2,
-  variant = "none",
 }: TypedCharacterProps) => {
-  const isEmphasized = variant !== "none";
-
-  const generateRandomValuesArray = (
-    num: number,
-    min: number,
-    max: number,
-  ): number[] => {
-    const randomNumberBetweenValues = (): number => {
-      return Math.random() * (max - min) + min;
-    };
-
-    return [...Array(num)].map(randomNumberBetweenValues);
-  };
-
-  const generateRandomEmsArray = (
-    num: number,
-    min: number,
-    max: number,
-  ): string[] => {
-    return generateRandomValuesArray(num, min, max).map((i) => `${i}em`);
-  };
-
   const characterVariants: Variants = {
     initial: {
       opacity: 0,
@@ -79,74 +48,13 @@ const TypedCharacter = ({
     },
   };
 
-  const shakeVariants: Variants = {
-    initial: (i) => ({
-      x: 0,
-      // Alternate heights
-      y: i % 2 === 0 ? "0.03em" : "-0.03em",
-      // Alternate rotation
-      rotate: i % 2 === 0 ? 5 : -5,
-    }),
-    animate: (i) => ({
-      x: generateRandomEmsArray(10, -0.05, 0.05),
-      y: generateRandomEmsArray(10, -0.1, 0.1),
-      rotate: generateRandomValuesArray(10, 10, -10),
-      transition: {
-        type: "tween",
-        repeat: Number.POSITIVE_INFINITY,
-        repeatType: "mirror",
-        ease: "anticipate",
-        delay: -i,
-        duration: 1,
-      },
-    }),
-  };
-
-  const waveVariants: Variants = {
-    initial: { y: "-0.12em" },
-    animate: (i) => ({
-      y: "0.12em",
-      transition: {
-        type: "tween",
-        repeat: Number.POSITIVE_INFINITY,
-        ease: "easeInOut",
-        repeatType: "reverse",
-        delay: -i * 0.05,
-        duration: 0.8,
-      },
-    }),
-  };
-
-  const getVariantObject = (variant?: Variant) => {
-    switch (variant) {
-      case "shake":
-        return shakeVariants;
-      case "wave":
-        return waveVariants;
-      default:
-        return undefined;
-    }
-  };
-
   return (
     <motion.span
       className="character"
       variants={characterVariants}
       style={{ animationDelay: `${index * speed + delay}s` }}
     >
-      {isEmphasized ? (
-        <motion.strong
-          className="emphasized"
-          variants={getVariantObject(variant)}
-          initial="initial"
-          animate="animate"
-          custom={index}
-        >
-          {character}
-        </motion.strong>
-      ) : (
-        <>{character}</>
-      )}
+      {character}
     </motion.span>
   );
 };
@@ -157,12 +65,6 @@ export interface DialogueLineProps {
    */
   text: string;
 
-  /**
-   * Animation style of the sentence fragment
-   * @default "none"
-   */
-  variant?: Variant;
-
   /**
    * Starting character index for continuous animation
    * across line fragments and styles
@@ -178,7 +80,6 @@ export interface DialogueLineProps {
 
 export const DialogueLine = ({
   text,
-  variant,
   index = 0,
   speed = SPEED,
 }: DialogueLineProps) => {
@@ -191,7 +92,6 @@ export const DialogueLine = ({
           <TypedCharacter
             key={nanoid()}
             character={char}
-            variant={variant}
             index={index++}
             speed={speed}
           />

src/components/Subscribe/Dialogue/dialogue.css

@@ -27,10 +27,6 @@
   cursor: default;
 }
 
-.big {
-  font-size: var(--step-1);
-}
-
 .character {
   display: inline-block;
   white-space: pre;

src/components/Subscribe/SubscribeForm.tsx

@@ -175,11 +175,13 @@ export const SubscribeForm = () => {
   };
 
   useEffect(() => {
-    setJustDisplayedRemarks(true);
-    setTimeout(() => {
-      setJustDisplayedRemarks(false);
-    }, REMARK_TIMEOUT);
-  }, []);
+    if (currentRemarkType) {
+      setJustDisplayedRemarks(true);
+      setTimeout(() => {
+        setJustDisplayedRemarks(false);
+      }, REMARK_TIMEOUT);
+    }
+  }, [currentRemarkType]);
 
   const handleFocus = () => {
     if (currentRemarkType === null) {