feat: individual myself button

Author: guansss

src/components/Select.tsx

@@ -11,18 +11,20 @@ import clsx from 'clsx'
 interface SelectProps<T> extends Select2Props<T> {
   selectedItem?: T
   resetButtonProps?: ButtonProps
+  canReset?: boolean
   onReset?: () => void
 }
 
 export const Select = <T,>({
   className,
   selectedItem,
+  canReset,
   onReset,
   resetButtonProps,
   inputProps,
   ...props
 }: SelectProps<T>) => {
-  const canReset = selectedItem !== undefined
+  canReset ??= selectedItem !== undefined
 
   return (
     <Label className={clsx('!flex items-center !mb-0', className)}>

src/components/UserFilter.tsx

@@ -1,5 +1,4 @@
 import { Button, Classes, IconSize, MenuItem, Spinner } from '@blueprintjs/core'
-import { Classes as Popover2Classes } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
 import { useAtomValue } from 'jotai'
@@ -51,80 +50,81 @@ export const UserFilter: FC<UserFilterProps> = ({
   }, [auth.token, user, onChange])
 
   return (
-    <Select<MaaUserInfo>
-      className={clsx('items-stretch', className)}
-      items={users}
-      itemListPredicate={() => (error ? [] : users)} // 有 error 时用 noResults 显示错误信息
-      query={query}
-      onQueryChange={(query) => updateQuery(query, false)}
-      onReset={() => onChange(undefined)}
-      itemsEqual={(a, b) => a.id === b.id}
-      itemRenderer={(item, { handleClick, handleFocus, modifiers }) => (
-        <MenuItem
-          roleStructure="listoption"
-          className={clsx(modifiers.active && Classes.ACTIVE)}
-          key={item.id}
-          text={item.userName}
-          onClick={handleClick}
-          onFocus={handleFocus}
-          onMouseDown={onOptionMouseDown}
-          selected={item === user}
-        />
-      )}
-      selectedItem={user}
-      onItemSelect={(user) => onChange(user)}
-      noResults={
-        <MenuItem
-          disabled
-          text={
-            isLoading
-              ? '正在搜索...'
-              : error
-                ? '搜索失败：' + formatError(error)
-                : query && debouncedQuery
-                  ? '查无此人 (ﾟДﾟ≡ﾟдﾟ)!?'
-                  : '输入用户名以搜索'
-          }
-        />
-      }
-      inputProps={{
-        placeholder: '用户名称',
-        leftElement: isValidating ? (
-          <Spinner className="m-[7px] mr-[9px]" size={IconSize.STANDARD} />
-        ) : undefined,
-        rightElement: auth.token ? (
-          <Button
-            minimal
-            className={clsx(
-              !isMyself(user) &&
-                'opacity-75 ' + Popover2Classes.POPOVER2_DISMISS,
-            )}
-            active={isMyself(user)}
-            intent={isMyself(user) ? 'primary' : 'none'}
-            onClick={() => {
-              if (isMyself(user)) {
-                onChange(undefined)
-              } else {
-                onChange(MYSELF)
-              }
-            }}
-          >
-            我自己
-          </Button>
-        ) : undefined,
-      }}
-      popoverProps={{
-        minimal: true,
-      }}
-    >
-      <Button
-        minimal
-        className="!pl-3 !pr-2"
-        icon="person"
-        rightIcon="chevron-down"
+    <>
+      <Select<MaaUserInfo>
+        className={clsx('items-stretch', className)}
+        items={users}
+        itemListPredicate={() => (error ? [] : users)} // 有 error 时用 noResults 显示错误信息
+        query={query}
+        onQueryChange={(query) => updateQuery(query, false)}
+        onReset={() => onChange(undefined)}
+        itemsEqual={(a, b) => a.id === b.id}
+        itemRenderer={(item, { handleClick, handleFocus, modifiers }) => (
+          <MenuItem
+            roleStructure="listoption"
+            className={clsx(modifiers.active && Classes.ACTIVE)}
+            key={item.id}
+            text={item.userName}
+            onClick={handleClick}
+            onFocus={handleFocus}
+            onMouseDown={onOptionMouseDown}
+            selected={item === user}
+          />
+        )}
+        canReset={user && !isMyself(user)}
+        onItemSelect={(user) => onChange(user)}
+        noResults={
+          <MenuItem
+            disabled
+            text={
+              isLoading
+                ? '正在搜索...'
+                : error
+                  ? '搜索失败：' + formatError(error)
+                  : query && debouncedQuery
+                    ? '查无此人 (ﾟДﾟ≡ﾟдﾟ)!?'
+                    : '输入用户名以搜索'
+            }
+          />
+        }
+        inputProps={{
+          placeholder: '用户名称',
+          leftElement: isValidating ? (
+            <Spinner className="m-[7px] mr-[9px]" size={IconSize.STANDARD} />
+          ) : undefined,
+        }}
+        popoverProps={{
+          minimal: true,
+        }}
       >
-        {user ? user.userName : '作者'}
-      </Button>
-    </Select>
+        <Button
+          minimal
+          className="!pl-3 !pr-2"
+          icon="person"
+          rightIcon="chevron-down"
+        >
+          {user && !isMyself(user) ? user.userName : '作者'}
+        </Button>
+      </Select>
+      {!!auth.token && (
+        <Button
+          minimal
+          icon="user"
+          className="!px-3"
+          title="查看我自己的作业"
+          active={isMyself(user)}
+          intent={isMyself(user) ? 'primary' : 'none'}
+          onClick={() => {
+            if (isMyself(user)) {
+              onChange(undefined)
+            } else {
+              onChange(MYSELF)
+            }
+          }}
+        >
+          看看我的
+        </Button>
+      )}
+    </>
   )
 }