chore: update shortcut view

web/src/components/CreateShortcutDialog.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { toast } from "react-hot-toast";
 import { shortcutService } from "../services";
 import useLoading from "../hooks/useLoading";
-import { showCommonDialog } from "./Alert";
 import Icon from "./Icon";
 
 interface Props {
@@ -97,22 +96,6 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleDeleteShortcutButtonClick = () => {
-    if (!shortcutId) {
-      return;
-    }
-
-    showCommonDialog({
-      title: "Delete Shortcut",
-      content: `Are you sure to delete shortcut \`${state.shortcutCreate.name}\`? You can not undo this action.`,
-      style: "danger",
-      onConfirm: async () => {
-        await shortcutService.deleteShortcutById(shortcutId);
-        onClose();
-      },
-    });
-  };
-
   const handleSaveBtnClick = async () => {
     if (!state.shortcutCreate.name) {
       toast.error("Name is required");
@@ -208,23 +191,17 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
                 ))}
               </RadioGroup>
             </div>
+            <p className="mt-3 text-sm text-gray-500 w-full bg-gray-100 border border-gray-200 px-2 py-1 rounded-md">
+              {t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)}
+            </p>
           </div>
-          <div className="w-full flex flex-row justify-between items-center mt-8 space-x-2">
-            <div>
-              {isEditing && (
-                <Button color="danger" variant="plain" onClick={handleDeleteShortcutButtonClick}>
-                  Delete
-                </Button>
-              )}
-            </div>
-            <div className="space-x-2">
-              <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-                Cancel
-              </Button>
-              <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-                Save
-              </Button>
-            </div>
+          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
+            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+              Cancel
+            </Button>
+            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+              Save
+            </Button>
           </div>
         </div>
       </ModalDialog>

web/src/components/ShortcutListView.tsx

@@ -18,6 +18,8 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
         })}
       </div>
 
+      <p className="w-full text-center text-gray-400 text-sm mt-2 mb-4 italic">Total {shortcutList.length} data</p>
+
       {editingShortcutId && (
         <CreateShortcutDialog
           shortcutId={editingShortcutId}

web/src/components/ShortcutView.tsx

@@ -34,6 +34,10 @@ const ShortcutView = (props: Props) => {
     });
   }, [shortcut.link]);
 
+  const gotoShortcutLink = () => {
+    window.open(shortifyLink, "_blank");
+  };
+
   const handleCopyButtonClick = () => {
     copy(shortifyLink);
     toast.success("Shortcut link copied to clipboard.");
@@ -61,10 +65,13 @@ const ShortcutView = (props: Props) => {
               <Icon.Globe2 className="w-5 h-auto text-gray-500" />
             )}
           </div>
-          <button className="items-center cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick()}>
+          <button className="items-center cursor-pointer hover:opacity-80 hover:underline" onClick={() => gotoShortcutLink()}>
             <span className="text-gray-400">s/</span>
             {shortcut.name}
           </button>
+          <button className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick()}>
+            <Icon.Clipboard className="w-4 h-auto text-gray-500" />
+          </button>
           <a className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" target="_blank" href={shortifyLink}>
             <Icon.ExternalLink className="w-4 h-auto text-gray-500" />
           </a>
@@ -123,7 +130,7 @@ const ShortcutView = (props: Props) => {
         </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" />
+            <Icon.BarChart2 className="w-4 h-auto mr-1" />
             {shortcut.view} visits
           </div>
         </Tooltip>

web/src/pages/Home.tsx

@@ -65,7 +65,8 @@ const Home: React.FC = () => {
             <Icon.PackageOpen className="w-12 h-auto text-gray-400" />
             <p className="mt-4 mb-2">No shortcuts found.</p>
             <Button size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
-              Create one
+              <Icon.Plus className="w-5 h-auto mr-1" />
+              Create
             </Button>
           </div>
         ) : (