Merge branch 'release/v3.3.0'

.cz.yaml

@@ -2,6 +2,6 @@ commitizen:
   changelog_start_rev: v2.0.0
   name: cz_conventional_commits
   tag_format: v$version
-  version: 3.2.0
+  version: 3.3.0
   version_files:
   - package.json

CHANGELOG.md

@@ -1,3 +1,22 @@
+## v3.3.0 (2022-04-03)
+
+### Fix
+
+- **cache**: remove `Cache#targetReply`
+- **mutation**: recover user card modal mutation
+- **dependencies**: incorrect `@types/redux-state-sync` version
+- **mutation**: conflicts with "LIHKG Show User Info"
+
+### Feat
+
+- **components**: update add label button icon
+- **components**: update `BaseIconButton` to support custom icon element
+- **mutation**: move add label button to beside of the reply button
+
+### Refactor
+
+- **typings**: update typings
+
 ## v3.2.0 (2022-04-02)
 
 ### Feat

dist/libel.js.LICENSE.txt

@@ -22,6 +22,12 @@ object-assign
   http://jedwatson.github.io/classnames
 */
 
+/*!
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+
 /*!
  * JavaScript Cookie v2.2.1
  * https://github.com/js-cookie/js-cookie

dist/libel.meta.js

@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name        Libel
-// @version     3.2.0
+// @version     3.3.0
 // @author      kitce <[email protected]>
 // @description Label users on LIHKG
 // @homepage    https://kitce.github.io/libel

package.json

@@ -2,7 +2,7 @@
   "name": "libel",
   "namespace": "libel",
   "displayName": "Libel",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Label users on LIHKG",
   "author": "kitce <[email protected]>",
   "repository": {
@@ -31,6 +31,11 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^0.6.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@reduxjs/toolkit": "^1.5.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.27.0",
@@ -70,7 +75,7 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/redux-persist": "^4.3.1",
-    "@types/redux-state-sync": "^3.2.0",
+    "@types/redux-state-sync": "^3.1.1",
     "@types/sass": "^1.16.0",
     "@types/semver": "^7.3.6",
     "@types/tailwindcss": "^2.0.2",

src/components/AddLabelButton/AddLabelButton.module.scss

@@ -1,9 +1,22 @@
+@import '../../stylesheets/base';
+
 .container {
   @apply cursor-default;
+
+  &:empty {
+    @apply hidden;
+  }
 }
 
 .add-label-button {
-  @apply absolute top-0 left-0;
-  @apply h-full w-full;
   font-size: 1em;
+
+  &:focus,
+  &:hover {
+    color: $color-black;
+
+    @include dark-mode() {
+      color: $color-white;
+    }
+  }
 }

src/components/AddLabelButton/AddLabelButton.tsx

@@ -1,31 +1,40 @@
+import { faTag } from '@fortawesome/free-solid-svg-icons/faTag';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useState } from 'react';
 import { uploadImage } from '../../apis/nacx';
+import * as ATTRIBUTES from '../../constants/attributes';
 import { EventAction, EventCategory, EventLabel } from '../../constants/ga';
 import * as TEXTS from '../../constants/texts';
 import * as gtag from '../../helpers/gtag';
 import { mapPostToSource } from '../../helpers/label';
 import { actions as personalActions, IAddLabelPayload } from '../../store/slices/personal';
 import { useTypedDispatch } from '../../store/store';
 import type { IPost } from '../../types/lihkg';
-import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
 import LabelFormModal, { TLabelFormProps } from '../LabelFormModal/LabelFormModal';
 import styles from './AddLabelButton.module.scss';
 
 interface IProps {
   user: string;
-  targetReply: IPost;
+  post: IPost;
 }
 
-const AddLabelButton: React.FunctionComponent<IProps> = (props) => {
-  const { user, targetReply, children } = props;
+type TProps = IProps;
+
+const AddLabelButton: React.FunctionComponent<TProps> = (props) => {
+  const { user, post } = props;
 
   const dispatch = useTypedDispatch();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [targetReply, setTargetReply] = useState<HTMLElement | null>(null);
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = useCallback((event) => {
     event.preventDefault();
     if (!loading) {
+      const targetReplySelector = `[${ATTRIBUTES.dataPostId}="${post.post_id}"]`;
+      const targetReply = document.querySelector<HTMLDivElement>(targetReplySelector);
+      setTargetReply(targetReply);
       setOpen(true);
       // analytics
       gtag.event(EventAction.Open, { event_category: EventCategory.Modal, event_label: EventLabel.AddLabel });
@@ -40,7 +49,7 @@ const AddLabelButton: React.FunctionComponent<IProps> = (props) => {
 
   const handleLabelFormSubmit: TLabelFormProps['onSubmit'] = useCallback(async (data) => {
     const { text, reason, color, image, meta } = data;
-    const source = mapPostToSource(targetReply);
+    const source = mapPostToSource(post);
     const payload: IAddLabelPayload = { user, text, reason, color, image, source };
     setLoading(true);
     const { screenshot } = meta;
@@ -72,23 +81,26 @@ const AddLabelButton: React.FunctionComponent<IProps> = (props) => {
     handleLabelFormModalClose();
     // analytics
     gtag.event(EventAction.Add, { event_category: EventCategory.Label, event_label: text });
-  }, [user, targetReply, handleLabelFormModalClose]);
+  }, [user, post, handleLabelFormModalClose]);
 
   return (
     <React.Fragment>
-      <Button
+      <IconButton
         className={styles.addLabelButton}
-        loading={loading}
+        icon={<FontAwesomeIcon icon={faTag} />}
+        aria-label={TEXTS.BUTTON_TEXT_ADD_LABEL}
+        data-tip={TEXTS.BUTTON_TEXT_ADD_LABEL}
+        title={TEXTS.BUTTON_TEXT_ADD_LABEL}
+        disabled={loading}
         onClick={handleClick}
-      >
-        {children}
-      </Button>
+      />
       <LabelFormModal
         open={open}
         user={user}
         escape={false}
         fragile={false}
         loading={loading}
+        targetReply={targetReply}
         onClose={handleLabelFormModalClose}
         onSubmit={handleLabelFormSubmit}
       />

src/components/BaseIconButton/BaseIconButton.module.scss

@@ -1,5 +1,8 @@
 .base-icon-button {
-  @apply inline-flex items-center justify-center;
+  &,
+  .icon {
+    @apply inline-flex items-center justify-center;
+  }
 
   .icon {
     &:not(:only-child) {

src/components/BaseIconButton/BaseIconButton.tsx

@@ -6,7 +6,7 @@ import type { IconName } from '../Icon/types';
 import styles from './BaseIconButton.module.scss';
 
 interface IProps {
-  icon: IconName;
+  icon: IconName | JSX.Element;
 }
 
 export type TProps = IProps & TButtonProps;
@@ -19,7 +19,13 @@ const BaseIconButton: React.FunctionComponent<TProps> = (props) => {
       className={classnames(className, styles.baseIconButton)}
     >
       <React.Fragment>
-        <Icon className={styles.icon} icon={icon} />
+        {
+          typeof icon === 'string' ? (
+            <Icon className={styles.icon} icon={icon} />
+          ) : (
+            <span className={styles.icon}>{icon}</span>
+          )
+        }
         {
           children && (
             <span>{children}</span>