Add react-qr-code dependency; enhance PopupHeader and SharePopup components with draggable functionality; update LinkShare component for improved UI; integrate SettingsModal in HomePage for better user experience.

client/src/components/PopupHeader.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import usePopupStore from "../store/popupStore";
 import XMarkIcon from "./icons/XMarkIcon";
 import Button from "./ui/Button";
@@ -6,15 +7,24 @@ interface PopupHeaderProps {
   title?: string;
   leftButton?: React.ReactNode;
   headerRef: React.RefObject<HTMLDivElement | null>;
+  draggable?: boolean;
 }
 
-function PopupHeader({ title, leftButton, headerRef }: PopupHeaderProps) {
+function PopupHeader({
+  title,
+  leftButton,
+  headerRef,
+  draggable,
+}: PopupHeaderProps) {
   const { setPopup } = usePopupStore();
 
   return (
     <div
       ref={headerRef}
-      className="2xl:p-[1.111vw] p-4 flex justify-between items-center cursor-grab select-none relative"
+      className={clsx(
+        "2xl:p-[1.111vw] p-4 flex justify-between items-center cursor-graba select-none relative",
+        draggable && "cursor-grab active:cursor-grabbing"
+      )}
     >
       <div className="2xl:size-[2.222vw] size-8">{leftButton}</div>
       {title && (