From 87841828ffa40a1e3b9dc0eaeef6b0a82a657412 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 3 Aug 2023 22:05:50 +0800
Subject: [PATCH] chore: update shortcut detail style

---
 web/src/components/CreateShortcutDialog.tsx |  1 +
 web/src/components/ShortcutView.tsx         |  2 +-
 web/src/pages/ShortcutDetail.tsx            | 24 +++++++++++++++------
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index fd5ebbc..a7514fc 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -161,6 +161,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           id: shortcutId,
           name: state.shortcutCreate.name,
           link: state.shortcutCreate.link,
+          title: state.shortcutCreate.title,
           description: state.shortcutCreate.description,
           visibility: state.shortcutCreate.visibility,
           tags: tag.split(" "),
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 5939824..9c2fdc1 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -46,8 +46,8 @@ const ShortcutView = (props: Props) => {
                   className={classNames(
                     "max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
                   )}
-                  target="_blank"
                   href={shortcutLink}
+                  target="_blank"
                 >
                   <div className="truncate">
                     <span>{shortcut.title}</span>
diff --git a/web/src/pages/ShortcutDetail.tsx b/web/src/pages/ShortcutDetail.tsx
index df0a2e5..0523371 100644
--- a/web/src/pages/ShortcutDetail.tsx
+++ b/web/src/pages/ShortcutDetail.tsx
@@ -1,4 +1,5 @@
 import { Tooltip } from "@mui/joy";
+import classNames from "classnames";
 import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -73,14 +74,25 @@ const ShortcutDetail = () => {
           )}
         </div>
         <a
-          className="mt-4 text-2xl flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
-          target="_blank"
+          className={classNames(
+            "group max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
+          )}
           href={shortcutLink}
+          target="_blank"
         >
-          <span className="text-gray-400">s/</span>
-          <span className="max-w-[14rem] truncate">{shortcut.name}</span>
-          <span className="hidden group-hover:block ml-1 cursor-pointer">
-            <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
+          <div className="truncate text-3xl">
+            <span>{shortcut.title}</span>
+            {shortcut.title ? (
+              <span className="text-gray-400">(s/{shortcut.name})</span>
+            ) : (
+              <>
+                <span className="text-gray-400">s/</span>
+                <span className="truncate">{shortcut.name}</span>
+              </>
+            )}
+          </div>
+          <span className="hidden group-hover:block ml-1 cursor-pointer shrink-0">
+            <Icon.ExternalLink className="w-6 h-auto text-gray-600" />
           </span>
         </a>
         <div className="mt-2 w-full flex flex-row justify-normal items-center space-x-2">