From cffd6b143142765dd9af51491f23ee943660ea4c Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 25 Jun 2023 22:14:04 +0800
Subject: [PATCH] chore: update shortcut view

---
 web/src/components/CreateShortcutDialog.tsx   |  5 +--
 web/src/components/Header.tsx                 |  5 ++-
 web/src/components/ShortcutView.tsx           | 45 +++++++++++--------
 web/src/components/VisibilityIcon.tsx         | 20 +++++++++
 web/src/components/setting/AccountSection.tsx |  2 +-
 5 files changed, 52 insertions(+), 25 deletions(-)
 create mode 100644 web/src/components/VisibilityIcon.tsx

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index b7ecc12..bef2b1f 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -128,11 +128,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               Name <span className="text-red-600">*</span>
             </span>
             <div className="relative w-full">
-              <span className="absolute z-1 top-2 left-3 text-gray-400">s/</span>
               <Input
-                className="w-full !pl-7"
+                className="w-full"
                 type="text"
-                placeholder="shortcut-name"
+                placeholder="Unique shortcut name"
                 value={state.shortcutCreate.name}
                 onChange={handleNameInputChange}
               />
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 47090e9..159d575 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -2,6 +2,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { useAppSelector } from "../stores";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
+import { Avatar } from "@mui/joy";
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
@@ -24,11 +25,12 @@ const Header: React.FC = () => {
           <Dropdown
             trigger={
               <button className="flex flex-row justify-end items-center cursor-pointer">
-                <Icon.User className="w-5 h-auto mr-1" />
+                <Avatar size="sm" variant="plain" />
                 <span>{user.nickname}</span>
                 <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
               </button>
             }
+            actionsClassName="!w-36"
             actions={
               <>
                 <Link
@@ -45,7 +47,6 @@ const Header: React.FC = () => {
                 </button>
               </>
             }
-            actionsClassName="!w-40"
           ></Dropdown>
         </div>
       </div>
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 4502ede..0e0168d 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -1,12 +1,13 @@
-import copy from "copy-to-clipboard";
-import { absolutifyLink } from "../helpers/utils";
-import toast from "react-hot-toast";
-import { showCommonDialog } from "./Alert";
-import { shortcutService } from "../services";
 import { Tooltip } from "@mui/joy";
+import copy from "copy-to-clipboard";
+import toast from "react-hot-toast";
+import { shortcutService } from "../services";
+import { useAppSelector } from "../stores";
+import { absolutifyLink } from "../helpers/utils";
+import { showCommonDialog } from "./Alert";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
-import { useAppSelector } from "../stores";
+import VisibilityIcon from "./VisibilityIcon";
 
 interface Props {
   shortcut: Shortcut;
@@ -38,13 +39,13 @@ const ShortcutView = (props: Props) => {
   };
 
   return (
-    <div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg">
+    <div className="w-full flex flex-col justify-start items-start border px-4 py-3 mb-2 rounded-lg hover:shadow">
       <div className="w-full flex flex-row justify-between items-center">
         <p className="text-lg mr-1 shrink-0">
-          <span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
-            <span className="text-gray-400">o/</span>
+          <button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
+            <span className="text-gray-400">s/</span>
             {shortcut.name}
-          </span>
+          </button>
         </p>
         <div className="flex flex-row justify-end items-center space-x-2">
           <Tooltip title="Copy link" variant="solid" placement="top" arrow>
@@ -63,19 +64,19 @@ const ShortcutView = (props: Props) => {
               <>
                 <button
                   disabled={!havePermission(shortcut)}
-                  className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                  className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                   onClick={() => handleEdit()}
                 >
-                  Edit
+                  <Icon.Edit className="w-4 h-auto mr-2" /> Edit
                 </button>
                 <button
                   disabled={!havePermission(shortcut)}
-                  className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                  className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                   onClick={() => {
                     handleDeleteShortcutButtonClick(shortcut);
                   }}
                 >
-                  Delete
+                  <Icon.Trash className="w-4 h-auto mr-2" /> Delete
                 </button>
               </>
             }
@@ -83,8 +84,8 @@ const ShortcutView = (props: Props) => {
         </div>
       </div>
       {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
-      {shortcut.tags.length > 0 && false && (
-        <div className="mt-2 flex flex-row justify-start items-start gap-2">
+      {shortcut.tags.length > 0 && (
+        <div className="mt-1 flex flex-row justify-start items-start gap-2">
           <Icon.Tag className="text-gray-400 w-4 h-auto" />
           {shortcut.tags.map((tag) => {
             return (
@@ -97,15 +98,21 @@ const ShortcutView = (props: Props) => {
       )}
       <div className="w-full flex mt-2 gap-2">
         <Tooltip title="Creator" variant="solid" placement="top" arrow>
-          <div className="w-auto px-2 pr-3 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 font-mono text-sm">
+          <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
             <Icon.User className="w-4 h-auto mr-1" />
             {shortcut.creator.nickname}
           </div>
         </Tooltip>
         <Tooltip title="View count" variant="solid" placement="top" arrow>
-          <div className="w-auto px-2 pr-3 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 font-mono text-sm">
+          <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
+            <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
+            {shortcut.visibility}
+          </div>
+        </Tooltip>
+        <Tooltip title="View count" variant="solid" placement="top" arrow>
+          <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
             <Icon.Eye className="w-4 h-auto mr-1" />
-            {shortcut.view}
+            {shortcut.view} visits
           </div>
         </Tooltip>
       </div>
diff --git a/web/src/components/VisibilityIcon.tsx b/web/src/components/VisibilityIcon.tsx
new file mode 100644
index 0000000..183d4ff
--- /dev/null
+++ b/web/src/components/VisibilityIcon.tsx
@@ -0,0 +1,20 @@
+import Icon from "./Icon";
+
+interface Props {
+  visibility: Visibility;
+  className?: string;
+}
+
+const VisibilityIcon = (props: Props) => {
+  const { visibility, className } = props;
+  if (visibility === "PRIVATE") {
+    return <Icon.Lock className={className || ""} />;
+  } else if (visibility === "WORKSPACE") {
+    return <Icon.Building2 className={className || ""} />;
+  } else if (visibility === "PUBLIC") {
+    return <Icon.Globe2 className={className || ""} />;
+  }
+  return null;
+};
+
+export default VisibilityIcon;
diff --git a/web/src/components/setting/AccountSection.tsx b/web/src/components/setting/AccountSection.tsx
index 24bc56d..35f9edb 100644
--- a/web/src/components/setting/AccountSection.tsx
+++ b/web/src/components/setting/AccountSection.tsx
@@ -16,7 +16,7 @@ const AccountSection: React.FC = () => {
         <p className="text-gray-400">Account</p>
         <p className="flex flex-row justify-start items-center mt-2">
           <span className="text-xl font-medium">{user.nickname}</span>
-          {isAdmin && <span className="ml-2 bg-blue-600 text-white px-3 leading-7 text-sm rounded-full">Admin</span>}
+          {isAdmin && <span className="ml-2 bg-blue-600 text-white px-2 leading-6 text-sm rounded-full">Admin</span>}
         </p>
         <p className="flex flex-row justify-start items-center">
           <span className="mr-3 text-gray-500 font-mono">Email: </span>