Add customizable tag separator option in tag input

frontend/src/components/tag_input.tsx

@@ -156,12 +156,14 @@ export function QuickAddTagDialog({ onAdded }: { onAdded: (tags: Tag[]) => void
 
   const [error, setError] = useState<string | null>(null)
 
+  const [separator, setSeparator] = useState<string>(",")
+
   const handleSubmit = async () => {
     if (text.trim().length === 0) {
       return
     }
     setError(null)
-    const names = text.split(",").filter((n) => n.length > 0)
+    const names = text.split(separator).filter((n) => n.length > 0)
     const res = await network.getOrCreateTags(names, type)
     if (!res.success) {
       setError(res.message)
@@ -184,12 +186,27 @@ export function QuickAddTagDialog({ onAdded }: { onAdded: (tags: Tag[]) => void
       <div className="modal-box">
         <h3 className="font-bold text-lg">{t('Add Tags')}</h3>
         <p className="py-2 text-sm">
-          {t("Input tags separated by commas.")}
+          {t("Input tags separated by separator.")}
           <br/>
           {t("If the tag does not exist, it will be created automatically.")}
           <br/>
           {t("Optionally, you can specify a type for the new tags.")}
         </p>
+        <p className={"flex my-2"}>
+          <span className={"flex-1"}>{t("Separator")}:</span>
+          <label className="label text-sm mx-2">
+            <input type="radio" name="radio-1" className="radio radio-primary" checked={separator == ","} onChange={() => setSeparator(",")}/>
+            Comma
+          </label>
+          <label className="label text-sm mx-2">
+            <input type="radio" name="radio-2" className="radio radio-primary" checked={separator == ";"} onChange={() => setSeparator(";")}/>
+            Semicolon
+          </label>
+          <label className="label text-sm mx-2">
+            <input type="radio" name="radio-3" className="radio radio-primary" checked={separator == " "} onChange={() => setSeparator(" ")}/>
+            Space
+          </label>
+        </p>
         <TextArea value={text} onChange={(e) => setText(e.target.value)} label={"Tags"}/>
         <Input value={type} onChange={(e) => setType(e.target.value)} label={"Type"}/>
         {error && <ErrorAlert className={"mt-2"} message={error}/>}

frontend/src/i18n.ts

@@ -174,7 +174,7 @@ export const i18nData = {
       "Other": "Other",
       "Quick Add": "Quick Add",
       "Add Tags": "Add Tags",
-      "Input tags separated by commas.": "Input tags separated by commas.",
+      "Input tags separated by separator.": "Input tags separated by separator.",
       "If the tag does not exist, it will be created automatically.": "If the tag does not exist, it will be created automatically.",
       "Optionally, you can specify a type for the new tags.": "Optionally, you can specify a type for the new tags.",
     }
@@ -354,7 +354,7 @@ export const i18nData = {
       "Other": "其他",
       "Quick Add": "快速添加",
       "Add Tags": "添加标签",
-      "Input tags separated by commas.": "输入标签, 用逗号分隔。",
+      "Input tags separated by separator.": "输入标签, 用分隔符分隔。",
       "If the tag does not exist, it will be created automatically.": "如果标签不存在, 将自动创建。",
       "Optionally, you can specify a type for the new tags.": "您可以选择为新标签指定一个类型。",
     }
@@ -534,7 +534,7 @@ export const i18nData = {
       "Other": "其他",
       "Quick Add": "快速添加",
       "Add Tags": "添加標籤",
-      "Input tags separated by commas.": "輸入標籤, 用逗號分隔。",
+      "Input tags separated by separator.": "輸入標籤, 用分隔符分隔。",
       "If the tag does not exist, it will be created automatically.": "如果標籤不存在, 將自動創建。",
       "Optionally, you can specify a type for the new tags.": "您可以選擇為新標籤指定一個類型。",
     }