chore: update shortcut form fields

api/v2/collection_service.go

@@ -11,6 +11,7 @@ import (
 	apiv2pb "github.com/boojack/slash/proto/gen/api/v2"
 	storepb "github.com/boojack/slash/proto/gen/store"
 	"github.com/boojack/slash/server/metric"
+	"github.com/boojack/slash/server/service/license"
 	"github.com/boojack/slash/store"
 )
 
@@ -98,6 +99,16 @@ func (s *APIV2Service) GetCollectionByName(ctx context.Context, request *apiv2pb
 }
 
 func (s *APIV2Service) CreateCollection(ctx context.Context, request *apiv2pb.CreateCollectionRequest) (*apiv2pb.CreateCollectionResponse, error) {
+	if !s.LicenseService.IsFeatureEnabled(license.FeatureTypeUnlimitedAccounts) {
+		collections, err := s.Store.ListCollections(ctx, &store.FindCollection{})
+		if err != nil {
+			return nil, status.Errorf(codes.Internal, "failed to get collection list, err: %v", err)
+		}
+		if len(collections) >= 5 {
+			return nil, status.Errorf(codes.PermissionDenied, "Maximum number of collections reached")
+		}
+	}
+
 	userID := ctx.Value(userIDContextKey).(int32)
 	collection := &storepb.Collection{
 		CreatorId:   userID,

frontend/web/src/components/CreateShortcutDrawer.tsx

@@ -54,7 +54,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
       ...initialShortcut,
     },
   });
-  const [showAdditionalFields, setShowAdditionalFields] = useState<boolean>(false);
   const [showOpenGraphMetadata, setShowOpenGraphMetadata] = useState<boolean>(false);
   const [tag, setTag] = useState<string>("");
   const tagSuggestions = uniq(shortcutList.map((shortcut) => shortcut.tags).flat());
@@ -175,7 +174,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
   };
 
   const handleSaveBtnClick = async () => {
-    if (!state.shortcutCreate.name || !state.shortcutCreate.link) {
+    if (!state.shortcutCreate.name || !state.shortcutCreate.title || !state.shortcutCreate.link) {
       toast.error("Please fill in required fields.");
       return;
     }
@@ -224,7 +223,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
               <Input
                 className="w-full"
                 type="text"
-                placeholder="Should be an unique name and will be put in url"
+                placeholder="An unique name for the shortcut"
                 value={state.shortcutCreate.name}
                 onChange={handleNameInputChange}
               />
@@ -232,19 +231,41 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
-              Destination URL <span className="text-red-600">*</span>
+              Link <span className="text-red-600">*</span>
             </span>
             <Input
               className="w-full"
               type="text"
-              placeholder="https://github.com/boojack/slash"
+              placeholder="The destination link of the shortcut"
               value={state.shortcutCreate.link}
               onChange={handleLinkInputChange}
             />
           </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">
+              Title <span className="text-red-600">*</span>
+            </span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="The title of the shortcut"
+              value={state.shortcutCreate.title}
+              onChange={handleTitleInputChange}
+            />
+          </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Description</span>
+            <Input
+              className="w-full"
+              type="text"
+              placeholder="A short description of the shortcut"
+              value={state.shortcutCreate.description}
+              onChange={handleDescriptionInputChange}
+            />
+          </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">Tags</span>
-            <Input className="w-full" type="text" placeholder="github slash" value={tag} onChange={handleTagsInputChange} />
+            <Input className="w-full" type="text" placeholder="The tags of shortcut" value={tag} onChange={handleTagsInputChange} />
             {tagSuggestions.length > 0 && (
               <div className="w-full flex flex-row justify-start items-start mt-2">
                 <Icon.Asterisk className="w-4 h-auto shrink-0 mx-1 text-gray-400 dark:text-gray-500" />
@@ -276,47 +297,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
             </p>
           </div>
           <Divider className="text-gray-500">More</Divider>
-          <div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden my-3 dark:border-zinc-800">
-            <div
-              className={classnames(
-                "w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800",
-                showAdditionalFields ? "bg-gray-100 border-b dark:bg-zinc-800 dark:border-b-zinc-700" : ""
-              )}
-              onClick={() => setShowAdditionalFields(!showAdditionalFields)}
-            >
-              <span className="text-sm">Additional fields</span>
-              <button className="w-7 h-7 p-1 rounded-md">
-                <Icon.ChevronDown className={classnames("w-4 h-auto text-gray-500", showAdditionalFields ? "transform rotate-180" : "")} />
-              </button>
-            </div>
-            {showAdditionalFields && (
-              <div className="w-full px-2 py-1">
-                <div className="w-full flex flex-col justify-start items-start mb-3">
-                  <span className="mb-2 text-sm">Title</span>
-                  <Input
-                    className="w-full"
-                    type="text"
-                    placeholder="Title"
-                    size="sm"
-                    value={state.shortcutCreate.title}
-                    onChange={handleTitleInputChange}
-                  />
-                </div>
-                <div className="w-full flex flex-col justify-start items-start mb-3">
-                  <span className="mb-2 text-sm">Description</span>
-                  <Input
-                    className="w-full"
-                    type="text"
-                    placeholder="Github repo for slash"
-                    size="sm"
-                    value={state.shortcutCreate.description}
-                    onChange={handleDescriptionInputChange}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="w-full flex flex-col justify-start items-start border rounded-md overflow-hidden dark:border-zinc-800">
+          <div className="w-full flex flex-col justify-start items-start border rounded-md mt-3 overflow-hidden dark:border-zinc-800">
             <div
               className={classnames(
                 "w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800",

server/service/license/feature_matrix.go

@@ -3,10 +3,12 @@ package license
 type FeatureType string
 
 const (
-	// Accounts.
+	// Usages.
 
 	// FeatureTypeUnlimitedAccounts allows the user to create unlimited accounts.
 	FeatureTypeUnlimitedAccounts FeatureType = "unlimited_accounts"
+	// FeatureTypeUnlimitedAccounts allows the user to create unlimited collections.
+	FeatureTypeUnlimitedCollections FeatureType = "unlimited_collections"
 
 	// Customization.
 
@@ -16,6 +18,7 @@ const (
 
 // FeatureMatrix is a matrix of features in [Free, Pro].
 var FeatureMatrix = map[FeatureType][2]bool{
-	FeatureTypeUnlimitedAccounts: {false, true},
-	FeatureTypeCustomeStyle:      {false, true},
+	FeatureTypeUnlimitedAccounts:    {false, true},
+	FeatureTypeUnlimitedCollections: {false, true},
+	FeatureTypeCustomeStyle:         {false, true},
 }