From f4ff604a91c26c0a20be07d91eb22daaab8855eb Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Fri, 14 Oct 2022 16:55:40 +0800
Subject: [PATCH 1/4] refactor: improve mentions

---
 ui/src/components/Mentions/index.tsx |  2 +-
 ui/src/utils/index.ts                | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/Mentions/index.tsx b/ui/src/components/Mentions/index.tsx
index cc63e85a..9b29c86d 100644
--- a/ui/src/components/Mentions/index.tsx
+++ b/ui/src/components/Mentions/index.tsx
@@ -73,7 +73,7 @@ const Mentions: FC<IProps> = ({ children, pageUsers, onSelected }) => {
       return;
     }
 
-    const text = `@${item?.displayName}[${item?.userName}] `;
+    const text = `@${item?.userName}`;
     onSelected(
       `${value.substring(
         0,
diff --git a/ui/src/utils/index.ts b/ui/src/utils/index.ts
index 0e23dfe2..2912ca0c 100644
--- a/ui/src/utils/index.ts
+++ b/ui/src/utils/index.ts
@@ -78,8 +78,8 @@ function scrollTop(element) {
  * @returns Array<{displayName: string, userName: string}>
  */
 function matchedUsers(markdown) {
-  const globalReg = /@(.*?)\[(.*?)\]/gm;
-  const reg = /@(.*?)\[(.*?)\]/;
+  const globalReg = /\B@([\w\\_\\.]+)/g;
+  const reg = /\B@([\w\\_\\.]+)/;
 
   const users = markdown.match(globalReg);
   if (!users) {
@@ -88,8 +88,7 @@ function matchedUsers(markdown) {
   return users.map((user) => {
     const matched = user.match(reg);
     return {
-      displayName: matched[2],
-      userName: matched[2],
+      userName: matched[1],
     };
   });
 }
@@ -100,8 +99,8 @@ function matchedUsers(markdown) {
  * @returns string
  */
 function parseUserInfo(markdown) {
-  const globalReg = /@(.*?)\[(.*?)\]/gm;
-  return markdown.replace(globalReg, '[@$1](/u/$2)');
+  const globalReg = /\B@([\w\\_\\.]+)/g;
+  return markdown.replace(globalReg, '[@$1](/u/$1)');
 }
 
 export {

From 1126feef25d0c92ba86d10a4c7bc236cab0b9def Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Fri, 14 Oct 2022 17:08:21 +0800
Subject: [PATCH 2/4] refactor: perfect regular expressions

---
 ui/src/utils/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/utils/index.ts b/ui/src/utils/index.ts
index 2912ca0c..20cde293 100644
--- a/ui/src/utils/index.ts
+++ b/ui/src/utils/index.ts
@@ -78,7 +78,7 @@ function scrollTop(element) {
  * @returns Array<{displayName: string, userName: string}>
  */
 function matchedUsers(markdown) {
-  const globalReg = /\B@([\w\\_\\.]+)/g;
+  const globalReg = /\B@([\w|]+)/g;
   const reg = /\B@([\w\\_\\.]+)/;
 
   const users = markdown.match(globalReg);
@@ -99,7 +99,7 @@ function matchedUsers(markdown) {
  * @returns string
  */
 function parseUserInfo(markdown) {
-  const globalReg = /\B@([\w\\_\\.]+)/g;
+  const globalReg = /\B@([\w\\_\\.\\-]+)/g;
   return markdown.replace(globalReg, '[@$1](/u/$1)');
 }
 

From 71b8728f66112752b804a9f2f900949aff29563f Mon Sep 17 00:00:00 2001
From: "haitao(lj)" <haitao@sifou.com>
Date: Fri, 14 Oct 2022 17:12:34 +0800
Subject: [PATCH 3/4] fix(type): flaged -> flagged

---
 ui/src/pages/Admin/Flags/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/Admin/Flags/index.tsx b/ui/src/pages/Admin/Flags/index.tsx
index 4004e6e4..0ba1081e 100644
--- a/ui/src/pages/Admin/Flags/index.tsx
+++ b/ui/src/pages/Admin/Flags/index.tsx
@@ -118,8 +118,8 @@ const Flags: FC = () => {
                       className="fs-14 text-secondary"
                     />
                     <BaseUserCard data={li.report_user} className="mt-2 mb-2" />
-                    {li.flaged_reason ? (
-                      <small>{li.flaged_content}</small>
+                    {li.flagged_reason ? (
+                      <small>{li.flagged_content}</small>
                     ) : (
                       <small>
                         {li.reason?.name}

From b84a873d33085556fe62b530dea1dc897d94f145 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Fri, 14 Oct 2022 17:16:42 +0800
Subject: [PATCH 4/4] refactor: responsive sidebar adjustment

---
 ui/src/pages/Questions/Ask/index.tsx        | 2 +-
 ui/src/pages/Questions/Detail/index.tsx     | 2 +-
 ui/src/pages/Questions/EditAnswer/index.tsx | 2 +-
 ui/src/pages/Questions/index.tsx            | 2 +-
 ui/src/pages/Search/index.tsx               | 2 +-
 ui/src/pages/Tags/Detail/index.tsx          | 2 +-
 ui/src/pages/Tags/Edit/index.tsx            | 2 +-
 ui/src/pages/Tags/Info/index.tsx            | 4 ++--
 ui/src/pages/Users/Notifications/index.tsx  | 2 +-
 ui/src/pages/Users/Personal/index.tsx       | 8 ++++++--
 10 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/ui/src/pages/Questions/Ask/index.tsx b/ui/src/pages/Questions/Ask/index.tsx
index be9ac153..abcc86f6 100644
--- a/ui/src/pages/Questions/Ask/index.tsx
+++ b/ui/src/pages/Questions/Ask/index.tsx
@@ -412,7 +412,7 @@ const Ask = () => {
               )}
             </Form>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card className="mb-4">
               <Card.Header>
                 {t('title', { keyPrefix: 'how_to_format' })}
diff --git a/ui/src/pages/Questions/Detail/index.tsx b/ui/src/pages/Questions/Detail/index.tsx
index 7c2c2d6e..ee02512d 100644
--- a/ui/src/pages/Questions/Detail/index.tsx
+++ b/ui/src/pages/Questions/Detail/index.tsx
@@ -165,7 +165,7 @@ const Index = () => {
               />
             )}
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <RelatedQuestions id={question?.id || ''} />
           </Col>
         </Row>
diff --git a/ui/src/pages/Questions/EditAnswer/index.tsx b/ui/src/pages/Questions/EditAnswer/index.tsx
index aecb9c51..118fd33c 100644
--- a/ui/src/pages/Questions/EditAnswer/index.tsx
+++ b/ui/src/pages/Questions/EditAnswer/index.tsx
@@ -217,7 +217,7 @@ const Ask = () => {
               </div>
             </Form>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card>
               <Card.Header>
                 {t('title', { keyPrefix: 'how_to_format' })}
diff --git a/ui/src/pages/Questions/index.tsx b/ui/src/pages/Questions/index.tsx
index c3ffd271..86a1092a 100644
--- a/ui/src/pages/Questions/index.tsx
+++ b/ui/src/pages/Questions/index.tsx
@@ -29,7 +29,7 @@ const Questions: FC = () => {
           <Col xxl={7} lg={8} sm={12}>
             <QuestionList source="questions" />
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <FollowingTags />
             <HotQuestions />
           </Col>
diff --git a/ui/src/pages/Search/index.tsx b/ui/src/pages/Search/index.tsx
index 93019294..d08968f4 100644
--- a/ui/src/pages/Search/index.tsx
+++ b/ui/src/pages/Search/index.tsx
@@ -53,7 +53,7 @@ const Index = () => {
               />
             </div>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Tips />
           </Col>
         </Row>
diff --git a/ui/src/pages/Tags/Detail/index.tsx b/ui/src/pages/Tags/Detail/index.tsx
index 4a6e14b4..b3780259 100644
--- a/ui/src/pages/Tags/Detail/index.tsx
+++ b/ui/src/pages/Tags/Detail/index.tsx
@@ -90,7 +90,7 @@ const Questions: FC = () => {
             </div>
             <QuestionList source="tag" />
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <FollowingTags />
             <HotQuestions />
           </Col>
diff --git a/ui/src/pages/Tags/Edit/index.tsx b/ui/src/pages/Tags/Edit/index.tsx
index 216b2a73..2b0541e1 100644
--- a/ui/src/pages/Tags/Edit/index.tsx
+++ b/ui/src/pages/Tags/Edit/index.tsx
@@ -249,7 +249,7 @@ const Ask = () => {
               </div>
             </Form>
           </Col>
-          <Col xxl={3} lg={4} sm={12}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card>
               <Card.Header>
                 {t('title', { keyPrefix: 'how_to_format' })}
diff --git a/ui/src/pages/Tags/Info/index.tsx b/ui/src/pages/Tags/Info/index.tsx
index 0765469b..96cd814a 100644
--- a/ui/src/pages/Tags/Info/index.tsx
+++ b/ui/src/pages/Tags/Info/index.tsx
@@ -93,7 +93,7 @@ const TagIntroduction = () => {
       <PageTitle title={pageTitle} />
       <Container className="pt-4 mt-2 mb-5">
         <Row className="justify-content-center">
-          <Col xs={7}>
+          <Col xxl={7} lg={8} sm={12}>
             <h3 className="mb-3">
               <Link
                 to={`/tags/${tagInfo?.slug_name}`}
@@ -133,7 +133,7 @@ const TagIntroduction = () => {
               })}
             </div>
           </Col>
-          <Col xs={3}>
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
             <Card>
               <Card.Header className="d-flex justify-content-between">
                 <span>{t('synonyms.title')}</span>
diff --git a/ui/src/pages/Users/Notifications/index.tsx b/ui/src/pages/Users/Notifications/index.tsx
index ff93bc0c..aef9be45 100644
--- a/ui/src/pages/Users/Notifications/index.tsx
+++ b/ui/src/pages/Users/Notifications/index.tsx
@@ -120,7 +120,7 @@ const Notifications = () => {
               </div>
             )}
           </Col>
-          <Col xxl={3} lg={4} sm={12} />
+          <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0" />
         </Row>
       </Container>
     </>
diff --git a/ui/src/pages/Users/Personal/index.tsx b/ui/src/pages/Users/Personal/index.tsx
index c2b6352a..7c099a4b 100644
--- a/ui/src/pages/Users/Personal/index.tsx
+++ b/ui/src/pages/Users/Personal/index.tsx
@@ -60,7 +60,11 @@ const Personal: FC = () => {
         <Col xxl={7} lg={8} sm={12}>
           <UserInfo data={userInfo?.info} />
         </Col>
-        <Col xxl={3} lg={4} sm={12} className="d-flex justify-content-end">
+        <Col
+          xxl={3}
+          lg={4}
+          sm={12}
+          className="d-flex justify-content-end mt-5 mt-lg-0">
           {isSelf && (
             <div>
               <Button
@@ -111,7 +115,7 @@ const Personal: FC = () => {
             </div>
           )}
         </Col>
-        <Col xxl={3} lg={4} sm={12}>
+        <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
           <h5 className="mb-3">Stats</h5>
           {userInfo?.info && (
             <>