Merge pull request #6 from xwcoder/feature/copy

feat(reader): add copy url function

Author: xwcoder

src/i18n/en-US.json

@@ -11,7 +11,11 @@
       "markRead": "Mark as read",
       "markUnread": "Mark as unread",
       "refresh": "Refresh",
-      "openExternal": "Open in browser"
+      "openExternal": "Open in browser",
+      "copy": {
+        "title": "Copy url",
+        "success": "Copied"
+      }
     },
 
     "form": {

src/i18n/zh-CN.json

@@ -11,7 +11,11 @@
       "markRead": "标记为已读",
       "markUnread": "标记为未读",
       "refresh": "刷新",
-      "openExternal": "在浏览器中打开"
+      "openExternal": "在浏览器中打开",
+      "copy": {
+        "title": "复制链接",
+        "success": "已复制到剪贴板"
+      }
     },
 
     "form": {

src/renderer/apps/reader/SidePanel/feed-item.tsx

@@ -3,7 +3,7 @@
 import { observer } from 'mobx-react-lite'
 import { makeStyles, tokens } from '@fluentui/react-components'
 import { store } from '@/renderer/store'
-import { DeleteButton } from '@/renderer/apps/reader/components/toolbar'
+import { DeleteButton, CopyButton } from '@/renderer/apps/reader/components/toolbar'
 import { Feed } from '@/types/reader'
 
 const { readerStore } = store
@@ -29,7 +29,12 @@ const useStyles = makeStyles({
 })
 
 function Item({ data }: Props) {
-  const { id, title, unreadCount = 0 } = data
+  const {
+    id,
+    title,
+    unreadCount = 0,
+    url,
+  } = data
   const active = readerStore.tab === id
   const styles = useStyles()
 
@@ -63,11 +68,18 @@ function Item({ data }: Props) {
       </div>
       <div className="absolute top-0 right-0 hidden group-hover:block">
         <div className={styles.toolbar}>
-          <DeleteButton
-            className="h-7"
-            fontSize={16}
-            onClick={deleteFeed}
-          />
+          <div className="flex">
+            <CopyButton
+              className="h-7 w-8"
+              fontSize={16}
+              content={url}
+            />
+            <DeleteButton
+              className="h-7 w-8"
+              fontSize={16}
+              onClick={deleteFeed}
+            />
+          </div>
         </div>
       </div>
     </div>

src/renderer/apps/reader/components/toolbar/copy-button.tsx

@@ -0,0 +1,58 @@
+import intl from 'react-intl-universal'
+import { CopyRegular } from '@fluentui/react-icons'
+import {
+  useId,
+  useToastController,
+  Toast,
+  ToastIntent,
+  ToastTitle,
+  Toaster,
+} from '@fluentui/react-components'
+import Button from './button'
+
+type Props = {
+  className: string
+  fontSize: number
+  content: string
+}
+
+export default function CopyButton(props: Props) {
+  const { className, fontSize = 18, content } = props
+
+  const toasterId = useId('toaster')
+  const { dispatchToast } = useToastController(toasterId)
+
+  const notify = (text: string, intent: ToastIntent) => dispatchToast(
+    <Toast>
+      <ToastTitle>
+        {text}
+      </ToastTitle>
+    </Toast>,
+    { intent },
+  )
+
+  const onClick = async () => {
+    try {
+      await navigator.clipboard.writeText(content)
+      notify(intl.get('reader.action.copy.success'), 'success')
+    } catch (e) {
+      notify(`${(e as Error).name}: ${(e as Error).message}`, 'error')
+    }
+  }
+
+  return (
+    <>
+      <Button
+        icon={CopyRegular}
+        className={className}
+        fontSize={fontSize}
+        onClick={onClick}
+        tip={intl.get('reader.action.copy.title')}
+      />
+      <Toaster
+        position="top-end"
+        toasterId={toasterId}
+      />
+    </>
+  )
+}

src/renderer/apps/reader/components/toolbar/index.tsx

@@ -3,3 +3,4 @@ export { default as RefreshButton } from './refresh-button'
 export { default as DeleteButton } from './delete-button'
 export { default as MarkReadButton } from './mark-read-button'
 export { default as StarButton } from './star-button'
+export { default as CopyButton } from './copy-button'