chore: update shortcut card style

frontend/web/src/components/CollectionView.tsx

@@ -27,7 +27,8 @@ const CollectionView = (props: Props) => {
   const { t } = useTranslation();
   const { sm } = useResponsiveWidth();
   const navigateTo = useNavigateTo();
-  const currentUser = useUserStore().getCurrentUser();
+  const userStore = useUserStore();
+  const currentUser = userStore.getCurrentUser();
   const collectionStore = useCollectionStore();
   const shortcutList = useShortcutStore().getShortcutList();
   const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
@@ -71,9 +72,9 @@ const CollectionView = (props: Props) => {
             </div>
             <p className="text-sm text-gray-500">{collection.description}</p>
           </div>
-          <div className="flex flex-row justify-end items-center shrink-0">
+          <div className="flex flex-row justify-end items-center shrink-0 gap-2">
             <Link className="w-full text-gray-400 cursor-pointer hover:text-gray-500" to={`/c/${collection.name}`} target="_blank">
-              <Icon.Share className="w-4 h-auto mr-2" />
+              <Icon.Share className="w-4 h-auto" />
             </Link>
             {showAdminActions && (
               <Dropdown

frontend/web/src/components/CreateCollectionDrawer.tsx

@@ -159,7 +159,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
     <Drawer anchor="right" open={true} onClose={onClose}>
       <DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
       <ModalClose />
-      <DialogContent className="max-w-full sm:max-w-sm">
+      <DialogContent className="w-full max-w-full sm:max-w-[24rem]">
         <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">

frontend/web/src/components/CreateShortcutDrawer.tsx

@@ -213,7 +213,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
     <Drawer anchor="right" open={true} onClose={onClose}>
       <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
       <ModalClose />
-      <DialogContent className="w-full">
+      <DialogContent className="w-full max-w-full sm:max-w-[24rem]">
         <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">

frontend/web/src/components/ShortcutCard.tsx

@@ -1,9 +1,11 @@
-import { Tooltip } from "@mui/joy";
+import { Avatar, Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
+import { useEffect } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import useUserStore from "@/stores/v1/user";
 import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
 import { convertVisibilityFromPb } from "@/utils/visibility";
 import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
@@ -19,122 +21,135 @@ interface Props {
 const ShortcutCard = (props: Props) => {
   const { shortcut } = props;
   const { t } = useTranslation();
+  const userStore = useUserStore();
   const viewStore = useViewStore();
+  const creator = userStore.getUserById(shortcut.creatorId);
   const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
   const favicon = getFaviconWithGoogleS2(shortcut.link);
 
+  useEffect(() => {
+    userStore.getOrFetchUserById(shortcut.creatorId);
+  }, []);
+
   const handleCopyButtonClick = () => {
     copy(shortcutLink);
     toast.success("Shortcut link copied to clipboard.");
   };
 
   return (
-    <>
+    <div
-      <div
+      className={classNames(
-        className={classNames(
+        "group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow dark:border-zinc-700"
-          "group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow dark:border-zinc-700"
+      )}
-        )}
+    >
-      >
+      <div className="w-full flex flex-row justify-between items-center">
-        <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">
-          <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center mr-1 shrink-0">
+          <Link
-            <Link
+            className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}
-              className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}
+            to={`/shortcut/${shortcut.id}`}
-              to={`/shortcut/${shortcut.id}`}
+            unstable_viewTransition
-              unstable_viewTransition
-            >
-              {favicon ? (
-                <img className="w-full h-auto rounded" 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%-36px)] flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
-                  )}
-                  target="_blank"
-                  href={shortcutLink}
-                >
-                  <div className="truncate">
-                    <span className="dark:text-gray-400">{shortcut.title}</span>
-                    {shortcut.title ? (
-                      <span className="text-gray-500">({shortcut.name})</span>
-                    ) : (
-                      <>
-                        <span className="truncate dark:text-gray-400">{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 dark:hover:bg-zinc-800"
-                    onClick={() => handleCopyButtonClick()}
-                  >
-                    <Icon.Clipboard className="w-4 h-auto mx-auto" />
-                  </button>
-                </Tooltip>
-              </div>
-              <a
-                className="pl-1 pr-4 w-full text-sm truncate text-gray-400 dark:text-gray-500 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 dark:text-gray-500 text-sm leading-4 cursor-pointer hover:opacity-80"
-                onClick={() => viewStore.setFilter({ tag: tag })}
-              >
-                #{tag}
-              </span>
-            );
-          })}
-          {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm leading-4 italic">No tags</span>}
-        </div>
-        <div className="w-full mt-2 flex gap-2 overflow-x-auto">
-          <Tooltip
-            title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
-            variant="solid"
-            placement="top"
-            arrow
           >
-            <div
+            {favicon ? (
-              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
+              <img className="w-full h-auto rounded" src={favicon} decoding="async" loading="lazy" />
-              onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
+            ) : (
-            >
+              <Icon.CircleSlash className="w-full h-auto text-gray-400" />
-              <VisibilityIcon className="w-4 h-auto mr-1 opacity-70" visibility={shortcut.visibility} />
+            )}
-              {t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
+          </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%-36px)] flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
+                )}
+                target="_blank"
+                href={shortcutLink}
+              >
+                <div className="truncate">
+                  <span className="dark:text-gray-400">{shortcut.title}</span>
+                  {shortcut.title ? (
+                    <span className="text-gray-500">({shortcut.name})</span>
+                  ) : (
+                    <>
+                      <span className="truncate dark:text-gray-400">{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 dark:hover:bg-zinc-800"
+                  onClick={() => handleCopyButtonClick()}
+                >
+                  <Icon.Clipboard className="w-4 h-auto mx-auto" />
+                </button>
+              </Tooltip>
             </div>
-          </Tooltip>
+            <a
-          <Tooltip title="View count" variant="solid" placement="top" arrow>
+              className="pl-1 pr-4 w-full text-sm truncate text-gray-400 dark:text-gray-500 hover:underline"
-            <Link
+              href={shortcut.link}
-              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
+              target="_blank"
-              to={`/shortcut/${shortcut.id}#analytics`}
-              unstable_viewTransition
             >
-              <Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />
+              {shortcut.link}
-              {t("shortcut.visits", { count: shortcut.viewCount })}
+            </a>
-            </Link>
+          </div>
-          </Tooltip>
+        </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 dark:text-gray-500 text-sm leading-4 cursor-pointer hover:opacity-80"
+              onClick={() => viewStore.setFilter({ tag: tag })}
+            >
+              #{tag}
+            </span>
+          );
+        })}
+        {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm leading-4 italic">No tags</span>}
+      </div>
+      <div className="w-full mt-2 flex gap-2 overflow-x-auto">
+        <Tooltip title={creator.nickname} variant="solid" placement="top" arrow>
+          <Avatar
+            className="dark:bg-zinc-800"
+            sx={{
+              "--Avatar-size": "24px",
+            }}
+            alt={creator.nickname.toUpperCase()}
+          ></Avatar>
+        </Tooltip>
+        <Tooltip
+          title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
+          variant="solid"
+          placement="top"
+          arrow
+        >
+          <div
+            className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
+            onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
+          >
+            <VisibilityIcon className="w-4 h-auto mr-1 opacity-70" visibility={shortcut.visibility} />
+            {t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
+          </div>
+        </Tooltip>
+        <Tooltip title="View count" variant="solid" placement="top" arrow>
+          <Link
+            className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
+            to={`/shortcut/${shortcut.id}#analytics`}
+            unstable_viewTransition
+          >
+            <Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />
+            {t("shortcut.visits", { count: shortcut.viewCount })}
+          </Link>
+        </Tooltip>
+      </div>
+    </div>
   );
 };
 

