From ec1a4c62028b93ec2b538fe61509206748ce6d8c Mon Sep 17 00:00:00 2001
From: lisicheng <noteperson@gmail.com>
Date: Sat, 25 Jan 2025 18:57:06 +0800
Subject: [PATCH] feat(ui): add acknowledgment section

---
 src/components/About/AboutModal.jsx           | 149 ++++++-
 src/components/About/FancyLogo.jsx            |  10 +-
 .../ArticleList/components/EditFeedModal.jsx  | 419 +++++++++---------
 .../ArticleList/components/RenameModal.jsx    |  73 ++-
 .../FeedList/components/AddCategoryModal.jsx  |  83 ++--
 .../FeedList/components/AddFeedModal.jsx      | 347 +++++++--------
 src/components/ui/CustomModal.jsx             |   6 +-
 src/i18n/locales/en-US.js                     |   1 +
 src/i18n/locales/zh-CN.js                     |   2 +-
 9 files changed, 606 insertions(+), 484 deletions(-)

diff --git a/src/components/About/AboutModal.jsx b/src/components/About/AboutModal.jsx
index 9868c78..458e824 100644
--- a/src/components/About/AboutModal.jsx
+++ b/src/components/About/AboutModal.jsx
@@ -2,22 +2,149 @@ import { useTranslation } from "react-i18next";
 import { useStore } from "@nanostores/react";
 import { aboutModalOpen } from "@/stores/modalStore";
 import { FancyLogo } from "@/components/About/FancyLogo.jsx";
