feat: add changelog modal on visit if new version is detected

app/components/ChangelogModal/ChangelogModal.module.css

@@ -0,0 +1,16 @@
+.markdown h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.markdown h2 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-block: 1rem 0.25rem;
+}
+
+.markdown ul {
+    list-style-type: disc;
+    -webkit-padding-start: 20px;
+    padding-inline-start: 20px;
+}

app/components/ChangelogModal/ChangelogModal.tsx

@@ -0,0 +1,68 @@
+import { Modal, Button, Accordion } from "flowbite-react";
+import Markdown from "markdown-to-jsx";
+import { useEffect, useState } from "react";
+import Styles from "./ChangelogModal.module.css";
+
+async function _fetchVersionChangelog(version: string) {
+  const res = await fetch(`/changelog/${version}.md`);
+  return await res.text();
+}
+
+export const ChangelogModal = (props: {
+  isOpen: boolean;
+  setIsOpen: any;
+  version: string;
+  previousVersions: Array<string>;
+}) => {
+  const [currentVersionChangelog, setCurrentVersionChangelog] = useState("");
+  const [previousVersionsChangelog, setPreviousVersionsChangelog] = useState<
+    Record<string, string>
+  >({});
+
+  useEffect(() => {
+    _fetchVersionChangelog(props.version).then((data) => {
+      setCurrentVersionChangelog(data);
+    });
+
+    if (props.previousVersions.length > 0) {
+      props.previousVersions.forEach((version) => {
+        _fetchVersionChangelog(version).then((data) => {
+          setPreviousVersionsChangelog((prev) => {
+            return {
+              ...prev,
+              [version]: data,
+            };
+          });
+        });
+      });
+    }
+  }, [props.isOpen]);
+
+  return (
+    <Modal
+      show={props.isOpen}
+      onClose={() => props.setIsOpen(false)}
+    >
+      <Modal.Header>Список изменений v{props.version}</Modal.Header>
+      <Modal.Body>
+        <Markdown className={Styles.markdown}>
+          {currentVersionChangelog}
+        </Markdown>
+        {Object.keys(previousVersionsChangelog).length > 0 && (
+          <Accordion collapseAll={true} className="mt-4">
+            {Object.entries(previousVersionsChangelog).map(
+              ([version, changelog]) => (
+                <Accordion.Panel key={version}>
+                  <Accordion.Title>Список изменений v{version}</Accordion.Title>
+                  <Accordion.Content>
+                    <Markdown className={Styles.markdown}>{changelog}</Markdown>
+                  </Accordion.Content>
+                </Accordion.Panel>
+              )
+            )}
+          </Accordion>
+        )}
+      </Modal.Body>
+    </Modal>
+  );
+};

app/components/Navbar/Navbar.tsx

@@ -7,8 +7,8 @@ import {
   Dropdown,
   Modal,
   Button,
-  DarkThemeToggle,
   useThemeMode,
+  ToggleSwitch,
 } from "flowbite-react";
 import { useState } from "react";
 
@@ -194,7 +194,9 @@ export const Navbar = () => {
             >
               <Dropdown.Item className="text-sm md:text-base">
                 <Link
-                  href={pathname != "/login" ? `/login?redirect=${pathname}` : "#"}
+                  href={
+                    pathname != "/login" ? `/login?redirect=${pathname}` : "#"
+                  }
                   className="flex items-center gap-1"
                 >
                   <span
@@ -267,6 +269,29 @@ const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
               </Button>
             </Button.Group>
           </div>
+          <div className="flex items-center justify-between">
+            <p className="font-bold dark:text-white">
+              Показывать список изменений
+            </p>
+            <ToggleSwitch
+              color="blue"
+              theme={{
+                toggle: {
+                  checked: {
+                    color: {
+                      blue: "border-blue-700 bg-blue-700",
+                    },
+                  },
+                },
+              }}
+              onChange={() =>
+                preferenceStore.setFlags({
+                  showChangelog: !preferenceStore.flags.showChangelog,
+                })
+              }
+              checked={preferenceStore.flags.showChangelog}
+            />
+          </div>
         </div>
       </Modal.Body>
     </Modal>