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,17 +21,22 @@ 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
       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"
@@ -108,6 +115,15 @@ const ShortcutCard = (props: Props) => {
         {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"
@@ -134,7 +150,6 @@ const ShortcutCard = (props: Props) => {
         </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>