feat: clickable user names

Author: guansss

src/components/OperationCard.tsx

@@ -13,6 +13,7 @@ import { useLevels } from '../apis/level'
 import { createCustomLevel, findLevelByStageName } from '../models/level'
 import { Paragraphs } from './Paragraphs'
 import { ReLinkDiv } from './ReLinkDiv'
+import { UserName } from './UserName'
 import { EDifficulty } from './entity/EDifficulty'
 import { EDifficultyLevel, NeoELevel } from './entity/ELevel'
 
@@ -96,15 +97,13 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
           </div>
           <div className="flex-1" />
           <div className="text-zinc-500">
-            <Tooltip2 placement="top" content={`作者：${operation.uploader}`}>
-              <div>
-                <Icon icon="user" className="mr-1.5" />
-                <span>{operation.uploader}</span>
-              </div>
-            </Tooltip2>
+            <Icon icon="user" className="mr-1.5" />
+            <UserName userId={operation.uploaderId}>
+              {operation.uploader}
+            </UserName>
           </div>
         </div>
-      </ReLink>
+      </ReLinkDiv>
 
       <CardActions className="absolute top-4 right-4" operation={operation} />
     </Card>
@@ -170,12 +169,12 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
               />
             </div>
 
-            <Tooltip2 placement="top" content={`作者：${operation.uploader}`}>
-              <div>
-                <Icon icon="user" className="mr-1.5" />
-                <span>{operation.uploader}</span>
-              </div>
-            </Tooltip2>
+            <div>
+              <Icon icon="user" className="mr-1.5" />
+              <UserName userId={operation.uploaderId}>
+                {operation.uploader}
+              </UserName>
+            </div>
           </div>
         </div>
         <div className="flex md:flex-row flex-col gap-4">

src/components/OperationSetCard.tsx

@@ -8,6 +8,7 @@ import { RelativeTime } from 'components/RelativeTime'
 import { OperationSetListItem } from 'models/operation-set'
 
 import { Paragraphs } from './Paragraphs'
+import { UserName } from './UserName'
 
 export const NeoOperationSetCard = ({
   operationSet,
@@ -60,12 +61,10 @@ export const NeoOperationSetCard = ({
           </div>
           <div className="flex-1" />
           <div className="text-zinc-500">
-            <Tooltip2 placement="top" content={`作者：${operationSet.creator}`}>
-              <div>
-                <Icon icon="user" className="mr-1.5" />
-                <span>{operationSet.creator}</span>
-              </div>
-            </Tooltip2>
+            <Icon icon="user" className="mr-1.5" />
+            <UserName userId={operationSet.creatorId}>
+              {operationSet.creator}
+            </UserName>
           </div>
         </div>
       </ReLink>
@@ -117,12 +116,12 @@ export const OperationSetCard = ({
                 moment={operationSet.createTime}
               />
             </div>
-            <Tooltip2 placement="top" content={`作者：${operationSet.creator}`}>
-              <div>
-                <Icon icon="user" className="mr-1.5" />
-                <span>{operationSet.creator}</span>
-              </div>
-            </Tooltip2>
+            <div>
+              <Icon icon="user" className="mr-1.5" />
+              <UserName userId={operationSet.creatorId}>
+                {operationSet.creator}
+              </UserName>
+            </div>
           </div>
         </div>
         <div className="flex md:flex-row flex-col gap-4">

src/components/ReLink.tsx

@@ -1,6 +1,5 @@
 import { isString } from '@sentry/utils'
 
-import clsx from 'clsx'
 import { Link, LinkProps, useSearchParams } from 'react-router-dom'
 import { SetOptional } from 'type-fest'
 
@@ -25,7 +24,7 @@ export function ReLink({ className, search, ...props }: ReLinkProps) {
   return (
     <Link
       {...props}
-      className={clsx('hover:no-underline hover:text-inherit', className)}
+      className={className}
       to={
         isString(props.to)
           ? props.to

src/components/UserName.tsx

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react'
+
+import { ReLink } from './ReLink'
+
+interface UserNameProps {
+  className?: string
+  userId: string
+  children: ReactNode
+}
+
+export const UserName: FC<UserNameProps> = ({
+  className,
+  userId,
+  children,
+}) => {
+  return (
+    <ReLink className={className} to={`/profile/${userId}`}>
+      {children}
+    </ReLink>
+  )
+}

src/components/viewer/OperationSetViewer.tsx

@@ -34,6 +34,7 @@ import { authAtom } from 'store/auth'
 import { wrapErrorMessage } from 'utils/wrapErrorMessage'
 
 import { formatError } from '../../utils/error'
+import { UserName } from '../UserName'
 
 const ManageMenu: FC<{
   operationSet: OperationSet
@@ -225,9 +226,12 @@ function OperationSetViewerInner({
           </FactItem>
 
           <FactItem title="作者" icon="user">
-            <span className="text-gray-800 dark:text-slate-100 font-bold">
+            <UserName
+              className="text-gray-800 dark:text-slate-100 font-bold"
+              userId={operationSet.creatorId}
+            >
               {operationSet.creator}
-            </span>
+            </UserName>
           </FactItem>
         </div>
       </div>

src/components/viewer/OperationViewer.tsx

@@ -45,6 +45,7 @@ import { createCustomLevel, findLevelByStageName } from '../../models/level'
 import { Level } from '../../models/operation'
 import { formatError } from '../../utils/error'
 import { ActionCard } from '../ActionCard'
+import { UserName } from '../UserName'
 import { CommentArea } from './comment/CommentArea'
 
 const ManageMenu: FC<{
@@ -351,9 +352,12 @@ function OperationViewerInner({
           </FactItem>
 
           <FactItem title="作者" icon="user">
-            <span className="text-gray-800 dark:text-slate-100 font-bold">
+            <UserName
+              className="text-gray-800 dark:text-slate-100 font-bold"
+              userId={operation.uploaderId}
+            >
               {operation.uploader}
-            </span>
+            </UserName>
           </FactItem>
         </div>
       </div>

src/components/viewer/comment/CommentArea.tsx

@@ -37,6 +37,7 @@ import { wrapErrorMessage } from '../../../utils/wrapErrorMessage'
 import { Markdown } from '../../Markdown'
 import { OutlinedIcon } from '../../OutlinedIcon'
 import { withSuspensable } from '../../Suspensable'
+import { UserName } from '../../UserName'
 import { CommentForm } from './CommentForm'
 
 interface CommentAreaProps {
@@ -194,7 +195,10 @@ const SubComment = ({
             {fromComment && (
               <>
                 <Tag minimal className="mr-px">
-                  回复 @{fromComment.uploader}
+                  回复
+                  <UserName userId={fromComment.uploaderId}>
+                    @{fromComment.uploader}
+                  </UserName>
                 </Tag>
                 :&nbsp;
               </>
@@ -228,7 +232,7 @@ const CommentHeader = ({
       )}
     >
       <div className={clsx('mr-2', userId === uploaderId && 'font-bold')}>
-        {uploader}
+        <UserName userId={uploaderId}>{uploader}</UserName>
       </div>
       <div className="text-slate-500" title={formatDateTime(uploadTime)}>
         {formatRelativeTime(uploadTime)}