From 9ad2eaebc52b37811458bb4b605903888b2be4c4 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 23 Jun 2023 20:24:40 +0800
Subject: [PATCH] chore: update shortcut list style

---
 web/src/components/CreateShortcutDialog.tsx | 19 +++---
 web/src/components/ShortcutListView.tsx     | 70 +++++++--------------
 web/src/components/common/Dropdown.tsx      |  4 +-
 3 files changed, 35 insertions(+), 58 deletions(-)

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index dcfdffd..1bfee97 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -127,13 +127,16 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
             <span className="mb-2">
               Name <span className="text-red-600">*</span>
             </span>
-            <Input
-              className="w-full"
-              type="text"
-              placeholder="shortcut-name"
-              value={state.shortcutCreate.name}
-              onChange={handleNameInputChange}
-            />
+            <div className="relative w-full">
+              <span className="absolute z-1 top-2 left-3 text-gray-400">o/</span>
+              <Input
+                className="w-full !pl-7"
+                type="text"
+                placeholder="shortcut-name"
+                value={state.shortcutCreate.name}
+                onChange={handleNameInputChange}
+              />
+            </div>
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
@@ -159,7 +162,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">Tags</span>
-            <Input className="w-full" type="text" placeholder="Tags" value={tag} onChange={handleTagsInputChange} />
+            <Input className="w-full" type="text" placeholder="Separated by spaces" value={tag} onChange={handleTagsInputChange} />
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index b68024e..32d4c36 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -2,7 +2,6 @@ import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { UNKNOWN_ID } from "../helpers/consts";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
 import { absolutifyLink } from "../helpers/utils";
@@ -15,16 +14,10 @@ interface Props {
   shortcutList: Shortcut[];
 }
 
-interface State {
-  currentEditingShortcutId: ShortcutId;
-}
-
 const ShortcutListView: React.FC<Props> = (props: Props) => {
   const { shortcutList } = props;
   const user = useAppSelector((state) => state.user.user as User);
-  const [state, setState] = useState<State>({
-    currentEditingShortcutId: UNKNOWN_ID,
-  });
+  const [editingShortcutId, setEditingShortcutId] = useState<ShortcutId | undefined>();
 
   const havePermission = (shortcut: Shortcut) => {
     return user.role === "ADMIN" || shortcut.creatorId === user.id;
@@ -35,13 +28,6 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
     toast.success("Shortcut link copied to clipboard.");
   };
 
-  const handleEditShortcutButtonClick = (shortcut: Shortcut) => {
-    setState({
-      ...state,
-      currentEditingShortcutId: shortcut.id,
-    });
-  };
-
   const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
     showCommonDialog({
       title: "Delete Shortcut",
@@ -61,49 +47,48 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
             <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-4 py-3 mb-2 rounded-lg">
               <div className="flex flex-col justify-start items-start mr-4">
                 <p>
-                  <span>{shortcut.name}</span>
-                  {shortcut.description && <span className="text-gray-500 ml-1">({shortcut.description})</span>}
+                  <span className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
+                    <span className="text-gray-400">o/</span>
+                    {shortcut.name}
+                  </span>
                 </p>
-                <div className="space-x-2">
+                {shortcut.description && <p className="mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
+                <div className="mt-2 flex flex-row justify-start items-start gap-2">
+                  <Icon.Tag className="text-gray-400 w-4 h-auto" />
                   {shortcut.tags.map((tag) => {
                     return (
-                      <span key={tag} className="text-gray-400 text-sm font-mono">
+                      <span key={tag} className="text-gray-400 text-sm font-mono leading-4">
                         #{tag}
                       </span>
                     );
                   })}
                 </div>
               </div>
-              <div className="flex flex-row justify-end items-center">
-                <span className="w-16 truncate mr-2 text-gray-600">{shortcut.creator.nickname}</span>
+              <div className="flex flex-row justify-end items-center space-x-2">
                 <Tooltip title="Copy link" variant="solid" placement="top">
-                  <button
-                    className="cursor-pointer mr-4 hover:opacity-80"
-                    onClick={() => {
-                      handleCopyButtonClick(shortcut);
-                    }}
-                  >
-                    <Icon.Copy className="w-5 h-auto" />
+                  <button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
+                    <Icon.Copy className="w-4 h-auto" />
                   </button>
                 </Tooltip>
                 <Tooltip title="Go to link" variant="solid" placement="top">
-                  <a className="cursor-pointer mr-4 hover:opacity-80" target="_blank" href={shortcut.link}>
-                    <Icon.ExternalLink className="w-5 h-auto" />
+                  <a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
+                    <Icon.ExternalLink className="w-4 h-auto" />
                   </a>
                 </Tooltip>
                 <Dropdown
+                  actionsClassName="!w-20"
                   actions={
                     <>
                       <button
                         disabled={!havePermission(shortcut)}
-                        className="w-full px-3 text-left leading-10 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
-                        onClick={() => handleEditShortcutButtonClick(shortcut)}
+                        className="w-full px-2 text-left leading-8 text-sm cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
+                        onClick={() => setEditingShortcutId(shortcut.id)}
                       >
                         Edit
                       </button>
                       <button
                         disabled={!havePermission(shortcut)}
-                        className="w-full px-3 text-left leading-10 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 text-left leading-8 text-sm cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                         onClick={() => {
                           handleDeleteShortcutButtonClick(shortcut);
                         }}
@@ -112,7 +97,6 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
                       </button>
                     </>
                   }
-                  actionsClassName="!w-24"
                 ></Dropdown>
               </div>
             </div>
@@ -120,21 +104,11 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
         })}
       </div>
 
-      {state.currentEditingShortcutId !== UNKNOWN_ID && (
+      {editingShortcutId && (
         <CreateShortcutDialog
-          shortcutId={state.currentEditingShortcutId}
-          onClose={() => {
-            setState({
-              ...state,
-              currentEditingShortcutId: UNKNOWN_ID,
-            });
-          }}
-          onConfirm={() => {
-            setState({
-              ...state,
-              currentEditingShortcutId: UNKNOWN_ID,
-            });
-          }}
+          shortcutId={editingShortcutId}
+          onClose={() => setEditingShortcutId(undefined)}
+          onConfirm={() => setEditingShortcutId(undefined)}
         />
       )}
     </>
diff --git a/web/src/components/common/Dropdown.tsx b/web/src/components/common/Dropdown.tsx
index 0a9ba3f..8662e95 100644
--- a/web/src/components/common/Dropdown.tsx
+++ b/web/src/components/common/Dropdown.tsx
@@ -37,8 +37,8 @@ const Dropdown: React.FC<Props> = (props: Props) => {
       {trigger ? (
         trigger
       ) : (
-        <button className="flex flex-row justify-center items-center p-1 rounded text-gray-600 cursor-pointer border hover:opacity-80">
-          <Icon.MoreHorizontal className="w-4 h-auto" />
+        <button className="flex flex-row justify-center items-center rounded text-gray-600 cursor-pointer hover:opacity-80">
+          <Icon.MoreVertical className="w-4 h-auto" />
         </button>
       )}
       <div