-import CustomModal from "@/components/ui/CustomModal.jsx";
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+} from "@heroui/react";
+import { Heart, Info, X } from "lucide-react";
 
 export default function AboutModal() {
   const { t } = useTranslation();
   const $aboutModalOpen = useStore(aboutModalOpen);
 
   return (
-    <CustomModal
-      open={$aboutModalOpen}
-      onOpenChange={() => aboutModalOpen.set(false)}
-      title={t("about.title")}
-      content={
-        <div className="px-4 pb-4 space-y-6">
-          <FancyLogo since="2025"/>
-        </div>
-      }
-    />
+    <>
+      <Modal
+        isOpen={$aboutModalOpen}
+        radius="md"
+        scrollBehavior="inside"
+        onOpenChange={(value) => {
+          aboutModalOpen.set(value);
+        }}
+        classNames={{
+          base: "mb-safe-offset-2 mt-2 mx-2 max-h-[80vh] h-[612px] overflow-hidden dark:border",
+          header: "border-b flex flex-col gap-3 p-3 bg-content1",
+          footer: "hidden",
+          body: "modal-body p-0 !block",
+          closeButton: "hidden",
+        }}
+      >
+        <ModalContent>
+          {() => (
+            <>
+              <ModalHeader>
+                <div className="flex gap-2 justify-between">
+                  <div className="flex items-center gap-2">
+                    <Info className="size-4" />
+                    <span className="text-base font-medium">
+                      {t("about.title")}
+                    </span>
+                  </div>
+                  <Button
+                    size="sm"
+                    radius="full"
+                    variant="light"
+                    isIconOnly
+                    onPress={() => {
+                      aboutModalOpen.set(false);
+                    }}
+                  >
+                    <X className="size-4" />
+                  </Button>
+                </div>
+              </ModalHeader>
+              <ModalBody>
+                <div className="overflow-y-auto flex flex-col gap-4">
+                  <FancyLogo since={2025} />
+
+                  {/* Made with love section */}
+                  <div className="text-center text-default-500">
+                    Made with{" "}
+                    <span className="text-danger">
+                      <Heart className="size-3 fill-current inline-block" />
+                    </span>{" "}
+                    by{" "}
+                    <a
+                      href="https://github.com/electh"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline"
+                    >
+                      electh
+                    </a>
+                  </div>
+
+                  {/* Acknowledgments section */}
+                  <div className="flex flex-col gap-2 items-center">
+                    {t("about.acknowledgments")}
+                    <div className="flex flex-col gap-0.5 items-center justify-center text-sm">
+                      <a
+                        href="https://reederapp.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Reeder
+                      </a>
+                      <a
+                        href="https://www.heroui.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        HeroUI
+                      </a>
+                      <a
+                        href="https://tailwindcss.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        TailwindCSS
+                      </a>
+                      <a
+                        href="https://www.vidstack.io"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Vidstack
+                      </a>
+                      <a
+                        href="https://react-photo-view.vercel.app"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        React-photo-view
+                      </a>
+                      <a
+                        href="https://shiki.matsu.io"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Shiki
+                      </a>
+                      <a
+                        href="https://virtuoso.dev"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Virtuoso
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </ModalBody>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
diff --git a/src/components/About/FancyLogo.jsx b/src/components/About/FancyLogo.jsx
index 7b34726..83e7f4c 100644
--- a/src/components/About/FancyLogo.jsx
+++ b/src/components/About/FancyLogo.jsx
@@ -6,7 +6,7 @@ export const FancyLogo = ({ since }) => {
   const boundingRef = useRef(null);
 
   return (
-    <div className="flex flex-col [perspective:800px] p-5 bg-content2 rounded-md">
+    <div className="flex flex-col [perspective:800px] p-5 bg-content2">
       <div
         onMouseLeave={() => {
           boundingRef.current = null;
@@ -28,9 +28,13 @@ export const FancyLogo = ({ since }) => {
           ev.currentTarget.style.setProperty("--x", `${xPercentage * 100}%`);
           ev.currentTarget.style.setProperty("--y", `${yPercentage * 100}%`);
         }}
-        className="group relative w-full flex flex-col gap-6 py-6 items-center overflow-hidden rounded-md bg-gradient-to-b from-[#EAFFED] to-[#C6F7C9] p-4 text-[#01A977] transition-transform ease-out hover:[transform:rotateX(var(--x-rotation))_rotateY(var(--y-rotation))_scale(1.05)]"
+        className="group relative w-full flex flex-col gap-6 py-6 items-center overflow-hidden rounded-lg bg-gradient-to-b from-[#EAFFED] to-[#C6F7C9] p-4 text-[#01A977] transition-transform ease-out hover:[transform:rotateX(var(--x-rotation))_rotateY(var(--y-rotation))_scale(1.05)]"
       >
-        <Image src={logo} alt="logo" classNames={{ wrapper: "size-24", image: "aspect-square" }} />
+        <Image
+          src={logo}
+          alt="logo"
+          classNames={{ wrapper: "size-24", image: "aspect-square" }}
+        />
         <footer className="flex items-end">
           <span className="flex rounded-sm border border-current px-1 py-px text-xs uppercase">
             NEXTFLUX{" "}
diff --git a/src/components/ArticleList/components/EditFeedModal.jsx b/src/components/ArticleList/components/EditFeedModal.jsx
index 5b3fe1d..781449f 100644
--- a/src/components/ArticleList/components/EditFeedModal.jsx
+++ b/src/components/ArticleList/components/EditFeedModal.jsx
@@ -87,222 +87,221 @@ export default function EditFeedModal() {
     }
   };
 
-  const content = (
-    <ScrollShadow size={10} className="w-full overflow-y-auto px-4 pb-4">
-      <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
-        <Input
-          isRequired
-          labelPlacement="outside"
-          size="sm"
-          label={t("feed.feedTitle")}
-          variant="faded"
-          name="title"
-          placeholder={t("feed.feedTitlePlaceholder")}
-          errorMessage={t("feed.feedTitleRequired")}
-          value={formData.title}
-          onValueChange={(value) => setFormData({ ...formData, title: value })}
-        />
-        <Select
-          isRequired
-          labelPlacement="outside"
-          size="sm"
-          label={t("feed.feedCategory")}
-          variant="faded"
-          name="category_id"
-          placeholder={t("feed.feedCategoryPlaceholder")}
-          errorMessage={t("feed.feedCategoryRequired")}
-          selectedKeys={[formData.category_id?.toString()]}
-          onChange={(e) =>
-            setFormData({
-              ...formData,
-              category_id: parseInt(e.target.value),
-            })
-          }
-        >
-          {$categories.map((category) => (
-            <SelectItem key={category.id} value={category.id}>
-              {category.title}
-            </SelectItem>
-          ))}
-        </Select>
-        <div>
-          <div className="text-xs ml-0.5 mb-1">{t("feed.feedUrl")}</div>
-          <div className="flex items-center gap-2 bg-content2 rounded-lg pl-3 pr-1 py-1 border-default-200 hover:border-default-400 border-2 shadow-sm transition-colors">
-            <div className="flex flex-col flex-1 overflow-hidden">
-              <div className="text-sm text-default-400 w-full truncate">
-                {feedUrl}
+  return (
+    <CustomModal
+      open={$editFeedModalOpen}
+      onOpenChange={onClose}
+      title={t("articleList.editFeed")}
+    >
+      <ScrollShadow size={10} className="w-full overflow-y-auto px-4 pb-4">
+        <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
+          <Input
+            isRequired
+            labelPlacement="outside"
+            size="sm"
+            label={t("feed.feedTitle")}
+            variant="faded"
+            name="title"
+            placeholder={t("feed.feedTitlePlaceholder")}
+            errorMessage={t("feed.feedTitleRequired")}
+            value={formData.title}
+            onValueChange={(value) =>
+              setFormData({ ...formData, title: value })
+            }
+          />
+          <Select
+            isRequired
+            labelPlacement="outside"
+            size="sm"
+            label={t("feed.feedCategory")}
+            variant="faded"
+            name="category_id"
+            placeholder={t("feed.feedCategoryPlaceholder")}
+            errorMessage={t("feed.feedCategoryRequired")}
+            selectedKeys={[formData.category_id?.toString()]}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                category_id: parseInt(e.target.value),
+              })
+            }
+          >
+            {$categories.map((category) => (
+              <SelectItem key={category.id} value={category.id}>
+                {category.title}
+              </SelectItem>
+            ))}
+          </Select>
+          <div>
+            <div className="text-xs ml-0.5 mb-1">{t("feed.feedUrl")}</div>
+            <div className="flex items-center gap-2 bg-content2 rounded-lg pl-3 pr-1 py-1 border-default-200 hover:border-default-400 border-2 shadow-sm transition-colors">
+              <div className="flex flex-col flex-1 overflow-hidden">
+                <div className="text-sm text-default-400 w-full truncate">
+                  {feedUrl}
+                </div>
               </div>
+              <Button
+                size="sm"
+                className="!h-5"
+                isIconOnly
+                isDisabled={isCopied}
+                variant="flat"
+                startContent={
+                  isCopied ? (
+                    <Check className="size-3 shrink-0 text-default-500" />
+                  ) : (
+                    <Copy className="size-3 shrink-0 text-default-500" />
+                  )
+                }
+                onPress={() => {
+                  navigator.clipboard.writeText(feedUrl);
+                  setIsCopied(true);
+                  setTimeout(() => setIsCopied(false), 3000);
+                }}
+              />
             </div>
-            <Button
-              size="sm"
-              className="!h-5"
-              isIconOnly
-              isDisabled={isCopied}
-              variant="flat"
-              startContent={
-                isCopied ? (
-                  <Check className="size-3 shrink-0 text-default-500" />
-                ) : (
-                  <Copy className="size-3 shrink-0 text-default-500" />
-                )
-              }
-              onPress={() => {
-                navigator.clipboard.writeText(feedUrl);
-                setIsCopied(true);
-                setTimeout(() => setIsCopied(false), 3000);
-              }}
-            />
-          </div>
-        </div>
-        <Checkbox
-          name="crawler"
-          size="sm"
-          classNames={{
-            base: "w-full max-w-full p-0 mx-0 -mt-4  mb-1",
-            label: "mt-4",
-          }}
-          isSelected={formData.crawler}
-          onValueChange={(value) =>
-            setFormData({ ...formData, crawler: value })
-          }
-        >
-          <div className="line-clamp-1">{t("feed.feedCrawler")}</div>
-          <div className="text-xs text-default-400 line-clamp-1">
-            {t("feed.feedCrawlerDescription")}
-          </div>
-        </Checkbox>
-        <Checkbox
-          name="hide_globally"
-          size="sm"
-          classNames={{
-            base: "w-full max-w-full p-0 mx-0 -mt-4  mb-1",
-            label: "mt-4",
-          }}
-          isSelected={formData.hide_globally}
-          onValueChange={(value) =>
-            setFormData({ ...formData, hide_globally: value })
-          }
-        >
-          <div className="line-clamp-1">{t("feed.feedHide")}</div>
-          <div className="text-xs text-default-400 line-clamp-1">
-            {t("feed.feedHideDescription")}
           </div>
-        </Checkbox>
-        <Accordion
-          isCompact
-          hideIndicator
-          className="p-0"
-          itemClasses={{
-            base: "p-0",
-            trigger: "p-0 gap-1 cursor-pointer group",
-            title: "text-default-500 text-sm",
-            content: "flex flex-col gap-4 pt-4 pb-0",
-          }}
-        >
-          <AccordionItem
-            key="advanced"
-            aria-label="advanced"
-            startContent={
-              <>
-                <Plus className="size-4 text-default-500 group-data-[open=true]:hidden" />
-                <Minus className="size-4 text-default-500 hidden group-data-[open=true]:block" />
-              </>
+          <Checkbox
+            name="crawler"
+            size="sm"
+            classNames={{
+              base: "w-full max-w-full p-0 mx-0 -mt-4  mb-1",
+              label: "mt-4",
+            }}
+            isSelected={formData.crawler}
+            onValueChange={(value) =>
+              setFormData({ ...formData, crawler: value })
             }
-            title={t("feed.advancedOptions")}
           >
-            <Input
-              labelPlacement="outside"
-              size="sm"
-              label={
-                <Link
-                  isExternal
-                  showAnchorIcon
-                  color="foreground"
-                  href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
-                  className="text-xs"
-                >
-                  {t("feed.feedKeeplistRules")}
-                </Link>
-              }
-              variant="faded"
-              name="keeplist_rules"
-              placeholder={t("feed.feedKeeplistRulesPlaceholder")}
-              value={formData.keeplist_rules}
-              onValueChange={(value) =>
-                setFormData({ ...formData, keeplist_rules: value })
-              }
-            />
-            <Input
-              labelPlacement="outside"
-              size="sm"
-              label={
-                <Link
-                  isExternal
-                  showAnchorIcon
-                  color="foreground"
-                  href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
-                  className="text-xs"
-                >
-                  {t("feed.feedBlocklistRules")}
-                </Link>
-              }
-              variant="faded"
-              name="blocklist_rules"
-              placeholder={t("feed.feedBlocklistRulesPlaceholder")}
-              value={formData.blocklist_rules}
-              onValueChange={(value) =>
-                setFormData({ ...formData, blocklist_rules: value })
-              }
-            />
-            <Textarea
-              labelPlacement="outside"
-              size="sm"
-              label={
-                <Link
-                  isExternal
-                  showAnchorIcon
-                  color="foreground"
-                  href="https://miniflux.app/docs/rules.html#rewrite-rules"
-                  className="text-xs"
-                >
-                  {t("feed.feedRewriteRules")}
-                </Link>
-              }
-              variant="faded"
-              name="rewrite_rules"
-              placeholder={t("feed.feedRewriteRulesPlaceholder")}
-              value={formData.rewrite_rules}
-              onValueChange={(value) =>
-                setFormData({ ...formData, rewrite_rules: value })
-              }
-            />
-          </AccordionItem>
-        </Accordion>
-        <div className="flex flex-col gap-2 w-full">
-          <Button
-            color="primary"
-            fullWidth
-            variant="flat"
-            type="submit"
-            isLoading={loading}
+            <div className="line-clamp-1">{t("feed.feedCrawler")}</div>
+            <div className="text-xs text-default-400 line-clamp-1">
+              {t("feed.feedCrawlerDescription")}
+            </div>
+          </Checkbox>
+          <Checkbox
+            name="hide_globally"
             size="sm"
+            classNames={{
+              base: "w-full max-w-full p-0 mx-0 -mt-4  mb-1",
+              label: "mt-4",
+            }}
+            isSelected={formData.hide_globally}
+            onValueChange={(value) =>
+              setFormData({ ...formData, hide_globally: value })
+            }
           >
-            {t("common.save")}
-          </Button>
-          <Button fullWidth onPress={onClose} size="sm" variant="flat">
-            {t("common.cancel")}
-          </Button>
-        </div>
-      </form>
-    </ScrollShadow>
-  );
-
-  return (
-    <CustomModal
-      open={$editFeedModalOpen}
-      onOpenChange={onClose}
-      title={t("articleList.editFeed")}
-      content={content}
-    />
+            <div className="line-clamp-1">{t("feed.feedHide")}</div>
+            <div className="text-xs text-default-400 line-clamp-1">
+              {t("feed.feedHideDescription")}
+            </div>
+          </Checkbox>
+          <Accordion
+            isCompact
+            hideIndicator
+            className="p-0"
+            itemClasses={{
+              base: "p-0",
+              trigger: "p-0 gap-1 cursor-pointer group",
+              title: "text-default-500 text-sm",
+              content: "flex flex-col gap-4 pt-4 pb-0",
+            }}
+          >
+            <AccordionItem
+              key="advanced"
+              aria-label="advanced"
+              startContent={
+                <>
+                  <Plus className="size-4 text-default-500 group-data-[open=true]:hidden" />
+                  <Minus className="size-4 text-default-500 hidden group-data-[open=true]:block" />
+                </>
+              }
+              title={t("feed.advancedOptions")}
+            >
+              <Input
+                labelPlacement="outside"
+                size="sm"
+                label={
+                  <Link
+                    isExternal
+                    showAnchorIcon
+                    color="foreground"
+                    href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
+                    className="text-xs"
+                  >
+                    {t("feed.feedKeeplistRules")}
+                  </Link>
+                }
+                variant="faded"
+                name="keeplist_rules"
+                placeholder={t("feed.feedKeeplistRulesPlaceholder")}
+                value={formData.keeplist_rules}
+                onValueChange={(value) =>
+                  setFormData({ ...formData, keeplist_rules: value })
+                }
+              />
+              <Input
+                labelPlacement="outside"
+                size="sm"
+                label={
+                  <Link
+                    isExternal
+                    showAnchorIcon
+                    color="foreground"
+                    href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
+                    className="text-xs"
+                  >
+                    {t("feed.feedBlocklistRules")}
+                  </Link>
+                }
+                variant="faded"
+                name="blocklist_rules"
+                placeholder={t("feed.feedBlocklistRulesPlaceholder")}
+                value={formData.blocklist_rules}
+                onValueChange={(value) =>
+                  setFormData({ ...formData, blocklist_rules: value })
+                }
+              />
+              <Textarea
+                labelPlacement="outside"
+                size="sm"
+                label={
+                  <Link
+                    isExternal
+                    showAnchorIcon
+                    color="foreground"
+                    href="https://miniflux.app/docs/rules.html#rewrite-rules"
+                    className="text-xs"
+                  >
+                    {t("feed.feedRewriteRules")}
+                  </Link>
+                }
+                variant="faded"
+                name="rewrite_rules"
+                placeholder={t("feed.feedRewriteRulesPlaceholder")}
+                value={formData.rewrite_rules}
+                onValueChange={(value) =>
+                  setFormData({ ...formData, rewrite_rules: value })
+                }
+              />
+            </AccordionItem>
+          </Accordion>
+          <div className="flex flex-col md:flex-row-reverse gap-2 w-full">
+            <Button
+              color="primary"
+              fullWidth
+              variant="flat"
+              type="submit"
+              isLoading={loading}
+              size="sm"
+            >
+              {t("common.save")}
+            </Button>
+            <Button fullWidth onPress={onClose} size="sm" variant="flat">
+              {t("common.cancel")}
+            </Button>
+          </div>
+        </form>
+      </ScrollShadow>
+    </CustomModal>
   );
 }
diff --git a/src/components/ArticleList/components/RenameModal.jsx b/src/components/ArticleList/components/RenameModal.jsx
index cb4baaf..fc727c7 100644
--- a/src/components/ArticleList/components/RenameModal.jsx
+++ b/src/components/ArticleList/components/RenameModal.jsx
@@ -41,48 +41,45 @@ export default function RenameModal() {
     }
   };
 
-  const content = (
-    <Form
-      className="w-full justify-center items-center flex flex-col gap-4 px-4 pb-4"
-      validationBehavior="native"
-      onSubmit={(e) => handleRename(e)}
-    >
-      <Input
-        isRequired
-        labelPlacement="outside"
-        size="sm"
-        label={t("articleList.renameCategory.categoryName")}
-        variant="faded"
-        name="title"
-        placeholder={t("articleList.renameCategory.categoryNamePlaceholder")}
-        errorMessage={t("articleList.renameCategory.categoryNameRequired")}
-        value={newTitle}
-        onValueChange={setNewTitle}
-      />
-      <div className="flex flex-col gap-2 w-full">
-        <Button
-          color="primary"
-          fullWidth
-          type="submit"
-          variant="flat"
-          isLoading={loading}
-          size="sm"
-        >
-          {t("common.save")}
-        </Button>
-        <Button fullWidth onPress={onClose} size="sm" variant="flat">
-          {t("common.cancel")}
-        </Button>
-      </div>
-    </Form>
-  );
-
   return (
     <CustomModal
       open={$renameModalOpen}
       onOpenChange={onClose}
       title={t("articleList.renameCategory.title")}
-      content={content}
-    />
+    >
+      <Form
+        className="w-full justify-center items-center flex flex-col gap-4 px-4 pb-4"
+        validationBehavior="native"
+        onSubmit={(e) => handleRename(e)}
+      >
+        <Input
+          isRequired
+          labelPlacement="outside"
+          size="sm"
+          label={t("articleList.renameCategory.categoryName")}
+          variant="faded"
+          name="title"
+          placeholder={t("articleList.renameCategory.categoryNamePlaceholder")}
+          errorMessage={t("articleList.renameCategory.categoryNameRequired")}
+          value={newTitle}
+          onValueChange={setNewTitle}
+        />
+        <div className="flex flex-col md:flex-row-reverse gap-2 w-full">
+          <Button
+            color="primary"
+            fullWidth
+            type="submit"
+            variant="flat"
+            isLoading={loading}
+            size="sm"
+          >
+            {t("common.save")}
+          </Button>
+          <Button fullWidth onPress={onClose} size="sm" variant="flat">
+            {t("common.cancel")}
+          </Button>
+        </div>
+      </Form>
+    </CustomModal>
   );
 }
diff --git a/src/components/FeedList/components/AddCategoryModal.jsx b/src/components/FeedList/components/AddCategoryModal.jsx
index b78a3ce..0a42f92 100644
--- a/src/components/FeedList/components/AddCategoryModal.jsx
+++ b/src/components/FeedList/components/AddCategoryModal.jsx
@@ -37,53 +37,50 @@ export default function AddCategoryModal() {
     }
   };
 
-  const content = (
-    <form
-      onSubmit={handleSubmit}
-      className="justify-center items-center flex flex-col gap-4 px-4 pb-4"
-    >
-      <Input
-        isRequired
-        labelPlacement="outside"
-        size="sm"
-        label={t("sidebar.categoryName")}
-        variant="faded"
-        name="title"
-        placeholder={t("sidebar.categoryNamePlaceholder")}
-        errorMessage={t("sidebar.categoryNameRequired")}
-        value={title}
-        onValueChange={setTitle}
-      />
-      <Divider className="my-2" />
-      <div className="flex flex-wrap gap-2 p-3 bg-content2 rounded-lg">
-        {$categories.map((category) => (
-          <CategoryChip key={category.id} category={category} />
-        ))}
-      </div>
-      <div className="flex flex-col gap-2 w-full">
-        <Button
-          color="primary"
-          type="submit"
-          isLoading={loading}
-          size="sm"
-          variant="flat"
-          fullWidth
-        >
-          {t("common.save")}
-        </Button>
-        <Button fullWidth onPress={onClose} size="sm" variant="flat">
-          {t("common.cancel")}
-        </Button>
-      </div>
-    </form>
-  );
-
   return (
     <CustomModal
       open={$addCategoryModalOpen}
       onOpenChange={onClose}
       title={t("sidebar.addCategory")}
-      content={content}
-    />
+    >
+      <form
+        onSubmit={handleSubmit}
+        className="justify-center items-center flex flex-col gap-4 px-4 pb-4"
+      >
+        <Input
+          isRequired
+          labelPlacement="outside"
+          size="sm"
+          label={t("sidebar.categoryName")}
+          variant="faded"
+          name="title"
+          placeholder={t("sidebar.categoryNamePlaceholder")}
+          errorMessage={t("sidebar.categoryNameRequired")}
+          value={title}
+          onValueChange={setTitle}
+        />
+        <Divider className="my-2" />
+        <div className="flex flex-wrap gap-2 p-3 bg-content2 rounded-lg">
+          {$categories.map((category) => (
+            <CategoryChip key={category.id} category={category} />
+          ))}
+        </div>
+        <div className="flex flex-col md:flex-row-reverse gap-2 w-full">
+          <Button
+            color="primary"
+            type="submit"
+            isLoading={loading}
+            size="sm"
+            variant="flat"
+            fullWidth
+          >
+            {t("common.save")}
+          </Button>
+          <Button fullWidth onPress={onClose} size="sm" variant="flat">
+            {t("common.cancel")}
+          </Button>
+        </div>
+      </form>
+    </CustomModal>
   );
 }
