feat: add link to about page in settings

app/components/SettingsModal/SettingsModal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { CURRENT_APP_VERSION } from "#/api/config";
 import { usePreferencesStore } from "#/store/preferences";
 import {
   Modal,
@@ -278,26 +279,15 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
         <HR className="my-4 dark:bg-slate-400" />
         <div>
           <Link
-            href={"https://t.me/anix_web"}
+            href={"/about"}
             className="flex items-center gap-2 p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
+            onClick={() => props.setIsOpen(false)}
           >
-            <span className="w-8 h-8 iconify fa6-brands--telegram"></span>
+            <span className="w-8 h-8 iconify material-symbols--info"></span>
             <div>
-              <p>Телеграм канал</p>
+              <p>О приложении</p>
               <p className="text-sm text-gray-400 dark:text-gray-200">
-                @anix_web
-              </p>
-            </div>
-          </Link>
-          <Link
-            href={"https://wah.su/radiquum"}
-            className="flex items-center gap-2 p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
-          >
-            <span className="w-8 h-8 iconify mdi--code"></span>
-            <div>
-              <p>Разработчик</p>
-              <p className="text-sm text-gray-400 dark:text-gray-200">
-                Radiquum
+                v{CURRENT_APP_VERSION}
               </p>
             </div>
           </Link>

app/pages/About.tsx

@@ -1,4 +1,4 @@
-// "use client";
+"use server";
 
 import { Card } from "flowbite-react";
 import Image from "next/image";
@@ -9,37 +9,42 @@ import { CURRENT_APP_VERSION } from "#/api/config";
 import Styles from "../components/ChangelogModal/ChangelogModal.module.css";
 import Markdown from "markdown-to-jsx";
 
+import {
+  Accordion,
+  AccordionContent,
+  AccordionPanel,
+  AccordionTitle,
+} from "flowbite-react";
+import { version } from "node:os";
+import Link from "next/link";
+
 export const AboutPage = () => {
   const directoryPath = path.join(process.cwd(), "public/changelog");
   const files = fs.readdirSync(directoryPath);
-  const changelogs = [];
+  const current = {
+    version: CURRENT_APP_VERSION,
+    changelog: `#${CURRENT_APP_VERSION}\r\nНет списка изменений`,
+  };
+  const previous = [];
+
+  if (files.includes(`${CURRENT_APP_VERSION}.md`)) {
+    const changelog = fs.readFileSync(
+      path.join(directoryPath, `${CURRENT_APP_VERSION}.md`),
+      "utf8"
+    );
+    current.changelog = changelog;
+  }
 
   files.forEach((file) => {
     if (file != `${CURRENT_APP_VERSION}.md`) {
       const changelog = fs.readFileSync(path.join(directoryPath, file), "utf8");
-      changelogs.push({
+      previous.push({
         version: file.replace(".md", ""),
         changelog: changelog,
       });
     }
   });
 
-  if (!files.includes(`${CURRENT_APP_VERSION}.md`)) {
-    changelogs.push({
-      version: CURRENT_APP_VERSION,
-      changelog: "Нет списка изменений",
-    });
-  } else {
-    const changelog = fs.readFileSync(
-      path.join(directoryPath, `${CURRENT_APP_VERSION}.md`),
-      "utf8"
-    );
-    changelogs.push({
-      version: CURRENT_APP_VERSION,
-      changelog: changelog,
-    });
-  }
-
   return (
     <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
       <Card className="md:col-span-2 lg:col-span-3">
@@ -65,54 +70,66 @@ export const AboutPage = () => {
           </div>
         </div>
       </Card>
-      <Card>
-        <div className="flex items-center gap-4">
-          <Image
-            src="https://radiquum.wah.su/static/avatar_512.jpg"
-            className="flex-shrink-0 w-16 h-16 rounded-full"
-            alt="developer image"
-            width={128}
-            height={128}
-          />
-          <div>
-            <h1 className="text-xl font-bold">Radiquum</h1>
-            <p className="text-sm text-gray-500 dark:text-gray-200">
-              Разработчик
-            </p>
+      <Link href={"https://wah.su/radiquum"} target="_blank">
+        <Card>
+          <div className="flex items-center gap-4">
+            <Image
+              src="https://radiquum.wah.su/static/avatar_512.jpg"
+              className="flex-shrink-0 w-16 h-16 rounded-full"
+              alt="developer image"
+              width={128}
+              height={128}
+            />
+            <div>
+              <h1 className="text-xl font-bold">Radiquum</h1>
+              <p className="text-sm text-gray-500 dark:text-gray-200">
+                Разработчик
+              </p>
+            </div>
           </div>
-        </div>
-      </Card>
-      <Card>
-        <div className="flex items-center gap-4">
-          <span className="w-16 h-16 iconify fa6-brands--telegram text-[#001725] dark:text-[#faf8f9]"></span>
-          <div>
-            <h1 className="text-xl font-bold">Телеграм канал</h1>
-            <p className="text-sm text-gray-500 dark:text-gray-200">
-              @anix_web
-            </p>
+        </Card>
+      </Link>
+      <Link href={"https://t.me/anix_web"} target="_blank">
+        <Card>
+          <div className="flex items-center gap-4">
+            <span className="w-16 h-16 iconify fa6-brands--telegram text-[#001725] dark:text-[#faf8f9]"></span>
+            <div>
+              <h1 className="text-xl font-bold">Телеграм канал</h1>
+              <p className="text-sm text-gray-500 dark:text-gray-200">
+                @anix_web
+              </p>
+            </div>
           </div>
-        </div>
-      </Card>
-      <Card>
-        <div className="flex items-center gap-4">
-          <span className="flex-shrink-0 w-16 h-16 iconify fa6-brands--github text-[#001725] dark:text-[#faf8f9]"></span>
-          <div>
-            <h1 className="text-xl font-bold">Код на GitHub</h1>
-            <p className="text-sm text-gray-500 dark:text-gray-200">
-              github.com/Radiquum/AniX
-            </p>
+        </Card>
+      </Link>
+      <Link href={"https://github.com/Radiquum/AniX"} target="_blank">
+        <Card>
+          <div className="flex items-center gap-4">
+            <span className="flex-shrink-0 w-16 h-16 iconify fa6-brands--github text-[#001725] dark:text-[#faf8f9]"></span>
+            <div>
+              <h1 className="text-xl font-bold">Код на GitHub</h1>
+              <p className="text-sm text-gray-500 dark:text-gray-200">
+                github.com/Radiquum/AniX
+              </p>
+            </div>
           </div>
-        </div>
-      </Card>
+        </Card>
+      </Link>
       <Card className="md:col-span-2 lg:col-span-3">
         <h1 className="text-2xl font-bold">Список изменений</h1>
-        {changelogs.reverse().map((changelog) => (
-          <div key={changelog.version} className="my-4">
-            <Markdown className={Styles.markdown}>
-              {changelog.changelog}
-            </Markdown>
-          </div>
-        ))}
+        <Markdown className={Styles.markdown}>{current.changelog}</Markdown>
+        <Accordion collapseAll={true}>
+          {previous.reverse().map((changelog) => (
+            <AccordionPanel key={changelog.version}>
+              <AccordionTitle>v{changelog.version}</AccordionTitle>
+              <AccordionContent>
+                <Markdown className={Styles.markdown}>
+                  {changelog.changelog}
+                </Markdown>
+              </AccordionContent>
+            </AccordionPanel>
+          ))}
+        </Accordion>
       </Card>
     </div>
   );