chore: update shortcut compact style

2025-04-16 12:23:12 +00:00 · 2023-08-03 09:13:39 +08:00 · 2023-08-03 09:13:39 +08:00 · 606652f7a2
commit 606652f7a2
parent 6395b698b9
5 changed files with 256 additions and 173 deletions
--- a/web/src/components/ShortcutActionsDropdown.tsx
+++ b/web/src/components/ShortcutActionsDropdown.tsx
@ -0,0 +1,89 @@
+import { useState } from "react";
+import { shortcutService } from "../services";
+import useUserStore from "../stores/v1/user";
+import { showCommonDialog } from "./Alert";
+import AnalyticsDialog from "./AnalyticsDialog";
+import Dropdown from "./common/Dropdown";
+import CreateShortcutDialog from "./CreateShortcutDialog";
+import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
+import Icon from "./Icon";
+
+interface Props {
+  shortcut: Shortcut;
+}
+
+const ShortcutActionsDropdown = (props: Props) => {
+  const { shortcut } = props;
+  const currentUser = useUserStore().getCurrentUser();
+  const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
+  const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
+  const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
+  const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
+
+  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 (
+    <>
+      <Dropdown
+        actionsClassName="!w-32"
+        actions={
+          <>
+            {havePermission && (
+              <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={() => setShowEditDialog(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={() => setShowQRCodeDialog(true)}
+            >
+              <Icon.QrCode className="w-4 h-auto mr-2" /> QR Code
+            </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>
+            {havePermission && (
+              <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>
+
+      {showEditDialog && (
+        <CreateShortcutDialog
+          shortcutId={shortcut.id}
+          onClose={() => setShowEditDialog(false)}
+          onConfirm={() => setShowEditDialog(false)}
+        />
+      )}
+
+      {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
+
+      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
+    </>
+  );
+};
+
+export default ShortcutActionsDropdown;
--- a/web/src/components/ShortcutCard.tsx
+++ b/web/src/components/ShortcutCard.tsx
@ -0,0 +1,143 @@
+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";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { absolutifyLink } from "../helpers/utils";
+import useFaviconStore from "../stores/v1/favicon";
+import useViewStore from "../stores/v1/view";
+import AnalyticsDialog from "./AnalyticsDialog";
+import Icon from "./Icon";
+import ShortcutActionsDropdown from "./ShortcutActionsDropdown";
+import VisibilityIcon from "./VisibilityIcon";
+
+interface Props {
+  shortcut: Shortcut;
+}
+
+const ShortcutView = (props: Props) => {
+  const { shortcut } = props;
+  const { t } = useTranslation();
+  const viewStore = useViewStore();
+  const faviconStore = useFaviconStore();
+  const [favicon, setFavicon] = useState<string | undefined>(undefined);
+  const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
+  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.");
+  };
+
+  return (
+    <>
+      <div className={classNames("group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow")}>
+        <div className="w-full flex flex-row justify-between items-center">
+          <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center mr-1 shrink-0">
+            <Link to={`/shortcut/${shortcut.id}`} className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}>
+              {favicon ? (
+                <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
+              ) : (
+                <Icon.CircleSlash className="w-full h-auto text-gray-400" />
+              )}
+            </Link>
+            <div className="ml-1 w-[calc(100%-24px)] flex flex-col justify-start items-start">
+              <div className="w-full flex flex-row justify-start items-center">
+                <a
+                  className={classNames(
+                    "max-w-[calc(100%-24px) 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}
+                >
+                  <div className="truncate">
+                    <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-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>
+              </div>
+              <a className="ml-1 w-full text-sm truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
+                {shortcut.link}
+              </a>
+            </div>
+          </div>
+          <div className="h-full pt-2 flex flex-row justify-end items-start">
+            <ShortcutActionsDropdown shortcut={shortcut} />
+          </div>
+        </div>
+        <div className="mt-2 w-full flex flex-row justify-start items-start gap-2 truncate">
+          {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">
+              <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"
+              onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
+            >
+              <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>
+
+      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
+    </>
+  );
+};
+
+export default ShortcutView;
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@ -1,39 +1,20 @@
-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";
-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";
-import useUserStore from "../stores/v1/user";
-import useViewStore from "../stores/v1/view";
-import { showCommonDialog } from "./Alert";
-import AnalyticsDialog from "./AnalyticsDialog";
-import Dropdown from "./common/Dropdown";
-import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
 import Icon from "./Icon";
-import VisibilityIcon from "./VisibilityIcon";
+import ShortcutActionsDropdown from "./ShortcutActionsDropdown";

 interface Props {
  shortcut: Shortcut;
-  handleEdit: () => void;
 }

 const ShortcutView = (props: Props) => {
-  const { shortcut, handleEdit } = props;
-  const { t } = useTranslation();
-  const currentUser = useUserStore().getCurrentUser();
-  const viewStore = useViewStore();
+  const { shortcut } = props;
  const faviconStore = useFaviconStore();
  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}`);
-  const compactMode = viewStore.displayStyle === "compact";

  useEffect(() => {
    faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
@ -43,48 +24,27 @@ const ShortcutView = (props: Props) => {
    });
  }, [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={classNames(
-          "group w-full flex flex-col justify-start items-start border rounded-lg hover:shadow",
-          compactMode ? "px-3 py-2" : "px-4 py-3"
+          "group w-full px-3 py-2 flex flex-col justify-start items-start border rounded-lg hover:bg-gray-100 hover:shadow"
        )}
      >
        <div className="w-full flex flex-row justify-between items-center">
          <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center mr-1 shrink-0">
-            <Link
-              to={`/shortcut/${shortcut.id}`}
-              className={classNames("flex justify-center items-center overflow-clip shrink-0", compactMode ? "w-5 h-5" : "w-8 h-8")}
-            >
+            <Link to={`/shortcut/${shortcut.id}`} className={classNames("w-5 h-5 flex justify-center items-center overflow-clip shrink-0")}>
              {favicon ? (
                <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
              ) : (
                <Icon.CircleSlash className="w-full h-auto text-gray-400" />
              )}
            </Link>
-            <div className="ml-1 w-[calc(100%-24px)] flex flex-col justify-start items-start">
+            <div className="ml-1 w-[calc(100%-20px)] flex flex-col justify-start items-start">
              <div className="w-full flex flex-row justify-start items-center">
                <a
                  className={classNames(
-                    "flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow",
-                    compactMode ? "max-w-full" : "max-w-[calc(100%-24px)]"
+                    "max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
                  )}
                  target="_blank"
                  href={shortcutLink}
@ -104,117 +64,14 @@ const ShortcutView = (props: Props) => {
                    <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
                  </span>
                </a>
-                {!compactMode && (
-                  <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>
-                )}
              </div>
-              {!compactMode && (
-                <a className="ml-1 w-full text-sm truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
-                  {shortcut.link}
-                </a>
-              )}
            </div>
          </div>
          <div className="flex flex-row justify-end items-center">
-            {havePermission && (
-              <Dropdown
-                actionsClassName="!w-32"
-                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={() => handleEdit()}
-                    >
-                      <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={() => setShowQRCodeDialog(true)}
-                    >
-                      <Icon.QrCode className="w-4 h-auto mr-2" /> QR Code
-                    </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>
-            )}
+            <ShortcutActionsDropdown shortcut={shortcut} />
          </div>
        </div>
-
-        {!compactMode && (
-          <>
-            <div className="mt-2 w-full flex flex-row justify-start items-start gap-2 truncate">
-              {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">
-                  <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"
-                  onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
-                >
-                  <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)} />}
-
-      {showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
    </>
  );
 };
--- a/web/src/components/ShortcutsContainer.tsx
+++ b/web/src/components/ShortcutsContainer.tsx
@ -1,7 +1,6 @@
 import classNames from "classnames";
-import { useState } from "react";
 import useViewStore from "../stores/v1/view";
-import CreateShortcutDialog from "./CreateShortcutDialog";
+import ShortcutCard from "./ShortcutCard";
 import ShortcutView from "./ShortcutView";

 interface Props {
@ -12,29 +11,19 @@ const ShortcutsContainer: React.FC<Props> = (props: Props) => {
  const { shortcutList } = props;
  const viewStore = useViewStore();
  const displayStyle = viewStore.displayStyle || "full";
-  const [editingShortcutId, setEditingShortcutId] = useState<ShortcutId | undefined>();
+  const ShortcutItemView = viewStore.displayStyle === "compact" ? ShortcutView : ShortcutCard;

  return (
-    <>
-      <div
-        className={classNames(
-          "w-full grid grid-cols-1 gap-y-2 sm:gap-2",
-          displayStyle === "full" ? "sm:grid-cols-2" : "grid-cols-2 sm:grid-cols-4 gap-2"
-        )}
-      >
-        {shortcutList.map((shortcut) => {
-          return <ShortcutView key={shortcut.id} shortcut={shortcut} handleEdit={() => setEditingShortcutId(shortcut.id)} />;
-        })}
-      </div>
-
-      {editingShortcutId && (
-        <CreateShortcutDialog
-          shortcutId={editingShortcutId}
-          onClose={() => setEditingShortcutId(undefined)}
-          onConfirm={() => setEditingShortcutId(undefined)}
-        />
+    <div
+      className={classNames(
+        "w-full grid grid-cols-1 gap-y-2 sm:gap-2",
+        displayStyle === "full" ? "sm:grid-cols-2" : "grid-cols-2 sm:grid-cols-4 gap-2"
      )}
-    </>
+    >
+      {shortcutList.map((shortcut) => {
+        return <ShortcutItemView key={shortcut.id} shortcut={shortcut} />;
+      })}
+    </div>
  );
 };

--- a/web/src/components/common/Dropdown.tsx
+++ b/web/src/components/common/Dropdown.tsx
@ -33,11 +33,16 @@ const Dropdown: React.FC<Props> = (props: Props) => {
    }
  }, [dropdownStatus]);

+  const handleToggleDropdownStatus = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation();
+    toggleDropdownStatus();
+  };
+
  return (
    <div
      ref={dropdownWrapperRef}
      className={`relative flex flex-col justify-start items-start select-none ${className ?? ""}`}
-      onClick={() => toggleDropdownStatus()}
+      onClick={handleToggleDropdownStatus}
    >
      {trigger ? (
        trigger