feat: add shortcut detail page

web/src/components/ShortcutView.tsx

@@ -3,6 +3,7 @@ import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import { absolutifyLink } from "../helpers/utils";
 import { shortcutService } from "../services";
 import useFaviconStore from "../stores/v1/favicon";
@@ -31,7 +32,6 @@ const ShortcutView = (props: Props) => {
   const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
   const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
   const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
-  const compactStyle = viewStore.layout === "grid";
 
   useEffect(() => {
     faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
@@ -62,40 +62,47 @@ const ShortcutView = (props: Props) => {
       <div className="w-full flex flex-col justify-start items-start border px-4 py-3 rounded-lg hover:shadow">
         <div className="w-full flex flex-row justify-between items-center">
           <div className="group flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
-            <div className="w-6 h-6 mr-1 flex justify-center items-center overflow-clip">
+            <Link to={`/shortcut/${shortcut.id}`} className="w-8 h-8 mr-1 flex justify-center items-center overflow-clip">
               {favicon ? (
                 <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
               ) : (
-                <Icon.CircleSlash className="w-6 h-auto text-gray-400" />
+                <Icon.CircleSlash className="w-8 h-auto text-gray-400" />
               )}
+            </Link>
+            <div className="flex flex-col justify-start items-start">
+              <div className="flex flex-row justify-start items-center">
+                <a
+                  className="flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
+                  target="_blank"
+                  href={shortcutLink}
+                >
+                  <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" />
+                  </span>
+                </a>
+                <Tooltip title="Copy" variant="solid" placement="top" arrow>
+                  <button
+                    className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
+                    onClick={() => handleCopyButtonClick()}
+                  >
+                    <Icon.Clipboard className="w-4 h-auto mx-auto" />
+                  </button>
+                </Tooltip>
+                <Tooltip title="QR Code" variant="solid" placement="top" arrow>
+                  <button
+                    className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
+                    onClick={() => setShowQRCodeDialog(true)}
+                  >
+                    <Icon.QrCode className="w-4 h-auto mx-auto" />
+                  </button>
+                </Tooltip>
+              </div>
+              <a className="ml-1 text-sm max-w-[16rem] truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
+                {shortcut.link}
+              </a>
             </div>
-            <a
-              className="flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
-              target="_blank"
-              href={shortcutLink}
-            >
-              <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" />
-              </span>
-            </a>
-            <Tooltip title="Copy" variant="solid" placement="top" arrow>
-              <button
-                className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
-                onClick={() => handleCopyButtonClick()}
-              >
-                <Icon.Clipboard className="w-4 h-auto mx-auto" />
-              </button>
-            </Tooltip>
-            <Tooltip title="QR Code" variant="solid" placement="top" arrow>
-              <button
-                className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
-                onClick={() => setShowQRCodeDialog(true)}
-              >
-                <Icon.QrCode className="w-4 h-auto mx-auto" />
-              </button>
-            </Tooltip>
           </div>
           <div className="flex flex-row justify-end items-center space-x-2">
             {havePermission && (
@@ -129,21 +136,6 @@ const ShortcutView = (props: Props) => {
             )}
           </div>
         </div>
-        {shortcut.description && !compactStyle && <p className="w-full break-all mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
-        <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
-          {shortcut.tags.map((tag) => {
-            return (
-              <span
-                key={tag}
-                className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
-                onClick={() => viewStore.setFilter({ tag: tag })}
-              >
-                #{tag}
-              </span>
-            );
-          })}
-          {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
-        </div>
         <div className="w-full flex mt-2 gap-2">
           <Tooltip title="Creator" 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">

web/src/helpers/api.ts

@@ -55,6 +55,10 @@ export function getShortcutList(shortcutFind?: ShortcutFind) {
   return axios.get<Shortcut[]>(`/api/v1/shortcut?${queryList.join("&")}`);
 }
 
+export function getShortcutById(id: number) {
+  return axios.get<Shortcut>(`/api/v1/shortcut/${id}`);
+}
+
 export function createShortcut(shortcutCreate: ShortcutCreate) {
   return axios.post<Shortcut>("/api/v1/shortcut", shortcutCreate);
 }

web/src/pages/ShortcutDetail.tsx

@@ -0,0 +1,191 @@
+import { Tooltip } from "@mui/joy";
+import copy from "copy-to-clipboard";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { useLoaderData } from "react-router-dom";
+import { showCommonDialog } from "../components/Alert";
+import AnalyticsDialog from "../components/AnalyticsDialog";
+import Dropdown from "../components/common/Dropdown";
+import CreateShortcutDialog from "../components/CreateShortcutDialog";
+import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog";
+import Icon from "../components/Icon";
+import VisibilityIcon from "../components/VisibilityIcon";
+import { absolutifyLink } from "../helpers/utils";
+import { shortcutService } from "../services";
+import useFaviconStore from "../stores/v1/favicon";
+import useUserStore from "../stores/v1/user";
+
+interface State {
+  showEditModal: boolean;
+}
+
+const ShortcutDetail = () => {
+  const { t } = useTranslation();
+  const shortcutId = (useLoaderData() as Shortcut).id;
+  const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
+  const currentUser = useUserStore().getCurrentUser();
+  const faviconStore = useFaviconStore();
+  const [state, setState] = useState<State>({
+    showEditModal: false,
+  });
+  const [favicon, setFavicon] = useState<string | undefined>(undefined);
+  const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
+  const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
+  const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
+  const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
+
+  useEffect(() => {
+    faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
+      if (url) {
+        setFavicon(url);
+      }
+    });
+  }, [shortcut.link]);
+
+  const handleCopyButtonClick = () => {
+    copy(shortcutLink);
+    toast.success("Shortcut link copied to clipboard.");
+  };
+
+  const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
+    showCommonDialog({
+      title: "Delete Shortcut",
+      content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
+      style: "danger",
+      onConfirm: async () => {
+        await shortcutService.deleteShortcutById(shortcut.id);
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className="mx-auto max-w-6xl w-full px-3 pt-4 pb-6 flex flex-col justify-start items-start">
+        <div className="mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
+          {favicon ? (
+            <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
+          ) : (
+            <Icon.CircleSlash className="w-6 h-auto text-gray-400" />
+          )}
+        </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"
+          href={shortcutLink}
+        >
+          <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" />
+          </span>
+        </a>
+        <div className="mt-2 w-full flex flex-row justify-normal items-center space-x-2">
+          <Tooltip title="Copy" variant="solid" placement="top" arrow>
+            <button
+              className="w-8 h-8 cursor-pointer border rounded-full text-gray-500 hover:bg-gray-100 hover:shadow"
+              onClick={() => handleCopyButtonClick()}
+            >
+              <Icon.Clipboard className="w-4 h-auto mx-auto" />
+            </button>
+          </Tooltip>
+          <Tooltip title="QR Code" variant="solid" placement="top" arrow>
+            <button
+              className="w-8 h-8 cursor-pointer border rounded-full text-gray-500 hover:bg-gray-100 hover:shadow"
+              onClick={() => setShowQRCodeDialog(true)}
+            >
+              <Icon.QrCode className="w-4 h-auto mx-auto" />
+            </button>
+          </Tooltip>
+          {havePermission && (
+            <Dropdown
+              className="w-8 h-8 flex justify-center items-center border cursor-pointer rounded-full hover:bg-gray-100 hover:shadow"
+              actionsClassName="!w-32 !-right-24"
+              actions={
+                <>
+                  <button
+                    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={() => {
+                      setState({
+                        ...state,
+                        showEditModal: true,
+                      });
+                    }}
+                  >
+                    <Icon.Edit className="w-4 h-auto mr-2" /> Edit
+                  </button>
+                  <button
+                    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={() => setShowAnalyticsDialog(true)}
+                  >
+                    <Icon.BarChart2 className="w-4 h-auto mr-2" /> Analytics
+                  </button>
+                  <button
+                    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);
+                    }}
+                  >
+                    <Icon.Trash className="w-4 h-auto mr-2" /> Delete
+                  </button>
+                </>
+              }
+            ></Dropdown>
+          )}
+        </div>
+        {shortcut.description && <p className="w-full break-all mt-2 text-gray-400 text-sm">{shortcut.description}</p>}
+        <div className="mt-4 ml-1 flex flex-row justify-start items-start flex-wrap gap-2">
+          {shortcut.tags.map((tag) => {
+            return (
+              <span key={tag} className="max-w-[8rem] truncate text-gray-400 text font-mono leading-4 cursor-pointer hover:text-gray-600">
+                #{tag}
+              </span>
+            );
+          })}
+          {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
+        </div>
+        <div className="w-full flex mt-4 gap-2">
+          <Tooltip title="Creator" 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.User className="w-4 h-auto mr-1" />
+              <span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
+            </div>
+          </Tooltip>
+          <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
+            <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm">
+              <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
+              {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
+            </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 cursor-pointer text-gray-500 text-sm"
+              onClick={() => setShowAnalyticsDialog(true)}
+            >
+              <Icon.BarChart2 className="w-4 h-auto mr-1" />
+              {shortcut.view} visits
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+
+      {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
+
+      {state.showEditModal && (
+        <CreateShortcutDialog
+          shortcutId={shortcut.id}
+          onClose={() =>
+            setState({
+              ...state,
+              showEditModal: false,
+            })
+          }
+        />
+      )}
+
+      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
+    </>
+  );
+};
+
+export default ShortcutDetail;

web/src/routers/index.tsx

@@ -3,8 +3,10 @@ import App from "../App";
 import Root from "../layouts/Root";
 import Home from "../pages/Home";
 import Setting from "../pages/Setting";
+import ShortcutDetail from "../pages/ShortcutDetail";
 import SignIn from "../pages/SignIn";
 import SignUp from "../pages/SignUp";
+import { shortcutService } from "../services";
 
 const router = createBrowserRouter([
   {
@@ -27,6 +29,14 @@ const router = createBrowserRouter([
             path: "",
             element: <Home />,
           },
+          {
+            path: "/shortcut/:shortcutId",
+            element: <ShortcutDetail />,
+            loader: async ({ params }) => {
+              const shortcut = await shortcutService.getOrFetchShortcutById(Number(params.shortcutId));
+              return shortcut;
+            },
+          },
           {
             path: "/setting",
             element: <Setting />,

web/src/services/shortcutService.ts

@@ -29,13 +29,25 @@ const shortcutService = {
   },
 
   getShortcutById: (id: ShortcutId) => {
-    for (const s of shortcutService.getState().shortcutList) {
+    for (const shortcut of shortcutService.getState().shortcutList) {
-      if (s.id === id) {
+      if (shortcut.id === id) {
-        return s;
+        return shortcut;
+      }
+    }
+    return null;
+  },
+
+  getOrFetchShortcutById: async (id: ShortcutId) => {
+    for (const shortcut of shortcutService.getState().shortcutList) {
+      if (shortcut.id === id) {
+        return shortcut;
       }
     }
 
-    return null;
+    const data = (await api.getShortcutById(id)).data;
+    const shortcut = convertResponseModelShortcut(data);
+    store.dispatch(createShortcut(shortcut));
+    return shortcut;
   },
 
   createShortcut: async (shortcutCreate: ShortcutCreate) => {

web/src/stores/v1/shortcut.ts

@@ -0,0 +1,38 @@
+import { create } from "zustand";
+import * as api from "../../helpers/api";
+
+const convertResponseModelShortcut = (shortcut: Shortcut): Shortcut => {
+  return {
+    ...shortcut,
+    createdTs: shortcut.createdTs * 1000,
+    updatedTs: shortcut.updatedTs * 1000,
+  };
+};
+
+interface ShortcutState {
+  shortcutMapById: Record<ShortcutId, Shortcut>;
+  getOrFetchShortcutById: (id: ShortcutId) => Promise<Shortcut>;
+  getShortcutById: (id: ShortcutId) => Shortcut;
+}
+
+const useShortcutStore = create<ShortcutState>()((set, get) => ({
+  shortcutMapById: {},
+  getOrFetchShortcutById: async (id: ShortcutId) => {
+    const shortcutMap = get().shortcutMapById;
+    if (shortcutMap[id]) {
+      return shortcutMap[id] as Shortcut;
+    }
+
+    const { data } = await api.getShortcutById(id);
+    const shortcut = convertResponseModelShortcut(data);
+    shortcutMap[id] = shortcut;
+    set(shortcutMap);
+    return shortcut;
+  },
+  getShortcutById: (id: ShortcutId) => {
+    const shortcutMap = get().shortcutMapById;
+    return shortcutMap[id] as Shortcut;
+  },
+}));
+
+export default useShortcutStore;