diff --git a/src/components/FeedList/components/AddFeedModal.jsx b/src/components/FeedList/components/AddFeedModal.jsx
index 783787b..766467f 100644
--- a/src/components/FeedList/components/AddFeedModal.jsx
+++ b/src/components/FeedList/components/AddFeedModal.jsx
@@ -74,185 +74,182 @@ export default function AddFeedModal() {
     }
   };
 
-  const content = (
-    <ScrollShadow size={10} className="w-full overflow-y-auto px-4 pb-4">
-      <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
-        <Input
-          isRequired
-          labelPlacement="outside"
-          size="sm"
-          label={t("feed.feedUrl")}
-          variant="faded"
-          name="feed_url"
-          placeholder={t("feed.feedUrlPlaceholder")}
-          errorMessage={t("feed.feedUrlRequired")}
-          value={formData.feed_url}
-          onValueChange={(value) =>
-            setFormData({ ...formData, feed_url: value })
-          }
-        />
-        <Select
-          isRequired
-          labelPlacement="outside"
-          size="sm"
-          label={t("feed.feedCategory")}
-          variant="faded"
-          name="category_id"
-          placeholder={t("feed.feedCategoryPlaceholder")}
-          errorMessage={t("feed.feedCategoryRequired")}
-          selectedKeys={[formData.category_id?.toString()]}
-          onChange={(e) =>
-            setFormData({
-              ...formData,
-              category_id: parseInt(e.target.value),
-            })
-          }
-        >
-          {$categories.map((category) => (
-            <SelectItem key={category.id} value={category.id}>
-              {category.title}
-            </SelectItem>
-          ))}
-        </Select>
-        <Checkbox
-          name="crawler"
-          size="sm"
-          classNames={{
-            base: "w-full max-w-full p-0 mx-0 -mt-4 mb-1",
-            label: "mt-4",
-          }}
-          isSelected={formData.crawler}
-          onValueChange={(value) =>
-            setFormData({ ...formData, crawler: value })
-          }
-        >
-          <div className="line-clamp-1">{t("feed.feedCrawler")}</div>
-          <div className="text-xs text-default-400 line-clamp-1">
-            {t("feed.feedCrawlerDescription")}
-          </div>
-        </Checkbox>
-        <Accordion
-          isCompact
-          hideIndicator
-          className="p-0"
-          itemClasses={{
-            base: "p-0",
-            trigger: "p-0 gap-1 cursor-pointer group",
-            title: "text-default-500 text-sm",
-            content: "flex flex-col gap-4 pt-4 pb-0",
-          }}
-        >
-          <AccordionItem
-            key="advanced"
-            aria-label="advanced"
-            startContent={
-              <>
-                <Plus className="size-4 text-default-500 group-data-[open=true]:hidden" />
-                <Minus className="size-4 text-default-500 hidden group-data-[open=true]:block" />
-              </>
-            }
-            title={t("feed.advancedOptions")}
-          >
-            <Input
-              labelPlacement="outside"
-              size="sm"
-              label={
-                <Link
-                  isExternal
-                  showAnchorIcon
-                  color="foreground"
-                  href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
-                  className="text-xs"
-                >
-                  {t("feed.feedKeeplistRules")}
-                </Link>
-              }
-              variant="faded"
-              name="keeplist_rules"
-              placeholder={t("feed.feedKeeplistRulesPlaceholder")}
-              value={formData.keeplist_rules}
-              onValueChange={(value) =>
-                setFormData({
-                  ...formData,
-                  keeplist_rules: value,
-                })
-              }
-            />
-            <Input
-              labelPlacement="outside"
-              size="sm"
-              label={
-                <Link
-                  isExternal
-                  showAnchorIcon
-                  color="foreground"
-                  href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
-                  className="text-xs"
-                >
-                  {t("feed.feedBlocklistRules")}
-                </Link>
-              }
-              variant="faded"
-              name="blocklist_rules"
-              placeholder={t("feed.feedBlocklistRulesPlaceholder")}
-              value={formData.blocklist_rules}
-              onValueChange={(value) =>
-                setFormData({
-                  ...formData,
-                  blocklist_rules: value,
-                })
-              }
-            />
-            <Textarea
-              labelPlacement="outside"
-              size="sm"
-              label={
-                <Link
-                  isExternal
-                  showAnchorIcon
-                  color="foreground"
-                  href="https://miniflux.app/docs/rules.html#rewrite-rules"
-                  className="text-xs"
-                >
-                  {t("feed.feedRewriteRules")}
-                </Link>
-              }
-              isClearable
-              variant="faded"
-              name="rewrite_rules"
-              placeholder={t("feed.feedRewriteRulesPlaceholder")}
-              value={formData.rewrite_rules}
-              onValueChange={(value) =>
-                setFormData({ ...formData, rewrite_rules: value })
-              }
-            />
-          </AccordionItem>
-        </Accordion>
-        <div className="flex flex-col gap-2">
-          <Button
-            color="primary"
-            fullWidth
-            type="submit"
-            isLoading={loading}
-            size="sm"
-            variant="flat"
-          >
-            {t("common.save")}
-          </Button>
-          <Button onPress={onClose} size="sm" variant="flat">
-            {t("common.cancel")}
-          </Button>
-        </div>
-      </form>
-    </ScrollShadow>
-  );
-
   return (
     <CustomModal
       open={$addFeedModalOpen}
       onOpenChange={onClose}
       title={t("sidebar.addFeed")}
-      content={content}
-    />
+    >
+      <ScrollShadow size={10} className="w-full overflow-y-auto px-4 pb-4">
+        <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
+          <Input
+            isRequired
+            labelPlacement="outside"
+            size="sm"
+            label={t("feed.feedUrl")}
+            variant="faded"
+            name="feed_url"
+            placeholder={t("feed.feedUrlPlaceholder")}
+            errorMessage={t("feed.feedUrlRequired")}
+            value={formData.feed_url}
+            onValueChange={(value) =>
+              setFormData({ ...formData, feed_url: value })
+            }
+          />
+          <Select
+            isRequired
+            labelPlacement="outside"
+            size="sm"
+            label={t("feed.feedCategory")}
+            variant="faded"
+            name="category_id"
+            placeholder={t("feed.feedCategoryPlaceholder")}
+            errorMessage={t("feed.feedCategoryRequired")}
+            selectedKeys={[formData.category_id?.toString()]}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                category_id: parseInt(e.target.value),
+              })
+            }
+          >
+            {$categories.map((category) => (
+              <SelectItem key={category.id} value={category.id}>
+                {category.title}
+              </SelectItem>
+            ))}
+          </Select>
+          <Checkbox
+            name="crawler"
+            size="sm"
+            classNames={{
+              base: "w-full max-w-full p-0 mx-0 -mt-4 mb-1",
+              label: "mt-4",
+            }}
+            isSelected={formData.crawler}
+            onValueChange={(value) =>
+              setFormData({ ...formData, crawler: value })
+            }
+          >
+            <div className="line-clamp-1">{t("feed.feedCrawler")}</div>
+            <div className="text-xs text-default-400 line-clamp-1">
+              {t("feed.feedCrawlerDescription")}
+            </div>
+          </Checkbox>
+          <Accordion
+            isCompact
+            hideIndicator
+            className="p-0"
+            itemClasses={{
+              base: "p-0",
+              trigger: "p-0 gap-1 cursor-pointer group",
+              title: "text-default-500 text-sm",
+              content: "flex flex-col gap-4 pt-4 pb-0",
+            }}
+          >
+            <AccordionItem
+              key="advanced"
+              aria-label="advanced"
+              startContent={
+                <>
+                  <Plus className="size-4 text-default-500 group-data-[open=true]:hidden" />
+                  <Minus className="size-4 text-default-500 hidden group-data-[open=true]:block" />
+                </>
+              }
+              title={t("feed.advancedOptions")}
+            >
+              <Input
+                labelPlacement="outside"
+                size="sm"
+                label={
+                  <Link
+                    isExternal
+                    showAnchorIcon
+                    color="foreground"
+                    href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
+                    className="text-xs"
+                  >
+                    {t("feed.feedKeeplistRules")}
+                  </Link>
+                }
+                variant="faded"
+                name="keeplist_rules"
+                placeholder={t("feed.feedKeeplistRulesPlaceholder")}
+                value={formData.keeplist_rules}
+                onValueChange={(value) =>
+                  setFormData({
+                    ...formData,
+                    keeplist_rules: value,
+                  })
+                }
+              />
+              <Input
+                labelPlacement="outside"
+                size="sm"
+                label={
+                  <Link
+                    isExternal
+                    showAnchorIcon
+                    color="foreground"
+                    href="https://miniflux.app/docs/rules.html#feed-filtering-rules"
+                    className="text-xs"
+                  >
+                    {t("feed.feedBlocklistRules")}
+                  </Link>
+                }
+                variant="faded"
+                name="blocklist_rules"
+                placeholder={t("feed.feedBlocklistRulesPlaceholder")}
+                value={formData.blocklist_rules}
+                onValueChange={(value) =>
+                  setFormData({
+                    ...formData,
+                    blocklist_rules: value,
+                  })
+                }
+              />
+              <Textarea
+                labelPlacement="outside"
+                size="sm"
+                label={
+                  <Link
+                    isExternal
+                    showAnchorIcon
+                    color="foreground"
+                    href="https://miniflux.app/docs/rules.html#rewrite-rules"
+                    className="text-xs"
+                  >
+                    {t("feed.feedRewriteRules")}
+                  </Link>
+                }
+                isClearable
+                variant="faded"
+                name="rewrite_rules"
+                placeholder={t("feed.feedRewriteRulesPlaceholder")}
+                value={formData.rewrite_rules}
+                onValueChange={(value) =>
+                  setFormData({ ...formData, rewrite_rules: value })
+                }
+              />
+            </AccordionItem>
+          </Accordion>
+          <div className="flex flex-col md:flex-row-reverse gap-2">
+            <Button
+              color="primary"
+              fullWidth
+              type="submit"
+              isLoading={loading}
+              size="sm"
+              variant="flat"
+            >
+              {t("common.save")}
+            </Button>
+            <Button fullWidth onPress={onClose} size="sm" variant="flat">
+              {t("common.cancel")}
+            </Button>
+          </div>
+        </form>
+      </ScrollShadow>
+    </CustomModal>
   );
 }
