Merge pull request #65 from Ray-D-Song/style

Style
Ray-D-Song · Dec 13, 2024 · d376e3f · d376e3f
2 parents b3686f9 + 4c24e76
commit d376e3f
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 20 deletions.
diff --git a/packages/plugin/popup/components/NewFolderDialog.tsx b/packages/plugin/popup/components/NewFolderDialog.tsx
@@ -49,7 +49,12 @@ function NewFolderDialog({ afterSubmit, open, setOpen }: NewFolderProps) {
       <DialogContent className="w-64">
         <DialogTitle>Create New Folder</DialogTitle>
         <DialogDescription></DialogDescription>
-        <Input value={name} onChange={e => setName(e.target.value)} placeholder="Folder Name" />
+        <Input
+          value={name}
+          onChange={e => setName(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSubmit()}
+          placeholder="Folder Name"
+        />
         <Button onClick={handleSubmit}>Create</Button>
       </DialogContent>
     </Dialog>

diff --git a/packages/plugin/popup/components/TagInputWithCache.tsx b/packages/plugin/popup/components/TagInputWithCache.tsx
@@ -3,7 +3,7 @@ import type { AutoCompleteTagInputRef } from '@web-archive/shared/components/aut
 import AutoCompleteTagInput from '@web-archive/shared/components/auto-complete-tag-input'
 import { Button } from '@web-archive/shared/components/button'
 import type { GenerateTagProps } from '@web-archive/shared/utils'
-import { generateTagByOpenAI, isNil } from '@web-archive/shared/utils'
+import { generateTagByOpenAI } from '@web-archive/shared/utils'
 import { useRequest } from 'ahooks'
 import { AlertCircleIcon, Loader2Icon, SparklesIcon } from 'lucide-react'
 import { sendMessage } from 'webext-bridge/popup'

diff --git a/packages/shared/components/badge.tsx b/packages/shared/components/badge.tsx
@@ -33,4 +33,10 @@ function Badge({ className, variant, ...props }: BadgeProps) {
   )
 }
 
-export { Badge, badgeVariants }
+function BadgeSpan({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants, BadgeSpan }
diff --git a/packages/web/src/components/edit-folder-dialog.tsx b/packages/web/src/components/edit-folder-dialog.tsx
@@ -57,7 +57,12 @@ function EditFolderDialog({ afterSubmit, open, setOpen, editFolder }: EditFolder
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogTitle>Edit Folder</DialogTitle>
-        <Input value={folderName} onChange={e => setFolderName(e.target.value)} placeholder="Folder Name" />
+        <Input
+          value={folderName}
+          onChange={e => setFolderName(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSubmit()}
+          placeholder="Folder Name"
+        />
         <Button onClick={handleSubmit}>Update</Button>
       </DialogContent>
     </Dialog>

diff --git a/packages/web/src/components/edit-tag-dialog.tsx b/packages/web/src/components/edit-tag-dialog.tsx
@@ -63,7 +63,12 @@ function EditTagDialog({ afterSubmit, open, setOpen, editTag }: EditTagProps) {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogTitle>Edit Tag</DialogTitle>
-        <Input value={tagName} onChange={e => setTagName(e.target.value)} placeholder="Tag Name" />
+        <Input
+          value={tagName}
+          onChange={e => setTagName(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSubmit()}
+          placeholder="Tag Name"
+        />
         <Button onClick={handleSubmit}>Update</Button>
       </DialogContent>
     </Dialog>

diff --git a/packages/web/src/components/new-folder-dialog.tsx b/packages/web/src/components/new-folder-dialog.tsx
@@ -41,7 +41,12 @@ function NewFolderDialog({ afterSubmit, open, setOpen }: NewFolderProps) {
       <DialogContent>
         <DialogTitle>Create New Folder</DialogTitle>
         <DialogDescription></DialogDescription>
-        <Input value={name} onChange={e => setName(e.target.value)} placeholder="Folder Name" />
+        <Input
+          value={name}
+          onChange={e => setName(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSubmit()}
+          placeholder="Folder Name"
+        />
         <Button onClick={handleSubmit}>Create</Button>
       </DialogContent>
     </Dialog>

diff --git a/packages/web/src/components/page-card.tsx b/packages/web/src/components/page-card.tsx
@@ -7,7 +7,8 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@web-a
 import { ExternalLink, Eye, EyeOff, SquarePen, Trash } from 'lucide-react'
 import { useLocation } from 'react-router-dom'
 import toast from 'react-hot-toast'
-import { Badge } from '@web-archive/shared/components/badge'
+import { BadgeSpan } from '@web-archive/shared/components/badge'
+import { TooltipPortal } from '@radix-ui/react-tooltip'
 import ScreenshotView from './screenshot-view'
 import { updatePageShowcase } from '~/data/page'
 import CardEditDialog from '~/components/card-edit-dialog'
@@ -18,7 +19,7 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
   const { tagCache, refreshTagCache } = useContext(TagContext)
   const bindTags = tagCache?.filter(tag => tag.pageIds.includes(page.id)) ?? []
   const tagBadgeList = bindTags.map((tag) => {
-    return (<Badge key={tag.id} variant="outline" className="select-none">{tag.name}</Badge>)
+    return (<BadgeSpan key={tag.id} variant="outline" className="select-none">{tag.name}</BadgeSpan>)
   })
 
   const location = useLocation()
@@ -37,14 +38,14 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
     }
   }
 
-  const [showcaseSate, setShowcaseState] = useState(page.isShowcased)
+  const [showcaseState, setShowcaseState] = useState(page.isShowcased)
   const { run: updateShowcase } = useRequest(
     updatePageShowcase,
     {
       manual: true,
       onSuccess() {
         toast.success('Success')
-        setShowcaseState(showcaseSate === 1 ? 0 : 1)
+        setShowcaseState(showcaseState === 1 ? 0 : 1)
       },
     },
   )
@@ -115,9 +116,11 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
                   <ExternalLink className="w-5 h-5" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>
-                Open original link
-              </TooltipContent>
+              <TooltipPortal>
+                <TooltipContent>
+                  Open original link
+                </TooltipContent>
+              </TooltipPortal>
             </Tooltip>
           </TooltipProvider>
 
@@ -144,19 +147,22 @@ function Comp({ page, onPageDelete }: { page: Page, onPageDelete?: (page: Page)
                         size="sm"
                         onClick={(e) => {
                           e.stopPropagation()
-                          updateShowcase({ id: page.id, isShowcased: showcaseSate === 1 ? 0 : 1 })
+                          updateShowcase({ id: page.id, isShowcased: showcaseState === 1 ? 0 : 1 })
                         }}
                       >
                         {
-                          showcaseSate === 1 ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />
+                          showcaseState === 1 ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />
                         }
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>
-                      {
-                        showcaseSate === 1 ? 'Remove from showcase' : 'Show in showcase'
-                      }
-                    </TooltipContent>
+                    <TooltipPortal>
+                      <TooltipContent>
+                        {
+                          showcaseState === 1 ? 'Remove from showcase' : 'Show in showcase'
+                        }
+                      </TooltipContent>
+                    </TooltipPortal>
+
                   </Tooltip>
                 </TooltipProvider>
               </>