feat: add generate qrcode dialog

web/package.json

@@ -17,6 +17,7 @@
     "i18next": "^23.2.3",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.252.0",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",

web/pnpm-lock.yaml

@@ -35,6 +35,9 @@ dependencies:
   lucide-react:
     specifier: ^0.252.0
     version: 0.252.0(react@18.2.0)
+  qrcode.react:
+    specifier: ^3.1.0
+    version: 3.1.0(react@18.2.0)
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -2513,6 +2516,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /qrcode.react@3.1.0(react@18.2.0):
+    resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 

web/src/components/GenerateQRCodeDialog.tsx

@@ -0,0 +1,61 @@
+import { Button, Modal, ModalDialog } from "@mui/joy";
+import { useRef } from "react";
+import { toast } from "react-hot-toast";
+import { QRCodeCanvas } from "qrcode.react";
+import { absolutifyLink } from "../helpers/utils";
+import Icon from "./Icon";
+
+interface Props {
+  shortcut: Shortcut;
+  onClose: () => void;
+}
+
+const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
+  const { shortcut, onClose } = props;
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const shortifyLink = absolutifyLink(`/s/${shortcut.name}`);
+
+  const handleCloseBtnClick = () => {
+    onClose();
+  };
+
+  const handleDownloadQRCodeClick = () => {
+    const canvas = containerRef.current?.querySelector("canvas");
+    if (!canvas) {
+      toast.error("Failed to get qr code canvas");
+      return;
+    }
+
+    const link = document.createElement("a");
+    link.download = "filename.png";
+    link.href = canvas.toDataURL();
+    link.click();
+    handleCloseBtnClick();
+  };
+
+  return (
+    <Modal open={true}>
+      <ModalDialog>
+        <div className="flex flex-row justify-between items-center w-64 mb-4">
+          <span className="text-lg font-medium">Download QR Code</span>
+          <Button variant="plain" onClick={handleCloseBtnClick}>
+            <Icon.X className="w-5 h-auto text-gray-600" />
+          </Button>
+        </div>
+        <div>
+          <div ref={containerRef} className="w-full flex flex-row justify-center items-center mt-2 mb-6">
+            <QRCodeCanvas value={shortifyLink} size={128} bgColor={"#ffffff"} fgColor={"#000000"} includeMargin={false} level={"L"} />
+          </div>
+          <div className="w-full flex flex-row justify-center items-center px-4">
+            <Button className="w-full" color="primary" onClick={handleDownloadQRCodeClick}>
+              <Icon.Download className="w-4 h-auto mr-1" />
+              Download
+            </Button>
+          </div>
+        </div>
+      </ModalDialog>
+    </Modal>
+  );
+};
+
+export default GenerateQRCodeDialog;

web/src/components/ShortcutView.tsx

@@ -11,6 +11,7 @@ import { showCommonDialog } from "./Alert";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
 import VisibilityIcon from "./VisibilityIcon";
+import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
 
 interface Props {
   shortcut: Shortcut;
@@ -23,6 +24,7 @@ const ShortcutView = (props: Props) => {
   const user = useAppSelector((state) => state.user.user as User);
   const faviconStore = useFaviconStore();
   const [favicon, setFavicon] = useState<string | undefined>(undefined);
+  const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
   const havePermission = user.role === "ADMIN" || shortcut.creatorId === user.id;
   const shortifyLink = absolutifyLink(`/s/${shortcut.name}`);
 
@@ -34,10 +36,6 @@ const ShortcutView = (props: Props) => {
     });
   }, [shortcut.link]);
 