frontend/web/src/components/SubscriptionFAQ.tsx

@@ -11,13 +11,13 @@ const SubscriptionFAQ = () => {
         <Accordion>
           <AccordionSummary>Can I use the Free plan in my team?</AccordionSummary>
           <AccordionDetails>
-            Of course you can. In the free plan, you can invite up to 5 members to your team. If you need more, you can upgrade to the Pro
+            Of course you can. In the free plan, you can invite up to 5 members to your team. If you need more, you should upgrade to the
-            plan.
+            Pro plan.
           </AccordionDetails>
         </Accordion>
         <Accordion>
           <AccordionSummary>How many devices can the license key be used on?</AccordionSummary>
-          <AccordionDetails>{`It's unlimited for now, but please don't abuse it.`}</AccordionDetails>
+          <AccordionDetails>{`It's unlimited for now, but please do not abuse it.`}</AccordionDetails>
         </Accordion>
         <Accordion>
           <AccordionSummary>{`Can I get a refund if Slash doesn't meet my needs?`}</AccordionSummary>

frontend/web/src/pages/SubscriptionSetting.tsx

@@ -56,7 +56,7 @@ const SubscriptionSetting: React.FC = () => {
         <div className="w-full flex justify-between items-center mt-4">
           <div>
             {profile.plan === PlanType.FREE && (
-              <Link href="https://yourselfhosted.lemonsqueezy.com/checkout/buy/d03a2696-8a8b-49c9-9e19-d425e3884fd7" target="_blank">
+              <Link href="https://yourselfhosted.lemonsqueezy.com/checkout/buy/947e9a56-c93a-4294-8d71-2ea4b0f3ec51" target="_blank">
                 Buy a license key
                 <Icon.ExternalLink className="w-4 h-auto ml-1" />
               </Link>