diff --git a/src/components/ui/CustomModal.jsx b/src/components/ui/CustomModal.jsx
index 7109a78..682f73a 100644
--- a/src/components/ui/CustomModal.jsx
+++ b/src/components/ui/CustomModal.jsx
@@ -10,7 +10,7 @@ import {
 } from "@heroui/react";
 import { MiniCloseButton } from "@/components/ui/MiniCloseButton.jsx";
 
-export default function CustomModal({ open, onOpenChange, title, content }) {
+export default function CustomModal({ open, onOpenChange, title, children }) {
   const { isMedium } = useIsMobile();
   if (isMedium) {
     return (
@@ -44,7 +44,7 @@ export default function CustomModal({ open, onOpenChange, title, content }) {
           {() => (
             <div className="max-w-sm w-full">
               <DrawerHeader>{title}</DrawerHeader>
-              <DrawerBody>{content}</DrawerBody>
+              <DrawerBody>{children}</DrawerBody>
             </div>
           )}
         </DrawerContent>
@@ -70,7 +70,7 @@ export default function CustomModal({ open, onOpenChange, title, content }) {
           <div>{title}</div>
           <MiniCloseButton onClose={onOpenChange} />
         </ModalHeader>
-        {content}
+        {children}
       </ModalContent>
     </Modal>
   );
diff --git a/src/i18n/locales/en-US.js b/src/i18n/locales/en-US.js
index 9592703..99f196a 100644
--- a/src/i18n/locales/en-US.js
+++ b/src/i18n/locales/en-US.js
@@ -264,5 +264,6 @@ export default {
   },
   about: {
     title: "About",
+    acknowledgments: "Acknowledgments",
   },
 };
diff --git a/src/i18n/locales/zh-CN.js b/src/i18n/locales/zh-CN.js
index 530dbc6..17a6ef7 100644
--- a/src/i18n/locales/zh-CN.js
+++ b/src/i18n/locales/zh-CN.js
@@ -263,6 +263,6 @@ export default {
   },
   about: {
     title: "关于",
+    acknowledgments: "致 谢",
   },
 };
-