-  const gotoShortcutLink = () => {
-    window.open(shortifyLink, "_blank");
-  };
-
   const handleCopyButtonClick = () => {
     copy(shortifyLink);
     toast.success("Shortcut link copied to clipboard.");
@@ -55,87 +53,104 @@ const ShortcutView = (props: Props) => {
   };
 
   return (
-    <div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg hover:shadow">
+    <>
-      <div className="w-full flex flex-row justify-between items-center">
+      <div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg hover:shadow">
-        <div className="group flex flex-row justify-start items-center mr-1 shrink-0">
+        <div className="w-full flex flex-row justify-between items-center">
-          <div className="w-6 h-6 mr-1.5 flex justify-center items-center overflow-clip">
+          <div className="group flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
-            {favicon ? (
+            <div className="w-6 h-6 mr-1 flex justify-center items-center overflow-clip">
-              <img className="w-[90%] h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
+              {favicon ? (
-            ) : (
+                <img className="w-[90%] h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
-              <Icon.Globe2 className="w-5 h-auto text-gray-500" />
+              ) : (
+                <Icon.Globe2 className="w-5 h-auto text-gray-500" />
+              )}
+            </div>
+            <a
+              className="flex flex-row px-2 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
+              target="_blank"
+              href={shortifyLink}
+            >
+              <span className="text-gray-400">s/</span>
+              {shortcut.name}
+              <span className="hidden group-hover:block ml-1 cursor-pointer">
+                <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
+              </span>
+            </a>
+            <button
+              className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
+              onClick={() => handleCopyButtonClick()}
+            >
+              <Icon.Clipboard className="w-4 h-auto mx-auto" />
+            </button>
+            <button
+              className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
+              onClick={() => setShowQRCodeDialog(true)}
+            >
+              <Icon.QrCode className="w-4 h-auto mx-auto" />
+            </button>
+          </div>
+          <div className="flex flex-row justify-end items-center space-x-2">
+            {havePermission && (
+              <Dropdown
+                actionsClassName="!w-24"
+                actions={
+                  <>
+                    <button
+                      className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                      onClick={() => handleEdit()}
+                    >
+                      <Icon.Edit className="w-4 h-auto mr-2" /> Edit
+                    </button>
+                    <button
+                      className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                      onClick={() => {
+                        handleDeleteShortcutButtonClick(shortcut);
+                      }}
+                    >
+                      <Icon.Trash className="w-4 h-auto mr-2" /> Delete
+                    </button>
+                  </>
+                }
+              ></Dropdown>
             )}
           </div>
-          <button className="items-center cursor-pointer hover:opacity-80 hover:underline" onClick={() => gotoShortcutLink()}>
-            <span className="text-gray-400">s/</span>
-            {shortcut.name}
-          </button>
-          <button className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick()}>
-            <Icon.Clipboard className="w-4 h-auto text-gray-500" />
-          </button>
-          <a className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" target="_blank" href={shortifyLink}>
-            <Icon.ExternalLink className="w-4 h-auto text-gray-500" />
-          </a>
         </div>
-        <div className="flex flex-row justify-end items-center space-x-2">
+        {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
-          {havePermission && (
+        {shortcut.tags.length > 0 && (
-            <Dropdown
+          <div className="mt-1 flex flex-row justify-start items-start gap-2">
-              actionsClassName="!w-24"
+            <Icon.Tag className="text-gray-400 w-4 h-auto" />
-              actions={
+            {shortcut.tags.map((tag) => {
-                <>
+              return (
-                  <button
+                <span key={tag} className="text-gray-400 text-sm font-mono leading-4">
-                    className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                  #{tag}
-                    onClick={() => handleEdit()}
+                </span>
-                  >
+              );
-                    <Icon.Edit className="w-4 h-auto mr-2" /> Edit
+            })}
-                  </button>
+          </div>
-                  <button
+        )}
-                    className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+        <div className="w-full flex mt-2 gap-2">
-                    onClick={() => {
+          <Tooltip title="Creator" variant="solid" placement="top" arrow>
-                      handleDeleteShortcutButtonClick(shortcut);
+            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
-                    }}
+              <Icon.User className="w-4 h-auto mr-1" />
-                  >
+              {shortcut.creator.nickname}
-                    <Icon.Trash className="w-4 h-auto mr-2" /> Delete
+            </div>
-                  </button>
+          </Tooltip>
-                </>
+          <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
-              }
+            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
-            ></Dropdown>
+              <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
-          )}
+              {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
+            </div>
+          </Tooltip>
+          <Tooltip title="View count" variant="solid" placement="top" arrow>
+            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
+              <Icon.BarChart2 className="w-4 h-auto mr-1" />
+              {shortcut.view} visits
+            </div>
+          </Tooltip>
         </div>
       </div>
-      {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
+
-      {shortcut.tags.length > 0 && (
+      {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
-        <div className="mt-1 flex flex-row justify-start items-start gap-2">
+    </>
-          <Icon.Tag className="text-gray-400 w-4 h-auto" />
-          {shortcut.tags.map((tag) => {
-            return (
-              <span key={tag} className="text-gray-400 text-sm font-mono leading-4">
-                #{tag}
-              </span>
-            );
-          })}
-        </div>
-      )}
-      <div className="w-full flex mt-2 gap-2">
-        <Tooltip title="Creator" variant="solid" placement="top" arrow>
-          <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
-            <Icon.User className="w-4 h-auto mr-1" />
-            {shortcut.creator.nickname}
-          </div>
-        </Tooltip>
-        <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
-          <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
-            <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
-            {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
-          </div>
-        </Tooltip>
-        <Tooltip title="View count" variant="solid" placement="top" arrow>
-          <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
-            <Icon.BarChart2 className="w-4 h-auto mr-1" />
-            {shortcut.view} visits
-          </div>
-        </Tooltip>
-      </div>
-    </div>
   );
 };