feat(frontend): add navigateToLink button for CopyTextField. close #372. (#376)

* feat(frontend): add navigateToLink button for CopyTextField. close #372.

* chore(frontend): remove unused props for CopyTextField.

frontend/src/components/upload/CopyTextField.tsx

@@ -1,7 +1,8 @@
-import { ActionIcon, TextInput } from "@mantine/core";
+import { ActionIcon, TextInput, Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useRef, useState } from "react";
 import { TbCheck, TbCopy } from "react-icons/tb";
+import { IoOpenOutline } from "react-icons/io5";
 import useTranslate from "../../hooks/useTranslate.hook";
 import toast from "../../utils/toast.util";
 
@@ -37,12 +38,27 @@ function CopyTextField(props: { link: string }) {
           setTextClicked(true);
         }
       }}
+      rightSectionWidth={62}
       rightSection={
-        window.isSecureContext && (
+        <>
-          <ActionIcon onClick={copyLink}>
+          <Tooltip
-            {checkState ? <TbCheck /> : <TbCopy />}
+            label={t("common.text.navigate-to-link")}
-          </ActionIcon>
+            position="top"
-        )
+            offset={-2}
+            openDelay={200}
+          >
+            <a href={props.link}>
+              <ActionIcon>
+                <IoOpenOutline />
+              </ActionIcon>
+            </a>
+          </Tooltip>
+          {window.isSecureContext && (
+            <ActionIcon onClick={copyLink}>
+              {checkState ? <TbCheck /> : <TbCopy />}
+            </ActionIcon>
+          )}
+        </>
       }
     />
   );

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -282,11 +282,12 @@ const CreateUploadModalBody = ({
                   />
                 </Col>
               </Grid>
-              { options.maxExpirationInHours == 0 && <Checkbox
+              {options.maxExpirationInHours == 0 && (
-                label={t("upload.modal.expires.never-long")}
+                <Checkbox
-                {...form.getInputProps("never_expires")}
+                  label={t("upload.modal.expires.never-long")}
-              />
+                  {...form.getInputProps("never_expires")}
-              }
+                />
+              )}
               <Text
                 italic
                 size="xs"

frontend/src/i18n/translations/en-US.ts

@@ -526,6 +526,7 @@ export default {
   "common.button.generate": "Generate",
   "common.button.done": "Done",
   "common.text.link": "Link",
+  "common.text.navigate-to-link": "Go to the link",
   "common.text.or": "or",
   "common.button.go-back": "Go back",
   "common.notify.copied": "Your link was copied to the clipboard",

frontend/src/i18n/translations/zh-CN.ts

@@ -404,6 +404,7 @@ export default {
   "common.button.generate": "生成",
   "common.button.done": "完成",
   "common.text.link": "链接",
+  "common.text.navigate-to-link": "访问链接",
   "common.text.or": "或",
   "common.button.go-back": "返回",
   "common.notify.copied": "已复制到剪贴板",