Prompt sign-in for likes and stop click propagation

Show SignInModal (with a `like` flag) when a user attempts to like
without a token. Add optimistic local state for liked and likesCount to
update UI immediately. Stop event propagation on the like button and
cover to prevent parent click handlers.

apps/web/src/components/SignInModal/SignInModal.tsx

···
 interface SignInModalProps {
   isOpen: boolean;
   onClose: () => void;
+  like?: boolean;
 }
 
 function SignInModal(props: SignInModalProps) {
-  const { isOpen, onClose } = props;
+  const { isOpen, onClose, like } = props;
   const [handle, setHandle] = useState("");
 
   const onLogin = async () => {
···
         <ModalBody style={{ padding: 10 }}>
           <h1 style={{ color: "#ff2876", textAlign: "center" }}>Rocksky</h1>
           <p className="text-[var(--color-text)] text-[18px] mt-[40px] mb-[20px]">
-            Sign in or create your account to join the conversation!
+            {!like
+              ? "Sign in or create your account to join the conversation!"
+              : "Sign in or create your account to like songs!"}
           </p>
           <div style={{ marginBottom: 20 }}>
             <div style={{ marginBottom: 15 }}>

apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx

···
         <span
           className="cursor-pointer"
           onClick={(e) => {
+            e.stopPropagation();
             e.preventDefault();
             onLike();
           }}

apps/web/src/components/SongCover/SongCover.tsx

···
 import styled from "@emotion/styled";
 import InteractionBar from "./InteractionBar";
 import useLike from "../../hooks/useLike";
+import SignInModal from "../SignInModal";
+import { useState } from "react";
 
 const Cover = styled.img<{ size?: number }>`
   border-radius: 8px;
···
 };
 
 function SongCover(props: SongCoverProps) {
+  const [isSignInOpen, setIsSignInOpen] = useState(false);
+  const [liked, setLiked] = useState(props.liked);
   const { like, unlike } = useLike();
-  const { title, artist, cover, size, liked, likesCount, uri, withLikeButton } =
-    props;
+  const [likesCount, setLikesCount] = useState(props.likesCount);
+  const { title, artist, cover, size, uri, withLikeButton } = props;
   const handleLike = async () => {
     if (!uri) return;
+    if (!localStorage.getItem("token")) {
+      setIsSignInOpen(true);
+      return;
+    }
     if (liked) {
+      setLiked(false);
+      if (likesCount !== undefined && likesCount > 0) {
+        setLikesCount(likesCount - 1);
+      }
       await unlike(uri);
     } else {
+      setLiked(true);
+      if (likesCount !== undefined) {
+        setLikesCount(likesCount + 1);
+      }
       await like(uri);
     }
   };
   return (
-    <CoverWrapper>
+    <CoverWrapper onClick={(e) => e.stopPropagation()}>
       <div className={`relative h-[100%] w-[92%]`}>
         {withLikeButton && (
           <InteractionBar
···
         </SongTitle>
         <Artist>{artist}</Artist>
       </div>
+      <SignInModal
+        isOpen={isSignInOpen}
+        onClose={() => setIsSignInOpen(false)}
+        like
+      />
     </CoverWrapper>
   );
 }